1

I want to hide the system's bottom navigation bar. I used "react-native-navigation-bar-color" but it causes a build error, strangely while release build only.

I thought I could remove this package(react-native-navigation-bar-color) and permanently hide the navbar by changing MainActivity but the MainActivity in React Native does not inherit AppCompatActivity in order for it to have "onCreate" method in which I can write the code(as per android studio documentation) to hide.

Following is the build error: /Users/yashjaveri/.gradle/caches/transforms-1/files-1.1/appcompat-v7-28.0.0.aar/f688ce916ebedb5188b6c1f4470868ef/res/values-v28/values-v28.xml:9:5-12:13: AAPT: error: resource android:attr/dialogCornerR adius not found.

/Users/yashjaveri/Documents/React/ReactNative_Projects/SLink/node_modules/react-native-navigation-bar-color/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:11: AAPT: error: resource android:attr/dialogCornerRadius not found.

/Users/yashjaveri/.gradle/caches/transforms-1/files-1.1/appcompat-v7-28.0.0.aar/f688ce916ebedb5188b6c1f4470868ef/res/values/values.xml:1304:5-69: AAPT: error: resource android:attr/fontVariationSettings not found.

/Users/yashjaveri/.gradle/caches/transforms-1/files-1.1/appcompat-v7-28.0.0.aar/f688ce916ebedb5188b6c1f4470868ef/res/values/values.xml:1304:5-69: AAPT: error: resource android:attr/ttcIndex not found.

error: failed linking references.

FAILURE: Build failed with an exception.

  • What went wrong: Execution failed for task ':react-native-navigation-bar-color:verifyReleaseResources'.

    com.android.ide.common.process.ProcessException: Failed to execute aapt

Please help me out either by providing way to hide navbar permanently in react-native or by suggesting any other npm package() or by helping me solve the release build error, as my app has a video screen which requires full screen mode.

Thank you

Screenshot

yash javeri
  • 367
  • 1
  • 4
  • 17

1 Answers1

1

Hide the Navigation Bar

You can hide the navigation bar using the SYSTEM_UI_FLAG_HIDE_NAVIGATION flag. This snippet hides both the navigation bar and the status bar:

ote the following:

@Reactmethod
public void hidenavigationbar() {
View decorView = getWindow().getDecorView();
// Hide both the navigation bar and the status bar.
// SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as
// a general rule, you should design your app to hide the status bar whenever you
// hide the navigation bar.
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
          | View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);
}
  • With this approach, touching anywhere on the screen causes the navigation bar (and status bar) to reappear and remain visible. The user interaction causes the flags to be be cleared.
  • Once the flags have been cleared, your app needs to reset them if you want to hide the bars again. See Responding to UI Visibility Changes for a discussion of how to listen for UI visibility changes so that your app can respond accordingly.
  • Where you set the UI flags makes a difference. If you hide the system bars in your activity's onCreate() method and the user presses Home, the system bars will reappear. When the user reopens the activity, onCreate() won't get called, so the system bars will remain visible. If you want system UI changes to persist as the user navigates in and out of your activity, set UI flags in onResume() or onWindowFocusChanged().
  • The method setSystemUiVisibility() only has an effect if the view you call it from is visible.
  • Navigating away from the view causes flags set with setSystemUiVisibility() to be cleared.

this link about my answer

OR Use this link

import FullScreen from 'react-native-full-screen'
FullScreen.onFullScreen()
FullScreen.offFullScreen()

an article referenced in writing another answer.

hong developer
  • 13,291
  • 4
  • 38
  • 68