Different results inside vs outside modal

[donutsahoy]

Question

Phone in dark mode.
Using DateTimePicker shows up black text with white background on a normal screen. Once inside a modal the text changes to white text. If I switch to Light mode then the text is black and readable.

I tried to use this: https://forums.expo.io/t/how-to-force-app-in-light-mode/33038/2 to fix the issue but it didn't work because I am using expo.

Other than changing the style up drastically is there anything I can do to fix this issue?

I'm glad it works on the main screen but I don't want to select date there as I want it to be part of the process in a modal after some other information has been gathered.

Thank you!

[Brendonovich]

I'm trying to do something similar with a DateTimePicker in a Modal, +1

[donutsahoy]

I see that the textColor prop has been added but either I'm using it wrong or it's not working for me. I did update DateTimePicker.

  "dependencies": {
    "@react-native-community/datetimepicker": "^2.3.0",

Here is my code:

                <DateTimePicker
                    testID="dateTimePicker"
                    textColor={'black'}
                    value={selectDateState}
                    mode={'date'}
                    is24Hour={false}
                    display="default"
                    onChange={onDateChange}
                    maximumDate={new Date(2300, 10, 20)}
                    minimumDate={new Date(1950, 0, 1)}
                />

Let me know if I screwed up something simple. Thank you!

[Brendonovich]

From what I can tell, I'm not sure there's anything we can do. TextColor doesn't override it, and forcing the app into light mode won't work because doing so only forces the main UIView that gets rendered to be in light mode, but the Modal is opened in a separate UIView that is outside the main one, and so doesn't get light mode applied to it. I'm thinking of trying to create my own Modal that sits lower in the component tree so that light mode is forced on it as well. Not sure if it will work, though.

[Brendonovich]

Yeah, this issue can be worked around by using a custom modal made with Animated.Views and the like, placing it as a sibling of the content you want it to cover, and then using some state management like Redux or React.Context to pass visibility and data information to it. This solution keeps the modal within the main UIView of the app, so forcing the app into light mode applies to the DateTimePicker within the custom modal, keeping the text dark. If you'd like help with implementing this, let me know.

[osvald0]

I could reproduce the issue using the datepicker in a modal when the OS is in dark mode.
The solution is set the property textColor with the desired value (black in my case).

[donutsahoy]

I could reproduce the issue using the datepicker in a moda when the OS is in dark mode.
The solution is set the property textColor with the desired value (black in my case).

As you can see in my code above I originally tried use the textColor property and it was not affecting the textColor but then something was updated and textColor started affecting the color of the text. Glad I'm not the only one that is seeing it work this way. It means I'm not crazy haha!

[donutsahoy]

Yeah, this issue can be worked around by using a custom modal made with Animated.Views and the like, placing it as a sibling of the content you want it to cover, and then using some state management like Redux or React.Context to pass visibility and data information to it. This solution keeps the modal within the main UIView of the app, so forcing the app into light mode applies to the DateTimePicker within the custom modal, keeping the text dark. If you'd like help with implementing this, let me know.

I appreciate the offer, it looks like textColor is now working so that solves my issue at least. I've got something to work with.

[vonovak]

hello, this is closed via #204

forcing the app into light mode won't work because doing so only forces the main UIView that gets rendered to be in light mode, but the Modal is opened in a separate UIView that is outside the main one, and so doesn't get light mode applied to it

please use approach #1 from https://stackoverflow.com/a/56546554/2070942