I create a dummy project to learn. So, I create a dummy login page with a button that redirects me to the main app, which it is a bottomTabs app. The Login screen has the topBar visible, but then when I click the button to be redirected, I can't see any topBar, even when I defined it.
This is my App.js
import { Navigation } from 'react-native-navigation';
import AuthScreen from './src/screens/Auth/Auth';
import FindPlaceScreen from './src/screens/FindPlace/FindPlace';
import SharePlaceScreen from './src/screens/SharePlace/SharePlace';
// Register screens
Navigation.registerComponent("awesome-places.AuthScreen", () => AuthScreen);
Navigation.registerComponent("awesome-places.SharePlaceScreen", () => SharePlaceScreen);
Navigation.registerComponent("awesome-places.FindPlaceScreen", () => FindPlaceScreen);
// Start the app
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'awesome-places.AuthScreen',
options: {
topBar: {
title: {
text: 'Título'
}
}
}
}
}
],
}
}
});
});
My AuthScreen component is this one:
import React, {Component} from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import startMainTabs from './../MainTabs/startMainTabs';
export default class AuthScreen extends Component {
loginHandler = () => {
startMainTabs();
}
render() {
return (
<View style={styles.container}>
<Text>AuthScreen</Text>
<Button title="Login" onPress={this.loginHandler}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
margin: 25
}
});
And the main tabs code is:
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
const startTabs = () => {
Promise.all([
Icon.getImageSource('md-map', 30),
Icon.getImageSource('ios-share-alt', 30)
]).then((res) => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
component: {
name: 'awesome-places.SharePlaceScreen',
options: {
topBar: {
visible: true,
title: {
text: 'Título'
}
},
bottomTab: {
fontSize: 12,
text: 'A',
icon: res[0],
}
}
},
},
{
component: {
name: 'awesome-places.FindPlaceScreen',
options: {
topBar: {
visible: true,
title: {
text: 'Título'
}
},
bottomTab: {
fontSize: 12,
text: 'B',
icon: res[1],
}
}
},
},
],
},
}
});
})
}
export default startTabs;
If this help, the components that I'm calling are exactly the same, and the code is like this:
import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default class FindPlaceScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text>Find Place</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
margin: 25
}
});
The environment that I'm currently using is:
I modify my stratMainTabs file to:
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
const startTabs = () => {
Promise.all([
Icon.getImageSource('md-map', 30),
Icon.getImageSource('ios-share-alt', 30)
]).then((res) => {
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
children: [
{
component: {
name: 'awesome-places.SharePlaceScreen',
options: {
topBar: {
animate: false,
visible: true,
title: {
text: 'Título A'
}
},
bottomTab: {
fontSize: 12,
text: 'A',
icon: res[0],
}
}
},
}
]
}
},
{
stack: {
children: [
{
component: {
name: 'awesome-places.FindPlaceScreen',
options: {
topBar: {
animate: false,
visible: true,
title: {
text: 'Título B'
}
},
bottomTab: {
fontSize: 12,
text: 'B',
icon: res[1],
}
}
},
}
]
}
},
],
},
}
});
})
}
export default startTabs;
Basically I put the children elements inside and stack, and inside that stack I added the tabComponent. And that solves the problem. Could someone please could share why this is working?