From Idea to App Store: A Guide to Shipping React Native Apps

There is a lot to consider when developing a new React Native application, and even more to think about in order to ship it. This talk will focus on distilling all of those requirements into actionable steps that you can use to deliver your next app.

We'll do this by examining an app crafted specifically for this talk.

Check it out at https://chainreactphotobomb.com

Code:
https://github.com/cball/ChainReactPhotobomb

Transcript

1. BY CHRIS BALL From Idea to App Store a Guide to Shipping React Native Apps
2. From Idea to App Store cball_ Chain React
 Photobomb!
3. From Idea to App Store cball_ OUR BET AT ECHOBIND ChainReactPhotobomb.com
4. From Idea to App Store cball_ OUR BET AT ECHOBIND Let’s See it.
5. Start coding!
6. Let’s start coding!
7. Agenda!
8. 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
9. Prerequisites
10. From Idea to App Store cball_ OUR BET AT ECHOBIND App Store Accounts
11. From Idea to App Store cball_ OUR BET AT ECHOBIND
12. From Idea to App Store cball_ OUR BET AT ECHOBIND
13. From Idea to App Store cball_ OUR BET AT ECHOBIND Developer Program: $99 / year
14. From Idea to App Store cball_ OUR BET AT ECHOBIND
15. From Idea to App Store cball_ OUR BET AT ECHOBIND Developer Program: $25, one time
16. From Idea to App Store cball_ OUR BET AT ECHOBIND Done trading $ for accounts.
17. 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 !
18. List Features
19. 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
20. Research Unknowns
21. 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
22. 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 ! !
23. Think in “Screens”
24. From Idea to App Store cball_ OUR BET AT ECHOBIND
25. 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 ! ! !
26. API
27. 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
28. 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 ! ! ! !
29. Init Your App
30. 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
31. From Idea to App Store cball_ Don’t want to start from scratch? Try these.
32. 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 ! ! ! ! !
33. Let’s MVP our MVP
34. From Idea to App Store cball_ Tip: Focus on a single platform, check both.
35. 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.
36. 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 ! ! ! ! ! !
37. Get Image From Camera or Library
38. From Idea to App Store cball_ OUR BET AT ECHOBIND
39. From Idea to App Store cball_ OUR BET AT ECHOBIND Tip: Don’t forget to add permissions!
40. 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 ! ! ! ! ! ! !
41. Upload a file
42. From Idea to App Store cball_ OUR BET AT ECHOBIND Upload the image we just took Hey look! A massive time-suck.
43. Photo Stream
44. From Idea to App Store cball_ OUR BET AT ECHOBIND graphql query + subscription FlatList performant list view
45. From Idea to App Store cball_ OUR BET AT ECHOBIND
46. From Idea to App Store cball_ OUR BET AT ECHOBIND
47. Create Composite View
48. From Idea to App Store cball_ OUR BET AT ECHOBIND
49. From Idea to App Store cball_ OUR BET AT ECHOBIND How to Background Image
50. From Idea to App Store cball_ OUR BET AT ECHOBIND How to Background Image
51. From Idea to App Store cball_ OUR BET AT ECHOBIND
52. Pinch to Zoom
53. From Idea to App Store cball_ OUR BET AT ECHOBIND
54. From Idea to App Store cball_ OUR BET AT ECHOBIND
55. From Idea to App Store cball_ OUR BET AT ECHOBIND Easy pinch detection.
56. 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.
57. From Idea to App Store cball_ OUR BET AT ECHOBIND We have an app! Let’s check what photos you’ve added.
58. 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.
59. 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.
60. 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 ! ! ! ! ! ! ! !
61. Add App Icons
62. From Idea to App Store cball_ OUR BET AT ECHOBIND App icons React Native generates these for us.
63. From Idea to App Store cball_ OUR BET AT ECHOBIND Want pixel perfect control? Sketch is pretty helpful.
64. 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
65. 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 ! ! ! ! ! ! ! ! !
66. Splash Screen
67. From Idea to App Store cball_ Tired of this?
68. From Idea to App Store cball_ OUR BET AT ECHOBIND rn-generator-toolbox
69. From Idea to App Store cball_
70. 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 ! ! ! ! ! ! ! ! ! !
71. Avoid “Flash of White”
72. From Idea to App Store cball_ Avoid “Flash of White” (iOS)
73. From Idea to App Store cball_ Avoid “Flash of White” (Android)
74. 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 ! ! ! ! ! ! ! ! ! ! !
75. Device Orientation
76. From Idea to App Store cball_ OUR BET AT ECHOBIND Check Device Orientation
77. 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 ! ! ! ! ! ! ! ! ! ! ! ! !
78. Handle Offline
79. From Idea to App Store cball_ OUR BET AT ECHOBIND Handle Offline
80. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! !
81. Name / Package Name Correct?
82. 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 <application>. This value is typically referenced as a named variable, defined in strings.xml.
83. From Idea to App Store cball_ OUR BET AT ECHOBIND Need to Rename package?
84. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
85. Add Automated Tests
86. From Idea to App Store cball_ OUR BET AT ECHOBIND Jest Snapshot Test
87. From Idea to App Store cball_ OUR BET AT ECHOBIND Detox E2E Test
88. 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 ! ! ! ! ! ! ! ! ! ! ! !
89. “Optional”
90. Add CI
91. From Idea to App Store cball_ OUR BET AT ECHOBIND
92. From Idea to App Store cball_ If you want to use Mobile Center, refer to everything Ram said earlier.
93. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
94. Codepush
95. From Idea to App Store cball_ If you want to use Mobile Center, refer to everything Ram said earlier.
96. From Idea to App Store cball_ OUR BET AT ECHOBIND Add and configure just in case.
97. From Idea to App Store cball_ OUR BET AT ECHOBIND I used Codepush to add stickers on Saturday.
98. 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.
99. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
100. Crash Reporting & Analytics
101. From Idea to App Store cball_ Basic analytics by App Stores
102. From Idea to App Store cball_ Analytics / Crash Data Crash Data
103. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
104. Deploy to Beta
105. From Idea to App Store cball_ Certificates are fun!
106. From Idea to App Store cball_ iOS
107. From Idea to App Store cball_ Android
108. From Idea to App Store cball_ Option 1: Beta Test using CI Service
109. From Idea to App Store cball_ If you want to use Mobile Center, refer to everything Ram said earlier.
110. From Idea to App Store cball_ Option 2: CI Uploads Binary Beta w/ TestFlight + Google Play
111. From Idea to App Store cball_ Option 3: Fastlane Beta w/ TestFlight + Google Play
112. From Idea to App Store cball_ Option 4: You Beta w/ TestFlight + Google Play
113. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
114. Final Checks
115. From Idea to App Store cball_ OUR BET AT ECHOBIND Go over Apple Rejection Info
116. From Idea to App Store cball_ OUR BET AT ECHOBIND App Store Assets Manual generator-rn-toolbox
117. From Idea to App Store cball_ OUR BET AT ECHOBIND Test on Actual Devices
118. From Idea to App Store cball_ OUR BET AT ECHOBIND Create app: Apple
119. From Idea to App Store cball_ OUR BET AT ECHOBIND Create app: Apple New builds will show here
120. From Idea to App Store cball_ OUR BET AT ECHOBIND Create app: Google
121. From Idea to App Store cball_ OUR BET AT ECHOBIND Create app: Google
122. From Idea to App Store cball_ OUR BET AT ECHOBIND fastlane precheck
123. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
124. Submit
125. From Idea to App Store cball_ Push a button and wait!
126. Handle Rejection
127. From Idea to App Store cball_ Google Rejection
128. From Idea to App Store cball_ Apple Rejection Plenty of time!?
129. From Idea to App Store cball_ Apple Rejection Still plenty of time!?
130. From Idea to App Store cball_ Apple Rejection
131. Re-Submit
132. From Idea to App Store cball_ Don’t create a new version/release. Choose new build & submit from Store UI.
133. Victory!
134. 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.