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.

In the first step run the following command to create a project.

expo init BottomTabStack

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 Icon from 'react-native-vector-icons/Ionicons';

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.

import 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;

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;

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;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...