$30 off During Our Annual Pro Sale. View Details »

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

Chris Ball

July 11, 2017
Tweet

More Decks by Chris Ball

Other Decks in Programming

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