TabBarIOS on React Native not working as expected - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I'm having problems on implementing Tab Bar for React Native. The documentation does not exist () 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.
6,34711831
Answering to my own question, this is how I got it working:
First we need to define TabBarItemIOS:
var React = require('react-native');
StyleSheet,
var TabBarItemIOS = TabBarIOS.I
Then, we can use a helper for defining icons:
function _icon(imageUri) {
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:
6,34711831
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?
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:
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 . 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 .
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...
Not sure exactly what you are trying to do. To get the tabBarIOS to work you need to as you say start with
AppRegistry,
StyleSheet,
NavigatorIOS,
TabBarIOS,
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 ponent{
constructor(props){
super(props)
this.state = {
selectedTab: 'sassi',
homeHandleChange(){
this.setState({
selectedTab: 'home',
aboutHandleChange(){
this.setState({
selectedTab: 'about',
creditHandleChange(){
this.setState({
selectedTab: 'credits',
render() {
&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&
&/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&
&/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&
&/TabBarIOS.Item&
&/TabBarIOS&
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:
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"
selected={this.state.selectedTab === 'scheduleTab'}
onPress={() =& {
this.setState({
selectedTab: 'scheduleTab'
&NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Schedule',
component: SchedulePage,
&/TabBarItemIOS&
&/TabBarIOS&
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled推荐这篇日记的豆列
······Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling. Choose from 3000+ bundled icons or use your own.
Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.
You can use your own custom icon sets. Supports SVG via
or regular icon fonts.
You can use native TabBarIOS.
You can use icons inline with Text components as emojis or to create buttons.
You can use the icon as an image if a native component requires it (such as NavigatorIOS).
Most common use cases is JavaScript only and thus enables wider possibilities of styling (and is easier to integrate with your project).
No need to define width and height styles.
Presentational stuff like size and color can be defined in your stylesheet instead of via a property (if you want to).
Icons scale with accessibility settings (unless disabled).
Pst! Migrating from react-native-icons? Scroll down for more information.
by Daniel Bruce (411 icons)
by Alexander Madyankin & Roman Shamin (v1.8.0, 71 icons)
by Dave Gandy (v4.5, 605 icons)
by ZURB, Inc. (v3.0, 283 icons)
by Ben Sperry (v2.0.1, 733 icons)
by Google, Inc. (v2.1.1, 893 icons)
by Github, Inc. (v3.5.0, 196 icons)
by Sam Collins (v1.0, 100 icons)
$ npm install react-native-vector-icons --save
Option: With
$ rnpm link
If you want to use any of the bundled icons, you need to add the icon fonts to your Xcode project. Just follow these steps:
Right click on you project in Xcode and select Add files to &NameOfYourProject&.
Browse to node_modules/react-native-vector-icons and select the folder Fonts (or just the ones you want). Make sure your app is checked under &Add to targets& and that &Create groups& is checked if you add the whole folder.
Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won&t autocomplete/not using Xcode) and type in the files you just added. It will look something like this:
Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.
If you want to use the TabBar/NavigatorIOS integration or use getImageSource, then you need to add RNVectorIcons.xcodeproj to Libraries and add libRNVectorIcons.a to Link Binary With Libraries under Build Phases. .
Option: With
Add the following to your Podfile and run pod update:
pod &RNVectorIcons&, :path =& &node_modules/react-native-vector-icons&
Edit Info.plist as described above.
Option: With
$ rnpm link
Edit android/app/build.gradle and add the following:
apply from: &../../node_modules/react-native-vector-icons/fonts.gradle&
To customize the files being copied, add the following instead:
project.ext.vectoricons = [    iconFontNames: [ &MaterialIcons.ttf&, &EvilIcons.ttf& ] // Name of the font files you want to copy] apply from: &../../node_modules/react-native-vector-icons/fonts.gradle&
Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder).
These steps are optional and only needed if you want to use the Icon.getImageSource function or using custom icons in the Icon.ToolbarAndroid component.
Edit android/settings.gradle to look like this (without the +):
rootProject.name = &MyApp& include &:app& + include &:react-native-vector-icons&+ project(&:react-native-vector-icons&).projectDir = new File(rootProject.projectDir, &../node_modules/react-native-vector-icons/android&)
Edit android/app/build.gradle (note: app folder) to look like this:
apply plugin: &com.android.application& android {  ...} dependencies {  compile fileTree(dir: &libs&, include: [&*.jar&])  compile &com.android.support:appcompat-v7:23.0.1&  compile &com.facebook.react:react-native:+&  // From node_modules+ compile project(&:react-native-vector-icons&)}
Edit your MainActivity.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):
package com. + import com.oblador.vectoricons.VectorIconsP ....   @Override  protected List&ReactPackage& getPackages() {    return Arrays.&ReactPackage&asList(      new MainReactPackage()+   , new VectorIconsPackage()    );  } }
Note: If you&re using React Native (Android) &= 0.17,
You can either use one of the bundled icons above or roll your own custom font.
var Icon = require(&react-native-vector-icons/FontAwesome&);var myIcon = (&Icon name=&rocket& size={30} color=&#900& /&)
and the following:
Description
Size of the icon, can also be passed as fontSize in the style object.
What icon to show, see Icon Explorer app or one of the links above.
Color of the icon.
Since Icon builds on top of the Text component, most
will work as expected, you might find it useful to play around with these:
backgroundColor
borderWidth
borderColor
borderRadius
NOTE: On android Text doesn&t currently support border* styles, to circumvent this simply wrap your Icon with a View.
By combining some of these you can create for example :
A convenience component for creating buttons with an icon on the left side.
var Icon = require(&react-native-vector-icons/FontAwesome&)var myButton = (  &Icon.Button name=&facebook& backgroundColor=&#3b5998& onPress={this.loginWithFacebook}&    Login with Facebook  &/Icon.Button&); var customTextButton = (  &Icon.Button name=&facebook& backgroundColor=&#3b5998&&    &Text style={{fontFamily: &Arial&, fontSize: 15}}&Login with Facebook&/Text&  &/Icon.Button&);
property in addition to these:
Description
Text and icon color, use iconStyle or nest a Text component if you need different colors.
Icon size.
Styles applied to the icon only, good for setting margins or a different color.
{marginRight: 10}
backgroundColor
Background color of the button.
borderRadius
Border radius of the button, set to 0 to disable.
A function called when the button is pressed.
Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name, size and color as described above.
Icon.getImageSource(&user&, 20, &red&).then((source) =& this.setState({ userIcon: source }));
For a complete example check out the TabBarExample project.
Usage with
Simply use Icon.TabBarItemIOS instead of TabBarIOS.Item. This is an extended component that works exactly the same but with three additional properties:
Description
Name of the default icon (similar to TabBarIOS.Item icon)
selectedIconName
Name of the selected icon (similar to TabBarIOS.Item selectedIcon).
Size of the icon.
For example usage see Examples/TabBarExample or the examples section below. Don&t forget to import and link to this project as described above if you are going to use the TabBar integration.
Usage with
Use Icon.getImageSource to get an image source object and pass it as you would with backButtonIcon, leftButtonIcon or rightButtonIcon.
Note: Since
and the async nature of getImageSource you must not use it with initialRoute until the icon is rendered, but any view added by push should be fine. Easiest way is to simple add an if statment at the beginning of you render method like this:
  render: function() {    if(!this.state.myIcon) {      return     }    return (&NavigatorIOS ... /&);  }
Development belongs to open-source community - not used by the React Native team on their apps. A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.
You are probably better off with
Usage with
Simply use Icon.ToolbarAndroid instead of React.ToolbarAndroid, this is composition of the underlying ToolbarAndroid component that works the same but any *icon property also takes *iconName:
Description
navIconName
Name of the navigation icon (similar to ToolbarAndroid navIcon)
overflowIconName
Name of the overflow icon (similar to ToolbarAndroid overflowIcon).
Possible actions on the toolbar as part of the action menu, takes the additional arguments iconName, iconColor and iconSize.
Size of the icons.
Color of the icons.
For example usage see Examples/IconExplorer/index.android.jsor the examples section below. Don&t forget to import and link to this project as described above if you are going to use the ToolbarAndroid integration.
Returns your own custom font based on the glyphMap where the key is the icon name and the value is either a UTF-8 character or it&s character code. fontFamily is the name of the font NOT the filename. Open the font in Font Book.app or similar to learn the name. Optionally pass the third fontFile argument for android support, it should be a path to the font file in you asset folder.
var { createIconSet } = require(&react-native-vector-icons&);var glyphMap = { &icon-name&: 1234, test: &∆& };var Icon = createIconSet(glyphMap, &FontName&);
Convenience method to create a custom font based on a
config file. Don&t forget to import the font as described above and drop the config.json somewhere convenient in your project.
var { createIconSetFromFontello } = require(&react-native-vector-icons&);var fontelloConfig = require(&./config.json&);var Icon = createIconSetFromFontello(fontelloConfig);
var { createIconSetFromIcoMoon } = require(&react-native-vector-icons&);var icoMoonConfig = require(&./config.json&);var Icon = createIconSetFromIcoMoon(icoMoonConfig);
React Native comes with an amazing animation library called . To use it with an icon, simply create an animated component with this line: var AnimatedIcon = Animated.createAnimatedComponent(Icon). You can also use the higher level animation library .
Try the IconExplorer project in Examples/IconExplorer folder, there you can also search for any icon.
var React = require(&react-native&);var Icon = require(&react-native-vector-icons/Ionicons&); var ExampleView = React.createClass({  render: function() {    return &Icon name=&person& size={30} color=&#4F8EF7& /&;  }};
Full example in TabBarExample project in Examples/TabBarExample folder.
var React = require(&react-native&);var {  View,   Text,   TabBarIOS,} = React;var Icon = require(&react-native-vector-icons/Ionicons&); var TabBarView = React.createClass({  render: function() {    return (      &TabBarIOS&        &Icon.TabBarItem          title=&Home&          iconName=&ios-home-outline&          selectedIconName=&ios-home&          &          &View style={styles.tabContent}&&Text&Home Tab&/Text&&/View&        &/Icon.TabBarItem&      &/TabBarIOS&    );  }};
var React = require(&react-native&);var Icon = require(&react-native-vector-icons/Ionicons&); var ToolbarView = React.createClass({  render: function() {    return (      &Icon.ToolbarAndroid&        title=&Home&        titleColor=&white&        navIconName=&android-arrow-back&        onIconClicked={this.props.navigator.pop}        actions={[          { title: &Settings&, iconName: &gear-a&, iconSize: 30, show: &always& },          { title: &Follow me on Twitter&, iconName: &social-twitter&, iconColor: &#4099FF&, show: &ifRoom& },        ]}        overflowIconName=&more&      /&    );  }};
var React = require(&react-native&);var Icon = require(&react-native-vector-icons/Ionicons&); var ExampleView = React.createClass({  render: function() {    return (&Text&Lorem &Icon name=&ios-book& color=&#4F8EF7& /& Ipsum&/Text&);  }};
If you already have a icon font with associated CSS file then you can easily generate a icon set with the generate-icon script.
./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon & Components/MyIcon.js
Any flags not listed below, like --componentName and --fontFamily, will be passed on to the template.
CSS selector prefix [default: &.icon-&]
Template in lodash format [default: &./template/iconSet.tpl&]
For default template please provide --componentName and --fontFamily.
Save output to file, defaults to STDOUT
NOTE: This approach is unsupported and new apps / views should NOT use this component.
With react-native-icons recently being discontinued, users switching to this library might not want to rewrite all their code. For that use case I&ve written a drop in replacement component that uses the same icon name syntax. It might break some layouts since the underlying component is different. To use this, simply replace your react-native-icons require statement with this:
var Icon = require(&react-native-vector-icons/RNIMigration&)
Make sure you&ve copied the font to android/app/src/main/assets/fonts.
Delete the android/app/build folder.
Recompile the project.
Make sure you&ve added the fonts to your XCode project.
Check that the font you are trying to use appears in Info.plist, if you&ve added the whole folder and it&s blue in color, then you need to add it to the path.
Check that the font is copied in the Copy Bundle Resources in Build Phases.
Recompile the project.
This project is licenced under the .
Any bundled fonts are copyright to their respective authors and mostly under MIT or .
T17:38:22.532Z
is the latest
of 44 releases
downloads in the last day
downloads in the last week
downloads in the last month
Have an issue?
Try it out
Dependencies (2)