Question 234699 in React native Question posted in
The official React Native documentation can be found here.

React Native – Header Back Button in a Bottom Tab Navigator

Basically I am trying to add a simple back arrow button to the header for the Signup component / screen in my app, similar to the one seen in the image below (https://phpout.com/wp-content/uploads/2023/08/zTwKp.png)
example image
However, I cannot seem to get anything to work. I have tried adjusting the headerLeft property but I believe it may have something to do with the fact that I am using a Bottom Tab Navigator rather than a Stack Navigator.

Below is the App.js code in question.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { useState } from 'react';

import Index from './src/Index';
import Signup from './src/Signup';

const Tab = createBottomTabNavigator();

export default function App() {
  const [token, setToken] = useState(null);

  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName={token ? "Home" : "Index"}>
        <Tab.Screen name="Index" component={Index} />
        <Tab.Screen name="Signup" component={Signup} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

I am open to any feedback / suggestions as I am at a point where I am simply lost and don’t know what my exact issue is.

Tags:

2

Answers


  1. 0

    Implement a custom back button as below :

    
import * as React from 'react';
import { Text, View,TouchableOpacity } from 'react-native';
import { NavigationContainer,useNavigation, } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons'; 

function IndexScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen content</Text>
    </View>
  );
}

function SignupScreen() {

 
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text> Signup form here</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

const BackButton = ({onPress})=> <TouchableOpacity style={{alignItems:"center",flexDirection:"row",justifyContent:"center"}}>
<Ionicons name="chevron-back" size={24} color="black" />
 <Text onPress={onPress}> Back </Text>
 </TouchableOpacity>
 
function MyTabs() {
  const {goBack} = useNavigation()

  return (
    <Tab.Navigator screenOptions={({route})=> {

      const isIndex =  route.name === 'Index'
      
      return ({ headerLeft:()=> isIndex ? null : < BackButton onPress={goBack}/> }) }}>
      <Tab.Screen name="Index"  component={IndexScreen} options={{headerShown:false,}} />
      <Tab.Screen name="Signup" component={SignupScreen} options={{headerTitle:"Addresses de livraison"}} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

    Demo – https://snack.expo.dev/@emmbyiringiro/bottom-tabs-navigator-%7C-react-navigation?platform=android

    Login or Signup to reply.
  2. 0

    You can simply do this by headerBackImage property if you’re using <Stack.Screen>

    <Stack.Screen
    options={({route}) => ({
    headerBackImage: () => (
        <Icon
          name="chevron-back-outline"
          size={25}
        />
      ),
    })}
    name={ROUTENAME}
    component={Signup}
  />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search