React-native-tab-view: Impossible to get react navigation in Scene

Created on 23 Oct 2019  路  2Comments  路  Source: satya164/react-native-tab-view

Current behaviour

this.props.navigation is undefined inside tabs, even though the TabView Component is inside a createStackNavigator

Expected behaviour

this.props.navigation is not undefined and it is possible to push views on top of the tab with this.props.navigation.navigate()

Code sample

const MainApp = createStackNavigator({
  SomeTabViewComponent,
  Details, // View i want to push on top of TabView
})
class SomeTabViewComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      index: 0,
      routes: [
        { key: 'Tab1', title: 'tab1', icon: 'briefcase' },
        { key: 'Tab2', title: 'tab2', icon: 'search' }
      ]
    }
  }

  renderScene = SceneMap({
    Tab1,
    Tab2
  })
  render() {
    return (
      <TabView
        navigationState={this.state}
        renderScene={this.renderScene}
        renderTabBar={props => (
          <TabBar
            {...props}
            indicatorStyle={{ backgroundColor: '#4098ff' }}
            style={{ backgroundColor: 'white' }}
            renderIcon={({ route, focused }) => (
              <TabBarIcon focused={focused} name={route.icon} />
            )}
            renderLabel={({ route, focused }) => (
              <Text style={{ color: focused ? '#4098ff' : '#ccc', margin: 2 }}>
                {route.title}
              </Text>
            )}
          />
        )}
        tabBarPosition='bottom'
        onIndexChange={index => this.setState({ index })}
        initialLayout={{ width: Dimensions.get('window').width }}
      />
    )
  }
}

export default SomeTabViewComponent



md5-cdebf8dcf13ce9ab996907dac8f032a4



```javascript
class Tab2 extends React.Component {

  render() {
    this.props.navigation // undefined
    return (
      <View>
        <Text>Tab2</Text>
      </View>
    )
  }
}


export default Tab2

Your Environment

| Software | Version
| ---------------------------- | -------
| react-native | 33.0.0
| react-native-tab-view |2.10.0
| node |12.11.1
| yarn |1.19.1

bug no-issue-activity

Most helpful comment

use:
import { withNavigation } from 'react-navigation';

https://reactnavigation.org/docs/en/with-navigation.html

All 2 comments

use:
import { withNavigation } from 'react-navigation';

https://reactnavigation.org/docs/en/with-navigation.html

Hello 馃憢, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

moerabaya picture moerabaya  路  4Comments

hyochan35 picture hyochan35  路  3Comments

jasonkw9 picture jasonkw9  路  3Comments

satya164 picture satya164  路  3Comments

jouderianjr picture jouderianjr  路  3Comments