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

React Native non-serializable values were found in the navigation state

i’m trying to build an app and pass parameter to between pages. so i’m using to navigation. here PageOne code:

const PageOne=({navigation})=>{
...
onPress={_ => { navigation.navigate("PageTwo", { navigation }) }}>

PageTwo codes

const SettingsPage = ({route}) => {
const {navigation} = route.params

my code is working. i mean, i can use the navigation but getting yellow alert.

Tags:

2

Answers


  1. 0

    This happens when you are trying to pass a callback or something that is not serializable as a param when navigating to a new screen.
    in this case you don’t don’t need to pass navigation as a param, so replace this:
    navigation.navigate("PageTwo", { navigation }) with navigation.navigate("PageTwo")

    and in your SettingsPage, just do the following

    const SettingsPage = ({route}) => {
const navigation = useNavigation()

    or

    const SettingsPage = ({route, navigation}) => {
// you can get navigation from props if the component is a screen
    Login or Signup to reply.
  2. 0

    @RodSar’ answer really helps me, after a long troubleshoot. so i add this one, saving little time for anyone who needs :

    import {useNavigation} from '@react-navigation/native';

    you should import useNavigation before you can use it, as @Rodstar mentions :

    const SettingsPage = ({route}) => {
   const navigation = useNavigation()

   return ... // your codes here, as usual
}

    I wanna comment @RodSar but have not enough reputation, so i made this one new answer instead.

    SECOND METHOD

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

   return ... // your codes here, as usual
}

    or you can also destructure them like this

    const SettingsPage = properties => {
   const {route, navigation, yourAnotherProps} = properties

   return ... // your codes here, as usual
}

    the result will be same.
    AND ALSO you can type it with your properties.route.params if you’re passing parameters from previous screen

    const SettingsPage = properties => {
   const {route, navigation, parameter1, parameter2} = properties.route.params

   return ... // your codes here, as usual
}

    as far as what i tried, all working fine as long as you

    don’t pass any navigation as params, where-ever it is

    no more non-serializable-values-were-found-in-the-navigation-state yellow warn. thanks to @RodSar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search