Open Terminal App and execute these commands to initialize a new project.

react-native init AppName; 

cd AppName;

To run your app in the iOS simulator execute in terminal:

react-native run-ios;

To run your app in the iOS simulator execute in terminal:

cd AppName; 

react-native run-android;

To run on iPhone 7 Plus in the simulator execute:

react-native run-ios --simulator "iPhone 7 Plus"

To list available devices execute:

xcrun simctl list devices

Sometimes you need to link dependencies of 3rd party libraries. Suppose you installed react-native-vector-icons library. And then, to add icons fonts to your project you would execute:

react-native link

Detailed instructions on linking libraries available at Linking Libraries on React Native documentation site.
If you’re using libraries such as Linking or PushNotificationIOS, you need to add Header Search Paths.
Here is how to add a path to the libraries that come with React Native.

1. Open AppName.xcodeproj in ios folder.
2. Click AppName in the left panel.
3. Click AppName in TARGETS section.
4. Click Build Settings.
5. Search for Header Search Path row inside Search Paths sections.
6. Double-click on a path in AppName column.
7. Click + button in the left bottom corned of popped up window.
8. Paste $(SRCROOT)/../node_modules/react-native/Libraries into the first column and choose recursive from a dropdown menu in the second column.

To upgrade React Native to the latest version execute:

npm install --save react-native@latest;

To upgrade project files execute:

react-native upgrade;

To list all outdated packages execute:

npm outdated

To update a package to the latest version execute:

npm install --save package-name@latest;

Enabling Hot Reloading

Enabling Remote Debugging

Detecting Screen Size

Sometimes you may need to know what’s the screen size of a device that your app is running on to adjust the layout, font sizes, etc.

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

alert(Screen size: ${width}x${height});

Here are various screen sizes for your reference: 


iPhone 5 

  320 x 568 

iPhone 6 

  375 x 667 

iPhone 6 Plus 

  414 x 736 

Transforming Text

To transform text to upper case use toUpperCase() method of string variables.

<Text>{this.props.title.toUpperCase()}</Text>

To transform text to lower case use toLowerCase() method of string variables.

<Text>{this.props.title.toLowerCase()}</Text>

Limiting Number of Lines for Text Component

To limit the number of lines shown for Text component and cut the text that doesn’t fit use numberOfLines prop.

<Text numberOfLines={2}> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

</Text>

Component Boilerplate

You can use this boilerplate to create new components.

import React, { Component } from 'react'; 

import { 

      StyleSheet, 

      Text, 

      View 

} from 'react-native'; 


export default class Component extends Component { 



      render() { 

        return ( 

              <View style={styles.container}> 

      <Text>Component</Text> 

              </View> 

            ); 

      } 


} 



const styles = StyleSheet.create({ 

      container: { 

        flex: 1, 

      }, 

});

To set default prop values for you components use defaultProps property. In the example below we set the default value for title prop. You can always override the default value by passing a custom value to the component JSX expression. For example, <Header title="My Header" />, would change title value from default one to My Header.

import React, { Component } from 'react';

import {

      StyleSheet,

      Text,

      View

} from 'react-native';



export default class Header extends Component {



      static defaultProps = {

	title: 'Default Header'

      }

	

      render() {

            return (

                <View >

                        <Text style={styles.header}>

                              {this.props.title.toUpperCase()}

                        </Text>

                 </View>

            );

      }

}



const styles = StyleSheet.create({

      header: {

            fontFamily: 'Avenir',

            fontSize: 40,

            fontWeight: 'bold',

            textAlign: 'center',

      },

});

You can have props as an object and pass them in JSX using ... spread operator.

render() { 

    const props = { 

      title: 'My Title', 

      size: 20, 

    }; 

    return <Header {...props} />; 

}

This code is essentially the same as follows:

render() { 

    return <Header title="My Title" size={20} />; 

}

You can pull properties out of objects using const { prop1, prop1, ...rest } = object notation.

render() { 

  const { title, size, ...rest } = this.props; 

  return ( 

      <View> 

          <Text style={[styles.header, { fontSize: size }]} {...rest}> 

              {title.toUpperCase()} 

           </Text> 

      </View> 

  ); 

}

Install babel-plugin-transform-decorators-legacy first.

npm install --save-dev babel-plugin-transform-decorators-legacy

And then edit .babelrc file to include transform-decorators-legacy plugin.

{ 

   "presets": [ 

    "react-native" 

   ], 

   "plugins": [ 

    "transform-decorators-legacy" 

   ] 

}

Now you can use decorators. In the following example we’re using @connect decorator from react-redux package.

import { connect } from 'react-redux'; 

import { bindActionCreators } from 'redux'; 


@connect( 

      (state) => { 

            const { user, data } = state; 

        return { 

            user, 

            data 

        };}, 

    (dispatch) => ({ 

            actions: { ...bindActionCreators({ actionA,  
    actionB }, dispatch) } 

      }) 

) 

export default class App extends Component { 


      render({ user } = this.props) { 
 

            return ( 
 

            <View > 

                 <Text style={styles.header}> 

                 Hello {user.name} 
 

             </Text> 

             </View> 

            ); 

      } 

}

Applying Multiple Styles to a Component

You can use an array to pass multiple styles to a component.

<View style={[styles.generic, styles.specific, { color: 'blue' }]} />

Primary and Secondary Axis

In flexDirection default column mode the primary axis is column, the secondary is row, and vice versa in row mode.

Justify Content

Adding justifyContent to a component’s style sets the distribution of children along the primary axis. Available options are

flex-start (default) — Children distributed at the start.

center — Children are centered.

flex-end — Children distributed at the end.

space-around — Children distributed with equal space around them.

space-between — Children distributed evenly.

Adding alignItems to a component’s style sets the alignment of children along the secondary axis. Available options are

flex-start — Children aligned at the start.

center — Children aligned at the center.

flex-end — Children aligned at the end.

stretch (default) — Children stretched to fill up all space. This options doesn’t work for children with fixed dimension along the secondary axis.