React-native Date Time Picker Backdrop Issue

Question

I'm using @react-native-community/datetimepicker in my react-native project.When I opened the date time picker and press the back button of android, The state is not being set again to false. Here is the code for the date time picker -

  <ToggleButtonForPicker DownIcon={false} onButtonPress={()=>this.setState({ showDatePicker : true})} buttonTitle={this.state.selectedDate} />
            {this.state.showDatePicker && 
                <DateTimePicker
                    value={new Date(new Date().getFullYear()-18, 1, 1)}
                    minimumDate={new Date(1900, 1, 1)}
                    maximumDate={new Date(new Date().getFullYear()-18, 1, 1)}
                    locale={"en"}
                    timeZoneOffsetInMinutes={undefined}
                    modalTransparent={false}
                    animationType={"fade"}
                    androidMode={"default"}
                    placeHolderText="Date Of Birth"
                    textStyle={{ color: "black" }}
                    placeHolderTextStyle={{ opacity : 0.7}}
                    onChange={this.onDateChange}
                    disabled={false}
                    onTouchCancel = {()=>this.setState({showDatePicker : false})}
                    onCancel = {()=>this.setState({showDatePicker : false})}

                    // This is not working here (and I need this thing here so badly.)
                    onBackdropPress = {()=>this.setState({showDatePicker : false})}
                />
            }

When I open the date time picker and press the hardware back button, The date time picker gets close but after doing this process when I tried to type something in any TextInput of same Component, The date time picker is appearing again and again automatically.

Thanks In advance.

Nooruddin Lakhani Nooruddin Lakhani · Accepted Answer · 2021-02-24T07:18:31

0

votes

Try this way

onButtonPress={ () => this.setState({ showDatePicker : !this.state.showDatePicker}) }

React-native Date Time Picker Backdrop Issue

2 Answers