With Navigation.push (v2 of react native navigation from wix) I am not getting props in destination component. How do I access props?

Question

I am passing props using Navigation.push then trying to get the props as seen below in destination component.

Result of attempt: I get 'image of undefined'

I am using redux in my react-native-app and redux is working correctly and I can see my data in other components. But when I do push and try to access the props in destination component I am seeing nothing.

All I get is componentId and rootTag in placeDetail component when I just console.log the props. What am I doing wrong?

 Navigation.push(this.props.componentId, { component: { name: "navigation.playground.PlaceDetailScreen" }, options: { topBar: { title: { text: selPlace.name } } }, passProps: { selectedPlace: selPlace } }); 

 const placeDetail = props => { console.log(props) return ( <View style={styles.container}> <View> <Image source={props.navigationselectedPlace.image} style={styles.placeImage} /> <Text style={styles.placeName}>{props.selectedPlace.name}</Text> </View> <View> <TouchableOpacity onPress={props.onItemDeleted}> <View style={styles.deleteButton}> <Icon size={30} name="ios-trash" color="red" /> </View> </TouchableOpacity> </View> </View> ); }; 

Answer 1

Inside your Navigation.push everything should be inside the component object.

like so:

You currently have the options and pass props outside of the component.

 Navigation.push(this.props.componentId, { component: { name: 'example.PushedScreen', passProps: { text: 'Pushed screen' }, options: { topBar: { title: { text: 'Pushed screen title' } } } } });