react-native-system-bars
v0.4.0
Published
Control the visibility of Android's Status and Navigation Bars
Downloads
4,129
Readme
React Native Android System Bars
Control the visibility of Android's Status and Navigation Bars.
A lightweight implementation that exposes Android's system UI visibility API to the JS layer.
Note, this package is for Android only and its API will silently do nothing when called on iOS.
Installation
yarn add react-native-system-bars
Usage
Setting Android's system UI visibility flags directly
import AndroidSystemBars from "react-native-system-bars";
// Go immersive (i.e. hide status bar and nav bar)
AndroidSystemBars.setSystemUIVisibility(
'SYSTEM_UI_FLAG_IMMERSIVE',
'SYSTEM_UI_FLAG_FULLSCREEN',
'SYSTEM_UI_FLAG_HIDE_NAVIGATION'
);
// Show status bar and nav bar
AndroidSystemBars.setSystemUIVisibility('SYSTEM_UI_FLAG_VISIBLE');
Utility functions
We've went through the Android docs for managing the visibility of system bars, and came up with a set of utility functions that you can use.
If a utility function doesn't exist for your use case, just use the
AndroidSystemBars.setSystemUIVisibility()
function, passing whatever combination of flags you need.
AndroidSystemBars.clearFlags();
AndroidSystemBars.setContentBehindSystemBars();
AndroidSystemBars.dimSystemBars();
AndroidSystemBars.hideStatusBar();
AndroidSystemBars.hideNavigationBar();
AndroidSystemBars.hideStatusAndNavigationBars();
AndroidSystemBars.enableFullScreenMode('immersive', /*preventResizing (optional)*/true);
AndroidSystemBars.enableFullScreenMode('sticky-immersive', /*preventResizing (optional)*/true);
AndroidSystemBars.enableFullScreenMode('lean-back', /*preventResizing (optional)*/true);
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT