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
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