CODEWITHSUNDEEP
react-native
user9673740
user9673740

Reputation:

React Native navigate using Touchable Opacity

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?

Upvotes: 1

Views: 12019

Answers (1)

Prabhu
Prabhu

Reputation: 1057

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>

Upvotes: 1

Related Questions