How to hide navigation bar in React Native Projects using Expo
You are trying to make your first React Native app and you wondered how to make native navigation bar disappear on focus lost or on an action. You probably found that you can fix the issue by playing around with the native code. You also found the article below written by Michael Ashton that solves the issue but you are confused with the Java codes and you looked for another alternative solution then you are at the right place!
If you are using Expo based react native project you can implement the same feature by using expo navigation bar API.
Keep in mind that this only works for android!
Firstly you need to import navigationBar component by expo.
import * as NavigationBar from 'expo-navigation-bar';After importing you can use it in your components directly. I will assume you would use in your Screen components and assume that you want navigationBar to be shown only when user slides down and then after some time or if an event happens it will disappear again.
//This makes it position absolute it's optional if you want more space for your component.
NavigationBar.setPositionAsync('absolute');//This makes it look transparent
NavigationBar.setBackgroundColorAsync('#ffffff00');//This makes it appear when user slides to show the navigationBar
NavigationBar.setBehaviorAsync('inset-swipe');
Inside your React Native component you can set properties and tweak around with it .
and lastly we want the navigation bar to be invisible when an user touches the screen for that we should add an onPress event I will assume that user will touch to a TouchableWithoutFeedback
<TouchableWithoutFeedbackonPress={() =>setTimeout(() => NavigationBar.setVisibilityAsync('hidden'), 2000)}></TouchableWithoutFeedback>
Now everything is set and the navigation bar will be closed after 2 seconds delay whenever user presses on the component you want the user to interact with. You can tweak around and set it as you want.
thanks for reading!
Twitter: https://twitter.com/CptProgrammer
