Menu
Hello guys I want to create stylish and custom bottom tab navigation in react native can anyone have any idea how to create this mention in above
741
Add icons to the tab bar To add icons to each tab, first import the Icon component from react-native-vector-icons library inside the navigation/TabNavigator/index. js file. For this example, let's use AntDesign based icons. // after other import statements import Icon from 'react-native-vector-icons/AntDesign';
To create a Bottom Tab Navigator using Material, we need to use the createMaterialBottomTabNavigator function available in the react-navigation library. It is designed with the material theme tab bar on the bottom of the screen.
Navigate to your header. js file and add the following lines of code. import React from "react"; import { View, Text, StyleSheet } from "react-native"; const Header = props => { return ( <View style={styles. containerHeader}> <View style={styles.
In React Navigation V5, there is a prop for Tab.Navigator component which you can pass whole custom bottom bar component
<Tab.Navigator tabBar={(props) => <CustomTabBar/>}>
<Tab.Screen .../>
</Tab.Navigator>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
