how to create navigation react native?

Question

I have an app with carousel screen (when I run app) and map screen on Map screen I have bottom navbar with 2 tabs: tab1 and tab2. once I click tab1 -> I wanna option title='tab1' on the top navbar. same with tab2.

this is Root Navigator:

  <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#C70066' } }}>
      <Stack.Screen name="Carousel" component={CarouselScreen} />
      <Stack.Screen
        name="Main"
        component={TabNavigator}
      
      />
   </Stack.Navigator>

and TabNavigator is this:

<Tab.Navigator tabBar={TabBar} >
  <Tab.Screen
    name="Tab1"
    component={Screen1}
    options={{
      tabBarAccessibilityLabel: "Tab1",
    }}
  />
  <Tab.Screen
    name="Tab2"
    component={Screen2}
    options={{
      tabBarAccessibilityLabel: "Tab2",
    }}
  />
</Tab.Navigator>

It should look like this:

Also I need to style Stack.Navigator and add icons + dropdown; I added the only background color, how to style the rest?

Answer 1

You can add styling and icons to your tab navigation like this

 <Tab.Screen name="Tab1" component={Screen1} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={require("../assets/icons/transaction.png")} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? '#C70066': 'gray', }} /> <Text style={{ color: focused? 'red': 'yellow', }}> Tab1 </Text> </View> ), }} />

Bellow, I will show the code on how I add my custom Tab Navigations, and you can see that I keep my tab navigations separately in a file "tabs.js" in a folder called "navigation" (./app/navigation/tabs)

 import React from 'react'; import {View, Image, TouchableOpacity, Text, StyleSheet} from 'react-native'; import { createBottomTabNavigator, BottomTabBar, } from '@react-navigation/bottom-tabs'; import LinearGradient from 'react-native-linear-gradient'; import {Home} from '../screens'; import {COLORS, FONTS, icons} from '../constants'; const Tab = createBottomTabNavigator(); const TabBarCustomButtom = ({children, onPress}) => { return ( <TouchableOpacity style={{ top: -30, justifyContent: 'center', alignItems: 'center', ...styles.shadow, }} onPress={onPress}> <LinearGradient colors={[COLORS.primary, COLORS.secondary]} style={{width: 70, height: 70, borderRadius: 35}}> {children} </LinearGradient> </TouchableOpacity> ); }; const Tabs = () => { return ( <Tab.Navigator tabBarOptions={{ showLabel: false, style: { position: 'absolute', bottom: 0, left: 0, right: 0, elevation: 0, backgroundColor: COLORS.white, borderTopColor: 'transparent', height: 100, }, }}> <Tab.Screen name="Home" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.home} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? COLORS.primary: COLORS.black, }} /> <Text style={{ color: focused? COLORS.primary: COLORS.black, ...FONTS.body5, }}> HOME </Text> </View> ), }} /> <Tab.Screen name="Portfolio" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.pie_chart} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? COLORS.primary: COLORS.black, }} /> <Text style={{ color: focused? COLORS.primary: COLORS.black, ...FONTS.body5, }}> PORTFOLIO </Text> </View> ), }} /> <Tab.Screen name="Transaction" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.transaction} resizeMode="contain" style={{ width: 30, height: 30, tintColor: COLORS.white, }} /> </View> ), tabBarButton: (props) => <TabBarCustomButtom {...props} />, }} /> <Tab.Screen name="Prices" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.line_graph} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? COLORS.primary: COLORS.black, }} /> <Text style={{ color: focused? COLORS.primary: COLORS.black, ...FONTS.body5, }}> PRICES </Text> </View> ), }} /> <Tab.Screen name="Settings" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.settings} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? COLORS.primary: COLORS.black, }} /> <Text style={{ color: focused? COLORS.primary: COLORS.black, ...FONTS.body5, }}> SETTINGS </Text> </View> ), }} /> </Tab.Navigator> ); }; const styles = StyleSheet.create({ shadow: { shadowColor: COLORS.primary, shadowOffset: { width: 0, height: 10, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, }, }); export default Tabs;

this is Root Navigator:

 import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; import {NavigationContainer} from '@react-navigation/native'; import Tabs from './app/navigation/tabs'; const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerShown: false, }} initialRouteName={'Home'}> <Stack.Screen name="Home" component={Tabs} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;