detectsoftnav
Android 4.0 (API level 14) introduced the ability to hide/show the soft navigation bar. This fact is not accounted for by React Native, which will happily continue to show portions of Views underneath it when it is shown.
This package allows you to add listeners for the soft navigation bar being hidden and shown and modify your View layout accordingly. It also allows you to check the current status of the soft navigation bar at any given time.
Installation
Download via NPM
npm i -D rn-detect-soft-nav
Link, either via react-native link
or manually
react-native link rn-detect-soft-nav
-- OR --
// android/settings.gradle // add the following at the end of the file include ':rn-detect-soft-nav'.projectDir = new File(rootProject.projectDir, '../node_modules/rn-detect-soft-nav/android') // android/app/build.gradle dependencies { ... compile // <-- add this } // android/app/src/main/java/.../MainApplication.java // <-- add this ...@Overrideprotected List<ReactPackage> { return Arrays.<~>;}
Hide/Show Listeners
...DetectSoftNav
Get Current Visibility
...DetectSoftNav
You can also use async/await, if you would prefer.
...foo = async { const v = await DetectSoftNav // do stuff with v}
Recommended Use
For best performance/ease of use, I recommend implementing a View similar to
RN's built-in SafeAreaView
with flexible footer padding to account for
hiding/showing the soft navbar, then replacing the base View for any screens
that care about navbar visiblity with that enhanced View.