Ability to set status and bottom navigation bar colors on Androids

[efstathiosntonas]

Hi @jpudysz, hope you're doing well.

I think it would be nice to integrate this: https://github.com/kadiraydinli/react-native-system-navigation-bar#setnavigationcolor so we can set the navigation bar and the status bar to desired colors based on the themes.

Right now it's a big pain to set (plus an extra dep with tons of other unneeded functions) to set the colors on androids since you have to set the colors on mount and then unset on the unmount back to the app's colors.

scenario:

1. User taps an image and the app has white status and white bottom navbar.
2. When the image opens in full screen, they are still white so we have to set them both to black on mount and set them both back to white when the screen unmounts.

Another scenario is this onboarding flow where all the screens have white background except this one:

Click me

Hope I made it clear 😅

[jpudysz]

Sure you did! I'm interested, I will propose some api soon, maybe it will land in 2.6.0, who knows!

I'm looking forward for such ideas 🙏

[efstathiosntonas]

Thanks @jpudysz! Looking forward to it!

[jpudysz]

@efstathiosntonas I have something for you (still WIP) 😉:

UnistylesRuntime.statusBar.setColor(string || undefined)
UnistylesRuntime.navigationBar.setColor(string || undefined)

For now supports HEX colors, undefined = set default color 

Screen.Recording.2024-03-27.at.11.02.55.mov

[efstathiosntonas]

AMAZING!! what a relief to see an easy API for this....

[jpudysz]

I will definitely check this case before the release, thanks @efstathiosntonas !

[efstathiosntonas]

There's an open issue on react-native-device-info about it but not(?) possible to implement probably for the reasons mentioned above:

• Detect Soft Navigation Keys in Android react-native-device-info/react-native-device-info#511

@mikehardy (sorry for pinging you, we probably have something here 😅 )

[jpudysz]

Hey @efstathiosntonas why do you need this? This is like additional request on top of setting colors?

[efstathiosntonas]

@jpudysz yes, it's an additional request.

On some devices I had some issues on properly calculating the bottom inset because of this softbar.

I have a Samsung S22 and while using react-native-actions-sheet I have issues with the bottom item in the bottom sheet being hidden behind the soft nav bar thus I created the native component my self to mitigate this.

When running this bottom sheet in a simulator with soft keys (Pixel 5 i think) the bottom item was displaying just fine without the need of my native solution.

It's a f mess as I described in an earlier comment....

edit: react-native-actions-sheet has a useSafeAreaPadding prop so I get the boolean from the native solution, if true set the prop to true otherwise false.

[jpudysz]

Based on my research it's possible from Android 10, as before Android 10 we only had navbar with either 2 or 3 buttons.

I have a Samsung S22 and while using react-native-actions-sheet I have issues with the bottom item in the bottom sheet being hidden behind the soft nav bar thus I created the native component my self to mitigate this.

If that's connected to insets issue, did you try with unistyles?

[jpudysz]

Released with 2.6.0-rc.0, you can install it with

yarn add react-native-unistyles@next

[jpudysz]

Here is a fragment of unpublished documentation that might be helpful:

[efstathiosntonas]

perfect! Thanks Jacek, will play with it tomorrow!

[efstathiosntonas]

@jpudysz should we add this too: https://github.com/pnthach95/react-native-root-view-background ?

[jpudysz]

Yeah why not, cool idea!

[efstathiosntonas]

@jpudysz hi, just saw you released 2.6.0 so closing this as resolved.

Did you had the chance to read my comments on the PR? I encountered crashes while setting the navbar color (haven't tested status bar).

[jpudysz]

If you tried RC then yes, I added additional code

[efstathiosntonas]

@jpudysz still getting the same error, can you point me to the commit with the fixes applied after RC?

edit: I used 2.7.0

start of the trace:

java.lang.NullPointerException: Attempt to read from field 'int android.view.ViewGroup$LayoutParams.height' on a null object reference in method 'void com.android.internal.policy.DecorView.updateColorViewInt(com.android.internal.policy.DecorView$ColorViewState, int, int, int, boolean, boolean, int, boolean, boolean, int)'

[jpudysz]

Which navbar style do you use? What color are you setting? I would like to repro it

[jpudysz]

Here is the commit: 6d1627a

[efstathiosntonas]

give me 5', i think there might be a race condition, I'm using the elimination technique by removing all code that changes the status, navbar from other modules than unistyles and @pnthach95/react-native-root-view-background

[efstathiosntonas]

Which navbar style do you use? What color are you setting? I would like to repro it

i use this crazy hook:

  useEffect(() => {
    (async function initTheme() {
      const autoThemeMode = await AsyncStorage.getItem("autoThemeMode");
      const themeMode = await AsyncStorage.getItem("themeMode");

      if (!autoThemeMode && !themeMode) {
        // setNavigationColor(theme);
        UnistylesRuntime.setTheme(theme);
        UnistylesRuntime.navigationBar.setColor(
          theme === "dark" ? "#17181C" : mode === "highContrast" ? "#000000" : "#FFFFFF"
        );
        return setMode(theme);
      }

      if (autoThemeMode === "true") {
        const m =
          themeMode === "highContrast" && theme === "dark" ? "highContrast" : theme;
        UnistylesRuntime.navigationBar.setColor(
          m === "dark" ? "#17181C" : m === "highContrast" ? "#000000" : "#FFFFFF"
        );
        // UnistylesRuntime.setTheme(m);
        return setMode(m);
      }

      if (autoThemeMode === "true") {
        const m = themeMode === "dark" && theme === "dark" ? "dark" : theme;
        // setNavigationColor(m);
        UnistylesRuntime.setTheme(m);
        UnistylesRuntime.navigationBar.setColor(
          m === "dark" ? "#17181C" : mode === "highContrast" ? "#000000" : "#FFFFFF"
        );
        return setMode(m);
      }

      if (!themeMode) {
        // setNavigationColor(theme);
        UnistylesRuntime.setTheme(theme);
        UnistylesRuntime.navigationBar.setColor(theme === "dark" ? "#17181C" : "#FFFFFF");
        return setMode(theme);
      }

      if (
        (themeMode === "highContrast" && theme === "dark") ||
        (themeMode === "highContrast" && theme === "light")
      ) {
        // setNavigationColor("highContrast");
        UnistylesRuntime.setTheme("highContrast");
        UnistylesRuntime.navigationBar.setColor("#000000");
        return setMode("highContrast");
      }

      if (themeMode === "dark") {
        //setNavigationColor("dark");
        UnistylesRuntime.setTheme("dark");
        UnistylesRuntime.navigationBar.setColor("#17181C");
        return setMode("dark");
      }

      if (themeMode === "light") {
        //setNavigationColor("light");
        UnistylesRuntime.setTheme("light");
        UnistylesRuntime.navigationBar.setColor("#FFFFFF");
        return setMode("light");
      }
    })();
  }, [mode, setMode, theme]);

[efstathiosntonas]

same applies for statusBar i suppose, just clarifying because I posted only nav bar color snippet above.

[jpudysz]

@efstathiosntonas can you try 2.7.1-rc.1 ?

[efstathiosntonas]

works as a charm! Thanks Jacek!

onwards @pnthach95/react-native-root-view-background now! hehe

[jpudysz]

Thanks for the help @efstathiosntonas ! You've always supported me since the beginning of Unistyles 🫶

I will plan new features soon!

[efstathiosntonas]

happy to help anytime Jacek, your commitment to this library is outstanding!