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.

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