Custom Tabs in React Native

create custom React Native tabs without react-navigation

Summary

if you want to create custom tabs like in React without any external libraries like react navigation

In this article, you will learn how to create a reusable tab component in a very simple manner.

Create Project

First, you have to create React Native project by using this link

Setting up the development environment · React Native

if you are using expo environment use this link to get started

https://docs.expo.dev/get-started/create-a-new-app/

Now your simple projects is created so let start with tabs

Step 1

Now create tab.js file by using this code

import React, {useEffect, useState} from 'react';
import TabPane from './TabPane';
import {View, TouchableOpacity, StyleSheet, Text} from 'react-native';
const Tabs = props => {
const {
children,
activeStyle,
inActiveStyle,
activeText,
inActiveText,
containerStyle,
} = props;
const [tabHeader, setTabHeader] = useState([]);
const [childContent, setChildConent] = useState({});
const [active, setActive] = useState('');
useEffect(() => {
const headers = [];
const childCnt = {};
React.Children.forEach(children, element => {
if (!React.isValidElement(element)) return;
const {name} = element.props;
headers.push(name);
childCnt[name] = element.props.children;
});
setTabHeader(headers);
setActive(headers[0]);
setChildConent({...childCnt});
console.log(childCnt);
}, [props, children]);
const changeTab = name => {
setActive(name);
};
return (
<View>
<View style={containerStyle}>
{tabHeader.map(item => (
<TouchableOpacity
onPress={() => changeTab(item)}
key={item}
style={[item == active ? activeStyle : inActiveStyle]}>
<Text style={[item == active ? activeText : inActiveText]}>
{item}
</Text>
</TouchableOpacity>
))}
</View>
<View>
{Object.keys(childContent).map(key => {
if (key === active) {
return <View>{childContent[key]}</View>;
} else {
return null;
}
})}
</View>
</View>
);
};
Tabs.propTypes = {
children: function (props, propName, componentName) {
const prop = props[propName];
let error = null;
React.Children.forEach(prop, function (child) {
if (child.type !== TabPane) {
error = new Error(
'`' + componentName + '` children should be of type `TabPane`.',
);
}});
return error;
},
};
export default Tabs;

Step 2

For validation a React Component that allows a specific type of component, you can use prop-types

Create TabPane.

import React from ‘react’;
import PropTypes from ‘prop-types’;
import {View, Text} from ‘react-native’;
const TabPane = props => {
return <View>{props.childern}</View>;
};
TabPane.propTypes = {
name: PropTypes.string,
};
export default TabPane;

Step 3

You are almost there. It's the final step toward your custom tab.

Import Tab.js and TabPane.js in your App.js file.

write this code in return

<Tabs
containerStyle={{
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
activeStyle={{
backgroundColor: 'black',
padding: 4,
paddingHorizontal: 10,
borderRadius: 5,
}}
inActiveStyle={{color: 'black'}}
activeText={{color: 'white'}}
inActiveText={{color: 'black'}}>
<TabPane name="Overview" key="1">
This is tab 1
</TabPane>
<TabPane name="Booking" key="2">
This is tab 2
</TabPane>
<TabPane name="Schedule" key="3">
This is tab 3
</TabPane>
</Tabs>

Congratulations 🎊 you created reusable tab Component.

You can customize it according to your need

If you want to use this in React Js this blog can help you.

How to Create a Custom Tab Component by Using React

you can contact me if you need any help

ibadurrehman78@gmail.com