Alexandre Michaud Alexandre Michaud - 3 months ago 40
React JSX Question

React-native Tab-navigator not displayed



i would like to display a TabNavigator in my app.For that i was using this but now i had to restructure my code, and it is not working anymore.
Here is my code :

The main class :

import React, {Component} from 'react';
import {View,Text, WebView,StyleSheet} from 'react-native';
import { TabNavigator } from "react-navigation";
const Navigation = TabNavigator({
Prod: { screen: Prod },
ContinuousDeployment: { screen: ContinuousDeployment },
});
export default class Mattermost extends Component{
constructor(props){
super(props);

this.state = ({
MMAUTHTOKEN : null,
BASICAUTH : null,
});
}
render(){
if(this.state.MMAUTHTOKEN === undefined || this.state.MMAUTHTOKEN === null){
return(
/*Another page , not the tab*/
);
}
else if(this.state.BASICAUTH === undefined || this.state.BASICAUTH === null){
return(
/*Another page , not the tab*/
);
}
else{
return <View>{Navigation}</View>;
}
}


And here is the class of one of my pages :

import React,{Component} from 'react';
import {View,Text,StyleSheet} from 'react-native';


export default class Prod extends Component{
constructor(props){
super(props);
}

static navigationOptions = {
tabBarLabel: 'Prod',
tabBarIcon: ({ tintColor }) => (
<Image source={require('../Images/Icones/jenkins.png')} style={[styles.icon, {tintColor: tintColor}]}/>
),
};

put(){
}
render(){
return (
<View>
<Text>Prod</Text>
</View>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});


It was working great before, but now it display a white screen, no tab , and without any warning or errors. If someone could help me it would be very cool ! Thanks in advance, Alex

Val Val
Answer Source

change this

return <View>{Navigation}</View>;

to

return <View><Navigation /></View>;

or

return <Navigation />;

should fix this problem.