React-Native Navigation without render command

Question

Is there anyway to redirect user to a different component (also passing arguments with it) without calling render function?

almost in all tutorials i found, they use sameway :

render() {
return (
  <NavigatorIOS
    style={styles.container}
    initialRoute=\{\{
      title: 'first',
      component: First
    }} />
);

}

Now see my code : in renderRow , for touchablehighlights , i need to be able to redirect user to a page with an argument, (in this case i need to send user to component CourseDetail with argument of course_id, so i can show user course's details)

class Courses extends Component {

  constructor(props) {
        super(props);
        this.state = {
          dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          }),
          loaded: false,
        };
    }

  fetchData() {
    // fetching data here
  }

  componentDidMount() {
    this.fetchData();
  }

  render(){
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <View style={{
        flex: 1
      }}>
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        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={()=>{console.log(cid[x]);}} //// i need to navigate user to a page with passing arguments (course_id in this case)
        style={styles.child}
        >
        <Text style={styles.child}>
        {data.course[x].title}
        </Text>
        </TouchableHighlight>
      );
    }
    console.log(cid);
    var clist = (
      <View style={styles.rowContainer}>
      {content}
      </View>
    );
////////////
    return (
      <Accordion
        header={header}
        content={clist}
        easing="easeOutCubic"
      />
    );
  }

  renderLoadingView() {
    return (
      <View style={styles.loading}>
        <Text style={styles.loading}>
          Loading Courses, please wait...
        </Text>
      </View>
    );
  }
}

module.exports = Courses;

Thanks in Advance!

Have you tried `this.props.navigator.push({ component: Component })` in the onPress function with component being the component you want to push? — Nader Dabit, Jul 07 '16 at 13:46
Thanks for your response. I see it in few tutorials but i wasnt sure if it will work for me, also since i'm newbie in react native, i didn't know how exactly to use it. i would really appreciate it if you could give me simple usage example of it. because in tutorials i have found they are to complicated — Ata Mohammadi, Jul 07 '16 at 13:55
i tried navigator.push but it gives error : TypeError: Cannot read property 'props' of null(…) am i missing something? @NaderDabit — Ata Mohammadi, Jul 07 '16 at 14:33
i also tried this but didnt work : class Courses extends Component { constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }), loaded: false, }; this.rowPress = this.rowPress.bind(this); } rowPress() { this.refs.nav.push({ component: Profile, title: 'Profile' }); then i called the function on press like this : onPress={this.rowPress} — Ata Mohammadi, Jul 07 '16 at 14:55
it gives error : TypeError: Cannot read property 'rowPress' of null @NaderDabit — Ata Mohammadi, Jul 07 '16 at 14:56
It looks like this is being lost in the context of your function somehow. Maybe set up a separate navigate function something like `navigate (data) { this.props.navigator.push({ component: someComponent, passProps: { data: data } }) } ` then call it like this: `onPress={this.navigate.bind(this, data)}` — Nader Dabit, Jul 07 '16 at 16:17
If you can recreate a basic version with dummy data at https://rnplay.org/ it would be really helpful. — Nader Dabit, Jul 07 '16 at 16:18
@NaderDabit , sorry for late answer and thanks for your reply. i wasnt able to add new files in rnplay, i dont know how to do that, so i have copied code from only the file i have problem in here https://rnplay.org/apps/wkf7Aw — Ata Mohammadi, Jul 07 '16 at 18:28

score 1 · Accepted Answer · edited May 23 '17 at 12:24

By help of this Question here : React-Native: Cannot access state values or any methods declared from renderRow

I was able to solve the issue by changing :

<ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderRow}
    style={styles.listView}
  />

To :

<ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderRow.bind(this)}
    style={styles.listView}
  />

Hope it will help others who may have the same problem.

React-Native Navigation without render command

1 Answers1