CODEWITHSUNDEEP
androidreactjsreact-native
Mark Silver
Mark Silver

Reputation: 432

How do I access a Navigator component in the class it's created - React-Native

I'm a bit of newbie with React-Native and I'm trying to create navigation in my app using the action buttons of < ToolbarAndroid> component with the functionality of a < Navigator> component. I know that when you push a component on to the navigator stack you can access the navigator in that component using 'this.props.navigator'. But I can't figure out how to access the navigator in the class where it's declared, I want to call the push function inside my callback function for a < ToolbarAndroid> action.

If you look at the code below MyApp class is the entry point for my app, in the render function it has a main container view that contains the < ToolbarAndroid> and < Navigator> component. I want to access the navigator object in the onActionSelected function but this.props.navigator is giving me an undefined error. How do I access navigator in the onActionSelected callback?

I have a feeling that it might be ES6 that's causing me the problems.

class MyApp extends Component {
  constructor(props) {
    super(props);
  }

  // I want to access navigator in this function
  onActionSelected(position) { 
  if (position === 0) { // index 
    this.props.navigator.push({
        name: 'FeedView',
        component: FeedView
      });   
    }
  }

  render() {
    return (
        <View style={styles.container}>
          <ToolbarAndroid 
          title="MyApp"
          style={styles.toolbar}
          actions={toolbarActions}
          onActionSelected={this.onPressFeed.bind(this)}
          navigator={this.props.navigator}>
          </ToolbarAndroid>

          <Navigator
                initialRoute={{name: 'WelcomeView', component: WelcomeView}}
                configureScene={() => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
                renderScene={(route, navigator) => {
                    // count the number of func calls
                    console.log(route, navigator); 

                    if (route.component) {
                        return React.createElement(route.component, { navigator });
                    }
                }}
          />           
        </View>
    );
  }
}

Upvotes: 0

Views: 954

Answers (1)

G. Hamaide
G. Hamaide

Reputation: 7106

You can use refs.

<Navigator
  ref='navigator'
  initialRoute={{name: 'WelcomeView', component: WelcomeView}}
  configureScene={() => {
    return Navigator.SceneConfigs.FloatFromRight;
  }}
  renderScene={(route, navigator) => {
    // count the number of func calls
    console.log(route, navigator); 
    if (route.component) {
      return React.createElement(route.component, { navigator });
    }
  }}
/>

Then you can access it in your function with : 

onActionSelected(position) { 
  if (position === 0) { // index 
    this.refs.navigator.push({
      name: 'FeedView',
      component: FeedView
    });   
  }
}

More info on refs here.

Upvotes: 1

Related Questions