Tab Bar Icons will not display

[jaysig]

I'm trying to get the ion icons to display like in the demo; however, i'm unable to get any of them to show up. I am only able to use the system icons and the base64 icon on the React Native site.

I have var { TabBarIOS, } = require('react-native-icons'); at the top.

Calling it this way.

render() {
    return (
      <TabBarIOS selectedTab={this.state.selectedTab}
      tintColor={'#c1d82f'}
      barTintColor={'#000000'}
      >
      <TabBarIOS.Item
      name="todos"
      title='todos'
      iconName={'ion|chatboxes'}
      selected={this.state.selectedTab === 'todos'}
      onPress={() => {
        this.setState({
          selectedTab: 'todos',
        });
      }}>
      <Todos />
      </TabBarIOS.Item>

Here is how my library looks

Link Binary

my build phases.

Any suggestions?

[corymsmith]

Try adding an iconSize property to each tab bar item.

On Thu, Nov 12, 2015 at 1:20 PM, Jason Sigmon notifications@github.com wrote:

I'm trying to get the ion icons to display like in the demo; however, i'm unable to get any of them to show up. The thing the will show up are the system icons and the base64 icon on the React Native site. I have var { TabBarIOS, } = require('react-native-icons'); at the top. Calling it this way.

render() {
    return (
      <TabBarIOS selectedTab={this.state.selectedTab}
      tintColor={'#c1d82f'}
      barTintColor={'#000000'}
      >
      <TabBarIOS.Item
      name="todos"
      title='todos'
      iconName={'ion|chatboxes'}
      selected={this.state.selectedTab === 'todos'}
      onPress={() => {
        this.setState({
          selectedTab: 'todos',
        });
      }}>
      <Todos />
      </TabBarIOS.Item>

Here is how my library looks my build phases.

Any suggestions?

Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/135

[corymsmith]

I should probably add some warnings for things like this so it's obvious what the issue is

On Thu, Nov 12, 2015 at 1:30 PM, Cory Smith cory.m.smith@gmail.com wrote:

Try adding an iconSize property to each tab bar item. On Thu, Nov 12, 2015 at 1:20 PM, Jason Sigmon notifications@github.com wrote:

I'm trying to get the ion icons to display like in the demo; however, i'm unable to get any of them to show up. The thing the will show up are the system icons and the base64 icon on the React Native site. I have var { TabBarIOS, } = require('react-native-icons'); at the top. Calling it this way.

render() {
    return (
      <TabBarIOS selectedTab={this.state.selectedTab}
      tintColor={'#c1d82f'}
      barTintColor={'#000000'}
      >
      <TabBarIOS.Item
      name="todos"
      title='todos'
      iconName={'ion|chatboxes'}
      selected={this.state.selectedTab === 'todos'}
      onPress={() => {
        this.setState({
          selectedTab: 'todos',
        });
      }}>
      <Todos />
      </TabBarIOS.Item>

Here is how my library looks my build phases.

Any suggestions?

Reply to this email directly or view it on GitHub: https://github.com/corymsmith/react-native-icons/issues/135

[jaysig]

Just updated it to this

  <TabBarIOS selectedTab={this.state.selectedTab}
      tintColor={'#c1d82f'}
      barTintColor={'#000000'}
      >
      <TabBarIOS.Item
      name="todos"
      iconName={'ion|ios-home-outline'}
      selectedIconName={'ion|ios-home'}
      title={''}
      iconSize={32}
      selected={this.state.selectedTab === 'todos'}
      onPress={() => {
        this.setState({
          selectedTab: 'todos',
        });
      }}>
      <Todos />
      </TabBarIOS.Item>

still not displaying anything or throwing errors

[corymsmith]

Can you share your require statements, just wondering if you're using the react native tabbar / item or the one included in this library.

[jaysig]

var React = require('react-native');
var Welcome = require('./welcome.ios');
var More = require('./more.ios');
var Todos = require('./todos.ios');
var { TabBarIOS, } = require('react-native-icons');

var {
  AppRegistry,
  TabBarIOS,
  Component
} = React;

[corymsmith]

The React declaration for TabBarIOS is overriding the one from react-native-icons, you'll have to remove it.

var { AppRegistry, TabBarIOS, // Delete this line Component } = React;

[jaysig]

That fixed it thanks a lot.

[corymsmith]

No worries!