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

[matijagrcic]

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

[nicktiberi]

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.