How to pass params in React Native Navigation for the goBack() function

Question

I know this is a stupid question. I have a component lets call it Component that is used in several screens for Example Screen1,Screen2,... And in the Component I am navigating to a new Screen when the user click a button, lets call it ImagePicker.

my Question is how do I go back and pass a parameter( in this case image data) and get it back in the Component

I tried using navigation.goBack({img: image}) but that didn't work. I also can't use navigation.navigate('Screen') since my functions are in the Component component.

So what is the best solution for my problem ?

MK28 · Accepted Answer · 2024-10-26 00:17:12Z

4

We cannot pass any params to the goBack method.

If we have to do so then, we can use the navigate method to navigate to the back screen, and using this method we can pass the params to the previous screen.

With navigation.navigate, you can navigate to the desired screen and pass data through parameters. On the target screen, you can access this data via route, specifically using route.params to retrieve the passed values.

For ex.

navigation.navigate('PrevScreenName', {key: value})

// PrevScreenName
function PrevScreenNameFunction({route, others}) {
    const { key } = route.params;
 }

Check out the official docs for the react-navigation.

React Navigation

edited Oct 26, 2024 at 0:17

MK28

33 bronze badges

answered Jul 6, 2021 at 13:17

Jignesh Mayani

7,2551 gold badge24 silver badges37 bronze badges

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

Comments

Matthieu Bouxin · Accepted Answer · 2021-07-06 13:12:11Z

0

If I understand your problem well, just do navigation.navigate('Screen', {img: image}) instead of navigation.goBack({img: image}) and it should work

answered Jul 6, 2021 at 13:12

Matthieu Bouxin

1271 silver badge5 bronze badges

2 Comments

SDB_1998 Over a year ago

But I have several screens that navigate through the Component. So, I cant call one by its name

Matthieu Bouxin Over a year ago

In this case two solutions : you add a param when you navigate to the picker to tell it where to navigate back or you mount your picker in a full screen modal and add a callback as proposed by Mike M

sana arshed · Accepted Answer · 2024-12-13 04:08:56Z

I have been struggling to find the correct solution to this problem. For instance, using a callback is not recommended and is an inefficient approach. However, I have finally identified the right solution, which, interestingly, was already mentioned in the React Navigation documentation. The solution is navigate.popTo("screen name", {params}), which effectively performs the "navigate back" action. I'm unsure why it does not appear in IntelliSense or suggestions—it could be in a trial phase or something similar.

Anyway, here is the link and the relevant code: React Navigation Docs: https://reactnavigation.org/docs/params/?config=dynamic#passing-params-to-a-previous-screen

function HomeScreen({ route }) {
  const navigation = useNavigation();

  // Use an effect to monitor the update to params
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
      alert('New post: ' + route.params?.post);
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.navigate('CreatePost')}>
        Create post
      </Button>
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ route }) {
  const navigation = useNavigation();
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        onPress={() => {
          // Pass params back to home screen
          navigation.popTo('Home', { post: postText });
        }}
      >
        Done
      </Button>
    </>
  );
}

Mike M · Accepted Answer · 2021-07-07 17:51:10Z

-1

In the component code, I would pass along a callback function to the image picker screen

handleImageData = (data) =>
{
   // do whatever
}
...
navigation.navigate('ImagePickerScreen',{mycallback:this.handleImageData});

and then in the screen code just call it like

this.props.route.params.mycallback(data);
navigation.goBack();

edited Jul 7, 2021 at 17:51

answered Jul 6, 2021 at 13:10

Mike M

4,4561 gold badge31 silver badges50 bronze badges

5 Comments

SDB_1998 Over a year ago

But I have to implement this function in all Screens correct ?

SDB_1998 Over a year ago

I created a callback function but I cant pass it in navigation

Mike M Over a year ago

I misunderstood your question, but the same idea applies. You can pass in the callback from the component to the screen as in navigation.navigate('ImagePicker',{mycallback:handleImageData}

Mike M Over a year ago

In the image picker screem, you'd reference it like this.props.route.params.mycallback(imageData)

TlmaK0 Over a year ago

This can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See reactnavigation.org/docs/troubleshooting/…

Collectives™ on Stack Overflow

How to pass params in React Native Navigation for the goBack() function

4 Answers 4

Comments

2 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related