React Native Bottom Navigation – Example using Latest React Navigation
React Native Bottom Navigation
React Native Bottom Navigation
Here is an example of React Native Bottom Navigation. Bottom Navigation is very useful when you have 2-3 main navigation options. It provides the user with easy access to regular usable options.
In this example, We will make a Bottom Navigation with navigation options like Home and Setting. Each screen has other navigation options too. So let’s get started.
To Make a React Native App
Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run.
npm install -g react-native-cli
Run the following commands to create a new React Native project
react-native init ProjectName
If you want to start a new project with a specific React Native version, you can use the –version argument:
react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next
This will make a project structure with an index file named App.js in your project directory.
Installation of Dependencies
To install the dependencies open the terminal and jump into your project
cd ProjectName
1. Install react-navigation dependency to import createAppContainer
npm install react-navigation --save
2. Install react-native-gesture-handler dependency to support gesture navigation
npm install react-native-gesture-handler --save
3. Install react-navigation-tabs to import createBottomTabNavigator
npm install react-navigation-tabs --save
4. Install react-native-reanimated for the bottom tab animation (Used internally by react-navigation-tabs)
npm install react-native-reanimated --save
5. We are going to use Ionicons to show the menu icons from react-native-vector-icons/Ionicons. So install react-native-vector-icons
npm install react-native-vector-icons --save
These steps are enough for the bottom tab navigation but in this example, we are also using createStackNavigator to switch screens, so please follow the next step also
6. Install react-navigation-stack to import createStackNavigator
npm install react-navigation-stack --save
These commands will copy all the dependencies into your node_module directory.
Linking of Dependency
After the updation of React Native 0.60, they have introduced auto-linking feature means we do not require to link the library but they have also mentioned that some libraries need linking and react-native-vector-icons is one of those cases. So for that, we need to link the library using
react-native link react-native-vector-icons
CocoaPods Installation
In this example, we need to install the pods for react-native-gesture-handler, react-native-reanimated and react-native-vector-icons.
Please use the following command to install CocoaPods
cd ios && pod install && cd ..
Project File Structure
To start with this Example you need to create a directory named pages in your project and create four files DetailsScreen.js, HomeScreen.js, ProfileScreen.js and SettingScreen.js in it.
Code
Now Open App.js in any code editor and replace the code with the following code
App.js
//This is an example code for Bottom Navigation//
import React from 'react';
import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
import Ionicons from 'react-native-vector-icons/Ionicons';
//import Ionicons to show the icon for bottom options
//For React Navigation 3+
//import {
// createStackNavigator,
// createBottomTabNavigator,
// createAppContainer,
//} from 'react-navigation';
//For React Navigation 4+
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './pages/HomeScreen';
import SettingsScreen from './pages/SettingsScreen';
import DetailsScreen from './pages/DetailsScreen';
import ProfileScreen from './pages/ProfileScreen';
const HomeStack = createStackNavigator(
{
//Defination of Navigaton from home screen
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
},
{
defaultNavigationOptions: {
//Header customization of the perticular Screen
headerStyle: {
backgroundColor: '#42f44b',
},
headerTintColor: '#FFFFFF',
title: 'Home',
//Header title
},
}
);
const SettingsStack = createStackNavigator(
{
//Defination of Navigaton from setting screen
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
Profile: { screen: ProfileScreen },
},
{
defaultNavigationOptions: {
//Header customization of the perticular Screen
headerStyle: {
backgroundColor: '#42f44b',
},
headerTintColor: '#FFFFFF',
title: 'Settings',
//Header title
},
}
);
const App = createBottomTabNavigator(
{
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-checkmark-circle${focused ? '' : '-outline'}`;
}
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#42f44b',
inactiveTintColor: 'gray',
},
}
);
export default createAppContainer(App);Open pages/DetailsScreen.js in any code editor and the Replace the code with the following code.
DetailsScreen.js
//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
export default class DetailsScreen extends React.Component {
//Detail Screen to show from any Open detail button
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details!</Text>
</View>
);
}
}Open pages/HomeScreen.js in any code editor and the Replace the code with the following code.
HomeScreen.js
//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
export default class HomeScreen extends React.Component {
//Home Screen to show in Home Option
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ marginTop: 50, fontSize: 25 }}>Home!</Text>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Settings')}>
<Text>Go to settng Tab</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Details')}>
<Text>Open Details Screen</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 300,
marginTop: 16,
},
});Open pages/ProfileScreen.js in any code editor and the Replace the code with the following code.
ProfileScreen.js
//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
export default class ProfileScreen extends React.Component {
//Profile Screen to show from Open profile button
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Profile!</Text>
</View>
);
}
}Open pages/SettingsScreen.js in any code editor and the Replace the code with the following code.
SettingsScreen.js
//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
export default class SettingsScreen extends React.Component {
//Setting Screen to show in Setting Option
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ marginTop: 50, fontSize: 25 }}>Setting!</Text>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Home')}>
<Text>Go to Home Tab</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Details')}>
<Text>Open Detail Screen</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Profile')}>
<Text>Open Profile Screen</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 300,
marginTop: 16,
},
});Tags :
Website Designing Company in Delhi || Magento Development Company
website designing company in rohini
About Post Author
