React-native-tab-view: How to use navigation state in tab child views ?

[Aravindhan12]

Expected behaviour

Navigation state should be accessible

Actual behavior

it throws error -> undefined is not a function (evaluation this.state.navigate('mynewpage'))

Code sample, screenshots

Parent:
style={styles.container}
navigationState={this.state}
renderScene={this._renderScene}
renderHeader={this._renderHeader}
onIndexChange={this._handleIndexChange}
initialLayout={initialLayout}
/>

Child: mynewpage
this.state.navigate('mynewpage') it throws error -> undefined is not a function (evaluation this.state.navigate('mynewpage'))

What have you tried

I have setted the navigation state in the Tab view page (Parent).But while accessing the navigation state in my child views render method using this.state.navigate('mynewpage') it throws error -> undefined is not a function (evaluation this.state.navigate('mynewpage'))
style={styles.container}
navigationState={this.state}
renderScene={this._renderScene}
renderHeader={this._renderHeader}
onIndexChange={this._handleIndexChange}
initialLayout={initialLayout}
/>

[satya164]

To access parent's state in a child, you need to pass it down as a prop, like any other React component.

Also, the library has no such API as this.state.navigate. I don't know what you're referring to.

[ozergul]

    this.state = {
      isOpen: false,
      routes: [
        {
          key: 'View1',
          icon: 'ios-paper',
          color: '#fff',
          navigation: this.props.navigation // pass navigation
        },
        {
          key: 'View12',
          icon: 'add',
          color: '#fff',
        }
      ],
    };

Usage in View1
this.props.route.navigation.navigate('AnotherScene')

[Linrasis]

Thank's in view i have use :
const { navigate } = this.props.route.navigation;
and
onPress={() => navigate('Articles', { id: 86 })}

Work fine ! 💃

[khaledBou]

`   this.state = {
      search: '',
      index: 0,
      routes: [
        { key: 'first', title: 'Mes Mandats', navigation: this.props.navigation },
        { key: 'second', title: 'Partagés', navigation: this.props.navigation },
        { key: 'third', title: 'Reçus', navigation: this.props.navigation },
      ],
    };
  }`

`const renderScene = ({ route }) => {
  switch (route.key) {
    case 'first':
      return <MandatesList navigation={route.navigation} />;
    case 'second':
      return <SecondRoute />;
    default:
      return null;
  }
};`

Thanks it works for me