CODEWITHSUNDEEP
react-nativereact-native-navigationreact-navigation-v5
SDB_1998
SDB_1998

Reputation: 365

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

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 ?

Upvotes: 1

Views: 10955

Answers (4)

sana arshed
sana arshed

Reputation: 41

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>
    </>
  );
}

Upvotes: 0

Jignesh Mayani
Jignesh Mayani

Reputation: 7213

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

Upvotes: 4

Mike M
Mike M

Reputation: 4436

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();

Upvotes: -1

Matthieu Bouxin
Matthieu Bouxin

Reputation: 127

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

Upvotes: 0

Related Questions