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

react native navigation.goback is not a function

For Context, I am trying to learn React Native to build a small mobile application. I read over the docs at reactnavigation.org and got my basic structure set up, and then went on to follow this guide in order to add some functionality to the app.

At this point all I’m trying to do is have the ability to add elements to a list and have that list update. I am going to have the list data be populated via an API later on, but right now I just need to get it working with local user data before trying to add in API calls.

Most of the guide worked relatively well, however when I got to section 11, "using navigation parameters to update the state". The code to add to the list seems to work without issue, however, when I try to add in the navigation.goback() code, I run into issues.

First, I get the following warning:

WARN  Non-serializable values were found in the navigation state. Check:

Add Drink > params.addDrink (Function)

If I dismiss the warning and try to click the save icon, I get the following error:

 ERROR  TypeError: navigation.goBack is not a function (it is undefined), js engine: hermes

The button component I am using is as follows:

<FAB
    style={styles.fab}
    small
    icon='plus'
    onPress={() => navigation.navigate('Add Drink', {
    addDrink
    })}
/>

The state and ‘add drink’ function look like this:

  const [drinks, setDrinks] = React.useState([])

  const addDrink = drink => {
    drink.id = drinks.length + 1
    setDrinks([...drinks, drink])
  }

and the "add drink" screen, the state and save function look as follows:

function AddDrinkScreen(navigation) {

  const [drinkTitle, setDrinkTitle] = React.useState('')
  const [drinkValue, setDrinkValue] = React.useState('')

  function onSaveDrink() {
    navigation.route.params.addDrink({ drinkTitle, drinkValue })
    navigation.goBack()
  }
...
...

I have tried to keep it succinct, however, I have also made a pastebin that has the full code from each of the screens.

The main screen to display the list

The add drink screen

If anyone could help me figure out why I can’t call the navigate.goback() function after updating my list, that would be super helpful.

If anyone alternatively has any suggestions on a good place to learn modern ReactNative development, that would be grand as well – I come from a Python and Golang background, but for some reason react and especially react native are proving extremely difficult for me and I keep running into issues that take me days (or worse) to figure out.

Tags:

2

Answers


  1. 0

    in the AddDrinkScreen Change them passed parameter from (navigation) to ({navigation}). This should fix the issue

    function AddDrinkScreen({ route, navigation }) {
...
}
    Login or Signup to reply.
  2. 0

    one of the issue is the addDrink function is accepting one parameter and when calling the funtion youre passing two arguments.
    you need to fix that.

    navigation.route.params.addDrink({ drinkValue })

    Try it like that

    function AddDrinkScreen(props) {
   const {route, navigation} = props
   const { addDrink } = route?.params || {}; // Use optional chaining
   const [drinkTitle, setDrinkTitle] = React.useState('')

  function onSaveDrink() {
      addDrink({ drinkTitle, drinkValue })
      navigation.goBack()
     }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search