Tips for sending information back to the previous screen in React Native Navigation version 5

Question

Tips for sending information back to the previous screen in React Native Navigation version 5

Recently, I upgraded to react native navigation version 5 and now I am facing an issue with sending data back to the previous screen when making a goBack() call.

To navigate to the next view, I use:

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

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

After selecting an item from FlatList, I try to go back by using:

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

However, I get a warning about non-serializable values in the navigation state when sending functions as params. Can someone guide me on the correct way to achieve this?

javascript typescript react-native react-navigation react-native-navigation

Answer 1

Answer №1

Here is a sample implementation:

Screen A

const DisplayScreen1 = ({navigation, route}) => {
  const [selectedItem, setSelectedItem] = useState(null);

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

  const handleClick = () => {
    navigation.navigate('DisplayScreen2', {onUpdate: (selected) => {
      setSelectedItem(selected)
    }})
  }
  return (
    // Render components for Screen 1
  )
}

Screen B:

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

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

  const handleBackPress = () => {
    route.params.onReturn(selectedItem);
    navigation.goBack()
  }

  return (
    // Render components for Screen 2
  )
}

Answer 2

Here is a sample implementation:

Screen A

const DisplayScreen1 = ({navigation, route}) => {
  const [selectedItem, setSelectedItem] = useState(null);

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

  const handleClick = () => {
    navigation.navigate('DisplayScreen2', {onUpdate: (selected) => {
      setSelectedItem(selected)
    }})
  }
  return (
    // Render components for Screen 1
  )
}

Screen B:

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

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

  const handleBackPress = () => {
    route.params.onReturn(selectedItem);
    navigation.goBack()
  }

  return (
    // Render components for Screen 2
  )
}

Answer 3

Answer №2

transferring information to various screens through navigation.

onPress={() => {
          // Sending parameters back to the main screen
          navigation.navigate('Home', { post: postText });

refer to the official guide at React Native documentation

Answer 4

transferring information to various screens through navigation.

onPress={() => {
          // Sending parameters back to the main screen
          navigation.navigate('Home', { post: postText });

refer to the official guide at React Native documentation

Answer 5

Answer №3

I found myself drawn to this post because I needed to incorporate a common component into 2 different stacks. How can I efficiently navigate between the two and pass necessary parameters?

The solution I discovered involved initially passing a parameter to indicate the origin of component access. Instead of relying on goBack(), which doesn't support parameters, I opted to navigate to the previous route and include the parameter.

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

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

//within CommonComponent - utilize navigation.navigate instead of goback()

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

Answer 6

I found myself drawn to this post because I needed to incorporate a common component into 2 different stacks. How can I efficiently navigate between the two and pass necessary parameters?

The solution I discovered involved initially passing a parameter to indicate the origin of component access. Instead of relying on goBack(), which doesn't support parameters, I opted to navigate to the previous route and include the parameter.

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

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

//within CommonComponent - utilize navigation.navigate instead of goback()

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

Tips for sending information back to the previous screen in React Native Navigation version 5

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to execute an Nx executor function using Node.js?

Creating a worldwide directive using AngularJS

Connecting buttons to JavaScript functions that interact with MySQL database entries

Intersection Observer API is not compatible with the functionality of the navigation bar

AngularJS directive for jQuery Handsontable is a powerful tool for creating interactive

Looping through a set of API calls using JavaScript Web API

Managing all AJAX success events in one centralized location using jQuery

Ensuring the script waits for the complete loading of iframe prior to

elementToBeClickable is not supported by webdriverio

jquery selector to target an element nested inside an anchor tag

Save pictures in MongoDB using GridFS or BSON format

The header location functionality is not functioning properly on the live server

Focus Google Map on Selected Option using AngularJS

Creating a Dynamic Input Validation Range with JQuery

Guide on setting a wait while downloading a PDF file with protractor

How can I fully mock a component in an Angular Unit Test, rather than just a single class?

Having trouble configuring Jest for TypeScript integration

What is the process for using the scrollIntoView function on an svg element like a rectangle?

Exporting third party definitions from a TypeScript npm module for reuse in other projects

What is the best way to assign or convert an object of one type to another specific type?