React native guide

 React native guide Command Line

Getting Started

• Creating Project: Open Terminal App

react-native init AppName
cd AppName

• Running App in the IOS Simulator

react-native run-ios

• Running App in the Android Simulator

react-native run-android;

 

Upgrading React Native

To upgrade React Native to the latest version execute:

npm install --save react-native@latest;

To upgrade project files execute:

react-native upgrade;

Upgrading NPM Packages

To list all outdated packages execute:

npm outdated

To update a package to the latest version execute:

npm install --save package-name@latest;

Code Snippets

Detecting Screen Size

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

<Text numberOfLines={2}>
  Lorem ipsum dolor sit amet, 
</Text>

Components

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,
  },
});

Default Prop Values

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 titlevalue 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',
  },
});

Spread Attributes

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} />;
} 

Pulling Properties out of Objects

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>
  );
}

Using ES7 Decorators

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 @connectdecorator 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>
    );
  }
}

Styling

Applying Multiple Styles to a Component

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

Making a Circle

<View style={{
  width: 90,
  height: 90,
  borderRadius: 90 / 2,
  backgroundColor: '#2196F3'
}}/>

Fitting Image Into Flexible Container

<View style={{
    backgroundColor: '#dddddd',
    flex: 1,
  }}>
  <Image source={{ uri: 'https://placekitten.com/g/800/600' }} style={{
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  }} />
</View>

Justify Content

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

container: {
  flexDirection: 'row',
  justifyContent: 'flex-start'
}

center — Children are centered.

container: {
  flexDirection: 'row',
  justifyContent: 'center'
}

flex-end — Children distributed at the end.

container: {
  flexDirection: 'row',
  justifyContent: 'flex-end'
},

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

container: {
  flexDirection: 'row',
  justifyContent: 'space-around'
}

space-between — Children distributed evenly.

container: {
  flexDirection: 'row',
  justifyContent: 'space-between'
}

Align Items

flex-start — Children aligned at the start.

container: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'flex-start'
}

center — Children aligned at the center.

container: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center'
}

flex-end — Children aligned at the end.

container: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'flex-end'
}

Wrapping Up

I hope you were able to find something useful for you and saved some time for developing amazing apps. If you feel like the list is missing something, just leave a comment and I’ll add it.

enqtran

I'm enqtran - A coder and blogger :) [email protected]

View all posts by enqtran