Robert Tomas G IV Robert Tomas G IV - 6 months ago 58
iOS Question

React Native Version 0.13.1 TabBar Icons Not Showing

It seems as though the native tabBar Icons aren't showing and packages aren't integrating with the application as well. I am not sure what the problem is and here is my code:

'use strict';

var React = require('react-native');
var Featured = require('./App/Components/Featured');
var Search = require('./App/Components/Search');

var {
AppRegistry,
TabBarIOS,
Component
} = React;

class BookSearch extends Component {

constructor(props) {
super(props);
this.state = {
selectedTab: 'featured'
};
}

render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}>
<TabBarIOS.Item
selected={this.state.selectedTab === 'featured'}
icon={{uri:'featured'}}
onPress={() => {
this.setState({
selectedTab: 'featured'
});
}}>
<Featured/>
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'search'}
icon={{uri:'search'}}
onPress={() => {
this.setState({
selectedTab: 'search'
});
}}>
<Search/>
</TabBarIOS.Item>
</TabBarIOS>
);
}
}

AppRegistry.registerComponent('BookSearch', () => BookSearch);


But here is the simulator:

enter image description here

The simulator properly changes tabs, but the tab icons don't show at all. Would love any help if possible!

Answer

I ran into a similar issue. Did you add the RCTImage subspec to your podfile?

see: https://facebook.github.io/react-native/docs/embedded-app-ios.html#install-react-native-using-cocoapods

# Depending on how your project is organized, your node_modules directory may be
# somewhere else; tell CocoaPods where you've installed react-native from npm
pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # Add any other subspecs you want to use in your project
]
Comments