this.props.navigation is undefined inside tabs, even though the TabView Component is inside a createStackNavigator
this.props.navigation is not undefined and it is possible to push views on top of the tab with this.props.navigation.navigate()
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
| Software | Version
| ---------------------------- | -------
| react-native | 33.0.0
| react-native-tab-view |2.10.0
| node |12.11.1
| yarn |1.19.1
use:
import { withNavigation } from 'react-navigation';
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.
Most helpful comment
use:
import { withNavigation } from 'react-navigation';https://reactnavigation.org/docs/en/with-navigation.html