Impossible to get react navigation in Scene

[arnaud9145]

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

class Tab1 extends React.Component {

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


export default Tab1

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

[suretarget]

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

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

[github-actions]

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.