TabBarIOS on React Native not working properly

Question

I'm having trouble implementing the Tab Bar for React Native. The documentation does not exist ( http://facebook.imtqy.com/react-native/docs/tabbarios.html ), and the example on their first page is insufficient (for example, the icon for the required property is missing).

I managed to implement it from a code point of view and something appeared. But only a light blue box occupies half 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, as said, the end result was not expected.

Has anyone been able to successfully implement TabBarIOS? I tried to find the source code, but there were no errors that would help me.

Answer 1

Answering my own question, here is how I worked it:

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 the helper to define the 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 the basic look of the TabBar.

This is based on an example that can be found here: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/TabBarExample.js

Answer 2

I think that you are already on the right track with your first message. You must use the correct permissions for your icons. More details here: Apple iOS Docs There must be 3 permissions for the same icon, for example 32x32 = @ 1, 64x64 = @ 2 and 92x92 = @ 3.

Be sure to follow the instructions on how to create image objects in React Native Docs for Static Resources . One image resource must have the same name as the image object in Xcode.

And perhaps your image does not have transparent borders such as 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 tabs still remain blue when they are selected, though ...

Answer 3

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

Answer 4

Not sure what exactly you are trying to do. To make tabBarIOS work, you need, as you say, start with

 var { AppRegistry, StyleSheet, Text, View, NavigatorIOS, TabBarIOS, } = React; 

Then create your class. Then create your own constructor that launches the tab that you want to select, then you need to create methods that modify the selected tab - when you select a bookmark, it is blue. then your render is returned with each TabBarIOS, inside each TabBarIOS.item, you must call the page where 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 have the same problem. But yes, there is an example from UIExplorer that shows the main use of the icon. But, unfortunately, now only 12 standard system icons are available. Source code here: https://github.com/facebook/react-native/blob/master/React/Views/RCTTabBarItem.m#L28

I'm not very familiar with object-c code, so I'm still confused about how to set a custom icon. But now you can leave it like this (hope someone can 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>