Tuesday, 14 September 2021

"react-native-modal-datetime-picker" years list is not scrolling

I tried to find a solution on my own, or at least similar problems with other people, but I failed

This problem appeared after updating the react-native-reanimated to version 2.x. I need it to work with other components, so the option to roll back is not suitable

how does it look

The problem occurs only on android

Does anyone know why this might be?

My component code is presented below:

import PropTypes from "prop-types";
import React, {useCallback, useMemo, useState} from "react";
import TextInput from "./TextInput";
import {View, StyleSheet} from "react-native";
import {FAB, TouchableRipple} from "react-native-paper";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import moment from "moment";
import {colors} from "../../../styles/colors";
import {CalendarLinear} from "../../../config/images";
import {formatDate} from "../../../helpers";
import {typographySizes} from "../../../styles/typography.style";
import {em} from "../../../styles/sizes";

const minDate = new Date('1900-01-01');
const maxDate = new Date('2038-01-01');

const iconSize = typographySizes.small.fontSize;

const CalendarLinearIcon = () => <CalendarLinear width={iconSize} height={iconSize} fill={colors.muted_dark}/>;

const TextInputDate = (props) => {
    let {value} = props;

    const {
        onChangeText,
        mode = 'date',
        min = minDate,
        max = maxDate,
        locale = 'ru-RU',
        icon = true,
        ...rest
    } = props;

    value = formatDate(value);
    const [visible, setVisible] = useState(false);

    const showPicker = useCallback(() => {
        setVisible(true);
    }, []);

    const hidePicker = useCallback(() => {
        setVisible(false);
    }, []);

    const confirmPicker = useCallback((date) => {
        const value = new moment(date).format('YYYY-MM-DD');
        setVisible(false);
        onChangeText(value);
    }, [onChangeText]);

    const trailingIcon = useMemo(() => (icon && <FAB
        small
        style={styles.calendarButton}
        icon={CalendarLinearIcon}
    />) || undefined, [icon]);

    return (
        <>
            <DateTimePickerModal
                isVisible={visible}
                value={new Date(value)}
                mode={mode}
                minimumDate={min}
                maximumDate={max}
                locale={locale}
                onConfirm={confirmPicker}
                onCancel={hidePicker}
            />
            <TouchableRipple onPress={showPicker} style= borderless>
                <View>
                    <TextInput
                        {...rest}
                        keyboardType={'numeric'}
                        // onChangeText={onChange}
                        type={'date'}
                        editable={false}
                        value={value}
                        onFocus={showPicker}
                        trailingIcon={trailingIcon}
                    />
                    <View style={StyleSheet.absoluteFill}/>
                </View>
            </TouchableRipple>
        </>
    );
};

TextInputDate.propTypes = {
    value: PropTypes.any.isRequired,
    onChangeText: PropTypes.func.isRequired,
    mode: PropTypes.oneOf(['date', 'time', 'datetime', 'countdown']),
    min: PropTypes.instanceOf(Date),
    max: PropTypes.instanceOf(Date),
    locale: PropTypes.string
};

const styles = {
    calendarButton: {
        backgroundColor: 'transparent',
        shadowOpacity: 0,
        shadowRadius: 0,
        elevation: 0,
        height: iconSize * 2,
        width: iconSize * 2
    }
};

export default TextInputDate;

UPD: I found this only occurs on small screens. Apparently, a nested scrollable view is formed or something like that



from "react-native-modal-datetime-picker" years list is not scrolling

No comments:

Post a Comment