Can't render based on this.state in React Native - reactjs

Question

Any idea why {this.state.showTabBar === true ? this._renderTabBar : null} fails in SampleApp component? Works fine if render just <TabBarExample />.
My goal is to use this.state.showTabBar to decide when to show TabBarIOS.
Here's a React Native Playground link:
https://rnplay.org/apps/5pQC9A
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TabBarIOS,
TouchableHighlight,
} = React;
var SampleApp = React.createClass({
getInitialState: function() {
return {
showTabBar: true // I will eventually use this to decide
// if TabBarIOS will be visible.
};
},
_renderTabBar: function() {
return (
<TabBarExample />
);
},
render: function() {
return (
// This line fails.
{this.state.showTabBar === true ? this._renderTabBar : null}
// <TabBarExample /> // This will work if uncomment.
);
}
});
var TabBarExample = React.createClass({
statics: {
title: '<TabBarIOS>',
description: 'Tab-based navigation.',
},
displayName: 'TabBarExample',
getInitialState: function() {
return {
selectedTab: 'blueTab',
notifCount: 0,
presses: 0,
};
},
_renderContent: function(color: string, pageText: string, num?: number) {
return (
<View style={[styles.tabContent, {backgroundColor: color}]}>
<Text style={styles.tabText}>{pageText}</Text>
<Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
</View>
);
},
render: function() {
return (
<TabBarIOS
tintColor="white"
barTintColor="darkslateblue"
translucent={true}>
<TabBarIOS.Item
title="Blue Tab"
systemIcon="search"
selected={this.state.selectedTab === 'blueTab'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
});
}}>
<MyViewOne />
</TabBarIOS.Item>
<TabBarIOS.Item
title="Red Tab"
systemIcon="history"
badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
selectedTab: 'redTab',
notifCount: this.state.notifCount + 1,
});
}}>
{this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="contacts"
title="More Green"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
selectedTab: 'greenTab',
presses: this.state.presses + 1
});
}}>
{this._renderContent('#21551C', 'Green Tab', this.state.presses)}
</TabBarIOS.Item>
</TabBarIOS>
);
}
});
var MyViewOne = React.createClass({
render: function() {
return (
<View style={[styles.tabContent, {backgroundColor: 'orange'}]}>
<Text style={styles.tabText}>I like Iron Maiden</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
tabContent: {
flex: 1,
alignItems: 'center',
},
tabText: {
color: 'white',
margin: 50,
},
button: {
backgroundColor: 'green',
margin: 10,
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

Answer 1

Like Gortem said, you are not calling the function. React will not do it for you.
Also, instead of a ternary, your could do:
{this.state.showTabBar && this._renderTabBar()}
Or directly:
{this.state.showTabBar && (<TabBarExample />)}

Answer 2

I think you should make showTabBar one of your state:
getInitialState: function(){
return{
showTabBar: {false}
};
}
and use
this.setState({showTabBar:{true}});
to update

Answer 3

You should have your logic outside of the return statement like this:
render: function() {
if (this.state.showTabBar) {
return (this._renderTabBar());
} else {
return (<View />);
}
}
It's also good to note that you will always need to return a component, even if it is a blank View.
Here is the working example: https://rnplay.org/apps/-TjJ7w