Learn React Native - Project Setup & Structure

#Introduction

Your environment is ready from episode 0, and the architecture is clear from episode 2. Now it's time for the most exciting part: creating your first React Native project. This is the moment when theory starts becoming real code running on the emulator.

Episode 3 guides you through creating a project with npx @react-native-community/cli init, understanding the generated folder structure, modifying App.tsx, and then running the app on an Android emulator. Finally, we compare with the Expo workflow to help you choose the one that fits best.

#Creating a Project with the React Native CLI

#The Init Command

Open a terminal in the directory where the project will live, then run:

npx @react-native-community/cli init MyApp

The npx @react-native-community/cli init MyApp command pulls the latest template, installs dependencies, and prepares the native folders for Android and iOS. The project name is used as the app name and package identity, so use a name that is valid for both platforms.

If you want a template with TypeScript and other explicit options, the --pm and --title flags can help. For this series, the default template has used TypeScript since recent releases.

#Entering and Verifying

Once the process finishes, enter the project folder:

cd MyApp
npx react-native doctor

The npx react-native doctor command re-checks the environment and makes sure everything is ready to run the app. Pay attention to the output to see whether any Android component is still missing.

#Understanding the Folder Structure

#Main Directories

The generated structure looks roughly like this:

MyApp/
├── android/          # Gradle project for Android
├── ios/              # Xcode project for iOS
├── node_modules/     # JavaScript dependencies
├── App.tsx           # entry point of the main component
├── index.js          # registers the app to React Native
├── package.json      # dependency and script manifest
├── tsconfig.json     # TypeScript configuration
└── metro.config.js   # Metro bundler configuration

• android/ and ios/: native projects used at build time. You rarely touch them at this stage, but it's important to know where they are.
• App.tsx: the root component. All screens branch out from here.
• index.js: calls AppRegistry.registerComponent — the app's registration to native.
• package.json: contains scripts such as start, android, and ios.

#Entry Point: index.js and App.tsx

index.js is only a few lines: it imports App, registers it via AppRegistry.registerComponent(appName, () => App), and connects it to native. Meanwhile, App.tsx holds the component that will be rendered.

#Running on the Emulator

#Starting Metro and Building the App

Open a terminal, make sure the Android emulator is running, then run:

npm start

npm start launches Metro, the bundler that combines all your JavaScript files into a single bundle and serves it to the app. Keep Metro running in this terminal. Open a second terminal and run:

npx react-native run-android

The npx react-native run-android command builds the native app with Gradle, installs it to the emulator, and connects it to Metro. The first build can take a few minutes because Gradle downloads dependencies — this is normal. Once finished, the app appears on the emulator with the welcome screen.

#Fast Refresh

Change the text in App.tsx, for example update the title, then save. Metro immediately reloads the app without a native rebuild — this is called Fast Refresh. This is the moment that makes React Native development feel incredibly fast.

#The Expo Workflow

#Expo Managed Workflow

Expo is a framework on top of React Native that hides native complexity. Creating a project is just as easy:

npx create-expo-app ExpoApp
cd ExpoApp
npx expo start

With the managed workflow, you don't have android/ and ios/ folders. Native builds are done in the cloud via EAS Build, and many native modules (camera, location, notifications) are available through Expo libraries without manual setup.

#Expo Prebuild and When to Choose It

If you later need to change native code, run npx expo prebuild to generate the android/ and ios/ folders from the Expo configuration — this is called the bare/prebuild workflow. After that the project behaves like a regular CLI project.

Reasonable choices:

• Choose Expo if development speed and modern API coverage (Expo Router, SDK) matter more than full native control.
• Choose the React Native CLI if you need full control from the start or use libraries that Expo doesn't support yet.

#Common Setup Mistakes

#App Doesn't Appear on the Emulator

If run-android succeeds but the app is blank, Metro is probably not connected. Press R twice in the Metro terminal to reload, or restart Metro. Make sure the emulator and Metro are on the same machine and that port 8081 isn't blocked.

#Gradle Error

Gradle errors usually come from an incompatible JDK version. Make sure JDK 17 or 18 is installed, not JDK 21, which isn't yet supported by all React Native Gradle versions. Use the java -version command to check.

#Closing

Episode 3 is a big milestone: your first React Native project is running on the emulator. You now understand the folder structure, the role of Metro, the App.tsx entry point, and the difference between the CLI and Expo workflows.

Key takeaways:

• npx @react-native-community/cli init MyApp creates a complete project with native folders.
• android/ and ios/ are native code; App.tsx is the root component.
• Metro is the bundler that serves JavaScript to the app.
• npx react-native run-android builds and installs to the emulator.
• Fast Refresh reloads JS changes without a native rebuild.
• Expo provides a managed workflow with EAS Build, and expo prebuild generates the native folders when needed.

In the next episode, episode 4, we'll discuss core components and styling: using View, Text, Image, TextInput, ScrollView, FlatList, and SectionList, plus StyleSheet.create, Flexbox layout, gap, and the dp, px, and percentage units.