6

I am using the native-base library for a DatePicker that works just fine on Android. However, when I run it through the Expo app on an iPhone, it doesn't open the calendar when you click on it. Instead it opens a little box in the bottom-left, and then opens the calendar only when you click on that.

This is what happens when you click on the DatePicker:

When you click on DatePicker

Then, if you click on the "Jan 29, 2021" box in the bottom, you get the calendar and everything works as expected:

When you click on actual Date

I don't know if it's related, but it seems suspicious that there is something going on with the focus, because on Android when you first open the calendar from DatePicker, you have to press the day twice, like the first one is getting focus back to the app, and the second one is actually registering the press.

Here is the code that generates the DatePicker:

  render() {
    return (
      <Container style={styles.container}>

        <Content padder style={{ padding: 0 }}>

          <View style={{ flexDirection: 'row' }}>
            <DatePicker
              defaultDate={this.state.CheckDate}
              minimumDate={new Date(2018, 1, 1)}
              maximumDate={new Date(2099, 12, 31)}
              chosenDate={this.state.chosenDate}
              // locale={"en"}
              modalTransparent={true}
              animationType={"fade"}
              androidMode={"default"}
              placeHolderText="Select Date"
              textStyle={{ color: "grey" }}
              // placeHolderTextStyle={{ color: "#d3d3d3" }}
              placeHolderTextStyle={{ fontSize: 20, color: "#999999", textAlignVertical: "bottom" }}
              onChange={this.onChangeCheckDate}
              disabled={false}
              value={this.state.CheckDate}
            />
          </View>

        </Content>
      </Container>
    );
  }

I am using the following versions:

   "@react-native-community/datetimepicker": "3.0.4",
   "native-base": "^2.15.2",
Jeff
  • 103
  • 7

2 Answers2

1

I think I found the problem. I was trying to reproduce it in Expo snack, and it would work on the iOS simulator there. It is on iOS 13.3 (as of 1/29/2021). In iOS 14+ they changed something and Datepicker no longer works.

See the following:
https://github.com/react-native-datetimepicker/datetimepicker/issues/285
[https://github.com/expo/expo/issues/11126]2

You now, have to pass in the "optional" display prop to the DatePicker:
https://github.com/react-native-datetimepicker/datetimepicker#display-optional

I have found "inline" to be the closest to what I wanted, but "spinner" is what the default value was in iOS < 14. So, here is my updated DatePicker code:

  render() {
    return (
      <Container style={styles.container}>

        <Content padder style={{ padding: 0 }}>

          <View style={{ flexDirection: 'row' }}>
            <DatePicker
              defaultDate={this.state.pregCheckDate}
              minimumDate={new Date(2018, 1, 1)}
              maximumDate={new Date(2099, 12, 31)}
              chosenDate={this.state.chosenDate}
              // locale={"en"}
              modalTransparent={true}
              animationType={"fade"}
              androidMode={"default"}
              placeHolderText="Select Date"
              textStyle={{ color: "grey" }}
              display="inline"
              // placeHolderTextStyle={{ color: "#d3d3d3" }}
              placeHolderTextStyle={{ fontSize: 20, color: "#999999", textAlignVertical: "bottom" }}
              onChange={this.onChangeCheckDate}
              disabled={false}
              value={this.state.pregCheckDate}
            />
          </View>

        </Content>
      </Container>
    );
  }
Jeff
  • 103
  • 7
1

If you want back the old spinner wheel for the datepicker on iOS 14 you need to set it explicitly.

display="spinner"

P.S. this is the latest changes as of April 2021 https://github.com/react-native-datetimepicker/datetimepicker#display-optional

Morris S
  • 2,337
  • 25
  • 30