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

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

6254dc2b7e4f26b2ab5d05c560834671?s=128

Chris Ball

July 11, 2017
Tweet

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.