Linton Ye – React Native 101 For Designers

Description

Linton Ye – React Native 101 For Designers

TABLE OF CONTENTS
Getting Started
Welcome
Create your first React Native app
What is React Native?
What are native apps?
Environment Setup and Coding Exercises
React Native Core Components
A review of tags in React (web)
Image vs img
View and Text
ScrollView
Lists
JavaScript Premier: Destructuring
Style React Native Components
Styling options in React Native
StyleSheet
Combine styles
styled-components
Quick review of Flexbox for the web
Flexbox in React Native
Flexible and inflexible sizes
Flex under the hood
Implement Responsive Design
An overview of responsive design
Unify screen density
Adapt to screen sizes with Flexbox
iPhone X the notch and SafeAreaView
Adapt to screen sizes with Dimensions API
Dimension breakpoints
Build a responsive grid view
Adapt to device orientation with Dimensions API
Adapt to device size and orientation with onLayout
JavaScript Premier: Spread operator
Material on Android Only! – Platform API
Load platform dependent code by file extension
Handle User Input
Handle touches: Button and touchable components
Accept text input: TextInput props
Accept text input: save the value
Style TextInput
Avoid the keyboard!
Implement drag-and-drop
Fix a bug in the drag-and-drop code
Implement pinch-to-zoom
Animations
Animation options in React Native
Let the hat fly: LayoutAnimation
Fly the hat with Animated
Animate opacity and scale with Animated
Flip the hat: Animated interpolate (rotate)
Animation master control: Animated interpolate
Swipe the hat away: Animated and gestures
react-native-animatable
Lottie
Connect Screens Together: Navigation
Navigation options in React Native
React Navigation: one-screen navigation
React Navigation: master-detail screens
React Navigation: pass around parameters
React Navigation: tabs
React Navigation: transition animations
The “Real” React Native
What? It’s not the real React Native?
Set up XCode and Android Studio
Eject an Expo project
Install native extensions