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
   

   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