React Native – 101 For Designers

Getting Started ▿
1.1 Welcome
1.2 Create your first React Native app
1.3 What is React Native?
1.4 What are native apps?
1.5 Environment Setup and Coding Exercises _x0001F4D6_
React Native Core Components ▿
2.1 A review of tags in React (web) _x0001F4D6_
2.2 Image vs img _x0001F4D6_
2.3 View and Text _x0001F4D6_
2.4 ScrollView _x0001F4D6_
2.5 Lists _x0001F4D6_
2.6 JavaScript Premier: Destructuring
Style React Native Components ▿
3.1 Styling options in React Native
3.2 StyleSheet _x0001F4D6_
3.3 Combine styles _x0001F4D6_
3.4 styled-components _x0001F4D6_
3.5 Quick review of Flexbox for the web _x0001F4D6_
3.6 Flexbox in React Native _x0001F4D6_
3.7 Flexible and inflexible sizes _x0001F4D6_
3.8 Flex under the hood
Implement Responsive Design ▿
4.1 An overview of responsive design _x0001F4D6_
4.2 Unify screen density _x0001F4D6_
4.3 Adapt to screen sizes with Flexbox
4.4 iPhone X the notch and SafeAreaView _x0001F4D6_
4.5 Adapt to screen sizes with Dimensions API _x0001F4D6_
4.6 Dimension breakpoints _x0001F4D6_
4.7 Build a responsive grid view _x0001F4D6_
4.8 Adapt to device orientation with Dimensions API _x0001F4D6_
4.9 Adapt to device size and orientation with onLayout _x0001F4D6_

Get immediately download React Native – 101 For Designers

4.10 JavaScript Premier: Spread operator _x0001F4D6_
4.11 Material on Android Only! – Platform API _x0001F4D6_
4.12 Load platform dependent code by file extension _x0001F4D6_
Handle User Input ▿
5.1 Handle touches: Button and touchable components _x0001F4D6_
5.2 Accept text input: TextInput props _x0001F4D6_
5.3 Accept text input: save the value _x0001F4D6_
5.4 Style TextInput _x0001F4D6_
5.5 Avoid the keyboard! _x0001F4D6_
5.6 Implement drag-and-drop _x0001F4D6_
5.7 Fix a bug in the drag-and-drop code _x0001F4D6_
5.8 Implement pinch-to-zoom _x0001F4D6_
Animations ▿
6.1 Animation options in React Native _x0001F4D6_
6.2 Let the hat fly: LayoutAnimation _x0001F4D6_
6.3 Fly the hat with Animated _x0001F4D6_
6.4 Animate opacity and scale with Animated _x0001F4D6_
6.5 Flip the hat: Animated interpolate (rotate) _x0001F4D6_
6.6 Animation master control: Animated interpolate _x0001F4D6_
6.7 Swipe the hat away: Animated and gestures _x0001F4D6_
6.8 react-native-animatable _x0001F4D6_
6.9 Lottie _x0001F4D6_
Connect Screens Together: Navigation ▿
7.1 Navigation options in React Native _x0001F4D6_
7.2 React Navigation: one-screen navigation _x0001F4D6_
7.3 React Navigation: master-detail screens _x0001F4D6_
7.4 React Navigation: pass around parameters _x0001F4D6_
7.5 React Navigation: tabs _x0001F4D6_
7.6 React Navigation: transition animations _x0001F4D6_
The “Real” React Native ▿
8.1 What? It’s not the real React Native? _x0001F4D6_
8.2 Set up XCode and Android Studio _x0001F4D6_
8.3 Eject an Expo project _x0001F4D6_
8.4 Install native extensions _x0001F4D6_