How can I change my view from Tab to Screen on Navigation.push with react-native-navigation - react-native

Question

I have a screen that has three bottom tabs, in one of the tab screens I want to move to a completely new page using Navigation.push but it's not working. Please anyone who can help out with switching from tab based view to push screen(that has no tabs. stack I guess)
below is my navigator.js file that contains the initial logic for switching to tabs view on login
Navigation.registerComponentWithRedux('HomeScreen', ()=> Home, Provider, store)
Navigation.registerComponentWithRedux('FindPlace', ()=> FindPlace, Provider, store)
Navigation.registerComponentWithRedux('SharePlace', ()=> SharePlace, Provider, store)
Navigation.registerComponent('PlaceDetailScreen', ()=> PlaceDetailScreen);
export const startNavigation = () => {
Promise.all([
Icon.getImageSource('ios-search', 30),
Icon.getImageSource('md-share', 30, 'blue'),
Icon.getImageSource('ios-home', 30, 'darkblue'),
]).then(icons => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
component: {
name: 'HomeScreen',
options: {
bottomTab: {
text: 'Home',
fontSize: 10,
icon: icons[2]
}
}
}
},
{
component: {
name: 'FindPlace',
options: {
bottomTab: {
text: 'Find a Place',
fontSize: 10,
icon: icons[0]
}
},
passProps: {
data: 'Data'
}
}
},
{
component: {
name: 'SharePlace',
options: {
bottomTab: {
text: 'Share Place',
fontSize: 10,
icon: icons[1]
}
}
}
}
]
}
}
})
})
}
below is my dummy login page that I use to call the tabs logic
import {startNavigation} from '../../../navigation';
const AuthScreen = props=> {
const navigateTabs = () => {
startNavigation()
}
return (
<View style={styles.authScreen}>
<TextInput placeholder='Username'/>
<Button title='Log me in' color='green' onPress={navigateTabs}/>
</View>
)
}
below is the code I am trying to use to push a new screen which is not working
const handleItemSelect = key => {
const selPlaces = places.places.find(item => item.key === key);
Navigation.push(props.componentId, {
component: {
name: 'PlaceDetailScreen',
options: {
topBar: {
visible: true,
title: {
text: selPlaces.name
}
}
},
passProps: {
selectedPlace: selPlaces
}
}
})
}

Answer 1

Solved it! the issue was with how I was setting the root in my main navigation.js file. I wasn't doing it properly.
here is the updated root as instructed here https://wix.github.io/react-native-navigation/#/docs/top-level-api?id=setrootlayout
bottomTabs: {
children: [
{
stack: {
children: [
{
component: {
name: 'HomeScreen',
options: {
bottomTab: {
text: 'Home',
fontSize: 10,
icon: icons[2]
},
topBar: {
visible: true,
leftButtons: [
{
id: 'sideMenu',
icon: icons[3]
}
],
noBorder: true
}
}
}
}
]
}
},
{
stack: {
children: [
{
component: {
name: 'FindPlace',
options: {
bottomTab: {
text: 'Find a Place',
fontSize: 10,
icon: icons[0]
},
topBar: {
leftButtons: [
{
id: 'sideMenu',
icon: icons[3]
}
],
noBorder: true
}
},
passProps: {
data: 'Data'
}
}
},
]
}
},
{
stack: {
children: [
{
component: {
name: 'SharePlace',
options: {
bottomTab: {
text: 'Share Place',
fontSize: 10,
icon: icons[1]
},
topBar: {
leftButtons: [
{
id: 'sideMenu',
icon: icons[3]
}
],
noBorder: true
}
},
passProps: {
data: 'data'
}
}
}
]
}
}
]
}