Practical approach to creating your first React Native talk given at All Things Open Conference. Learn how you should get started with React Native and the path of least resistance.

3. TRACY LEE | @ladyleet
SPEAKER & GOOGLE DEVELOPER EXPERT
DEV - ANGULAR, EMBER, REACT, RXJS
TECH WRITER & PODCASTER
THIS DOT MEDIA / LABS
MENTOR

4. React + React Native + Native

5. React Native is not ALL JavaScript

6. React Native is not ALL JavaScript

7. React Native is powerful because we have a JavaScript
interface for code implemented natively.

8. A PRACTICAL APPROACH
TO REACT NATIVE

10. OUR AGENDA
1.
@ladyleet
2. Building an app
4. Navigation
5. React Native Ecosystem
React Native Components
3. Styling

11. @ladyleet
React Native Components
Basic Components
User Interface
List Views
iOS Components & APIs
Android Components & APIs

12. @ladyleet
Basic Components

13. CREATING A PROJECT
1. Install Xcode
2. $ yarn global add react-native-cli
3. $ react-native init <appName>
@ladyleet

14. $ react-native run-ios
@ladyleet

15. $ react-native run-ios
@ladyleet

16. 1. kill all your processes
2. $ npm start — —reset-cache
@ladyleet
(solves 99% of your problems)
THE MAGIC TRICK

17. @ladyleet

18. @ladyleet

19. @ladyleet

20. @ladyleet

21. @ladyleet

22. @ladyleet

23. @ladyleet

24. @ladyleet

25. @ladyleet

26. @ladyleet

27. @ladyleet

28. SETUP TIPS
Create an /src folder and move the App.js
@ladyleet
Change the App.js import path in index.js

29. STYLING
@ladyleet

30. STYLING
Using styled-components 💅
@ladyleet

31. @ladyleet
EXISTING CSS

32. $ yarn add styled-components
@ladyleet

33. @ladyleetImport styled components
STYLED COMPONENTS

34. @ladyleet
STYLED COMPONENTS
Create a new variable, which becomes
a React Native component.

35. @ladyleet
STYLED COMPONENTS
Write normal CSS

36. @ladyleet
STYLED COMPONENTS

37. NAVIGATION
@ladyleet

38. $ yarn add react-navigation
@ladyleet
USING REACT-NAVIGATION

39. NAVIGATION
@ladyleet
Built-In
StackNavigator
Custom Navigators
TabNavigator
DrawerNavigator
+

40. NAVIGATION
@ladyleet
TabNavigator

41. @ladyleet
TabNavigator
import { TabNavigator } from ‘react-navigation’;

42. @ladyleet
Create components you will be navigating to in /src.
Create a variable to define the TabNavigator.
TabNavigator
Import those components into your App.js

43. @ladyleet
TabNavigator

44. @ladyleet
TabNavigator

45. @ladyleet
TabNavigatorConfig
tabBarComponent
TabBarBottom
TabBarTop
tabBarPosition
swipeEnabled
animationEnabled
lazy
activeTintColor
activeBackgroundColor
showLabel
style
tabStyle
tabBarLabel
tabBarIcon

46. @ladyleet
tabBarIcon

47. @ladyleet
tabBarIcon

48. @ladyleet

49. DISPLAYING DATA
@ladyleet

50. @ladyleet
Create 2 components Questions.js and Answer.js
DISPLAYING DATA
Each component should have a <View/> and <Text/>
We’ll pass the data on the parent component

51. @ladyleet
DISPLAYING DATA

52. @ladyleet
Import Questions.js and Answer.js into a component
DISPLAYING DATA
Ex. the ReactJeopardy component
Create an array of data with questions and answers

53. @ladyleet
Simply write React!
DISPLAYING DATA

54. @ladyleet

55. OUR AGENDA
1.
@ladyleet
2. Building an app
4. Navigation
5.
React Native Components
3. Styling
React Native Ecosystem

56. @ladyleet
State Management
Animations
React Native Ecosystem
Where to find help

57. @ladyleet
State Management
setState - react default
Redux - redux.js.org
MobX - mobx.js.org
Morearty - github.com/moreartyjs

58. @ladyleet
Async Side Effects with Redux
redux-observable
redux-saga
redux-thunk

59. @ladyleet
Animations
React Native Animatable
github.com/oblador/react-native-animatable
facebook.github.io/react-native/docs/animated.html
Lottie by Airbnb
airbnb.design/introducing-lottie
React Native’s Animated API

60. @ladyleet
React Native’s Animated API
Animated gives you 4 animatable component types:
Text, Image, View & ScrollView
Or you can create your own using
Animated.createAnimatedComponent()

61. @ladyleet
Lottie by Airbnb
Render After Effects animations in real time

62. @ladyleet
Where to find help
Twitter
Documentation
Medium articles
egghead.io
Front End Masters

63. @ladyleet
React Native is amazing for JavaScript
developers who want high flexibility and
the ability to build mobile apps with a
powerful JavaScript interface.

64. @ladyleet
React Native is best for people who want
to have full control of their applications
and understand the intricacies of their
code’s inner workings without heavy
abstractions.

65. @ladyleet
Also great for developers who just want to
“just write JavaScript"

66. Let’s get into building the actual app!
@ladyleet

67. Resources
@ladyleet
This project: github.com/ladyleet/AllThingsOpen2
React Native docs: facebook.github.io/react-native
Twitter: @ladyleet
Github: @ladyleet
Need help with mentoring: thisdot.co