kadiraydinli / react-native-system-navigation-bar Goto Github PK

Description

In com.reactnativesystemnavigationbar.SystemNavigationBarModule in setModeStyle at line 472
I think it's because you are rejecting the promise but still moving on with the code here:
https://github.com/kadiraydinli/react-native-system-navigation-bar/blob/master/android/src/main/java/com/reactnativesystemnavigationbar/SystemNavigationBarModule.java#L519

You need to return after rejecting the promise like you do in many other places.
Actually there are 3 or 4 places in the code where the return is missing after the reject I think.

Thanks a lot!

react-native-system-navigation-bar version

2.6.3

React Native version

0.72.5

Snack, code example, screenshot, or link to a repository

No response

Hi guys!
FIrst of all thank you for this project!
After integration with notifee and firebase cloud messaging background handler, i have found this bug:

2022-10-28 14:09:01.178 13660-13660/app.vidit E/AndroidRuntime: FATAL EXCEPTION: main
    Process: app.vidit, PID: 13660
    java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.Window android.app.Activity.getWindow()' on a null object reference
        at com.reactnativesystemnavigationbar.SystemNavigationBarModule.lambda$setSystemUIFlags$3$com-reactnativesystemnavigationbar-SystemNavigationBarModule(SystemNavigationBarModule.java:245)
        at com.reactnativesystemnavigationbar.SystemNavigationBarModule$$ExternalSyntheticLambda3.run(Unknown Source:6)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loopOnce(Looper.java:226)
        at android.os.Looper.loop(Looper.java:313)
        at android.app.ActivityThread.main(ActivityThread.java:8751)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1135)

i was easily fixed that with adding the following code to the native module(for every function that check for the view):

            if(getCurrentActivity() == null) {
              return;
            }

Bug:

I found an interesting bug trying to test the different system navigations from Settings on API 33 (emulator - I haven't been able to test on a real device). Default navigation is Gesture navigation, with which everything seems to be going well.

I'm explicitly setting the system navigation color like this:

SystemNavigationBar.setNavigationColor(
  'white',
  'dark',
  'navigation',
);

The bug happens when I set 3-button navigation or 2-button navigation from Settings:

As you can see, the bar style is 'light' instead of 'dark' (explicitly set).

Additional tests:

• I also tested by updating the background color to 'red' and it works. Only the style light/dark is not working.
• I also tested on API 28 (emulator), which uses 3-button navigation and doesn't have option to change it - and it's working fine. I can see the buttons because it's updating the style to 'dark'.

Versions:

• react 18.1.0
• react-native 0.70.4
• react-native-system-navigation-bar 2.2.0

Thank you for the library, it works great, exactly what we need!

Just a quick question. Are the functions that are only supported by higher level of Android APIs causing an app to crash?
To rephrase, do I need to check the API Level before the call, or are you checking it manually inside the code?

Example of the feature is here:
setNavigationBarDividerColor()
Only API Level 28 (Android 9) and higher is supported.

Thanks!

With
SystemNavigationBar.fullScreen(true);

getting TypeError: Cannot read property 'fullScreen' of undefined

Not working with top notch. The status bar blank space still exist even I added in style Flex:1

Description

Hi,

I see some errors in Sentry :

From the code, I see that there are many places where there is

promise.reject("Error: ", "current activity is null");
 return;

But two places where you actually throw:

throw new IllegalViewOperationException("current activity is null");

Would that make sense to only reject so this can be catched by RN and not crash?

react-native-system-navigation-bar version

2.6.1

React Native version

0.72.5

Snack, code example, screenshot, or link to a repository

No response

Description

After installing plugin build for android fails with this error:

../node_modules/react-native-system-navigation-bar/android/src/main/java/com/reactnativesystemnavigationbar/SystemNavigationBarModule.java:289: error: cannot find symbol
WindowCompat.setDecorFitsSystemWindows(view, enabled);

symbol: method setDecorFitsSystemWindows(Window,Boolean)
location: class WindowCompat

react-native-system-navigation-bar version

2.6.0

React Native version

0.66.0

Snack, code example, screenshot, or link to a repository

No response

Description

I am using a modal from react-native i wanted to hide the status bar and navigation bar on modal as well but its showing on the modal

react-native-system-navigation-bar version

2.6.0

React Native version

0.71

Snack, code example, screenshot, or link to a repository

No response

Hi, i recently installed your library and when i want to "setNavigationColor" with "light bar" on true, buttons doesn't color in "black". I'm on react native v0.69. Can you help me please ?

When running an application using the latest version of this dependency with the latest version of React Native, the following error appears:

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':react-native-system-navigation-bar:compileDebugAidl'.
> Could not resolve all task dependencies for configuration ':react-native-system-navigation-bar:debugCompileClasspath'.
   > Could not find com.facebook.react:react-native:0.68.2.
     Required by:
         project :react-native-system-navigation-bar

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4s

info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Seems to be releated to the following commit 9765318 Is there a reason to hardcode the react native version to 0.68.2 in this dependency? Trying to understand this change, as I'm using react native version 0.70.6 and it does not seem to work, but it is working in the previous version of this library. For now I'll just pin it to 2.0.1

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/

[Unhandled promise rejection: TypeError: null is not an object (evaluating 'NavigationBar.fullScreen')]
i'm use expo

What's the proper way to toggle immersive mode? I would only like to have immersive mode on a specific screen. navigationShow?

With Fabric/Turbomodules now being available for please add add support for it

See https://reactnative.dev/docs/new-architecture-library-intro

https://reactnative.dev/blog/2022/06/16/resources-migrating-your-react-native-library-to-the-new-architecture

It seems like setting the color to transluscent also changes some underlyign behavior in how the content behind it is rendered, while transparent doesn't do the same. Is this expected behavior and is it possible to make transparent work like transluscent in that it is rendered on top of the content behind it?

I am using this property and it changes depending on if I have dark mode enabled

SystemNavigationBar.setNavigationColor(0xff00ff00, false);

when I have a <StatusBar /> with backgroundColor and barStyle defined, my <StatusBar /> ignore my custom barStyle and change status icons colors with that function

I have a screen that in its light mode uses a dark color at the top, when the function sets the dark icons become unreadable

I don't know if there is currently any way to handle this problem

Thank you very much for sharing this library.

SDK 33
Windows 10, React Native 0.70.3

Can you help me?

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.Window android.app.Activity.getWindow()' on a null object reference
at com.reactnativesystemnavigationbar.SystemNavigationBarModule.lambda$setSystemUIFlags$3$com-reactnativesystemnavigationbar-SystemNavigationBarModule(SystemNavigationBarModule.java:245)
at com.reactnativesystemnavigationbar.SystemNavigationBarModule$$ExternalSyntheticLambda3.run(:6)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:214)
at android.app.ActivityThread.main(ActivityThread.java:6981)
at java.lang.reflect.Method.invoke(Method.java)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1445)

Description

Hi, thank you for the great library. Only way I was able to set the theme in the Android app status bar and navigation bar.

I am running into this crash lately.

I am calling this in my code:
SystemNavigationBar && SystemNavigationBar.setBarMode && SystemNavigationBar.setBarMode(isDarkMode ? 'light' : 'dark');

I added the checks because I wanted to see if that would fix it, but it did not.

Here is the crash I am seeing:

Fatal Exception: java.lang.NullPointerException Attempt to invoke virtual method 'android.view.Window android.app.Activity.getWindow()' on a null object reference com.reactnativesystemnavigationbar.SystemNavigationBarModule.setModeStyle (SystemNavigationBarModule.java:472) com.reactnativesystemnavigationbar.SystemNavigationBarModule.lambda$setModeStyle$8$SystemNavigationBarModule (SystemNavigationBarModule.java:521) com.reactnativesystemnavigationbar.-$$Lambda$SystemNavigationBarModule$7c9Wq1aEzZlZVxbqz80nWTlUwis.run (Unknown Source:8) android.os.Handler.handleCallback (Handler.java:942)

I am not able to reproduce the issue, but I am seeing it in crashlytics.

Here are some of the devices it is happening on:
Android 14 Pixel 6
Android 14 Galaxy S22
Android 13 Oppo Reno8 5G
Android 11 Realme C3
Android 10 Galaxy Note9
Android 10 Note3

Please let me know if there is anything else that would be helpful. Thank you!

react-native-system-navigation-bar version

2.6.3

React Native version

0.62.2

Snack, code example, screenshot, or link to a repository

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

SystemNavigationBar && SystemNavigationBar.setBarMode && SystemNavigationBar.setBarMode(isDarkMode ? 'light' : 'dark');

Hi, I found an issue that when I use KeyboardAvoidingView after call setNavigationColor('transparent'), KeyboardAvoidingView will not work.

After some debugging, I found it is caused by:

view.setFlags(
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);

I am not very familiar with Android development. Is there a way to keep the effect of setNavigationColor('transparent'), but also make KeyboardAvoidingView works properly?

Error is triggered by this function

await SystemNavigationBar.setNavigationColor(theme.colors.barColor);

Error Message in Sentry

Error: false
  at promiseMethodWrapper(node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:105:60)
  at setNavigationColor(node_modules/react-native-system-navigation-bar/src/index.tsx:84:7)
  at next(native)
  at asyncGeneratorStep(node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
  at _next(node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:57)
  at anonymous(node_modules/@babel/runtime/helpers/asyncToGenerator.js:20:14)
  at tryCallTwo(node_modules/promise/setimmediate/core.js:44:3)
  at tryCallTwo$argument_1(node_modules/promise/setimmediate/core.js:204:6)
  at Promise(node_modules/promise/setimmediate/core.js:66:3)
  at anonymous(node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:24)
  at apply(native)
  at <global>(node_modules/react-native-system-navigation-bar/src/index.tsx:75:25)
  at show(src/infrastructure/navigation/Navigation.js:88:62)
  at next(native)
  at asyncGeneratorStep(node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
  at _next(node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:57)
  at anonymous(node_modules/@babel/runtime/helpers/asyncToGenerator.js:20:14)
  at tryCallTwo(node_modules/promise/setimmediate/core.js:44:3)
  at tryCallTwo$argument_1(node_modules/promise/setimmediate/core.js:204:6)
  at Promise(node_modules/promise/setimmediate/core.js:66:3)
  at anonymous(node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:24)
  at apply(native)
  at Nav(src/infrastructure/navigation/Navigation.js:87:13)
  at Nav(src/infrastructure/navigation/Navigation.js:121:5)
  at commitHookEffectListMount(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:5827:31)
  at flushPassiveEffects(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7532:23)
  at commitRootImpl(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7371:7)
  at G(node_modules/scheduler/cjs/scheduler.production.min.js:13:205)
  at J(node_modules/scheduler/cjs/scheduler.production.min.js:14:128)
  at apply(native)
  at queueReactNativeMicrotask(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:248:35)
  at _callTimer(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:114:15)
  at _callReactNativeMicrotasksPass(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:162:41)
  at callReactNativeMicrotasks(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:413:12)
  at __callReactNativeMicrotasks(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:390:42)
  at __guard$argument_0(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:132:39)
  at __guard(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:366:7)
  at flushedQueue(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:131:18)
  at callFunctionReturnFlushedQueue(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:116:29)

Error Detail link: https://sentry.io/share/issue/766768c8245e48a797726dcad8bca33f/

My Dependencies

 "react-native-system-navigation-bar": "^2.0.0",
 "react": "18.1.0",
 "react-native": "0.70.0",

Some Affected devices
Xiaomi Redmi S2 (Android 9)
Nokia 3.4 (Android 12)
vivo 1806 (Android 10)
Xiaomi Redmi 9 (Android 10)

I look forward to your help, thanks.

setNavigationColor removes color when Modal of react native is visible.

We've noticed the following crash with the SystemNavigationBar.:

Fatal Exception: java.lang.NullPointerException: Attempt to invoke interface method 'void com.facebook.react.bridge.Callback.invoke(java.lang.Object[])' on a null object reference
       at com.facebook.react.bridge.PromiseImpl.reject(PromiseImpl.java:231)
       at com.facebook.react.bridge.PromiseImpl.reject(PromiseImpl.java:70)
       at com.reactnativesystemnavigationbar.SystemNavigationBarModule.lambda$setSystemUIFlags$3$com-reactnativesystemnavigationbar-SystemNavigationBarModule(SystemNavigationBarModule.java:265)
       at com.reactnativesystemnavigationbar.SystemNavigationBarModule$$ExternalSyntheticLambda1.run(:6)   

It seems like inside https://github.com/kadiraydinli/react-native-system-navigation-bar/blob/master/android/src/main/java/com/reactnativesystemnavigationbar/SystemNavigationBarModule.java#L254
a Promise.resolve(true) is always called but also a promise.reject("Error: ", "current activity is null"); is possible.

Internally react-native will reset the reject/resolve callback, https://github.com/facebook/react-native/blob/main/ReactAndroid/src/main/java/com/facebook/react/bridge/PromiseImpl.java#L54
So we assume a race condition could cause this issue while inside the reject-function.
(At the start the reject-function will check for null, https://github.com/facebook/react-native/blob/main/ReactAndroid/src/main/java/com/facebook/react/bridge/PromiseImpl.java#L173)

We will create a pull request with a fix.

Kind regards,
Roel

Description

I use SystemNavigationBar.navigationHide(); to hide the bottom bar. The bar does get hidden, though whenever I click the screen again the bar reappears. (I'm on Android 11 emulator, don't have access to a physical Android device)

react-native-system-navigation-bar version

2.6.3

React Native version

0.72.4

Snack, code example, screenshot, or link to a repository

No response

SDK: 33

My React Native (not Expo) app is reporting several crashes (via Firebase Crashlytics) which appear related to this module (1.0.2):

Fatal Exception: java.lang.NullPointerException
Attempt to invoke virtual method 'android.view.Window android.app.Activity.getWindow()' on a null object reference

com.reactnativesystemnavigationbar.SystemNavigationBarModule.setNavigationColor (SystemNavigationBarModule.java:105)

This error never occurred before using this module. It's happening across Android versions 10, 11, 12.

From reading that error log it kind of sounds like setNavigationColor is being called too soon?
I'm calling it like SystemNavigationBar.setNavigationColor("#FDF7F5", false) from inside a useEffect where I'd assume it should be fine to do so.

When user changes the orientation to landscape, the navigation bar does not disappear.

It works only in portrait mode.

  const mode = useOrientation();

 const setImmer = async() => {
    const result = await SystemNavigationBar.immersive(); // does not work in landscape
  }

useEffect(() => {
   if(mode === 'LANDSCAPE'){
      setTimeout(setImmer, 2000 )
    }
  }, [mode]);