Error: NavigationBar is null (Expo)

[nezort11]

When trying to call setNavigationColor I get [Unhandled promise rejection: TypeError: null is not an object (evaluating 'NavigationBar.NO_MODE')].

  import SystemNavigationBar from "react-native-system-navigation-bar";

  useEffect(() => {
    const changeNavigationBar = async () => {
      try {
        const result = await SystemNavigationBar.setNavigationColor("red");
        console.log("Result:", result);
      } catch (error) {
        console.error("Error:", error);
      }
    };
    changeNavigationBar();
  }, []);

Deps:

    "expo": "~47.0.9",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-system-navigation-bar": "^2.1.0",

Error:

Clues:

Seems something there:

import { NativeModules, Platform, processColor } from 'react-native';

// NaviagationBar is null
const { NavigationBar } = NativeModules;

// ...

const setNavigationColor = async (
  color: string | number,
  style?: 'light' | 'dark',
  bar?: 'navigation' | 'status' | 'both'
) => {
  if (Platform.OS === 'android') {
    const { modeStyle, mode } = getBarModeTypes(style, bar);
    return await NavigationBar.setNavigationColor(
      color === 'translucent' ? 0 : processColor(color),
      color === 'translucent',
      modeStyle,
      mode
    );
  }
};

Does it work this expo at all? Or I need to use this: https://docs.expo.dev/versions/latest/sdk/navigation-bar/

[kadiraydinli]

Hey, You may get an error while using this package in Expo. You need to use of Expo package you said.