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
   

   View Slide

2. From Idea to App Store cball_
   Chain React

   Photobomb!
   

   View Slide

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

   View Slide

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

   View Slide

5. Start coding!
   

   View Slide

6. Let’s start coding!
   

   View Slide

7. Agenda!
   

   View Slide

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
   

   View Slide

9. Prerequisites
   

   View Slide

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

    View Slide

11. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

12. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

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

    View Slide

14. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

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

    View Slide

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

    View Slide

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
    !
    

    View Slide

18. List Features
    

    View Slide

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
    

    View Slide

20. Research Unknowns
    

    View Slide

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
    

    View Slide

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
    !
    !
    

    View Slide

23. Think in “Screens”
    

    View Slide

24. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

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
    !
    !
    !
    

    View Slide

26. API
    

    View Slide

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
    

    View Slide

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
    !
    !
    !
    !
    

    View Slide

29. Init Your App
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    !
    !
    !
    !
    !
    

    View Slide

33. Let’s MVP our MVP
    

    View Slide

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

    View Slide

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.
    

    View Slide

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
    !
    !
    !
    !
    !
    !
    

    View Slide

37. Get Image From
    Camera or Library
    

    View Slide

38. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

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

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    

    View Slide

41. Upload a file
    

    View Slide

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

    View Slide

43. Photo Stream
    

    View Slide

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

    View Slide

45. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

46. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

47. Create Composite View
    

    View Slide

48. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

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

    View Slide

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

    View Slide

51. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

52. Pinch to Zoom
    

    View Slide

53. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

54. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    !
    

    View Slide

61. Add App Icons
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    !
    !
    ! !
    !
    !
    ! !
    !
    

    View Slide

66. Splash Screen
    

    View Slide

67. From Idea to App Store cball_
    Tired of this?
    

    View Slide

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

    View Slide

69. From Idea to App Store cball_
    

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    !
    !
    !
    

    View Slide

71. Avoid “Flash of White”
    

    View Slide

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

    View Slide

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

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    ! !
    !
    !
    

    View Slide

75. Device Orientation
    

    View Slide

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

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    ! !
    !
    !
    !
    !
    

    View Slide

78. Handle Offline
    

    View Slide

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

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    ! !
    !
    !
    !
    !
    !
    

    View Slide

81. Name / Package Name
    Correct?
    

    View Slide

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 .
    This value is typically referenced as a named variable, defined in strings.xml.
    

    View Slide

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

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    ! !
    !
    !
    !
    !
    !
    !
    

    View Slide

85. Add Automated Tests
    

    View Slide

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

    View Slide

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

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    ! !
    !
    !
    !
    

    View Slide

89. “Optional”
    

    View Slide

90. Add CI
    

    View Slide

91. From Idea to App Store cball_
    OUR BET AT
    ECHOBIND
    

    View Slide

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

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    ! !
    !
    !
    !
    !
    !
    !
    !
    !
    

    View Slide

94. Codepush
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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
    !
    !
    ! !
    !
    !
    !
    ! !
    !
    !
    !
    !
    !
    !
    !
    !
    !
    

    View Slide

100. Crash Reporting &
     Analytics
     

     View Slide

101. From Idea to App Store cball_
     Basic analytics by App Stores
     

     View Slide

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

     View Slide

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
     !
     !
     ! !
     !
     !
     !
     ! !
     !
     !
     !
     !
     !
     !
     !
     !
     !
     !
     

     View Slide

104. Deploy to Beta
     

     View Slide

105. From Idea to App Store cball_
     Certificates are fun!
     
     

     View Slide

106. From Idea to App Store cball_
     iOS
     

     View Slide

107. From Idea to App Store cball_
     Android
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     !
     !
     ! !
     !
     !
     !
     ! !
     !
     !
     !
     !
     !
     !
     !
     !
     !
     

     View Slide

114. Final Checks
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     !
     !
     ! !
     !
     !
     !
     ! !
     !
     !
     !
     !
     !
     !
     !
     !
     !
     !
     !
     !
     !
     

     View Slide

124. Submit
     
     

     View Slide

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

     View Slide

126. Handle Rejection
     
     

     View Slide

127. From Idea to App Store cball_
     Google Rejection
     

     View Slide

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

     View Slide

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

     View Slide

130. From Idea to App Store cball_
     Apple Rejection
     

     View Slide

131. Re-Submit
     

     View Slide

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

     View Slide

133. Victory!
     

     View Slide

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.
     

     View Slide