Top (Segment-Bar | Tab-Bar) React-Native

Tabs /segmented control are for filtering a view and switching between related views. Screen components for each route are mounted immediately.

Material-top-bar-navigator

Each tab should contain content that is distinct from other tabs in a set. For example, tabs can present different sections of news, different genres of music, or different themes of documents.

There are multiple libraries out there to assist you with this:

Material-top-bar-navigator

React-native-tab-view

…and there are few more, I didn't bother to dig deep. Cause we're here for another reason, to make our own custom light-weight Segmented View.

Okay, hear me out please…

You can use all this fancy libraries but they come with a price specially if you have to merge them with other navigators or you want to contain screens without tab it can be a headache and totally impossible anddd a mess sometimes, believe me I'm taking from experience I had to add and remove all these from my projects multiple times cause of faced issues. So, in most cases it's better to make your own tab just with few views and you're good. But if your app doesn't have such complexities you should definitely go with third party libraries cause why rewrite all unnecessarily.

It's gonna be a bit easier than this.

Let's make a file Tabbar.js in your navigator folder, if you don't know what a navigator folder is you can study react-native app hierarchy.

const [index, setIndex] = useState('1');
onChangeIndex = (text) => {
setIndex(text)
}

on top of our functional/class component define a state, I'm using functional component so we defined a state to hold index of current tab and a function which takes index and update state on every tab click.

Now, let's define tabs, you can use touchableOpacity and other things to make it more realistic but we're gonna go as simple:

<View style={{ flex: 1 }}>
<View style={styles.mainContainer}>
<Text onPress={() => { onChangeIndex('1')}}
style={index === '1' ? styles.selectedIndex : styles.unselectedIndex}>
FIRST TAB
</Text>
<Text onPress={() => {onChangeIndex('2')}} 
style={index == '2' ? styles.selectedIndex : styles.unselectedIndex}>
SECOND TAB
</Text>
<Text onPress={() => {onChangeIndex('3')}} 
style={index === '3' ? styles.selectedIndex : styles.unselectedIndex}>
THIRD TAB
</Text>
</View >

We made a view and matched it's width to phone's width and added a text component as one tab. You can give your label to text component and now on you can add 2–3 more tabs, if you want more tabs than this you can make last tab image and inflate more tabs onClick.

onPress of each tab we updated the state to new index to change screens later.

//later in file add your stylesheet
const styles = StyleSheet.create({
selectedIndex: {
color: 'black',
fontSize: 14,
fontWeight: 'bold'
},
unselectedIndex:
{
color: 'gray',
fontSize: 14,
},
mainContainer:{
backgroundColor: Color.BACKGROUND_GRAY,
height: Platform.OS === 'android' ? '6%' : '5%',
width: width,
paddingLeft: '7%',
paddingRight: '7%',
flexDirection: 'row',
justifyContent: 'space-between',
alignContent: 'center',
alignItems: 'center',
}
});

You can see we've put a conditional statement for TextStyles in Text Component, well that's to highlight selected tab over other tabs, if the current tab is same as our state object we use SelectedStyle otherwise we use UnselectedStyle.

Now that we have tabs we can write conditions for screens:

//in bottom of our main View component
{
index === '1' &&
<FirstScreen navigation={props.navigation} />
}
{
index === '2' &&
<SecondScreen navigation={props.navigation} />
}
{
index === '3' &&
<ThirdScreen/>
}

Pretty basic, you can import all your screens or define it later in your file (not recommended, thou) and just use those exponents on basics of index. i.e. if index is 2 display second screen, if third tab is selected display third screen.

Here we're defining screens at bottom just for information purposes:

const FirstScreen()=>{
<View style={{ flex: 1, backgroundColor: ‘yellow’, justifyContent: ‘center’,alignItems:’center’ }}>
<Text> First Screen</Text>
</View>
}

Second Screen:

const SecondScreen()=>{
<View style={{ flex: 1, backgroundColor: ‘orange’, justifyContent: ‘center’,alignItems:’center’ }}>
<Text> Second Screen</Text>
</View>
}

Third Screen:

const ThirdScreen()=>{
<View style={{ flex: 1, backgroundColor: ‘blue’, justifyContent: ‘center’,alignItems:’center’ }}>
<Text> Third Screen</Text>
</View>
}

So here are our tabs simple, basic and effective.

P.S. If you need to add horizontal selector line below your tabs, you can use

<View style={{borderRadius:2}}/>

If you need only basic functionalities it's recommended you don't overwhelm your code with unnecessary libraries.

If you find any troubles following this tutorial or have any suggestions please comment down below.

And since you made it to the bottom, don't forget to drop a clap!!