EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Native Tabs

By Rahul DubeyRahul Dubey

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Native Tabs

React Native Tabs

Introduction to React Native Tabs

In the mobile user interface, tabs are one of the most-used components. With the help of tabs, users can move between a small number of evenly important views very quickly and tabs also help in bringing a real-world element to the mobile application and web applications. When tabs are executed correctly, they are considered as the great UI control which aims towards upgrading usage. Tabs can be found on the top of the screen or on the bottom of the screen. In our day to day life we have seen tabs in various applications like WhatsApp, Pinterest, Facebook, LinkedIn, Instagram, etc. React Native acts as the best platform to develop these tabs in mobile applications very efficiently.

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

<TabView
navigationState={{ index, routes }} onIndexChange={setIndex} renderScene={SceneMap({
first: FirstRoute, second: SecondRoute,
})}
/>

How to Create React Native Tabs?

Below are the different examples.

Example #1 – Basic React Native Tabs at Top of Screen

Home Screen or FirstPage.js:

import React, { Component } from 'react'; import { Text, View } from 'react-native';
export default class FirstPage extends React.Component { render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>It is a Home Screen</Text>
</View>
);
}

Chat Screen or SecondPage.js:

import React, { Component } from 'react'; import { Text, View } from 'react-native';
export default class SecondPage extends React.Component { render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>It is a Chat Screen</Text>
</View>
);
}
}

App.js:

import React from 'react'; import {
createStackNavigator, createMaterialTopTabNavigator, createAppContainer,
} from 'react-navigation';
import FirstPage from './pages/FirstPage'; import SecondPage from './pages/SecondPage';
const TabScreen = createMaterialTopTabNavigator(
{
Home: { screen: FirstPage }, Chats: { screen: SecondPage },
},
{
tabBarPosition: 'top',
swipeEnabled: true,
animationEnabled: true, tabBarOptions: {
activeTintColor: '#f0f0f0', inactiveTintColor: '#fff7f7', style: {
backgroundColor: '#a8395e',
},
labelStyle: { textAlign: 'center',
},
indicatorStyle: { borderBottomColor: '#a6ff6e', borderBottomWidth: 2,
},
},
}
);
const App = createStackNavigator({ TabScreen: {
screen: TabScreen, navigationOptions: {
headerStyle: { backgroundColor: '#369c95',
},
headerTintColor: '#FFFFFF', title: 'Example of Tab',
},
},
});
export default createAppContainer(App);

Output:

React Native Tabs Example 1

Image 1 and Image 2

Example #2 – React Native Tabs at Bottom of the Screen with Vector Icons

Home Screen or FirstPage.js:

import React, { Component } from 'react'; import {Platform, StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const instructions = Platform.select({ android:
'Press or Shake menu button for dev menu' + 'To reload Double tap R on the keyboard,\n',
ios: 'Cmd+D or shake for dev menu' + 'Press Cmd+R to reload,\n',
});
type Props = {};
export default class FirstPage extends React.Component { render() {
const home_icon = (
<Icon name="home" size={50} color="#73abff" onPress={()=>{Alert.alert("Home icon is clicked")}} />
);
return (
<View style={styles.MainContainer}>
<View style={{ flex: 1, justifyContent: 'center', alignItems:'center' }}>
<Text>Welcome to Home Screen</Text>
<TouchableOpacity>
{home_icon}
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({ MainContainer: {
flex: 1,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#faf5f8', padding: 25
}
});

Call Screen or SecondPage.js:

import React, { Component } from 'react'; import {Platform, StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const instructions = Platform.select({ android:'Press or Shake menu button for dev menu' + 'To reload Double tap R on the keyboard,\n',
ios: 'Cmd+D or shake for dev menu' + 'Press Cmd+R to reload,\n',
});
type Props = {};
export default class SecondPage extends React.Component {
render() {
const phone_icon = (
<Icon name="phone" size={50} color="#acff63" onPress={()=>{Alert.alert("Want to make Call?")}} />
);
return (
<View style={styles.MainContainer}>
<View style={{ flex: 1, justifyContent: 'center', alignItems:'center' }}>
<Text>Welcome to Call Screen</Text>
<TouchableOpacity>
{phone_icon}
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({ MainContainer: {flex: 1,justifyContent: 'center', alignItems: 'center', backgroundColor: '#faf5f8', padding: 25}});

Popular Course in this category
React JS Redux Training (1 Course, 5 Projects)1 Online Courses | 5 Hands-on Projects | 18+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,487 ratings)
Course Price

View Course

Related Courses

Settings Screen or ThirdPage.js:

import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const instructions = Platform.select({ android:'Press or Shake menu button for dev menu' +
' To reload Double tap R on the keyboard,\n',
ios: 'Cmd+D or shake for dev menu' + 'Press Cmd+R to reload,\n',
});
type Props = {};
export default class ThirdPage extends React.Component { render() {
const setting_icon = (<Icon name="cog" size={50} color="#a35086" onPress={()=>{Alert.alert("Settings icon is clicked")}} />);
return (<View style={styles.MainContainer}><View style={{ flex: 1, justifyContent: 'center', alignItems:'center' }}>
<Text>Welcome to Settings Screen</Text>
<TouchableOpacity>
{setting_icon}
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({ MainContainer: {flex: 1,justifyContent: 'center', alignItems: 'center', backgroundColor: '#faf5f8', padding: 25
}
});

App.js:

import React from 'react';
import { createStackNavigator,
createMaterialTopTabNavigator, createAppContainer,
} from 'react-navigation';
import FirstPage from './pages/FirstPage'; import SecondPage from './pages/SecondPage'; import ThirdPage from './pages/ThirdPage';
const TabScreen = createMaterialTopTabNavigator(
{
Home: { screen: FirstPage },
Calls: { screen: SecondPage },
Settings: { screen: ThirdPage },
},
{
tabBarPosition: 'bottom', swipeEnabled: true, animationEnabled: true, tabBarOptions: {
activeTintColor: '#000000', inactiveTintColor: '#30362a', style: {
backgroundColor: '#a5ff45',
},
labelStyle: { textAlign: 'center',
,
indicatorStyle: { borderBottomColor: '#a6ff6e', borderBottomWidth: 2,
},
},
}
);
const App = createStackNavigator({ TabScreen: {
screen: TabScreen, navigationOptions: {
headerStyle: { backgroundColor: '#ff617e',
},
headerTintColor: '#FFFFFF', title: 'Example of Bottom Tabs',
},
},
});
export default createAppContainer(App);

Output:

Image 3 shows the home screen of the application and Image 4 shows the pop-up that will appear when the home icon is clicked. Similarly, Image 5 shows the call screen and Image 6 shows the pop-up window that appears when call icon is clicked. Similarly, Image 7 shows settings screen and Image 8 shows the pop-up window that appears when the setting icon is clicked.

Screen Example 2

Image 3 and Image 4 

React Native Tabs Example 3

Image 5 and Image 6

Image 5 and Image 6 Example 4

Conclusion

On the basis of the above discussion, we got to know what importance is the hold of tabs in a particular application. We developed different kind of tabs in the React Native. Tabs can be developed very easily and efficiently to React Native. React Native provides the best platform and wide variety to develop these tabs.

Recommended Articles

This is a guide to React Native Tabs. Here we discuss the Introduction to React Native Tabs and its Examples along with Code Implementation. You can also go through our other suggested articles to learn more –

  1. React Native AsyncStorage
  2. React Native Progress Bar
  3. React Native Firebase
  4. React Native Drawer

React JS Redux Training (1 Course, 4 Projects)

1 Online Courses

5 Hands-on Projects

18+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Component Lifecycle
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native Element
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React State Management
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Linking
    • React Native DatePicker
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native Fonts
    • React Native Overlay
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Dispatcher
    • React Native Redux
    • React JSX
    • React native keyboardavoidingview
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native UUID
    • React Native Geolocation
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Native TypeScript
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - React JS Redux Training (1 Course, 4 Projects) Learn More