TabBarIOS on React Native not working as expected - react-native

Question

I'm having problems on implementing Tab Bar for React Native. The documentation does not exist (http://facebook.github.io/react-native/docs/tabbarios.html) and the example at their front page is insufficient (e.g. missing required property icon).
I managed to implement it from code point-of-view and something showed up. But only a light blue box taking half of the space on the screen.
My "working" code looked like this:
<TabBarIOS>
<TabBarIOS.Item title="Wooden" selected={false} icon={require('image!wooden')}>
<NavigatorIOS initialRoute={{ title: 'Wooden' }} />
</TabBarIOS.Item>
</TabBarIOS>
But like said, the end result was not expected.
Has anyone managed to implement TabBarIOS successfully? I tried to search through source code but there were no gotchas that would've helped me.

Answer 1

Answering to my own question, this is how I got it working:
First we need to define TabBarItemIOS:
var React = require('react-native');
var {
Image,
StyleSheet,
Text,
View,
TabBarIOS
} = React;
var TabBarItemIOS = TabBarIOS.Item;
Then, we can use a helper for defining icons:
function _icon(imageUri) {
return {
uri: imageUri,
isStatic: true
};
}
And, well... the rest of the actual code:
<TabBarIOS>
<TabBarItemIOS
icon={_icon('favorites')}>
</TabBarItemIOS>
<TabBarItemIOS
icon={_icon('history')}>
</TabBarItemIOS>
<TabBarItemIOS
icon={_icon('more')}>
</TabBarItemIOS>
</TabBarIOS>
This returns at least basic kind of TabBar.
This is based on the example which can be found from here: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TabBarExample.js

Answer 2

I think you were already on the right track with your first post. You need to use the right resolutions for your icons. More here: Apple iOS Docs
There needs to be 3 resolutions for the same icon, e.g 32x32 = #1, 64x64 = #2 and 92x92 = #3.
Remember to follow the instructions how to create image assets in the React Native Docs for Static Resources. One image resource needs to have the same name as the image asset in Xcode.
And maybe your image doesn't have transparent borders like this case.
Here is my working code:
...
var homeIconUnactive = require('image!home-unactive');
var homeIconActive = require('image!home-active');
...
<TabBarIOS.Item
title='Home'
selected={this.state.selectedTab === 'EventList'}
icon={homeIconUnactive}
selectedIcon={homeIconActive}
onPress={() => {
this.setState({
selectedTab: 'EventList',
});
}}>
<EventList/>
</TabBarIOS.Item>
My tab icons are still blue when they are selected though...

Answer 3

When I tried this, the "TabBarItemIOS" seems to crash with an error 'Invariant Violation: onlyChild must be passed a children with exactly one child.' when the nested component a "NavigatorIOS" like in your example. It seems to work when child is a "View" component though. Did you get your code working?

Answer 4

Not sure exactly what you are trying to do. To get the tabBarIOS to work you need to as you say start with
var {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
TabBarIOS,
} = React;
Then create your class. Then create your constructor which starts which tab you want to be selected then you need to make methods that change the selected tab - when a tab is selected it is blue. then your render return with each TabBarIOS, inside each TabBarIOS.item, you must call the page you want it to go to
class example extends React.Component{
constructor(props){
super(props)
this.state = {
selectedTab: 'sassi',
}
}
homeHandleChange(){
this.setState({
selectedTab: 'home',
})
};
aboutHandleChange(){
this.setState({
selectedTab: 'about',
})
};
creditHandleChange(){
this.setState({
selectedTab: 'credits',
})
};
render() {
return (
<View style={styles.container}>
<View style={styles.footer}>
<TabBarIOS>
<TabBarIOS.Item
title="home List"
selected={this.state.selectedTab === "home"}
icon={require("./App/assets/youricon.png")}
onPress={this.homeHandleChange.bind(this)} >
<View style={styles.main}>
<home></home>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
title="credits"
selected={this.state.selectedTab === "credits"}
icon={require("./App/assets/yourIcon.png")}
onPress={this.creditsHandleChange.bind(this)} >
<View style={styles.main}>
<credits></credits>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
title="About"
selected={this.state.selectedTab === "about"}
icon={require("./App/assets/aboutIcon.png")}
onPress={this.aboutHandleChange.bind(this)} >
<View style={styles.main}>
<About></About>
</View>
</TabBarIOS.Item>
</TabBarIOS>
</View>
</View>
);
}
};

Answer 5

I got the same issue. But yes there are example from the UIExplorer that show the basic usage of icon. But unfortunately there's only 12 default system icons available now. Source code here: https://github.com/facebook/react-native/blob/master/React/Views/RCTTabBarItem.m#L28
I'm not quite familiar with object-c code so I'm still confused on how to set custom icon. But you can leave it like this for now(hope someone could get a better solution soon):
<TabBarIOS
selectedTab={this.state.selectedTab}>
<TabBarItemIOS
accessibilityLabel="Schedule"
title="Schedule"
name="scheduleTab"
icon={{}}
selected={this.state.selectedTab === 'scheduleTab'}
onPress={() => {
this.setState({
selectedTab: 'scheduleTab'
});
}}>
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Schedule',
component: SchedulePage,
}}
/>
</TabBarItemIOS>
</TabBarIOS>