Your problem is related to how date input and formatting are handled in your component.

1. Install react-native-mask-text

   npm install react-native-mask-text

2. Use MaskedTextInput for date formatting

   import React, { useState } from 'react'; import { View, TextInput, StyleSheet, Text } from 'react-native'; import { MaskedTextInput } from 'react-native-mask-text'; import { Button, Provider as PaperProvider } from 'react-native-paper'; import { DatePickerModal } from 'react-native-paper-dates';

   const PickDateAndTime = () => { const [date, setDate] = useState(''); const [isDatePickerVisible, setDatePickerVisible] = useState(false);

   const handleDatePicked = (selectedDate: Date) => { const formattedDate = dayjs(selectedDate).format('MM/DD/YYYY'); setDate(formattedDate); setDatePickerVisible(false); };

   return ( <DatePickerModal locale="en" mode="single" visible={isDatePickerVisible} onDismiss={() => setDatePickerVisible(false)} date={new Date()} onConfirm={handleDatePicked} saveLabel="Confirm" /> <MaskedTextInput mask="99/99/9999" value={date} onChangeText={(text) => setDate(text)} keyboardType="numeric" placeholder="MM/DD/YYYY" style={styles.input} /> <Button onPress={() => setDatePickerVisible(true)}> Pick Date {date ? ( Selected Date: {date} ) : null} ); };

   const styles = StyleSheet.create({ container: { padding: 20, }, input: { borderBottomWidth: 1, marginBottom: 20, fontSize: 18, padding: 10, }, });

   export default PickDateAndTime;