Learn React-Native Part 1: Adding icons

Overview

This is part 1 of me learning react-native. These are the steps necessary to build an iOS react-native app.

Content

Step 1

1
2
$ npm install -g react-native-cli
$ react-native init AwesomeProject

Step 2

Open the xcode project in AwesomeProject/ios folder.

Step 3

We download the icons npm module and link it to xcode.

You can see the font repo here and learn more about adding library’s to react-native from facebook’s post

1
$ npm install --save react-native-vector-icons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Component,
  TabBarIOS
} = React;

var Home = require('./home.ios');
var More = require('./more.ios');
var Icon = require('react-native-vector-icons/Ionicons');

class ReactNative1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'home',
        };
    }

    render() {
        return (
            <TabBarIOS
              selectedTab={this.state.selectedTab}>
                  <Icon.TabBarItem
                    title="Home"
                    iconName="ios-home-outline"
                    selectedIconName="ios-home"
                    selected={this.state.selectedTab === 'home'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'home',
                        });
                    }}>
                      <Home />
                  </Icon.TabBarItem>

                  <Icon.TabBarItem
                    title="Person"
                    iconName="person"
                    selectedIconName="person"
                    selected={this.state.selectedTab === 'more'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'more',
                        });
                    }}>
                      <More />
                  </Icon.TabBarItem>
            </TabBarIOS>
        );
    }
}

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