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

6254dc2b7e4f26b2ab5d05c560834671?s=47 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.

6254dc2b7e4f26b2ab5d05c560834671?s=128

Chris Ball

February 22, 2017
Tweet

Transcript

  1. BY CHRIS BALL From Idea to"Hey it works!" building an

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

  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
  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.
  5. Let’s start coding!

  6. Let’s start coding!

  7. Think about the problem

  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
  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
  10. Sketch Ideas

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

    ECHOBIND
  12. Componetize

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

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

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

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

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

    ECHOBIND -Image -Button What components exist?
  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)
  19. Research Unknowns

  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?
  21. Start your app

  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?
  23. From Idea to “Hey it Works!” cball_ Getting Started Run

    react-native init <App name>
  24. From Idea to “Hey it Works!” cball_ Getting Started react-native

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

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

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

    debugging friend
  28. From Idea to “Hey it Works!” cball_ Getting Started Lots

    of files you didn’t have to create.
  29. From Idea to “Hey it Works!” cball_ Tip! At this

    point, focus on a single platform. Note things to followup on.
  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.
  31. The Main Screen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ECHOBIND Let’s it! Formatted Time
  48. The Settings Screen

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

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

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

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

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

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

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

    ECHOBIND Settings Screen Let’s it! Settings controls
  56. Adjust Android Theme

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

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

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

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

    ECHOBIND Give yourself a hug! Things kind of work.
  61. Sharing State

  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?
  63. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Navigating back and forth Let’s it! Data gets reset
  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
  65. Add to Settings Screen

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

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

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

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

    ECHOBIND Redux to Settings
  70. Add to Timer Screen

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

    ECHOBIND Rinse & repeat but with Timer actions/reducer
  72. The Break Screen

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

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

    ECHOBIND The Break Screen Let’s it! Static screen
  75. The Work Screen

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

  77. Tracking Movement

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

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

    ECHOBIND Using device sensors Let’s it! Magnetometer data
  80. Add Launch Icons

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

    ECHOBIND Launch icons React Native generates these for us!
  82. Persist Settings

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

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

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

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

    ECHOBIND YES! Things work better.
  87. Theme Tweak

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

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

    ECHOBIND Theme Tweak Let’s it! Loading is nicer
  90. Vibration

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

    ECHOBIND Vibration
  92. Welcome to “Hey it works!”

  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
  94. From Idea to “Hey it Works!” cball_ THANKS! COME SAY

    HI, TELL ME WHAT YOU’RE WORKING ON. https:/ /github.com/cball/breaktivity