I can't go back to previous screen with navigation.goBack() in react-native

user_16545593 0
Viewed 1985

I have the Profile tab with it's children. From ChildA I navigate to ChildB, but when I'm trying to go back to Profile, it won't work. I have tried navigation.goBack(null) and useNavigation() hook but without any luck. This is the code I have so far:

ChildA

const ChildA = ({navigation}) =>{
 const onClick = (item) =>{
        navigation.navigate("ChildB",{
            photo:item.uri
        })
    }

return (
        <View style={styles.container}>
            <FlatList
                data={images}
                numColumns={2}
                showsVerticalScrollIndicator={false}
                style={styles.list}
                contentContainerStyle={{ alignItems: 'center', }}
                renderItem={({ item }) => (
                    <TouchableOpacity onPress={()=>onClick(item)}>
                    <Image
                        source={item}
                        style={styles.listItem}
                        keyExtractor={(item) => item.key}
                    />
                    </TouchableOpacity>
                )}
            />

        </View>
    )
}

ChildB

const ChildB = ({ navigation, route }) => {
    console.log(route.name)
    const {photo} = route.params
    const DEVICE = Dimensions.get("screen")
    return (
        <View style={styles.container}>
            <BackButton onPress={()=>navigation.goBack()} />
            <Image source={{ uri: photo }} style={{ width: DEVICE.width, height: DEVICE.height / 2 }} />
            <Text>This is the comments section</Text>
        </View>
    )
}
    const styles = StyleSheet.create({
    container: {
        flex: 1,
        position: 'absolute'
    }
})

App.jsx

function Navigation(): JSX.Element {
  return (
    <Tab.Navigator
      shifting={false}
      activeColor="#315399"
      // inactiveColor="#3e2465"
      barStyle={{ backgroundColor: "white" }}>
    
      <Tab.Screen
        name="TabA" />
          ),
        }}
        component={TabA}
      />
      <Tab.Screen
        name="TabB" />;
          },
        }}
        component={TabB}
      />
      <Tab.Screen
        name="Profile" />
          ),
        }}
        component={Profile}
      />

    
    </Tab.Navigator>
  );
}


const Tab = createMaterialBottomTabNavigator();
const Stack = createStackNavigator();


function App(): JSX.Element {

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
       
        {/* Auth Navigator: Include Login and Signup */}
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ headerShown: false }}
        />
        <Stack.Screen
        name="Register"
        component={Register}
        options={{headerShown:false}}
        />
        <Stack.Screen name="ChildB" 
        component={ChildB} 
        options={{headerShown:false}}/>
         <Stack.Screen
        name="ForgotPassword"
        component={ForgotPassword}
        options={{headerShown:false}}
        />
      
        <Stack.Screen
          name="Navigation"
          component={Navigation}
          // Hiding header for Navigation Drawer
          options={{headerShown:false}}
          // options={({ route }) => ({
          //   headerTitle: getHeaderTitle(route),
          // })}
        />
       
      </Stack.Navigator>
    </NavigationContainer>
  );
}

How can I go back from ChildB to Profile? I'm new to react-native so any advice would be appreciated!

react-navigation react-native-navigation react-native
1 Answers

I have managed to make it work by passing the navigation as prop instead of the simple function prop I was using.Since I was using a customised back button, the prop function wasn't triggered from screen to stack, only between screens(e.g from Register back to Login).

BackButton before:

export default function BackButton({goBack}) {
  
  return (
    <TouchableOpacity onPress={goBack} style={styles.container}>
     <FontAwesomeIcon icon={faArrowLeft}/>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 10 + getStatusBarHeight(),
    left: 4,
    zIndex:1
  },
  image: {
    width: 24,
    height: 24,
  },
})

and used it in another component by passing the prop navigation to that component and then passing the navigation.goBack to the goBack from BackButton:

const componentA = ({navigation})=>{

return(
<View>
<BackButton goBack={navigation.goBack}
</View>
)}

BackButton working:

export default function BackButton({navigation}) {
 
  return (
    <TouchableOpacity onPress={navigation.goBack} style={styles.container}>
     <FontAwesomeIcon icon={faArrowLeft}/>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 10 + getStatusBarHeight(),
    left: 4,
    zIndex:1
  },
  image: {
    width: 24,
    height: 24,
  },
})

and Component:

const componentA = ({navigation})=>{

return(
<View>
<BackButton navigation={navigation}
</View>
)}
user_165455930
Related