Linton Ye – React Native 101 For Designers

Teacher

Linton Ye – React Native 101 For Designers

Linton Ye - React 101 For Designers

TABLE OF CONTENTS
Getting Started
You are most welcome
Your first React Native App
What is it? React Native?
What are native applications?
Environment Setup and Coding exercises
React Native The Core Components
An analysis of tags in React (web)
Image vs. img

Get your instant download Linton Ye – React Native 101 For Designers
View and Text
ScrollView
Listes
JavaScript Premier: Destructuring
Style React Native Components
There are many styling options React Native
StyleSheet
Combining styles
styled-components
Quick review of Flexbox on the web
Flexbox in React Native
Both flexible and fixed sizes
Flex under the hood
Use responsive design
A review of responsive design
Unify screen density
Flexbox adapts to screen sizes
iPhone X The Notch and SafeAreaView
Dimensions API lets you adapt to screen sizes
Dimension breakpoints
Create a responsive grid view
With Dimensions API, adapt to your device orientation
OnLayout allows you to adapt to the size and orientation of your device with onLayout
JavaScript Premier: Spread Operator
Material only for Android – Platform API
File extension allows you to load platform dependent code
Take User Input
Handle touches: Button, touchable components
Accept text input: TextInput props
Accept text input: Save the value
Style TextInput

Download it immediately Linton Ye – React Native 101 For Designers
Do not touch the keyboard
Implement drag-And-Drop
Correct a bug in drag-And-Drop code
Implement pinch-To-Zoom
Animations
Animation options React Native
LayoutAnimation – Let the hat fly!
Fly the hat of Animated
Animate scale and opacity with Animated
Flip the hat: Animated Interpolate (rotate).
Animation master control: Animated Interpolate
Swipe the hat off: Animated gestures
React-native-animatable
Lottie
Connect Screens Together: Navigation
Navigation options 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?
Install XCode and Android Studio
Expo project thrown out
Install native extensions