Android: Picker does not show correctly when the mode prop changes

Describe the bug On Android, when the mode prop changes, the UI shows a blank space with only the separator.

Expected behavior When the mode prop changes, the UI should show the correct picker for that mode.

Screenshots In the video below, the switch toggles the mode prop between "date" and "datetime". The initial value for mode is "date", which shows correctly. But when the mode prop is changed to "datetime", it shows blank.

https://user-images.githubusercontent.com/4929170/138826099-26e774f8-e0e3-44bc-86e4-3a4a00229435.mp4

To Reproduce Add example code that reproduces the behavior.

export default class App extends Component {

  state = { date: new Date(), mode:  "date"}
  
  render = () => 
  <View>
    <Button title="Toggle" onPress={() => {
      if (this.state.mode === "date") {
        this.setState({ mode: "datetime" })
      } else {
        this.setState({ mode: "date" })
      }
    }} />
    <DatePicker
      mode={this.state.mode}
      date={this.state.date}
      onDateChange={date => this.setState({ date })}
    />
  <View>

}

Smartphone (please complete the following information):

• OS: Android
• React Native version: 0.63.4
• react-native-date-picker version: 4.1.1

Can you see any error in the android logs (LogCat) when this happens?

@phamhoaivu911 how did you show the value on screen? i'm getting error

Hi @jotilohana , our current workaround is adding the key prop to force the picker to re-render

<DatePicker
  key={Platform.os === "android" ? this.state.mode : undefined}
  mode={this.state.mode}
  date={this.state.date}
  onDateChange={date => this.setState({ date })}
/>

Hope this helps

@phamhoaivu911 I'm getting error "Objects are not valid as React child...." value is being consoled but doesn't appear on application screen

Try using textColor property and set it to black explicitly, that worked on Pixel 6 Pro.

Try using textColor property and set it to black explicitly, that worked on Pixel 6 Pro.

thanks it works

Try using textColor property and set it to black explicitly, that worked on Pixel 6 Pro.

This fixes the issue if the phone is using dark mode, since the datepicker seems to use a white font when the phone is in dark mode, making it appear as if the datepicker is blank.