Nativebase: DatePicker modal background color

[MehmetKaplan]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [x] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

Expo v35.0.0

Expected behaviour

The date should be seen in order to select.

Actual behaviour

For iOS dark mode the date is not seen. Actually it is rendered but the color matches with modal's background so can not be seen.

Steps to reproduce

Just a standard DatePicker code causes same experience if the code is tested with iOS dark-mode.

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { DatePicker } from 'native-base';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { chosenDate: new Date() };

    this.setDate = this.setDate.bind(this);
  }
  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text />
        <Text />
        <Text />
        <DatePicker
          defaultDate={new Date(1976, 12, 23)}
          minimumDate={new Date(1940, 1, 1)}
          maximumDate={new Date(2040, 12, 31)}
          locale={'en'}
          timeZoneOffsetInMinutes={undefined}
          modalTransparent={false}
          animationType={'fade'}
          androidMode={'default'}
          placeHolderText="Select date"
          textStyle={{ color: 'green' }}
          placeHolderTextStyle={{ color: '#d3d3d3' }}
          onDateChange={this.setDate}
        />
        <Text>Date: {this.state.chosenDate.toString().substr(4, 12)}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Is the bug present in both iOS and Android or in any one of them?

Problem is only for iOS in dark mode

Any other additional info which would help us debug the issue quicker.

Important

Expo snack here: (https://snack.expo.io/@mehmetkaplan/native-base-datepicker-test)

[Kuhne1]

I know it isn't a solution, but for those looking for a temporary fix on their apps, you can add this to your AppDelegate.m. This will force light mode, for your application.

if (@available(iOS 13, *)) {
self.window.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}

Source
https://github.com/facebook/react-native/issues/26299

[IgorUsoltsev]

I have posted my solution here https://github.com/facebook/react-native/issues/26299#issuecomment-552817409

[MehmetKaplan]

@IgorUsoltsev Are you sure if your method works with native-base?

According to my analysis; the method you mentioned can be used with react-native-datepicker. Reference of the code line that I think is responsible that uses customStyles.datePickerCon: https://github.com/xgfe/react-native-datepicker/blob/2a209bd4f11a84ff4543fbde930fed60dcbc0f68/datepicker.js#L391

On the other hand it seems there is no method to customize the DatePicker in Native Base. Reference: https://github.com/GeekyAnts/NativeBase/blob/9c470822dc4912c3780cf14426cd3b6a56ef01f4/src/basic/DatePicker.js#L124

[IgorUsoltsev]

@IgorUsoltsev Are you sure if your method works with native-base?

According to my analysis; the method you mentioned can be used with react-native-datepicker. Reference of the code line that I think is responsible that uses customStyles.datePickerCon: https://github.com/xgfe/react-native-datepicker/blob/2a209bd4f11a84ff4543fbde930fed60dcbc0f68/datepicker.js#L391

On the other hand it seems there is no method to customize the DatePicker in Native Base. Reference:

https://github.com/GeekyAnts/NativeBase/blob/9c470822dc4912c3780cf14426cd3b6a56ef01f4/src/basic/DatePicker.js#L124

Sorry to hear that :(

Actually I didn't test it with this module. Just advised that might help here as I was looking through a number of similar issues looking for answer for my case.

[MehmetKaplan]

Seems duplicate of #2966

[Fokus969]

        <DatePicker
          ...
          customStyles={{
            ...
            datePicker:{backgroundColor: '#222'}
          }}
      />

[ramanasak]

how to change the styling of datepicker ?

[MehmetKaplan]

Closed as per the duplicate label