Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Idea to "Hey It Works": Building an app with React Native

Chris Ball
February 22, 2017

From Idea to "Hey It Works": Building an app with React Native

We'll take a detailed look at an app idea called Breaktivity - a way to help manage your work / break cycles by forcing you to move during each break.

While we won't be able to cover building the entire app during the talk, you should leave with a better understanding on how to get started, how to think about and build components and screens, or simply an appreciation for how React Native enables us to build great mobile apps.

Chris Ball

February 22, 2017
Tweet

More Decks by Chris Ball

Other Decks in Programming

Transcript

  1. BY CHRIS BALL
    From Idea to"Hey it works!"
    building an app with React Native

    View full-size slide

  2. OK, WHAT IS IT?
    “Hey I have an app idea.”

    View full-size slide

  3. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    We’re going to take a detailed look at an app
    that helps you manage work/break cycles.
    Eventually, maybe a real app.
    Right now, a Proof of Concept.
    Breaktivity

    View full-size slide

  4. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    You’ve never used React Native and want a general
    idea how to get going.
    Option 1: How to get started
    Start thinking high level before writing any code
    Option 2: Thinking in Components
    See first hand some of the reasons people are so
    excited.
    Option 3: What’s all the hype about?
    Here’s what I’d like you to get out of this talk.

    View full-size slide

  5. Let’s start coding!

    View full-size slide

  6. Let’s start coding!

    View full-size slide

  7. Think about the problem

    View full-size slide

  8. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -Pomodoro is a good idea but a little boring
    -Long work cycles are common
    -Little to no breaks are common
    -We all sit too much. Try and enforce movement.
    The Problem with work / break cycles

    View full-size slide

  9. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -Have configurable work cycles, max 1 hour
    -Have configurable break cycles, min 2 minutes
    -Try and enforce movement by ensuring phone
    moves a certain distance (x, y, z axis)
    A solution to bad work / break cycles

    View full-size slide

  10. Sketch Ideas

    View full-size slide

  11. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND

    View full-size slide

  12. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -SettingsIcon
    -CountdownTimer
    -CircularProgressBar (animated)
    -PlayPauseButton
    What components exist?

    View full-size slide

  13. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -CloseIcon
    -Slider
    -Checkbox (Toggle)
    What components exist?

    View full-size slide

  14. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -Image
    -Progressbar (animated)
    What components exist?

    View full-size slide

  15. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -Image
    -CountdownTimer
    -Progressbar (animated)
    What components exist?

    View full-size slide

  16. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -Image
    -Button
    What components exist?

    View full-size slide

  17. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -Image
    -Button
    What components exist?
    -SettingsIcon
    -CountdownTimer
    -CircularProgressBar (animated)
    -PlayPauseButton
    -Progressbar (animated)
    -CloseIcon
    -Slider
    -Checkbox (Toggle)

    View full-size slide

  18. Research Unknowns

    View full-size slide

  19. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    -Do I write my own?
    Timers?
    -Should I use it or something else?
    SVG?
    -Do I even need one?
    Which Router?
    -Do I need it?
    Redux?
    -Accelerometer, magnetometer?
    step counter?
    Determine movement?
    -What can I use?
    Animated progress?

    View full-size slide

  20. Start your app

    View full-size slide

  21. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Getting Started
    -Follow the guides: https:/
    /facebook.github.io/react-native/docs/getting-started.html
    -Recommend Genymotion for Android, much nicer
    -warning: setting up sdks properly can be
    -Assuming React Native is installed, is it up-to-date?

    View full-size slide

  22. From Idea to “Hey it Works!” cball_
    Getting Started
    Run react-native init

    View full-size slide

  23. From Idea to “Hey it Works!” cball_
    Getting Started
    react-native run-ios

    View full-size slide

  24. From Idea to “Hey it Works!” cball_
    Getting Started
    react-native run-android

    View full-size slide

  25. From Idea to “Hey it Works!” cball_
    Getting Started
    It’s alive!

    View full-size slide

  26. From Idea to “Hey it Works!” cball_
    Getting Started
    Your debugging friend

    View full-size slide

  27. From Idea to “Hey it Works!” cball_
    Getting Started
    Lots of files you didn’t have to create.

    View full-size slide

  28. From Idea to “Hey it Works!” cball_
    Tip!
    At this point, focus on a single platform.
    Note things to followup on.

    View full-size slide

  29. From Idea to “Hey it Works!” cball_
    Folder Structure?
    A few community conventions but still a
    bit of wild west. Shoutout to Ignite but, I
    don’t recommend using to start.

    View full-size slide

  30. The Main Screen

    View full-size slide

  31. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    The Main Screen
    react-native-circular-progress

    View full-size slide

  32. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    The Main Screen
    react-native link

    View full-size slide

  33. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Index files

    View full-size slide

  34. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Top Level App Container

    View full-size slide

  35. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    The Root Container

    View full-size slide

  36. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    The Main Screen - CountdownTimer

    View full-size slide

  37. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    The Main Screen - CountdownTimer

    View full-size slide

  38. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    CountdownTimer Styles

    View full-size slide

  39. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Let’s
    it!
    Animated Progress +
    Timer

    View full-size slide

  40. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Play / Pause Button

    View full-size slide

  41. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Play / Pause Button

    View full-size slide

  42. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Play / Pause Button
    react-native-vector-icons

    View full-size slide

  43. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Play / Pause Button

    View full-size slide

  44. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Let’s
    it!
    Toggle + Button w/ Icon

    View full-size slide

  45. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Format the time

    View full-size slide

  46. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Let’s
    it!
    Formatted Time

    View full-size slide

  47. The Settings Screen

    View full-size slide

  48. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Add a settings icon

    View full-size slide

  49. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Navigation?

    View full-size slide

  50. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Navigation

    View full-size slide

  51. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Settings Screen

    View full-size slide

  52. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Let’s
    it!
    Settings navigation

    View full-size slide

  53. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Settings Screen

    View full-size slide

  54. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Settings Screen
    Let’s
    it!
    Settings controls

    View full-size slide

  55. Adjust Android Theme

    View full-size slide

  56. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    What’s with the green color
    on the slider and switches?

    View full-size slide

  57. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Android App Theme

    View full-size slide

  58. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Settings Screen
    Let’s
    it!
    Theme change

    View full-size slide

  59. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Give yourself a hug!
    Things kind of work.

    View full-size slide

  60. Sharing State

    View full-size slide

  61. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    When we navigate back and
    forth, data goes back to
    initial state. How to fix that?

    View full-size slide

  62. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Navigating back and forth
    Let’s
    it!
    Data gets reset

    View full-size slide

  63. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Option 1: Lift state to higher
    component
    Option 2: Implement Redux
    to manage state

    View full-size slide

  64. Add to
    Settings Screen

    View full-size slide

  65. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Redux to Settings Screen

    View full-size slide

  66. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Redux to Settings Screen

    View full-size slide

  67. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Redux to Settings Screen

    View full-size slide

  68. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Redux to Settings

    View full-size slide

  69. Add to
    Timer Screen

    View full-size slide

  70. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Rinse & repeat but with
    Timer actions/reducer

    View full-size slide

  71. The Break Screen

    View full-size slide

  72. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    The Break Screen

    View full-size slide

  73. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    The Break Screen
    Let’s
    it!
    Static screen

    View full-size slide

  74. The Work Screen

    View full-size slide

  75. From Idea to “Hey it Works!” cball_
    The Work Screen

    View full-size slide

  76. Tracking Movement

    View full-size slide

  77. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Using device sensors
    react-native-sensor-manager

    View full-size slide

  78. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Using device sensors
    Let’s
    it!
    Magnetometer data

    View full-size slide

  79. Add Launch Icons

    View full-size slide

  80. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Launch icons
    React Native generates these for us!

    View full-size slide

  81. Persist Settings

    View full-size slide

  82. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Persist Settings
    redux-persist just works

    View full-size slide

  83. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Persist Settings
    Add a loading screen
    Top of view stack in RootContainer

    View full-size slide

  84. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Persist + Loading Screen
    Let’s
    it!
    Launch, quit, relaunch

    View full-size slide

  85. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    YES!
    Things work better.

    View full-size slide

  86. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Theme Tweak
    Add a background to the window

    View full-size slide

  87. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Theme Tweak
    Let’s
    it!
    Loading is nicer

    View full-size slide

  88. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Vibration

    View full-size slide

  89. Welcome to
    “Hey it works!”

    View full-size slide

  90. From Idea to “Hey it Works!” cball_
    OUR BET AT
    ECHOBIND
    Future Updates
    Better UI
    Debounce Redux Persist?
    Connect React Navigator to Redux
    Add local notifications - use in background
    Save stats
    Bring up to parity on iOS
    Still a ways to go

    View full-size slide

  91. From Idea to “Hey it Works!” cball_
    THANKS!
    COME SAY HI, TELL ME WHAT YOU’RE WORKING ON.
    https:/
    /github.com/cball/breaktivity

    View full-size slide