React Native Essentials

Welcome to the React Native Essentials workshop! This hands-on workshop will go through the fundamentals of React Native from “init-ing” our application to getting our app to looking good and functional. It will wrap up with a discussion on more “intermediate” topics and address any questions the class may have. The objective of this workshop is to help React developers take the plunge into mobile and show the similarities between the two platforms.

Table of Contents

• Chapter 0: Debugging - Essential debugging tools and techniques
• Chapter 1: Visual Concepts - React Native UI basics and styling
• Chapter 2: Navigation Plus - Expo Router, stack navigation, and deep linking
• Chapter 3: Meet the List - List components, data loading, and performance
• Chapter 4: Blending In - Theme system and adaptive theming
• Chapter 5: Accessibility - Inclusive design and assistive technologies
• Chapter 6: Unit and E2E Testing - Comprehensive testing strategies

---

Table of Contents

• React Native Essentials
  • Documentation
  • Quick Start
  • Troubleshooting
  • Learn More

---

Quick Start

For the full instructions on how to setup your environment for React Native development, head on over to our React Native Essentials Starter Pack Environment Setup doc (be sure to also set up either your iOS Simulator and/or Android Emulator).

1. Run the project setup script:

pnpm run setup

2. Configure RAWG API Key (Required for Chapter 3+):

   • Get a free API key from RAWG.io
   • Open shared/services/api.ts
   • Replace YOUR_RAWG_API_KEY_HERE with your actual API key
   • The app uses RAWG.io to fetch game data for the retro games list

3. Start the metro bundler:

pnpm start

4. Build in dev mode:

• Android

  pnpm run android

• iOS

  pnpm run ios

• Web

  pnpm run web

5. Build for your device:

• Android link
• iOS link

6. If you'd like to fast forward your assignment to a specific chapter, run this script (replacing the number with the chapter you'd like to skip to). This will copy the contents of the given chapter to your src folder.

pnpm run skipTo 3

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources:

• React Native Website - learn more about React Native.
• Getting Started - an overview of React Native and how setup your environment.
• Set Up Your Environment - an overview from Expo on setting up your development environment
• Learn the Basics - a guided tour of the React Native basics.
• Blog - read the latest official React Native Blog posts.
• @facebook/react-native - the Open Source; GitHub repository for React Native.