Creating a React Native app may seem to be difficult; however, it is not. Creating a
bottom tab navigator is a real task, which this article has covered. It has explained
the step-by-step process of how you can create a bottom navigator tab and learn
along the process.
As React Native is one of the most popular cross-platform mobile app development
frameworks, it has increased the demand for react native development company
services. While creating such an app you should know how to build a bottom
navigator tab and toggle between different icons. You may want to navigate to other
parts of the app. In this context, the bottom bar navigator is quite useful, and let’s
see how it can be designed.
Consideration of pre-requisites and key term
You cannot start with creating a bottom bar navigator if you have not yet built a react
native app. Please check the article if you are struggling with the app-building
process. There are different ways of creating a react native app. Scroll down to the
expo section to get an easier app development process.
To present the tutorial in simple language, I want you to become familiar with certain
terms that are used in the steps. One of them is Pressable. Pressable is a kind
of button that you can import into your react native project. It allows you to mark
specific sections into pressable buttons. It responds when users press any of its
defined children. The other React Native Core Component, StyleSheet, is also
used in the process. The stylesheet is used to style an app. You need to use JS
code to import StyleSheet into your project. Its key function is to structure and
style components in apps.
Step 1: Installing package.json using npm
command
➔ Go to “https://www.npmjs.com/package/react-native-ico-material-design/v/2.3.1” and
copy the command npm install –save react-native-ico-
material-design react-native-svg. This command will allow you to get
the required icon material package.
Here, the npm command is compatible with Android. Otherwise, you can also use the
yarn command, if you are using any other OS.
➔ Open the command prompt from the project folder and run the copied command on
the terminal.
➔ You will be asked to insert the password. Wait for some time after inserting the
password and it will install the package.json.
Step 2: Import Image and Pressable
Include the Pressable and Image component from react native. Pressable
component will let you create pressable buttons and the Image component will allow
you to import images of the icon that you want to insert in the bottom tab navigator.
Step 3: Start Metro Bundler of the expo app
➔ To run the emulator or run the app on your physical device, you have to run the
command expo start on the cmd of the project folder.
➔ Scan the generated QR code from the Expo Go app on your android device.
➔ You can also start the emulator. Starting the app on any of the devices can help you
to track changes in the root directory.
Step 4: Creating global variables
➔ I have considered two global variables iconHeight and iconWidth in my project.
➔ You have to add var iconHeight= 28; and var iconWidth= 28; This is the
height and width of the icon on the bottom bar navigator. You can set as per your
preference. Refer to the below image.
Step 5: Importing Class component
➔ You have to use the Class Component to make the center Screentext as ‘Click
the button!’. Also, you have to use the state.
➔ For this, insert the line export default class App extends
React.Component{}. This will extend React.Componenet.
➔ Import render and add return component under it.
➔ Make sure to save all the changes.
Step 6: Get along the remaining steps
Add screenText using the following code line.
You can provide any text that you want to show on the screen of the app. I have
included ‘Click the button!’ as the screenText.
➔ changeText will consider some texts as parameters.
➔ Console.log lets you log the text that has been pressed. It prints defined variables
or displays any strings or numbers to users.
➔ Under console.log add text + “has been clicked!”
➔ Add the below-given codelines to set the state.
this.setState({
screenText: text,
})
};
➔ Add <View></View> under View style to design the first element on the app
display screen.
➔ Add
<Text style={{fontSize:35, color:
‘yellow’}}>{this.state.screenText}</Text>
<StatusBar style=”Dark” />
To get the output as the following image.
Adding this.state.screenText will allow you to print ‘Click the button!’ as you
return to the main program.
➔ Here, as you can see, I have set the font size and the color of the center display as
35 and yellow respectively. You can choose it as per your needs.
➔ Here, I have created an inline style using curly brackets to change the size and color
of the screen display message.
Change in StyleSheet
➔ Here, we will discuss the code lines for changing the background color and also
modify the alignment of the considered item using StyleSheet.
➔ Consider the following code lines
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#dc143c',
alignItems: 'center',
justifyContent: 'center',
},
➔ Here you can note that I have imported a container under StyleSheet to set the
backgroundColor, alignItems, and justifyContent.
➔ You can choose any color from https://reactnative.dev/docs/colors. You will get
specified codes for each color which you need to add to your code base based on
your needs. I have painted the background screen with Crimson using the code
#dc143c.
Step 7: Creating navigation bar
➔ To add icons at the bottom navigator, I have created a Navigation Bar and navigation
container.
➔ Consider the given codelines.
<View style={styles.NavContainer}>
<View style={styles.NavBar}>Here, I have added two <View> components to add NavContainer and NavBar.
➔ With the below-given code lines
NavContainer:{
// position: 'bottom',
justifyContent:"flex-end",
alignItems:'center',
position:"absolute",
bottom: 15,
},
I have designed the Navigation container, the actual tab navigator that will hold the
icons.
➔ Now, design the Navigation Bar with its border-radius, flex-direction, width, and
background color. Take a look at the given code lines.
NavBar: {
flexDirection: 'row',
backgroundColor: '#a9a9a9',
width: '80%',
justifyContent: 'space-evenly',
borderRadius: 50
},
Step 8: Designing different icons in Navigation Bar
➔ Download different icons that you like to include in your navigation bar from
“https://icons8.com/icons”. Save all the icons in the asset folder.
➔ Also, change the text that will be displayed on the app screen for every icon.
You can do this under this.changeText(). Refer to the following code snippet
to get an idea.
<Pressable
onPress={() => this.changeText("Welcome to
home")}
style={styles.IconBehave}
android_ripple={{ borderless: true, radius: 60
}}
>
<Image
source={require("./assets/Icons/home.png")}
style={{ width: 30, height: 30,
tintColor:'#ff7f50' }}
/>
</Pressable>Here, I have added a home icon, incorporated the text “Welcome to home” which will
be displayed on the screen on pressing the home icon, and added a tint color using
the code #ff7f50.
➔ For the second icon, I used an alarm icon. Consider the following code snippet.
<Pressable
onPress={() => this.changeText("It's time to get up")}
style={styles.IconBehave}
android_ripple={{ borderless: true, radius: 60 }}
>
<Image
source={require("./assets/Icons/alarm.png")}
style={{ width: 30, height: 30, tintColor:'#0000ff' }}
/>
</Pressable>Using the ‘alarm.png’ saved in the asset folder, I used the alarm icon in my app. Also, I
added a different text ‘It’s time to get up’ which will be displayed on pressing the icon on the
app screen. For the color of the icon, I used the color code of #0000ff.
➔ Consider the following code line for the third icon of car settings.
<Pressable
onPress={() => this.changeText("Car settings")}
style={styles.IconBehave}
android_ripple={{ borderless: true, radius: 60 }}
>
<Image
source={require("./assets/Icons/car.png")}
style={{ width: 30, height: 30, tintColor:'#ff8c00' }}
/>
</Pressable>
Here, as you can see, I have used the color code #ff8c00 and a personalized text of ‘Car
settings’.
➔ Lastly, for the WhatsApp icon, I used the following code snippet.
<Pressable
onPress={() => this.changeText("You have a new
message")}
style={styles.IconBehave}
android_ripple={{ borderless: true, radius: 60 }}
>
<Image
source={require("./assets/Icons/whatsapp.png")}
style={{ width: 30, height: 30, tintColor:'#7fff00' }}
/>
</Pressable>Here, I have changed the text for the WhatsApp icon to ‘You have a new message. Using
the method this.changeText()I have modified the personalized text for individual icon’
the color code for the icon is #7fff00.
Final thoughts
Creating an app may be a difficult task but designing the app and creating a bottom tab bar
navigator is more difficult. Thus I have made the task easier by explaining all the steps. Also,
I added the code snippets for each icon at the bottom tab bar navigator. Don’t waste your
time by relying on the theoretical approach but indulge in the practical approach of creating
new segments of the app.