Inline DatePicker's text becomes invisible after navigation.pop if transition animation is turned off

[AlexTaran]

Describe the bug
The text on DatePicker becomes blank after navigating onto another screen and returning back, when transition animations are off.

Expected behavior
Excpected DatePicker's text to be still visible.
Actually, if I try to log current selected date from state variable - it continues to work (gestures are working and changing current date), but just the text is not visible. Even setting textColor explicitly does not help.

If I turn on transition animations (animationEnabled = true) everything works as expected.

To Reproduce

Dependencies in package.json:

"dependencies": {
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-date-picker": "^4.2.2",
    "react-native-gesture-handler": "^2.4.2",
    "react-native-safe-area-context": "^4.3.1"
  },

Use this example App.tsx

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator, StackScreenProps} from '@react-navigation/stack';
import React, {useState} from 'react';
import {SafeAreaView, TouchableOpacity} from 'react-native';
import DatePicker from 'react-native-date-picker';

type RootStackParamList = {
  ScreenOne: undefined;
  ScreenTwo: undefined;
};

const ScreenOne = ({
  navigation,
}: StackScreenProps<RootStackParamList, 'ScreenOne'>) => {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <SafeAreaView style={{flex: 1}}>
      <DatePicker
        textColor="black"
        maximumDate={new Date()}
        mode={'date'}
        date={selectedDate}
        onDateChange={date => {
          setSelectedDate(date);
        }}
      />
      <TouchableOpacity
        style={{width: 100, height: 100, backgroundColor: 'red'}}
        onPress={() => navigation.navigate('ScreenTwo')}
      />
    </SafeAreaView>
  );
};

const ScreenTwo = ({
  navigation,
}: StackScreenProps<RootStackParamList, 'ScreenTwo'>) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <TouchableOpacity
        style={{width: 100, height: 100, backgroundColor: 'red'}}
        onPress={() => navigation.pop()}
      />
    </SafeAreaView>
  );
};

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="ScreenOne"
        screenOptions={{animationEnabled: false}}>
        <Stack.Screen name="ScreenOne" component={ScreenOne} />
        <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Open app. Date picker looks like this:

Press the red square to navigate to the next screen. Then navigate back, pressing another red square.
Now the screen looks like this:

I'd expect DatePicker to be visible again.

Smartphone (please complete the following information):

• OS: Android
• React Native version: 0.68.2
• react-native-date-picker version: 4.2.2

[matijagrcic]

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

[alefemafra]

@matijagrcic Thanks, this worked for me, but it's a very strange bug

[majirosstefan]

In our team, Samsung devices are OK, but we have problems with Pixel 5: