Statusbar reset to default color on android when dropdown is focused

[Moemen02]

So when I tap on my dropdown, my statusbar changes to it's default color on android. I do not know why it does that, could someone help me please? I have added some pictures so you guys know what I mean.

I have set my statusbar color in my app.js like this:

export default function App() {
    useEffect(() => {
        if (Platform.OS === "ios") {
            enableScreens(false);
        }
        if (Platform.OS === "android"){
            NavigationBar.setBackgroundColorAsync(colors.navBar);
            NavigationBar.setBorderColorAsync("transparent");
        }
    }, [])

    return (
        <Provider store={store}>
            <StoreProvider>
                <NavigationContainer ref={navigationRef}>
                    <StatusBar style="light" />
                    <MainNavigation/>
                </NavigationContainer>
                <MessagePopup/>
            </StoreProvider>
        </Provider>
    );
}

And my dropdown menu looks like this:

<Dropdown
      style={[styles.dropdown]}
      placeholderStyle={styles.placeholderStyle}
      selectedTextStyle={styles.selectedTextStyle}
      iconStyle={isDisabled ? styles.iconStyle2 : styles.iconStyle}
      data={schemaTypes}
      maxHeight={300}
      labelField="label"
      valueField="value"
      placeholder={!isFocus ? 'Select schema type' : '...'}
      value={value}
      onFocus={() => setIsFocus(true)}
      onBlur={() => setIsFocus(false)}
      onChange={item => {
          SetValue(item.value);
          setIsFocus(false);
          dispatch(setSessExercise([]))
      }}
      itemContainerStyle={{

      }}
      disable={isDisabled}
    />

So as you can see in the images underneath, when I toggle my dropdown. The statusbar and the NavigationBar are resetting, how can I fix this?

[hoaphantn7604]

hi @Moemen02 , I'm working on it.

[hoaphantn7604]

hi @Moemen02, Can you try refer this code.

   <Dropdown  
      onFocus={() => {
          setIsFocus(true);
          StatusBar.setBarStyle('light-content');
      }}
   />

[Moemen02]

Hi @hoaphantn7604, thanks for the response! When I try doing that I am getting this error: TypeError: _expoStatusBar.StatusBar.setBarStyle is not a function. (In '_expoStatusBar.StatusBar.setBarStyle('light')', '_expoStatusBar.StatusBar.setBarStyle' is undefined). I tried looking it up and I did not find any solutions for this error.

But I found a another solution for the changing color of the statusbar, I had to add this in the app.json:

"androidStatusBar": {
      "barStyle": "light-content"
    },

With the code above me the statusbar does not change, but I have another problem. As you can see in the second picuture of my original post I have a navigationbar. Right under there you can see the android "swipe up gesture thing" on some devices you see a "go back", "previos app" etc icons. That bar stays white when I toggle the menu.

I've tried the following things to prevent it becomming white:

I've added this to the app.json (did not work):

"androidNavigationBar": {
      "barStyle" : "light-content",
      "backgroundColor": "black"
    },

And I have tried adding the following code to the dropdown:

import * as NavigationBar from 'expo-navigation-bar';

<Dropdown  
      onFocus={() => {
          setIsFocus(true);
          NavigationBar.setBackgroundColorAsync(colors.navBar);
            NavigationBar.setBorderColorAsync("transparent");
      }}
   />

The code above sets the navigation bars color only after te dropdown is deselected. What I mean by that is when I for example when I set the color to red when it's focused, it wont change to red. It will only change after I deselect/subtract my dropdown

[Ragnar-Loth-brok]

I am having same issue in android using bare react native. Need solution for this ASAP.

[fendyk]

Same problem here

[HickeryDickery]

No fix yet?

[fbele]

Any update on this? It is happening the same also for Navigation Bar color at the bottom in Android.