React Native Swipeable Tab Navigation View Android iOS Tutorial

Tab Navigation View also known as TabNavigator View is a type of user swipeable view with multiple tabs activity inside it. React native developer can load – open multiple activities in a single view with each Tab holding a Activity. So each tab represents a single activity. So here is the complete step by step tutorial for React Native Swipeable Tab Navigation View for both android and iOS applications.

Contents in this project React Native Swipeable Tab Navigation View with multiple Activities :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add react-navigation library inside your project, To add this library Open your project using command prompt and type below command inside your react native project folder.

Example : My project name is Mainproject. First i am going into my Mainproject using cd command then inside that project folder i have to type the below command.

3. Add AppRegistry, StyleSheet, Platform and Text component inside the import block.

4. Import the TabNavigator module from react-navigation library.

5. Create a new class named as HomeClassActivity that extends the React.Component module. This would be our first Activity inside the Tab Navigator View.

6. Add static navigationOptions inside your HomeClassActivity and inside the static navigationOptions put the tabBarLabel : ‘ Your Tab Name ‘ . The tabBarLabel is used to set the individual tab name that shows on the screen.

7. Add render’s return block inside your HomeClassActivity and create Text component in it, to show the sample text on activity screen. This would be our First Tab Activity.

8. Now by following all the upper steps create another activity class named as SubjectClassActivity .

9. Create another activity named as CategoryClassActivity .

10. This step is very important for Tab Navigator project because now we would connect each tab with each activity using TabNavigator const object. Here Home indicates the HomeClassActivity , Subject indicates the SubjectClassActivity and Category indicates the CategoryClassActivity .

11. Add custom tab navigation style options in TabNavigator .

activeTintColor : Set the color of Tab Text while a tab is selected or activated.

fontSize : Set the Tab text font size.

backgroundColor : Sets the complete tab background color.

12. Create custom style sheet class for Text component.

13. Call the Mainproject using App Registry.

14. Complete source code for index.android.js / index.ios.js file

 

Screenshot in Android device :

Screenshot in iOS device :

tab

Tab Navigator Project Activity Calling Life Cycle:

8 Comments

  1. Hey dude, thanks for your tutorials, they are very interesting and helpful.

  2. how we make the tabs as per fetched data from the json

    • Amruta we have unique class for per tab view so just inside that class write your code.

      • Hi,
        Can we create aar/.Framework file for react native applications. i just want to use this react native aar/.Framework files in Android and iOS native applications. Is it possible to use react native aar file or .Framework in Native Android and iOS applications. Please share me your emailD, So that i can explain more on this. Thanks in advance.

  3. hello admin please try to solve
    when i was run project in ios then it will return error like this, its working file in android.

    Scanning folders for symlinks in E:\reactnative\tabvw\node_modules (36ms)
    Found Xcode project tabvw.xcodeproj

    spawnSync xcrun ENOENT

Leave a Reply

Your email address will not be published. Required fields are marked *