CODEWITHSUNDEEP
react-nativereact-hooks
Kathirpandian K
Kathirpandian K

Reputation: 354

React Native DateTimePicker not Opening in IOS

Datetime Picker is not opening i'm using react-native with react-hooks, in Android works fine . but its not opening in IOS and not showing any error.

i just created local component for datepicker so i can use it for both android and ios. for android its going fine IOS is the issue, its not responding

i done pod clean and install also no luck 

const DatePicker =({}) =>{
   const [state, setState] = useState({
     date:  new Date(),
     mode: 'date',
     show: false
 });

 const showPicker = mode => {
     setState(prevState => ({
     ...prevState,
     show: Platform.OS === 'ios',
     mode
     }));
 };

 const datePicker = () => {
     showPicker('datetime');
 };


 return(
     <>
         <View>
             <View style={styles.createBorder}>
                 <TouchableHighlight
                     underlayColor={disable ? 'transperant' : ''}
                     onPress={!disable && timePicker}
                 >
                     <View style={styles.datePickerBox}>
                     <Text
                         style={[styles.datePickerText, { width: width - 60 }]}
                     >
                         {state.date}
                     </Text>
                     </View>
                 </TouchableHighlight>
             </View>
             {state.show && Platform.OS === 'ios' && (
                 <DateTimePicker
                 style={[styles.inputBackground, {width: '100%' }]}
                 value={state.date}
                 mode="datetime"
                 is24Hour={false}
                 display="default"
                 onChange={setDate}
                 />
             )}
         </View>
     </>
 );  
}  
export default DatePicker;

Upvotes: 14

Views: 18683

Answers (6)

Rohit Parte
Rohit Parte

Reputation: 4026

I solved this problem by below code, just added separate modal for ios.

{show && Platform.OS === 'android' && <DateTimePicker testID="dateTimePicker" value={date} onChange={onDateChange} display='spinner' minimumDate={new Date(1980, 0, 1)} maximumDate={new Date(new Date().getFullYear() - 1, 0, 1)} />}

{show && Platform.OS === 'ios' && <Modal visible={true} animationType="fade" transparent={true} statusBarTranslucent>
    <View style={styles.centeredView}>
        <View style={[styles.modalView, { backgroundColor: colors.card }]}>
            <Block flex={0} margin={-10}>
                <DateTimePicker style={{ backgroundColor: colors.card }} textColor='black' testID="dateTimePicker" value={date} onChange={onDateChange} display='spinner' minimumDate={new Date(1980, 0, 1)} maximumDate={new Date(new Date().getFullYear() - 1, 0, 1)} />
            </Block>
        </View>
    </View>
</Modal>}

Upvotes: 0

mootez nabli
mootez nabli

Reputation: 1

You can change the background color of the picker container and the text color. You can do this:

<DateTimePicker
                 style={[styles.inputBackground,{width:'100%',backgroundColor: "white"  }]}
                 value={state.date}
                 mode="datetime"
                 is24Hour={false}
                 display="default"
                 onChange={setDate}
                 textColor="black"
                 />

Upvotes: 0

Hamid
Hamid

Reputation: 136

instead of using display='default', use this one display='spinner' it will affect on both Android and iOS.

Upvotes: 2

ahmed mersal
ahmed mersal

Reputation: 207

<DatePicker
iOSDatePickerComponent={(props) => (
                              <RNDatePicker
                                {...props}
                                display={
                                  Platform.OS === "ios" ? "spinner" : "default"
                                }
                              />
                            )} ..../>

just add this in your datePicker component will work fine ;)

Upvotes: 6

Meo Flute
Meo Flute

Reputation: 1301

I had the same problem as of June 26, 2020, with this version: "@react-native-community/datetimepicker": "2.2.2".

I just added style with width and the datetimepicker displayed in iOS:

style={{width: 320, backgroundColor: "white"}}

I also added backgroundColor so that it becomes opaque white.

Here is my code:

<DateTimePicker
    value={user.birthdate ? new Date(user.birthdate) : new Date()}
    mode='date'
    display="default"
    onChange={(event, date) => {
       //...some code here
       setBirthdateTouched(true);
       setModalVisible(!modalVisible);
    }}
    style={{width: 320, backgroundColor: "white"}} //add this

/>

Enjoy coding!

Upvotes: 17

Kathirpandian K
Kathirpandian K

Reputation: 354

I just move to react-native-modal-datetime-picker its working fine now

Upvotes: 6

Related Questions