Getting Started With

Agenda

Introduction
Environment Setup
Project, Simulator
Code Structure
Debugging Techniques
UI Components
Native API's
Demo
Reference, Helpers

Introduction

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on Javascript, React, HTML & CSS

Basically If you know JS & Flexbox Layout you are good to create Mobile Applications

- Write once, Deploy Everywhere

- Cut Down Development Effort

Environment Setup

System Requirements

- Mac OS (Recommended)

- Windows (Limited)

IDE

- XCode

- Android Studio

Environment Setup

CLI

- Node

- React Native CLI

- Watchman (Utility Package)

npm install -g node
npm install -g react-native
npm install -g watchman

Project, Simulator

Creating Project

react-native init weekdays
cd weekdays

# Run Node
npm start

Running the app

# Run iOS Version
react-native run-ios

# Run Android Version
react-native run-android

Project, Simulator

iOS

Android

Code Structure

// Import
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';


// Class for Generating Views
class weekdays extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}


// Style for your Views
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// Register you component
AppRegistry.registerComponent('weekdays', () => weekdays);

Debugging Techniques

iOS

Android

Refresh View — cmd + r

Dev Menu — cmd + d [or] Shake device

Refresh View — click r twice

Dev Menu — cmd + m [or] Shake device

Debugging Techniques

Android

iOS

UI Components

Image
List View
Date Picker

Reusable Components which you use from app to app

Including Components

// Step 1 - Install
npm install react-ux-password-field

// Step 2 - Import
var InputPassword = require('react-ux-password-field');

// Step 3 - Include it in View
render: function() {
  return (
    <InputPassword />
  )
}

Navigator
Text Input
Web View

https://js.coach

Native API's

Alert
Camera Roll
Push Notifications

Reusable Components which you use from app to app

Using API's

// Step 1 - Import
var {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  AlertIOS,
} = ReactNative;

// Step 2 - Include in View
<TouchableHighlight
  style={styles.wrapper}
  onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}>

  <View style={styles.button}>
    <Text>
      prompt with title, custom buttons, login/password & default value
    </Text>
  </View>
</TouchableHighlight>