CODEWITHSUNDEEP
reactjsreact-native
minmin
minmin

Reputation: 53

react-native icons does not show

I'm web enginneer in Japan and I'm studying react-native.

I finished react-native tutorial here

And learn create tab here

But featuread tab and search tab not show...

I don't know why this...

please help me.

Thank you for your patient with my poor English.

This is my codes.

【index.ios.js】

    'use strict';

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

    var {
        AppRegistry,
        TabBarIOS,
        Component
       } = React;

    class Qiita_Reader 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('qiita_reader', () => Qiita_Reader);

【Featured.js】

    'use strict';

    var React = require('react-native');

    var {
      StyleSheet,
      Text,
      View,
    } = React;

    var FeaturedTab = React.createClass({
      render: function() {
        return (
          <View style={styles.container}>
            <Text style={styles.description}>This is Featured Tab !!</Text>
          </View>
        );
      }
    });

    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      description: {
        fontSize: 15,
        backgroundColor: '#FFFFFF'
      }
    });

    module.exports = FeaturedTab;

【Search.js】

    'use strict';

    var React = require('react-native');

    var {
      StyleSheet,
      Text,
      View,
    } = React;

    var SearchTab = React.createClass({
      render: function() {
        return (
          <View style={styles.container}>
            <Text style={styles.description}>This is SearchTab !!</Text>
          </View>
        );
      }
    });

    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      description: {
        fontSize: 15,
        backgroundColor: '#FFFFFF'
      }
    });

    module.exports = SearchTab;

Upvotes: 0

Views: 1983

Answers (3)

Shanky Munjal
Shanky Munjal

Reputation: 671

You need to use systemIcon instead of icon

<TabBarIOS.Item
  selected={this.state.selectedTab === 'featured'}
  systemIcon='featured'>
</TabBarIOS.Item>
<TabBarIOS.Item
  selected={this.state.selectedTab === 'featured'}
  systemIcon='featured'>
</TabBarIOS.Item>

Upvotes: 2

lernerbot
lernerbot

Reputation: 903

If you want to use a static image you can also use this code:

icon={require('./myimage.png')}

Upvotes: 0

psigns
psigns

Reputation: 179

Edit: I see the problem now. Check the docs for the TabBarIOS.Item Component. The icon property that you are using is only for custom icons that you upload into XCode. If you want to use the system icons, including the ones for search and featured, you want to use the systemIcon prop, followed by the lower-case name of the icon.

It should be

<TabBarIOS.Item
        selected={this.state.selectedTab === 'featured'}
        icon="featured"

and

<TabBarIOS.Item
        selected={this.state.selectedTab === 'search'}
        icon="search"

Upvotes: 0

Related Questions