navigation.goBack function not working in React Native

Question

StackRoutes.tsx Component (used in App.tsx)

  export const StackRoutes = () => {
  const Stack = createNativeStackNavigator()

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={Path.introductionScreen}>
        <Stack.Screen
          name={Path.onBoardingChooseAliasScreen}
          options={Options.onBoardingChooseAliasScreen}
          component={OnBoardingChooseAlias}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Options.tsx component (being used in StackRoutes.tsx)

import React from 'react'
import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
import { CustomBackButton } from './CustomBackButton'
const onBoardingChooseAliasScreen: NativeStackNavigationOptions = {
   headerLeft: () => { return <CustomBackButton />} 
}
export default {
  onBoardingChooseAliasScreen,
}

CustomBackButton.tsx component (being used in Options.tsx)

import React from 'react'
import styled from 'styled-components/native'
import SVGimg from 'src/shared/images/greenMarker.svg'

export const CustomBackButton: React.FC<any> = ({ navigation }) => {
  return (
    <Wrapper onPress={() => navigation.goBack()}>
      <SVGimg />
    </Wrapper>
  )
}

const Wrapper = styled.Pressable``

The CustomBackButton gets displayed as desired, but the goBack() function doesnt work. If i use default back button it works, so i know there is a stack to fall back on.

How do I make the goBack function work?

B. Mohammad · Accepted Answer · 2022-09-21 14:50:46Z

2

It seems like CustomBackButton does not have access to navigation

can you try with useNavigation hook

import React from 'react'
import styled from 'styled-components/native'
import SVGimg from 'src/shared/images/greenMarker.svg'
import { useNavigation } from '@react-navigation/native';

export const CustomBackButton: React.FC<any> = () => {
  const navigation = useNavigation()
  return (
    <Wrapper onPress={() => navigation.goBack()}>
      <SVGimg />
    </Wrapper>
  )
}

const Wrapper = styled.Pressable``

answered Sep 21, 2022 at 14:50

B. Mohammad

2,4941 gold badge19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sushrut619 Over a year ago

This would be the recommended approach but if it does not work for you try passing in navigation prop explicitly. Or if you simply want to use a different icons for back button without changing the back behavior try using headerBackImageSource option.

Collectives™ on Stack Overflow

navigation.goBack function not working in React Native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related