React Native for Android

Anirudh SEngineer, Hasura

HASURA

WHAT IS REACT NATIVE?

Timeline

React JS deployed on Facebook’s newsfeed

2011

React deployed on instagram.com

2012

Open sourced at JS Conf US May 2013

React Native announced at React.js Conf

Feb 2015

React Native open sourced

Feb 2015

React Native released for Android Sep 2015

Target Audience for React Native

Web developer

Android developer

iOS developer

Knows Javascript - ES6Written & shipped Android

appsWritten & shipped iOS apps

Familiar with a modern framework

Familiar with Android best practices

Familiar with iOS best practices

Want to write mobile appsWant to write cross-platform

appsWant to write cross-platform

apps

WHY REACT NATIVE?

Advantages over Android workflow

• Reusable code

• Faster build times (Live Reloading!)

• Faster deployment times

• React patterns

Blueprint to become a React Native dev

Native (Android Java)

Javascript ES6React

patterns

React Native basics

Backend Redux

Source: Spencer Carli (@spencer_carli)

REACT PATTERNS

Features

• One-way data flow

• Virtual DOM

• JSX

• Architecture beyond HTML

JSX

var HelloMessage = React.createClass({ render: function () { return <h1>Hello {this.props.message}!</h1>; } });

ReactDOM.render(<HelloMessage message="World" />, document.getElementById('root'));

Components

• Building block of any UI

• Modular, composable

• 2 types: Container & Presentation

• props & states

Component API

• this.props

• this.state

• this.setState(object newState)

Component Lifecycle API

• Mounting cycle

• Updating cycle

Mounting cycle

• constructor(object props)

• componentWillMount()

• render() -> React element

• componentDidMount()

Updating cycle

• componentWillReceiveProps(object nextProps)

• shouldComponentUpdate(object nextProps, object nextState) -> boolean

• componentWillUpdate(object nextProps, object nextState)

• render() -> React element

• componentDidUpdate(object prevProps, object prevState)

Styles

• Inline

<Text style={{color: ‘green’}}>Hello MODS</Text>

• Stylesheet

<Text style={styles.mods}>just red</Text>

const styles = StyleSheet.create({

mods: {

color: ‘green’

}

});

Flex box

• Specify the layout of children

• Combination of • flexDirection - orientation of primary axis

• justifyContent - distribution along primary axis

• alignItems - alignment along secondary axis

REACT NATIVE

Setup

npm install -g react-native-cli

Hello World

import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component { render() { return ( <Text>Hello world!</Text> ); }

}

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

First party components

ActivityIndicator DrawerLayoutAndroid Image ListView

MapView Navigator Modal Picker ProgressBarAndroid

RefreshControl ScrollView Slider StatusBar Switch

Text TextInput ToolBarAndroid TouchableHighlight

TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

View ViewPagerAndroid WebView

Networking

• Fetch & Promise

• Third-party libs that work with XMLHttpRequest

• WebSockets

Navigators

• Scenes

• Navigators

• React Native Router (react-native-router-flux)

Platform specific code

• Platform modules Platform.select({

ios: {

backgroundColor: 'blue',

},

android: {

backgroundColor: 'green',

}}

• Platform-specific extensions NewComponent.ios.js

NewComponent.android.js

Integration with existing apps

• Add com.facebook.react:react-native:+ to your app’s build.gradle

• Add an entry for the local RN maven directory in your project’s build.gradle

• Add Internet permission in your AndroidManifest.xml

• Create an Activity that • creates a ReactRootView

• starts a React application inside it

• sets it as the main content view

• Pass some activity lifecycle callbacks to the ReactInstanceManager

• Also pass back button events to React Native

• Hook up the dev menu

• Run your app

Native modules

• A native module is a Java class that usually extends the ReactContextBaseJavaModule class and implements the functionality required by the JavaScript

• getName method

• getConstants method

• Java methods annotated by @ReactMethod & return void

• Use corresponding Argument types

• Register the module in the createNativeModules method of your apps package

• The package needs to be provided in the getPackages method of the MainApplication.java

Native UI components

• Create the ViewManager subclass

• Implement the createViewInstance method

• Expose view property setters using @ReactProp (or @ReactPropGroup) annotation

• Register the manager in createViewManagers of the applications package

• Implement the JavaScript module

Debugging

• In-App Developer Menu

• Reload JS

• In-app Errors & Warnings

• Console logs

• Chrome Dev Tools

• Debugging Native code

• Performance Monitor

Testing

• Jest Tests - npm test

• Unit Tests - ./scripts/run-android-local-unit-tests.sh

• Integration Tests - ./scripts/run-android-local-integration-

tests.sh

TOOLS

Tools

• Nuclide

• Deco

• Exponent

• CodePush

• Ignite

• Reactroton

RESOURCES

Resources

• Awesome React Native

• JS.coach

• React Native playground

• F8 App

• makeitopen.com

GROWING PAINS

Concerns

• Android is newer

• Open bugs

• Fix core RN bugs if your app is affected

• Getting used to the patterns

CONTRIBUTING TO REACT NATIVE FOR ANDROID

Submitting a Pull Request1. Fork the repo and create your branch from master.

2. Describe your test plan in your commit. If you've added code that should be tested, add tests!

3. If you've changed APIs, update the documentation.

4. If you've updated the docs, verify the website locally and submit screenshots if applicable.

$ cd website

$ npm install && npm start

go to: http://localhost:8079/react-native/index.html 5. Add the copyright notice to the top of any new files you've added.

6. Ensure tests pass on Travis and Circle CI.

7. Make sure your code lints (node linter.js <files touched>).

8. If you haven't already, sign the CLA.

9. Squash your commits (git rebase -i). one intent alongs with one commit makes it clearer for people to review and easier to understand your intention

anirudh24seven

Where can you find me?