React Native navigate using Touchable Opacity - react-native

Question

I want to make the Play button to navigate to the play screen. I created a an app class as the main file. Then in my cluster1, I am able to press a play button. But I don't know how to navigate the play button to the play class screen.
This is my App Class
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<AppNavigator/>
</View>
);}}
const AppNavigator = StackNavigator({
Cluster1: {
screen: Cluster1,
},
Play: {
screen: Play,
},
});
This is my Cluster1 Class
export default class Cluster1 extends Component{
static navigationOptions = {
title: 'Choose the Mood Cluster to listen',};
render(){
return(
<View>
<SectionList
renderItem={({item,index})=>{
return(
<SectionListItem item={item} index={index}> </SectionListItem>);}}
renderSectionHeader={({ section }) => {
return (<SectionHeader section={section} />);}}
sections={ClusterData}
keyExtractor={(item, index) => item.name}>
</SectionList>
</View>
);
}}
class SectionHeader extends Component {
render() {
const AppNavigator = StackNavigator({
Cluster1: { screen: Cluster1},
Play: { screen: Play},
});
return (
<View style={styles.header}>
<Text style={styles.headertext}>
{this.props.section.title}
</Text>
<TouchableOpacity onPress={() => {this.props.navigation.navigate('Play')}}> Play</TouchableOpacity>
</View>
);
}}
This is my Play class
export default class Play extends Component{
static navigationOptions = {
headerMode: 'none', };
render(){
return(
<View style={styles.container}>
<Text>Play Screen</Text>
</View>
);
}{
What do i add in for my touchableopacity statement?

Answer 1

You can use like this. Use navigation option to navigate the component
const AppNavigator = StackNavigator({
Cluster1: { screen: Cluster1},
Play: { screen: Play},
});
<TouchableOpacity onPress={() => {this.props.navigation.navigate('Play')}}> Play</TouchableOpacity>