I have implemented a tab view using React native, but I need to navigate from child screen to another parent screen.
See this image: My UI
In the above image when I click on the Next button, I am able to navigate between tabs, but I need to navigate to another main view. How can I do this?
Find the below code:
MainScreen.js
class MainTabView extends Component {
state ={
index: 0,
routes: [
{ key: 'offers', title: 'Offers'},
{ key: 'ternding', title: 'Trending'},
{ key: 'retails', title: 'Retails'}
]
}
_updateRoute(newIdx) {
this.setState({index: newIdx})
}
render() {
return(
<View style={styles.scene}>
<Button title={'Main'} onPress={() => { this.props.navigation.navigate('Splash')}}></Button>
<TabView
navigationState={this.state}
renderScene={SceneMap({
offers: Offers,
ternding: Retails,
retails: Trending,
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
indicatorStyle={{ backgroundColor: 'pink' }}
useNativeDriver
/>
</View>
)
}
}
Offers.js
class Offers extends Component {
state = {
title: 'Next Screen'
}
componentDidMount() {
}
render() {
return (
<View style={styles.background}>
<Button title={'Next'} onPress={() => {
this.props.navigation.navigate('Splash')
}}></Button>
</View>
);
}
}
