How to add screen to custom bottom navigation in react native

Question

I'm new to react native and trying to design a custom Bottom navigation bar as shown here (Source code)

The tab bar design is successfully created, but I am confused about how to change screens on button click. Basically, I cannot understand how to connect the React Native Navigation Component to this custom bottom tab bar.

I'm looking forward to using React navigation custom navbar support... but not sure how to implement the same.

Please help.

Thanks in advance.

Answer 1

React Navigation Docs are really helpful. Check out my solution here.

The solution is to just add a reference of the custom tab bar design in the usual navigator definition and pass the state, descriptors, navigation props from the Navigator to the custom design as shown below.

/components/BottomBar/index.js: Define the navigation model and use Tabbar as custom design.

import * as React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View } from "react-native";
import  TabBar  from "./Tabbar";
import Screen1 from "../../screens/Screen1";
import Screen2 from "../../screens/Screen2";


export const BottomMenu = () => {
  const Tab = createBottomTabNavigator();
  return (
    
    <View style={{ flex: 1, position: "relative",  justifyContent: 'flex-end'}}>
    
      <Tab.Navigator
        tabBar={(props) => <TabBar {...props} />}
      >
        <Tab.Screen name="screen1" component={Screen1} />
        <Tab.Screen name="screen2" component={Screen2} />
        <Tab.Screen name="screen3" component={Screen1} />
        <Tab.Screen name="screen4" component={Screen2} />
      </Tab.Navigator>     
  
    </View>
   
  );
};

/components/BottomBar/TabBar.js: Pass the navigator props to the static tab bar along with the custom icon details.

const { state, descriptors, navigation } = this.props
 :
<StaticTabbar {...{ tabs, value, state, descriptors, navigation }} />  

/components/BottomBar/StaticTabbar.js: Using the props display the items in the tab bar

    const { tabs, value } = this.props;
    const { state, descriptors, navigation } = this.props
    
    return (
      <View style={styles.container}>
        {
          state.routes.map((route, index) => {
            const { options } = descriptors[route.key];
            const tabOption = tabs[index];
              :               
            const key = index;
            return (
              <React.Fragment {...{ key }}>
                <TouchableWithoutFeedback onPress={() => onPress(index)}>
                  <Animated.View style={[styles.tab, { opacity }]}>
                    <Icon name={tabOption.name} color="white" size={28} />
                    <Text style={{ fontSize: 11, color: 'white' }}>{tabOption.text}</Text>
                  </Animated.View>
                </TouchableWithoutFeedback>
                <Animated.View
                  style={{
                    position: "absolute",
                    top: -7,
                    left: tabWidth * index,
                    width: tabWidth,
                    height: 64,   // Tab bar height
                    justifyContent: "center",
                    alignItems: "center",
                    opacity: opacity1,
                    transform: [{ translateY }],
                  }}
                >
                  <View style={styles.activeIcon}>
                    <Icon name={tabOption.name} color="#004c40" size={25} />
                  </View>
                </Animated.View>
              </React.Fragment>
            )
          })}
      </View>
      );

Answer 2

I've never tried to do that, but you probably can do that by using default stack navigator: https://reactnavigation.org/docs/navigating So, what is the idea. You create 5 different screens and on each of them make a copy of this tabbar. Then you write a conditional statement for every possible case with navigation.navigate prop. I think this is the only way, but I don't know how that will affect the performance of the app