An intro to React Native using react-native cli, styled components, react-navigation, and an an introduction to the react native ecosystem. Example repo: https://github.com/ladyleet/fluentConf2 Have questions? Tweet me http://twitter.com/ladyleet

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. SETUP TIPS
Create an /src folder with an App.js
@ladyleet
Copy/paste index.ios.js into App.js
Import App.js into index.ios.js and index.android.js

20. @ladyleet

21. STYLING
@ladyleet

22. STYLING
Using styled-components 💅
@ladyleet

23. @ladyleet
EXISTING CSS

24. $ yarn add styled-components
@ladyleet

25. @ladyleet$ yarn add styled-components
STYLED COMPONENTS

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

27. @ladyleet
STYLED COMPONENTS
Write normal CSS

28. @ladyleet
STYLED COMPONENTS

29. NAVIGATION
@ladyleet

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

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

32. NAVIGATION
@ladyleet
TabNavigator

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

34. @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

35. @ladyleet
TabNavigator

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

37. @ladyleet
tabBarIcon

38. @ladyleet
tabBarIcon

39. @ladyleet

40. DISPLAYING DATA
@ladyleet

41. @ladyleet
Create 2 components Questions.js and Answer.js
DISPLAYING DATA
Each component should have a <View/> and <Text/>
Use { this.props.q } and { this.props.a }
We’ll pass the data on the parent component

42. @ladyleet
DISPLAYING DATA

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

44. @ladyleet
Simply write React!
DISPLAYING DATA

45. @ladyleet

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

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

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

49. @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

50. @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()

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

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

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

54. @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.

55. Let’s get into building the actual app!