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={{ borderTopLeftRadius: em / 2, borderTopRightRadius: em / 2 }}
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;
UPD1:
I found this only occurs on small screens. Apparently, a nested scrollable view is formed or something like that.
UPD2:
I tried to create a reproducible example in codesandbox but I get an error. I think this is a flaw in the platform. But this code can help reproduce this problem on your PC.
UPD3:
The problem cannot be the minimum or maximum date. Moreover, I do not use the time mode.
UPD4:
Apparently the issue has nothing to do with react-native-reanimated, it just coincided. I have reproduced the issue separately, without this library.
I also reported about the issue to the developers.
UPD5:
Thanks to the developer's answer, I ran additional tests and it turned out that the real reason for this behavior is in @react-native-community/datetimepicker.
The standard example from the documentation reproduces this behavior.
I have also reported the issue to other developers.
