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. 1.

    BY CHRIS BALL From Idea to App Store a Guide

    to Shipping React Native Apps
  2. 7.
  3. 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
  4. 13.
  5. 15.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    Developer Program: $25, one time
  6. 16.
  7. 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 !
  8. 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
  9. 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
  10. 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 ! !
  11. 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 ! ! !
  12. 26.

    API

  13. 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
  14. 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 ! ! ! !
  15. 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
  16. 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 ! ! ! ! !
  17. 34.

    From Idea to App Store cball_ Tip: Focus on a

    single platform, check both.
  18. 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.
  19. 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 ! ! ! ! ! !
  20. 39.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    Tip: Don’t forget to add permissions!
  21. 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 ! ! ! ! ! ! !
  22. 42.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    Upload the image we just took Hey look! A massive time-suck.
  23. 44.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    graphql query + subscription FlatList performant list view
  24. 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.
  25. 57.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    We have an app! Let’s check what photos you’ve added.
  26. 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.
  27. 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.
  28. 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 ! ! ! ! ! ! ! !
  29. 62.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    App icons React Native generates these for us.
  30. 63.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    Want pixel perfect control? Sketch is pretty helpful.
  31. 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
  32. 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 ! ! ! ! ! ! ! ! !
  33. 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 ! ! ! ! ! ! ! ! ! !
  34. 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 ! ! ! ! ! ! ! ! ! ! !
  35. 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 ! ! ! ! ! ! ! ! ! ! ! ! !
  36. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! !
  37. 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.
  38. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  39. 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 ! ! ! ! ! ! ! ! ! ! ! !
  40. 90.
  41. 92.

    From Idea to App Store cball_ If you want to

    use Mobile Center, refer to everything Ram said earlier.
  42. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  43. 94.
  44. 95.

    From Idea to App Store cball_ If you want to

    use Mobile Center, refer to everything Ram said earlier.
  45. 96.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    Add and configure just in case.
  46. 97.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    I used Codepush to add stickers on Saturday.
  47. 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.
  48. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  49. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  50. 109.

    From Idea to App Store cball_ If you want to

    use Mobile Center, refer to everything Ram said earlier.
  51. 110.

    From Idea to App Store cball_ Option 2: CI Uploads

    Binary Beta w/ TestFlight + Google Play
  52. 112.
  53. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  54. 115.
  55. 116.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    App Store Assets Manual generator-rn-toolbox
  56. 119.

    From Idea to App Store cball_ OUR BET AT ECHOBIND

    Create app: Apple New builds will show here
  57. 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 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !
  58. 124.
  59. 131.
  60. 132.

    From Idea to App Store cball_ Don’t create a new

    version/release. Choose new build & submit from Store UI.
  61. 133.
  62. 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.