GeorgeHop/react-native-country-codes-picker

Background color is still white on dark mode

namluu25 opened this issue · 8 comments

I found a problem that on light mode, the background color is white and text is dark. But when switch to dark mode, background color is still white but text color is change to white. Great work, thank you so much!

Hello! You change the styles of modal when toggle dark mode? And can you provide some sample code?

Hello! You change the styles of modal when toggle dark mode? And can you provide some sample code?

Hi, sorry for late reply, I was busy lately. I haven't use any of styles, just plain FC.
Here is my code

<CountryPicker
        show={show}
        pickerButtonOnPress={pickerConfig}
        lang={'en'}
        enableModalAvoiding
        onBackdropPress={closePickerModal}
      />

https://imgur.com/a/hlyL5Hu I have a screenshot of dark/light mode right here

How I understand it's on android? Basicaly lib. doesn't support auto changing theme by your device theme. You should add theme specific styles you want for each theme. Check this section: https://github.com/GeorgeHop/react-native-country-codes-picker#styling

I understand that but what I meant that I haven't touch any styling inside the component but when I switch between dark/light theme the text color changes without the background color changes. Can you remove that theme color so I can have the dark text color in system dark theme? Or I have to manually set the color myself

You can remove all styles by yourself using section I sent.

@GeorgeHop hi, I've been digging around your library and I found out that you have set the wrong style type for some props.

export interface Style {
    backdrop?: ViewStyle,
    modal?: ViewStyle,
    line?: ViewStyle,
    searchMessageText?: ViewStyle,
    itemsList?: ViewStyle,
    modalInner?: ViewStyle,
    countryMessageContainer?: ViewStyle,
    textInput?: ViewStyle,
    countryButtonStyles?: ViewStyle,
    flag?: ViewStyle,
    dialCode?: ViewStyle,
    countryName?: ViewStyle
}

From your README, you specify that // Styles for input [TextInput], // Styles for search message [Text], // Dial code styles [Text]. But you set it as ViewStyle instead of TextStyle, so I can't change the text color. Can you update the library?

And in 2.2.2 version, the modal show full the screen, so I can't see the search bar. https://imgur.com/a/QKocblG

Look @namluu25 I little bit busy last time. May you prepare a PR? Because I will be able to fix it on the next week probably.