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 Slide

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

    View 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 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 Slide

  5. Let’s start coding!

    View Slide

  6. Let’s start coding!

    View Slide

  7. Think about the problem

    View 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 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 Slide

  10. Sketch Ideas

    View Slide

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

    View Slide

  12. Componetize

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. 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 Slide

  19. Research Unknowns

    View Slide

  20. 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 Slide

  21. Start your app

    View Slide

  22. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  30. 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 Slide

  31. The Main Screen

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. The Settings Screen

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  56. Adjust Android Theme

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. Sharing State

    View Slide

  62. 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 Slide

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

    View Slide

  64. 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 Slide

  65. Add to
    Settings Screen

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  70. Add to
    Timer Screen

    View Slide

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

    View Slide

  72. The Break Screen

    View Slide

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

    View Slide

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

    View Slide

  75. The Work Screen

    View Slide

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

    View Slide

  77. Tracking Movement

    View Slide

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

    View Slide

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

    View Slide

  80. Add Launch Icons

    View Slide

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

    View Slide

  82. Persist Settings

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  87. Theme Tweak

    View Slide

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

    View Slide

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

    View Slide

  90. Vibration

    View Slide

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

    View Slide

  92. Welcome to
    “Hey it works!”

    View Slide

  93. 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 Slide

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

    View Slide