Search code examples
reactjsreact-nativereact-navigationstack-navigator

react native navigation params returns an react element


I'm using @react-navigation/native-stack, and when I attempt to pass a params from one screen to another, it returns a react element when I log the param.

I'm rendering the item in a flatlist which works fine the only problem is with the name:'CurrentMeet'

 <FlatList
            data={dummy_cards}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => (
              <>
                <TouchableOpacity
                  onPress={() =>
                    navigation.navigate("MyMeetEvents", {
                      name: "CurrentMeet",
                      item,
                    })
                  }
                >
                  <MeetInfoBlock
                    key={item.id}
                    meet_image={item.meet_image}
                    meet_location={item.location}
                    meet_title={item.title}
                    meet_datetime={item.datetime}
                    isTimed={item.isTimed}
                    events_count={item.events_count}
                    borderColor={Colors.secondaryColor}
                  />
                </TouchableOpacity>
              </>
            )}
          />

I receive the appropriate response for item

item--------------------------

"Object"{
   "datetime":"08:00 - 14:00, 12 Jan 2022",
   "events_count":14,
   "id":1,
   "isTimed":true,
   "location":"Seattle, WA",
   "meet_image":29,
   "title":"Mile Stone Sports Meet"
}```


***But for the name iam getting this***

name--------------------------

```"Object"{
   "$$typeof":"Symbol(react.element)",
   "_owner":"FiberNode"{
      "tag":0,
      "key":null,
      "type":[
         "Function MyMeetEvents"
      ]
   },
   "_store":"Object"{
      
   },
   "key":null,
   "props":"Object"{
      "title":"Current Meet",
      "type":"NavHeader"
   },
   "ref":null,
   "type":[
      "Function Header"
   ]
}```
 


 

Solution

  • If you are passing hard coded value CurrentMeet then it does not make sense to pass this key value pair info name: 'CurrentMeet' through parameter.

    Use directly to that screen...

    I hope you got my point!