© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Adrian HallSr. Developer Advocate, AWS Mobile

Building React Native AppsWith AWS

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

50%

34%

9% 7%

Mobile App Desktop Mobile Web Tablet App

Digital MediaTime Spent on devices

comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience, June 2017

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Developing Mobile Apps: Options

Native Apps Cross-Platform Native Apps

Hybrid Web Apps Hosted Web Apps

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Why React Native?

ü Compiles to a Native Appü Full access to Native APIsü Leverage React & JavaScript

✗ Not quite React – No DOM✗ Rapidly changing ecosystem✗ UI differences between iOS and Android

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

AWS Resources you can use

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

AWS Resources you need

Analytics Identity Device Testing

NoSQL Database File Storage ServerlessCompute

API Gateway

Chat Bots Text to Speech Machine LearningFor Images

Video Distribution

Major

Use-caseSpecific

Essential

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

AWS Resources you need

AmazonPinpoint

AmazonCognito

AWS Device Farm

Amazon DynamoDB

Amazon S3 AWS Lambda Amazon API Gateway

Amazon Lex Amazon Polly Amazon Rekognition

Amazon Cloudfront

Major

Use-caseSpecific

Essential

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Flux Architecture

React View

Action

StoreDispatcher

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Data Flow Architecture for Cloud

Action

Dispatcher Store View

AsyncStorage Cloud SyncHydrate

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Tools for dealing with state

On Device

Flux Pattern Libraries• Redux• MobX

Storage Libraries• ASyncStorage• Realm

Accessing the Cloud

React Native Starter Kit• HOCs for Common

Operations

AWS Resources• AWS Mobile Hub• Amazon DynamoDB

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Introducing AWS React Native Starter Kit

Complete Serverless React Native Project

Library of AWS Controls• Identity & Authentication• Data Storage• Custom API

Implemented as Higher Order Components (HOCs)

https://github.com/awslabs/aws-mobile-react-native-starter

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

DemonstrationBuilding a React Native app and adding AWS Resources to it

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

Where to get more information

React Native Resources:https://facebook.github.io/react-native/

MobX and Reduxhttp://redux.js.org/https://mobx.js.org/

React Native on AWS:https://github.com/awslabs/aws-mobile-react-native-starter