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.

score 0 · Answer 1 · answered Oct 21 '20 at 14:53

0

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

answered Oct 21 '20 at 14:53

Wets

180
1
11

I'm looking for something like https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaroptions ... but not sure how to implement the same – R.K Oct 21 '20 at 15:15
@R.K Here is showing how to add an onPress event to the tabbar: https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar so mb try this one. To add custom icons you need to create a font with them. So use this website: https://fontello.com/ or this one: https://icomoon.io/app/#/select . You need to rebuild or your tabbar to implement what you want to do. Read more React Navigation docs, cause they give a lot of useful information – Wets Oct 21 '20 at 15:27

score 0 · Accepted Answer · answered Oct 24 '20 at 06:08

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>
      );

Hey can u check this question its something related? https://stackoverflow.com/questions/65792242/how-to-make-custom-tabbar-react-navigation — Oliver D, Jan 19 '21 at 13:49
@OliverD... yes the question is related... You have to follow the same solution mentioned here... — R.K, Jan 28 '21 at 18:13

How to add screen to custom bottom navigation in react native

2 Answers2