Custom Tab Bar

Steps:-

1) Create two components/screens for two different tabs i.e. two main screens for tab navigation

Ex: –  First.js & Second.js

import React from 'react'

import { View, Text, StyleSheet } from 'react-native'

export const First = (props) => {

return(

 <View style={styles.container}>

   <Text>First</Text>

 </View>

 )

}

const styles = StyleSheet.create({

 container: {

  flex: 1justifyContent: 'center'alignItems: 'center',

 }

})
import React from 'react'

import { View, Text, StyleSheet } from 'react-native'




export const Second = (props) => {

return(

 <View style={styles.container}>

   <Text>Second</Text>

 </View>

 )

}

const styles = StyleSheet.create({

 container: {

  flex: 1, justifyContent: 'center', alignItems: 'center',

 }

})

2) Create Tabs component to warp above two screens in the tab bar 

Accept the props firstTab activeTab and secondTab and based on that write the conditions to change the tab and style for that imported from StyleTab File.

<View style={StyleTab.wrapper}>

     <TouchableOpacity

       style={

         props.activeTab === props.firstTab

           ? StyleTab.firstTabWrapperA

           : StyleTab.firstTabWrapperN

       }

       onPress={props.onPress}>

       <Text

         style={

           props.activeTab === props.firstTab

             ? StyleTab.activeTab

             : StyleTab.nonActiveTab

         }>

         {props.firstTab}

       </Text>

     </TouchableOpacity>

     <TouchableOpacity

       style={

         props.activeTab === props.secondTab

           ? StyleTab.secondTabWrapperA

           : StyleTab.secondTabWrapperN

       }

       onPress={props.onPress}>

       <Text

  style={

           props.activeTab === props.secondTab

             ? StyleTab.activeTab

             : StyleTab.nonActiveTab

         }>

         {props.secondTab}

       </Text>

     </TouchableOpacity>

   </View>

3) Styles for Tab change is imported from the StyletTab file

Here all styles for the wrapper and both tabs are defined for tab navigation 

4) Create one function to change the tabs on the main screen (Screen where the Tab bar needs to be shown)

const changeTab = () => {

   if (activeTab === 'First') {

     setactiveTab('Second');

   } else {

     setactiveTab('First');

   }

 };

5) Create another function to render the First and Second screens

Render the first and second screen component in a renderTab function according to activeTab conditions.

const renderTabs=()=> {

   if (activeTab === 'First') {

     return <First />;

   } else {

   return <Second />;

   }

 }

6) Import Tabs file render below function in necessary screen

 Pass the required props to the Tabs component i.e. activeTab firstTab and secondTab then call the changeTab function on on press. 

<View style={container}>

     <Tabs

       activeTab={activeTab}

       firstTab="First"

       secondTab="Second"

       onPress={changeTab}

     />

     {renderDashboard()}

   </View>

Content Team

This blog is from Mindbowser‘s content team – a group of individuals coming together to create pieces that you may like. If you have feedback, please drop us a message on contact@mindbowser.com

Keep Reading

Keep Reading

  • Service
  • Career
  • Let's create something together!

  • We’re looking for the best. Are you in?