Pebellslearn by building
RoadmapsMatrixCoursesSandboxSign in

Course details

React Native

Learn what makes React Native different from React on the web: native components, Expo and Metro, phone-specific layout, lists, platform differences and styling. You build one small plant-watering app, Sprout, from the first command to an accessible, well-laid-out screen.

Ready to learn6 sections · 23 lessons
Start learning

Course curriculum

Introduction to React Native4 lessons

See how React Native turns JavaScript components into real native views, weigh it against Flutter, web views and native code, and brush up the JavaScript every screen uses.

  1. What React Native Is12 min
  2. Why Teams Choose React Native10 min
  3. React Native and Its Alternatives12 min
  4. The JavaScript You Need14 min
Environment Setup4 lessons

Pick a project setup, understand how Metro bundles and serves your code, and learn how JSX, components, props and state look when the building blocks are View and Text instead of HTML.

  1. Expo and the React Native CLI12 min
  2. Metro, the Bundler10 min
  3. Components and JSX in React Native12 min
  4. Props and State on a Phone14 min
Development Workflow4 lessons

Create an Expo project and run it on a real device, use Fast Refresh and the developer menu, read LogBox and DevTools, and keep screens clear of notches and the keyboard.

  1. Creating and Running Sprout12 min
  2. The Developer Menu and Fast Refresh10 min
  3. LogBox, DevTools and Source Maps12 min
  4. Safe Areas and the Keyboard12 min
Core Components5 lessons

Build Sprout's screens from View and Text, collect input with TextInput, show photos with Image, handle touches with Button, Pressable and Switch, and use Modal, ActivityIndicator and StatusBar for the moments in between.

  1. View and Text10 min
  2. TextInput12 min
  3. Image and ImageBackground12 min
  4. Pressable, Button and Switch12 min
  5. Modal, ActivityIndicator and StatusBar12 min
Lists and Platform-Specific Code3 lessons

Choose between ScrollView, FlatList and SectionList, add pull to refresh, and write code that adapts to each platform with the Platform module, platform file extensions and react-native-web.

  1. ScrollView and FlatList12 min
  2. SectionList and Pull to Refresh12 min
  3. Platform Differences in Code12 min
Styling3 lessons

Write styles as JavaScript objects with StyleSheet, lay out screens with Flexbox and its mobile defaults, and make every control understandable to screen reader users.

  1. Styles and StyleSheet12 min
  2. Layout with Flexbox14 min
  3. Accessibility12 min