state params undefined using react-navigation - react-native

Question

I can navigate to a screen but params are undefined, state is just:
{
key: "id-1574950261181-7",
routeName: "Video Player"
}
Navigate from:
render() {
const {
id,
title,
description,
video,
preview,
push,
dispatch,
testLink,
navigate
} = this.props;
return (
<TouchableHighlight
style={styles.episode}
activeOpacity={1}
underlayColor="#808080"
onPress={() => {
navigate("VideoPlayer", { tester: id });
}}
>
<View style={styles.title}>
<Text style={styles.text}>{title}</Text>
</View>
</TouchableHighlight>
);
}
My VideoPlayerScreen (for brevity) gives me :
import React from "react";
import {
...
} from "react-native";
...
...
class VideoPlayerScreen extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.onShare = this.onShare.bind(this);
this.navigateScreen = this.navigateScreen.bind(this);
this.bookmarkVideo = this.bookmarkVideo.bind(this);
this.loadRecapVideo = this.loadRecapVideo.bind(this);
}
....
render() {
const {
videos,
bookmarkVideo,
navigate,
state: {
params: { id }
}
} = this.props;
console.log(this.props.navigation.state.params);
let videoProps = videos.find(obj => obj.id == id);
return (<View />)
}
}
const mapDispatchToProps = dispatch => ({
bookmarkVideo: id => dispatch(bookmarkVideo(id))
});
const mapStateToProps = state => {
return {
videos: state.tcApp.videos
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(VideoPlayerScreen);

Answer 1

In case you are using react-native-navigation 4x you should change the props variable
from:
const {
...
navigate,
} = this.props;
to:
const {
...
navigation,
} = this.props;
and call it like:
onPress={() => {
navigation.navigate("VideoPlayer", { tester: id });
}}
Official Doc: React Native Navigation Docs
Friendly.