errors with tabbarIOS

[kevinaltschuler]

JSON value 'black' of type NSString cannot be converted to NSNumberreactConsoleError

4ExceptionsManager.js:87 The tab bar icon '(null)' did not match any known image or system icon

the second set of errors go away when i provide a systemIcon prop to the tab items but it doesnt seem like I can use the library

[oblador]

It seems null gets passed to the TabBar. Does the icon exist? Can you post the offending code? Is the TabBarExample working for you?

[toothrot]

I'm getting the same thing in react-native@0.12.0-rc

Here's the code I'm using:

var Icon = require('react-native-vector-icons/FontAwesome');

//...
      <TabBarIOS style={{flex: 1}}>
        <Icon.TabBarItem iconName="rocket" title="Woo">
          <Text>what</Text>
        </Icon.TabBarItem>

[toothrot]

It seems like I can reproduce this with simply:

var Icon = require('react-native-vector-icons/FontAwesome');

var MyApp = React.createClass({
  componentWillMount: function() {
    Icon.getImageSource('rocket', 30).then((source) => this.setState({ rocketIcon: source }));
  },
//...
});

[toothrot]

Specifying a color to getImageSource seems to work.

  Icon.getImageSource('rocket', 30, [1,1,1])

Looks like this is related to how UIColor gets loaded: https://github.com/facebook/react-native/blob/3b6d029a55efe1ffa5afcafe60d2d2445aadd502/React/Base/RCTConvert.m#L380

[kevinaltschuler]

I have been able to fix this by simply adding a color prop to each item but now the icons dont show up the tab bar. it only shows the title in each item.

I'm pretty certain I've added the library to my project correctly, added the font folder correctly, and edited my info.plist correctly.

I dont think this has to do with the color of the icons though, since I have tried changing the color of the tabbar and they still do not show up.

(I'm only showing one Icon.TabBarItem below since they're nearly identical)

var Icon = require('react-native-vector-icons/Ionicons');

...

       <TabBarIOS 
          tintColor='#000' 
          barTintColor='#FFF' 
          translucent={ false }
        >
          <Icon.TabBarItem
            title='Posts'
            iconName='ios-list-outline'
            selectedIconName='ios-list'
            color='#000'
            size={ 28 }
            selected={ this.state.selectedTab === tabs.Posts }
            style={ styles.tabIcon }
            onPress={() => {
              this.setState({
                selectedTab: tabs.Posts,
              });
            }}
          >
            { this._renderContent() }
          </Icon.TabBarItem>
        </TabBarIOS>```

[oblador]

React Native is moving color processing to the JavaScript side in version 0.12.

0.7.2 fixes this issue.

[toothrot]

@oblador thanks! you rock.

[oblador]

@toothrot :heart_eyes:

[kevinaltschuler]

@oblador this is awesome, works now! thank you!