Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React Native 101 For Designers
1. Getting Started
1.1 Welcome (1:08)
1.2 Create Your First React Native App (8:30)
1.3 What is React Native?
1.4 What are native apps?
1.5 Environment Setup And Coding Exercises (8:31)
2. React Native Core Components
2.1 A review of tags in React (web) (4:01)
2.2 Image vs. img (7:51)
2.3 View and Text (7:53)
2.4 Scrollview (2:42)
2.5 Lists (10:42)
2.6 JavaScript Primer - Destructuring (9:19)
3. Style React Native Components
3.1 Styling options in React Native (2:31)
3.2 StyleSheet (7:21)
3.3 Combine styles (8:59)
3.4 styled-components (8:09)
3.5 Quick review of Flexbox for the web (3:27)
3.6 Flexbox in React Native (13:11)
3.7 Flexible And Inflexible Sizes (6:56)
3.8 Flex Under The Hood (8:01)
4. Implement Responsive Design
4.1 An Overview Of Responsive Design (2:30)
4.2 Unify Screen Density (2:03)
4.3 Adapt To Screen Sizes With Flexbox (9:36)
4.4 iPhone X the notch and SafeAreaView (5:59)
4.5 Adapt To Screen Sizes With Dimensions Api (13:17)
4.6 Dimension Breakpoints (2:10)
4.7 Build A Responsive Grid View (13:55)
4.8 Adapt To Device Orientation With Dimensions Api (7:55)
4.9 Adapt To Device Size And Orientation With Onlayout (7:45)
4.9.1 Javascript Primer - Spread Operator (6:55)
4.10 Material On Android Only! - Platform Api (7:38)
4.11 Load Platform Dependent Code By File Extension (4:15)
5. Handle User Input
5.1 Handle touches - Button and touchable components (10:28)
5.2 Accept Text Input - TextInput Props (15:25)
5.3 Accept Text Input - Save The Value (7:45)
5.4 Style Textinput (5:47)
5.5 Avoid The Keyboard! (3:54)
5.6 Implement drag-and-drop (12:48)
5.7 Fix A Bug In The Drag-and-drop Code (6:28)
5.8 Implement Pinch-to-zoom (14:18)
6. Animations
6.1 Animation Options In React Native (2:54)
6.2 Let The Hat Fly - LayoutAnimation (7:11)
6.3 Fly The Hat With Animated (8:11)
6.4 Animate Opacity And Scale With Animated (9:59)
6.5 Flip The Hat - Animated Interpolate (rotate) (10:24)
6.6 Animation Master Control - Animated Interpolate (7:44)
6.7 Swipe The Hat Away - Animated And Gestures (9:16)
6.8 react-native-animatable (16:34)
6.9 Lottie (9:48)
7. Connect Screens Together: Navigation
7.1 Navigation Options In React Native (2:11)
7.2 React Navigation - One-screen Navigation (8:56)
7.3 React Navigation - Master-detail Screens (7:41)
7.4 React Navigation - Pass Around Parameters (8:29)
7.5 React Navigation - Tabs (11:54)
7.6 React Navigation - Transition Animations (11:26)
8. The "Real" React Native
8.1 What? It's Not The Real React Native? (5:35)
8.2 Set Up Xcode And Android Studio (4:50)
8.3 Eject An Expo Project (12:21)
8.4 Install Native Extensions (9:35)
7.6 React Navigation - Transition Animations
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock