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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

Let’s start coding!

Slide 6

Slide 6 text

Let’s start coding!

Slide 7

Slide 7 text

Think about the problem

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Sketch Ideas

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Componetize

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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)

Slide 19

Slide 19 text

Research Unknowns

Slide 20

Slide 20 text

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?

Slide 21

Slide 21 text

Start your app

Slide 22

Slide 22 text

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?

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

The Main Screen

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

The Settings Screen

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Adjust Android Theme

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Sharing State

Slide 62

Slide 62 text

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?

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Add to Settings Screen

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Add to Timer Screen

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

The Break Screen

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

The Work Screen

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Tracking Movement

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Add Launch Icons

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Persist Settings

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Theme Tweak

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Vibration

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Welcome to “Hey it works!”

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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