How to pass data back to previous screen in react native navigation v5?

Question

I just updated to react native navigation version 5. Now I am trying to send data back to previous screen on goBack() call.

I push next view with

const onSelectCountry = item => {
    console.log(item);
};

navigation.navigate('SelectionScreen', {
        onSelect: onSelectCountry});

And making move back after selecting item from FlatList with call:

function onSelectedItem(item) {
    route.params.onSelect(item);
    navigation.goBack();
}

But by sending function over with params I get a warning: Non-serializable valuse were found in the navigation state...

Can someone please tell me correct way to do this.

score 6 · Answer 1 · answered Mar 03 '20 at 09:31

6

heres is an implementaion

scereen A

const Screen1 = ({navigation, route}) => {
  const [item, setItem] = useState(null);

  useEffect(() => {
    navigation.addListener('focus', () => {
      console.log(route.params)
    })
  }, [])  

  const onPress = () => {
    navigation.navigate('Screen2', {onReturn: (item) => {
      setItem(item)
    }})
  }
  return (
    // Components
  )
}

Screen2:

const Screen2 = ({navigation, route}) => {

  useEffect(() => {
    navigation.addListener('focus', () => {
      console.log(route.params)
    })
  }, [])  

  // back Press
  const onPress = () => {
    route.params.onReturn(item);
    navigation.goBack()
  }

  return (
    // Components
  )
}

answered Mar 03 '20 at 09:31

Ashwith Saldanha

1,700
1
5
15

From which version is this, since route.params.onReturn(item); is causing me error with description "is not a function" and also I can't find anything in the documentation about it? – schmru Mar 03 '20 at 09:44
react navigation v5 – Ashwith Saldanha Mar 03 '20 at 09:53
onReturn is a parameter sent to screen2 which is a function – Ashwith Saldanha Mar 03 '20 at 09:55
it is not ther in documentation – Ashwith Saldanha Mar 03 '20 at 09:57
use navigation.navigate('SelectionScreen', {onSelect: (item) => setItem(item)}); – Ashwith Saldanha Mar 03 '20 at 09:58
before navigating back route.params.onSelect(item); navigation.goBack() – Ashwith Saldanha Mar 03 '20 at 09:59
Then as I already pointed out, I don't want to do that, since it is causing an warning – schmru Mar 03 '20 at 10:01
then u have to use Context, redux to handle this situation since there is no other way to send data while going back to previous screen – Ashwith Saldanha Mar 03 '20 at 10:12
what about cass components? – Aras Cglzn Mar 24 '20 at 17:19

score 0 · Accepted Answer · answered Mar 03 '20 at 08:53

0

navigation send data to screens.

onPress={() => {
          // Pass params back to home screen
          navigation.navigate('Home', { post: postText });

follow official documentation React Native

answered Mar 03 '20 at 08:53

Raushan Singh

1,070
1
9
18

Was trying to find a way to work with goBack() function, but it looks like this is the only way or using global state (something like Redux), which I don't want to do for this kind of data. Thanks anyway. – schmru Mar 03 '20 at 10:03

score 0 · Answer 3 · answered Jan 28 '21 at 13:35

I visited this post because I wanted to use the same common component in 2 stacks. How to know how to go back and pass params?

I solved it by passing first a parameter to go there, which will identify where the component is accessed from. Then, instead of using goBack(), which doesn't accept parameters, I navigate to the previous route and pass the parameter.

//in Stack1
navigation.navigate('commonComponent', isStack1: true)

//in Stack2
navigation.navigate('commonComponent', isStack1: false)

//in CommonComponent, instead of goback(), use navivation.navigate

function CommonComponent({ navigation, route }) {
  const {isStack1} = route.params
  const customRoute = isStack1 ? 'routeNameInStack1' : 'routeNameInStack2'
  return (
    <Button title="Go back" onPress={() => navigation.navigate('customRoute', {myParams: 'blabla...') />
  )
}

How to pass data back to previous screen in react native navigation v5?

3 Answers3