React Native : TabBarIOS and Navigation

Question

I have simple app, with 3 tabs. Tabs are defined by TabBarIOS in index.ios. I’m not using Navigator nor NavigatorIOS. In each TabBarItem , I just put the component name in tags. Like this :

return(
        <TabBarIOS
        selectedTab={this.state.selectedTab}
        //unselectedTintColor="yellow"
        //tintColor="white"
        //barTintColor="darkslateblue"
        >

        <TabBarIOS.Item
        icon={{uri: 'courses.png', scale: 5}}
        title="Courses"
        badge={undefined}
        selected={this.state.selectedTab === 'courses'}
        onPress={() => {
          this.setState({
            selectedTab: 'courses',
          });
        }}>
        <Courses />
        </TabBarIOS.Item>

        <TabBarIOS.Item
        icon={{uri: 'register.png', scale: 5}}
        title="Register"
        badge={undefined}
        selected={this.state.selectedTab === 'register'}
        onPress={() => {
          this.setState({
            selectedTab: 'register',
          });
        }}>
        <NavigatorIOS
          //style={styles.nav}
          initialRoute={{
            title : 'Register',
            component: Register
          }}
        />
        </TabBarIOS.Item>

        <TabBarIOS.Item
        icon={{uri: 'profile.png', scale: 5}}
        title="Profile"
        badge={undefined}
        selected={this.state.selectedTab === 'profile'}
        onPress={() => {
          this.setState({
            selectedTab: 'profile',
          });
        }}>
        <Profile />
        </TabBarIOS.Item>


        </TabBarIOS>
      );

If you see in code, in first and third tab, i'm showing content of the item by puting component name in tags like

<Courses />

But for second item, i tried using navigatorios to show component, but it shows only a blank page with title. it doesn't show the content of component. i see lots of examples working like that, but it didn't work for me. maybe because i'm not using navigator or navigaatorios for index.ios , because in most examples i see, they put navigatorios for index and set initialroute. i tried it, but didn't work for me.

Everything works fine till here. In Courses page, I have a list view with items under it (actually items with header, which are collapsible) , when user clicks on each item , I need to redirect user to a page to show that course’s details. (I should pass some arguments also).

render(){

  return (
      <View style={{
        flex: 1
      }}>
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}
        style={styles.listView}
      />
      </View>
    );
  }
  renderRow(data) {

    var header = (
      <View>
          <View style={styles.rowContainer}>
            <View  style={styles.textContainer}>
              <Text style={styles.title}>{data.nid}</Text>
              <Text style={styles.description} numberOfLines={0}>{data.title}</Text>
            </View>
          </View>
          <View style={styles.separator}></View>
    </View>
    );
///////////
    var cid = [];
    var content = [];
    for(let x=0; x < Object.keys(data.course).length; x++){
      cid[x] = data.course[x].course_id;
      content.push(
        <TouchableHighlight
        underlayColor='#e3e0d7'
        key={x}
        onPress={()=> {
          this.rowPress(x); /////  here i need to redirect user to another page to show course's details
        }}
        style={styles.child}
        >
        <Text style={styles.child}>
        {data.course[x].title}
        </Text>
        </TouchableHighlight>
      );
    }
    var clist = (
      <View style={styles.rowContainer}>
      {content}
      </View>
    );
////////////
    return (
      <Accordion
        header={header}
        content={clist}
        easing="easeOutCubic"
      />
    );
  }

I want to redirect user to a page and show details, and i want to have a header title and a back button (like Navigator or NavigatorIOS).

I've found a sample app that is doing exactly what i'm looking for, but it's too complicated for me, that i didn't understand how it is working, react native tabbar-navigator (iOS)

I've looked into many examples and tutorials. i tried to implement their code into mine but it didn't work. Also find some other tutorials using redux, but it's so complicated and hard for me. i'm looking for something more simpler. Navigation using Redux

Looking forward to hearing from you, Any help is highly appreciated. Thanks in Advance!

Answer 1

I found out that when i have few scenes and i want to navigate between them , best practice is to use Navigator or NavigatorIOS.

I continue my app and did few more scenes and components ( with few levels going deep ) and i found out that Navigator or NavigatorIOS is not working properly for that purpose. Then i switched to NavigationExperimental and that was awesome. Then i had some problems in state management, i found out about redux. it was not easy at first, but when i start it, you will love it.

So for newbies like me, it's better to start with redux at first. that would make life much easier for you :)