React Native 101

Enroll Now

React Native 101

7.5 hours, 58 lessons

$139

$69

Enroll

Carley Cooper

Designer, Architech

👉 More Testimonials

Being a designer in the tech industry has opened my world to new tools and technologies. Linton's program is simple to follow, with the content divided in a thoughtful manner. With this training, I feel very well rounded in my technical abilities as a designer today.

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