CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigationjsx
Anu
Anu

Reputation: 1742

How to do conditional navigation in react native?

Hello I'm trying to do conditional navigation in react native.In my project I'm listing a set of courses and categories as a result of an api fetch request.So after clicking on each course/category it will navigate to different screens.So What I want is on clicking on the courses in first screen I will get the type of currently selected item that whether it is course or category. So if selected item is couse I want to navigate to UnitListing screen and if it is category I want to navigate to ChapterListing screen.How is it possible?

updated 

navigatetoPage = (category) =>{

      const page = category.type == "course" ? "UnitListing" : "ChapterListing";
       this.props.navigation.navigate(page, {
              id: category.id,
              type: category.type
       })

 }
render(){
  return(
    <View style={st.main_outer}>
            {this.state.cats.map(category =>

                                 <TouchableOpacity
  style={st.btn} onPress={() => this.navigatetoPage({category})}>
  <Text style={{ color: "#fff" }}>View Course</Text>
</TouchableOpacity>
                                 )}
  </View>
  );
}

How do I do conditional navigation here? Please help me to find a solution.

Upvotes: 2

Views: 5572

Answers (1)

Nazır Dogan
Nazır Dogan

Reputation: 1588

you can check type like this way and navigate also you can do in jsx. but this is much cleaner

 navigatetoPage(data){
    const page = data.type == "course" ? "UnitListing" : "ChapterListing";
     this.props.navigation.navigate(page, {
            id: data.id,
            type: data.type
     }) 
 }
 
 <TouchableOpacity
  style={st.btn} onPress={() => this.navigatetoPage(data)}>
  <Text style={{ color: "#fff" }}>View Course</Text>
</TouchableOpacity>

Upvotes: 3

Related Questions