Tweet
Tweet

Slide 1

Slide 1 text

BY CHRIS BALL From Idea to App Store a Guide to Shipping React Native Apps

Slide 2

Slide 2 text

From Idea to App Store cball_ Chain React
 Photobomb!

Slide 3

Slide 3 text

From Idea to App Store cball_ OUR BET AT ECHOBIND ChainReactPhotobomb.com

Slide 4

Slide 4 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Let’s See it.

Slide 5

Slide 5 text

Start coding!

Slide 6

Slide 6 text

Let’s start coding!

Slide 7

Slide 7 text

Agenda!

Slide 8

Slide 8 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist

Slide 9

Slide 9 text

Prerequisites

Slide 10

Slide 10 text

From Idea to App Store cball_ OUR BET AT ECHOBIND App Store Accounts

Slide 11

Slide 11 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 12

Slide 12 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 13

Slide 13 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Developer Program: $99 / year

Slide 14

Slide 14 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 15

Slide 15 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Developer Program: $25, one time

Slide 16

Slide 16 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Done trading $ for accounts.

Slide 17

Slide 17 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist !

Slide 18

Slide 18 text

List Features

Slide 19

Slide 19 text

From Idea to App Store cball_ OUR BET AT ECHOBIND -Real time photo stream -Add a photo from camera -Add a photo from library -Add optional stickers to the photo -Save the composite photo to the real time stream Photobomb Features

Slide 20

Slide 20 text

Research Unknowns

Slide 21

Slide 21 text

From Idea to App Store cball_ -Which one? Camera Lib -Do I need it? Redux/Mobx -How to composite stickers + image? Image from View -How to scale on gesture? Pinch to resize -graphql subscriptions? Firebase? How to real-time

Slide 22

Slide 22 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! !

Slide 23

Slide 23 text

Think in “Screens”

Slide 24

Slide 24 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 25

Slide 25 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! !

Slide 26

Slide 26 text

API

Slide 27

Slide 27 text

From Idea to App Store cball_ OUR BET AT ECHOBIND -Need endpoints? -Worth adding graphql layer? Existing -Develop in house
 (REST, graphql, JSON API, etc) -BaaS
 (Graph.cool, Scaphold, Kinvey, etc) New Choose your own API adventure

Slide 28

Slide 28 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! !

Slide 29

Slide 29 text

Init Your App

Slide 30

Slide 30 text

From Idea to App Store cball_ Initialize your app YES NO Need native dependencies? (react-native link) Covered by Expo? (Maps, Fingerprint, Pedometer) YES NO CRNA create-react-native-app react-native init ¯\_(ϑ)_/¯ Eject DIY

Slide 31

Slide 31 text

From Idea to App Store cball_ Don’t want to start from scratch? Try these.

Slide 32

Slide 32 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! !

Slide 33

Slide 33 text

Let’s MVP our MVP

Slide 34

Slide 34 text

From Idea to App Store cball_ Tip: Focus on a single platform, check both.

Slide 35

Slide 35 text

From Idea to App Store cball_ Tip: Watch image sizes! This background image started life as 1440x640. Using images this large will make your app suck. New size? 360x160. Don’t forget to generate @2x & @3x.

Slide 36

Slide 36 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! !

Slide 37

Slide 37 text

Get Image From Camera or Library

Slide 38

Slide 38 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 39

Slide 39 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Tip: Don’t forget to add permissions!

Slide 40

Slide 40 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! !

Slide 41

Slide 41 text

Upload a file

Slide 42

Slide 42 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Upload the image we just took Hey look! A massive time-suck.

Slide 43

Slide 43 text

Photo Stream

Slide 44

Slide 44 text

From Idea to App Store cball_ OUR BET AT ECHOBIND graphql query + subscription FlatList performant list view

Slide 45

Slide 45 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 46

Slide 46 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 47

Slide 47 text

Create Composite View

Slide 48

Slide 48 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 49

Slide 49 text

From Idea to App Store cball_ OUR BET AT ECHOBIND How to Background Image

Slide 50

Slide 50 text

From Idea to App Store cball_ OUR BET AT ECHOBIND How to Background Image

Slide 51

Slide 51 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 52

Slide 52 text

Pinch to Zoom

Slide 53

Slide 53 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 54

Slide 54 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 55

Slide 55 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Easy pinch detection.

Slide 56

Slide 56 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Transformable Image Animated.View that: - Animates in on initial render - Animates on touch start / stop - Scales up/down when pinched See full code on GitHub.

Slide 57

Slide 57 text

From Idea to App Store cball_ OUR BET AT ECHOBIND We have an app! Let’s check what photos you’ve added.

Slide 58

Slide 58 text

From Idea to App Store cball_ OUR BET AT ECHOBIND We aren’t persisting anything in this app. But in most apps, this is important.

Slide 59

Slide 59 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Persist Minimal Data 1. Enough to re-log in 2. Show previously fetched data if offline. Note: You usually shouldn’t persist your entire Redux / Mobx data store.

Slide 60

Slide 60 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! !

Slide 61

Slide 61 text

Add App Icons

Slide 62

Slide 62 text

From Idea to App Store cball_ OUR BET AT ECHOBIND App icons React Native generates these for us.

Slide 63

Slide 63 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Want pixel perfect control? Sketch is pretty helpful.

Slide 64

Slide 64 text

From Idea to App Store cball_ OUR BET AT ECHOBIND rn-generator-toolbox yo rn-toolbox:assets --icon icon.png --android yo rn-toolbox:assets --icon icon.png --ios

Slide 65

Slide 65 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! !

Slide 66

Slide 66 text

Splash Screen

Slide 67

Slide 67 text

From Idea to App Store cball_ Tired of this?

Slide 68

Slide 68 text

From Idea to App Store cball_ OUR BET AT ECHOBIND rn-generator-toolbox

Slide 69

Slide 69 text

From Idea to App Store cball_

Slide 70

Slide 70 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! !

Slide 71

Slide 71 text

Avoid “Flash of White”

Slide 72

Slide 72 text

From Idea to App Store cball_ Avoid “Flash of White” (iOS)

Slide 73

Slide 73 text

From Idea to App Store cball_ Avoid “Flash of White” (Android)

Slide 74

Slide 74 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! !

Slide 75

Slide 75 text

Device Orientation

Slide 76

Slide 76 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Check Device Orientation

Slide 77

Slide 77 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! ! !

Slide 78

Slide 78 text

Handle Offline

Slide 79

Slide 79 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Handle Offline

Slide 80

Slide 80 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! ! ! !

Slide 81

Slide 81 text

Name / Package Name Correct?

Slide 82

Slide 82 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Need to Rename App? The app name on Android comes from AndroidManifest.xml. Check the label attribute of . This value is typically referenced as a named variable, defined in strings.xml.

Slide 83

Slide 83 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Need to Rename package?

Slide 84

Slide 84 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Slide 85

Slide 85 text

Add Automated Tests

Slide 86

Slide 86 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Jest Snapshot Test

Slide 87

Slide 87 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Detox E2E Test

Slide 88

Slide 88 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! !

Slide 89

Slide 89 text

“Optional”

Slide 90

Slide 90 text

Add CI

Slide 91

Slide 91 text

From Idea to App Store cball_ OUR BET AT ECHOBIND

Slide 92

Slide 92 text

From Idea to App Store cball_ If you want to use Mobile Center, refer to everything Ram said earlier.

Slide 93

Slide 93 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Slide 94

Slide 94 text

Codepush

Slide 95

Slide 95 text

From Idea to App Store cball_ If you want to use Mobile Center, refer to everything Ram said earlier.

Slide 96

Slide 96 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Add and configure just in case.

Slide 97

Slide 97 text

From Idea to App Store cball_ OUR BET AT ECHOBIND I used Codepush to add stickers on Saturday.

Slide 98

Slide 98 text

From Idea to App Store cball_ OUR BET AT ECHOBIND What do users see? Mandatory (what we did) = download and apply the update immediately. Not Mandatory = download and apply the update on next app restart. This update only targets 1.0 and 1.1 releases. Future builds will include this patch.

Slide 99

Slide 99 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Slide 100

Slide 100 text

Crash Reporting & Analytics

Slide 101

Slide 101 text

From Idea to App Store cball_ Basic analytics by App Stores

Slide 102

Slide 102 text

From Idea to App Store cball_ Analytics / Crash Data Crash Data

Slide 103

Slide 103 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Slide 104

Slide 104 text

Deploy to Beta

Slide 105

Slide 105 text

From Idea to App Store cball_ Certificates are fun!

Slide 106

Slide 106 text

From Idea to App Store cball_ iOS

Slide 107

Slide 107 text

From Idea to App Store cball_ Android

Slide 108

Slide 108 text

From Idea to App Store cball_ Option 1: Beta Test using CI Service

Slide 109

Slide 109 text

From Idea to App Store cball_ If you want to use Mobile Center, refer to everything Ram said earlier.

Slide 110

Slide 110 text

From Idea to App Store cball_ Option 2: CI Uploads Binary Beta w/ TestFlight + Google Play

Slide 111

Slide 111 text

From Idea to App Store cball_ Option 3: Fastlane Beta w/ TestFlight + Google Play

Slide 112

Slide 112 text

From Idea to App Store cball_ Option 4: You Beta w/ TestFlight + Google Play

Slide 113

Slide 113 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Slide 114

Slide 114 text

Final Checks

Slide 115

Slide 115 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Go over Apple Rejection Info

Slide 116

Slide 116 text

From Idea to App Store cball_ OUR BET AT ECHOBIND App Store Assets Manual generator-rn-toolbox

Slide 117

Slide 117 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Test on Actual Devices

Slide 118

Slide 118 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Create app: Apple

Slide 119

Slide 119 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Create app: Apple New builds will show here

Slide 120

Slide 120 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Create app: Google

Slide 121

Slide 121 text

From Idea to App Store cball_ OUR BET AT ECHOBIND Create app: Google

Slide 122

Slide 122 text

From Idea to App Store cball_ OUR BET AT ECHOBIND fastlane precheck

Slide 123

Slide 123 text

From Idea to App Store cball_ Prerequisites Register at App Stores, DUNS # Features / Research Unknowns, think “Screens”, API needs Initialize App Create RN App / Expo / react-native init / Ignite App Icon generator-rn-toolbox / fastlane / web Splash Screen react-native-smart-splashscreen / manual State vs Store Do you need Redux / Mobx? Maybe not. Persist Minimal Data to Device redux-persist, mobx-persist, AsyncStorage Handle Offline Minimum = Show a Banner Add CI buddybuild, Windows Mobile Center Setup Beta Testing Buddybuild, Windows Mobile Center, Testflight / Google Play Beta, Hockeyapp, etc App Store Assets Screenshots, Feature Images, Video Correct App / Package Name? com.biz.app Checked in Landscape? Adjust or force portrait only Optimized Image size? High res = slow load. Use auto @2x, @3x for static HTTPS API / Images Easier & better than dealing with App Transport Security Avoid “Flash of White” Set app bg colors or keep splashscreen up Crash Reporting / Analytics Mobile Center, Buddybuild, Fabric, etc Codepush Instant updates for your users Test on Actual Devices As many as you can Add Automated Tests Minimal: Jest Snapshots + unit, Full: E2E tests via detox Ensure Proper Permissions Pay attention to lib READMEs Fastlane Precheck Avoids costly App Store delays From Idea to App Store The Checklist ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Slide 124

Slide 124 text

Submit

Slide 125

Slide 125 text

From Idea to App Store cball_ Push a button and wait!

Slide 126

Slide 126 text

Handle Rejection

Slide 127

Slide 127 text

From Idea to App Store cball_ Google Rejection

Slide 128

Slide 128 text

From Idea to App Store cball_ Apple Rejection Plenty of time!?

Slide 129

Slide 129 text

From Idea to App Store cball_ Apple Rejection Still plenty of time!?

Slide 130

Slide 130 text

From Idea to App Store cball_ Apple Rejection

Slide 131

Slide 131 text

Re-Submit

Slide 132

Slide 132 text

From Idea to App Store cball_ Don’t create a new version/release. Choose new build & submit from Store UI.

Slide 133

Slide 133 text

Victory!

Slide 134

Slide 134 text

From Idea to App Store cball_ THANKS! I WOULD LOVE TO MEET YOU ALL. COME SAY HI! https:/ /github.com/cball/ChainReactPhotobomb https:/ /github.com/cball/ChainReactPhotobomb-Web https:/ /chainreactphotobomb.com ❤ WE WOULD LOVE TO HELP WITH YOUR APP.