Create a custom footer in React native

Here, we are going to create a custom footer on React native

Install the library

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

create a JSX element createBottomTabNavigator

Function that returns a React element to display as the tab bar.

const Tab = createBottomTabNavigator();

and Return a navigation Container who wraps the tab.navigator

const TabStack = () => {
  return (
      <NavigationContainer>
        <Tab.Navigator
          tabBar={props => <FooterContainer {...props} />} //This line returns custom footer
          screenOptions={{headerShown: false}}}> //avoid unwanted header
          <Tab.Screen name="LoggedStack" component={LoggedStack} />
        </Tab.Navigator>
      </NavigationContainer>
  );
};

The Core of navigation is ready, lets get into the Code:

This is the minimal use of custom footer , you need to refactor the code and add features that you plan to develop

import {Text, TouchableOpacity, View} from 'react-native';
import React, {useEffect, useState} from 'react';

const Footer = props => {
  const {state, descriptors, navigation} = props;

  const [active, setActive] = useState(0);

  const item = [
    {id: 1, value: 'apple', label: 'apple'},
    {id: 2, value: 'Orange', label: 'Orange'},
    {id: 3, value: 'Grapes', label: 'Grapes'},
    {id: 4, value: 'more', label: 'more'},
  ];

const _getIcon = value => {
    const isActive =
      active == value?.value ? 'blue' : 'light-Blue';
    switch (value?.value) {
      case 'apple':
        return <YourSvg fill={isActive} />;
      case 'Orange':
        return <YourSvg fill={isActive} />;
      case 'Grapes':
        return <YourSvg fill={isActive} />;
      case 'more':
        return <YourSvg fill={isActive} />;
    }
  };

  const ItemRender = ({value}) => {
    const _navigate = value => {
      if (value == 'More') {
        ActionSheetPopUp();
      } else {
        setActive(value);
        navigation.navigate(value);
      }
    };

    return (
      <TouchableOpacity
        key={value.id}
        style={styles.footerButton}
        onPress={() => _navigate(value.value)}>
        {_getIcon(value)}
        <Text style={styles.buttonText}>{value.label}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.footer}>
      {item.map((item, index) => {
        return <ItemRender key={index} value={item} />;
      })}
    </View>
  );
};

/**
styles
footer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 70,
    padding: SPACING,
    backgroundColor: "blue", // Set your preferred background color
  },
*/

export default Footer;

Bottom Tabs Navigator | React Navigation

React Native fixed Footer with React Navigation

Our merchanties:

Gold Color Classic Exquisite Blue Red Evil Eyes Bracelets Adjustable C

Happy coding…