How to Hide BottomTabs When KeyBoard is Shown in React Native ?
Jan 06, 2023 . Admin
Hi Guys,
In this example, I will show you How to Open Keyboard Then Remove Bottom Tab Navigation In React Native. step by step explain tabBarHideOnKeyboard attribute on the bottom tab in react native. if you want to see example of bottom tab navigation in react native then you are a right place. if you want to see example of hide bottom navigation bar on keyboard react-native then you are a right place.
In this example, We will add to tabBarHideOnKeyboard:true to tab Navigator thne remove bottom tab in you react native app.you can easy to remove hide bottom tab open keyboar in react native.below's this example.
Step 1: Download ProjectIn the first step run the following command to create a project.
expo init BottomTabStackStep 2: Installation and Setup
First, you need to install them in your project:
npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs
You also need to install react-native-gesture-handler.
npm install react-native-gesture-handler
you can set drawer icon to install vector icons:
npm i react-native-vector-icons
you have use any bundled Icon:
import this:import Icon from 'react-native-vector-icons/Ionicons';Step 3: HomeScreen.js
first of all you have create Screens folder inside your project.in this folder create HomeScreen.js file
In this step, You will open the HomeScreen.js file and put the code.
Screens/HomeScreen.jsimport React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; const HomeScreen = (props) => { return ( <View style={styles.container}> <View> <Text style={styles.text}>HomeScreen!</Text> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 20, marginBottom: 10, }, }); export default HomeScreen;Step 4: ProfileScreen.js
Next,create ProfileScreen.js file inside Screens folder
In this step, You will open the ProfileScreen.js file and put the code.
import React from 'react'; import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native'; const ProfileScreen = () => { const [firstname, setFirstName] = React.useState(""); const [lastname, setLastName] = React.useState(""); return ( <View style={styles.container}> <TextInput style={styles.input} onChangeText={(firstname) => setFirstName(firstname)} value={firstname} placeholder="Enter First name" /> <TextInput style={styles.input} onChangeText={(lastname) => setLastName(lastname)} value={lastname} placeholder="Enter Last name" /> <TouchableOpacity style={styles.button} > <Text>Submit</Text> </TouchableOpacity> </View> ); } const styles = StyleSheet.create({ container: { margin:10 }, input: { borderWidth: 1, padding:5, marginBottom:10 }, button: { alignItems: "center", backgroundColor: "#DDDDDD", padding: 10 }, }); export default ProfileScreen;Step 5: App.js
Now, you need to wrap the whole app in NavigationContainer. Usually, you'd do this in your entry file, such as App.js:
In this step, You will open the App.js file and put the code.
import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Icon from 'react-native-vector-icons/Ionicons'; import HomeScreen from './Screens/HomeScreen'; import ProfileScreen from './Screens/ProfileScreen'; const Tab = createBottomTabNavigator(); const App = () => { return ( <NavigationContainer> <Tab.Navigator screenOptions={{ headerTitleAlign: 'center', tabBarHideOnKeyboard: true }} > <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon:({ size, color }) => ( <Icon name='home' size={size} color={color} /> ), }} /> <Tab.Screen name="Test" component={ProfileScreen} options={{ tabBarIcon:({ size, color }) => ( <Icon name='person-sharp' size={size} color={color} /> ), }} /> </Tab.Navigator> </NavigationContainer> ); } export default App;Run Project
In the last step run your project using the below command.
expo start
You can QR code scan in Expo Go Application on mobile.
Output :It will help you...