React Native Fundamentals

·Chapter 3

Building Your First React Native App

Welcome to your first hands-on experience with React Native! In this tutorial, you'll create a new React Native project from scratch, understand its structure, and learn how to make changes in real-time. By the end, you'll have a working mobile app running on both iOS and Android simulators.

Creating a New Project

Let's start by creating a new React Native project using the React Native CLI. Open your terminal and run:

npx react-native@latest init MyFirstApp
cd MyFirstApp

This command creates a new React Native project with the latest stable version. The CLI will ask if you want to use TypeScript - we recommend choosing "Yes" for better development experience.

Understanding Project Structure

Your new project contains several important files and directories:

MyFirstApp/
├── android/          # Android-specific native code
├── ios/             # iOS-specific native code
├── src/             # Your React Native source code
├── __tests__/       # Test files
├── .gitignore       # Git ignore configuration
├── package.json     # Project dependencies and scripts
├── tsconfig.json    # TypeScript configuration
└── App.tsx          # Main application component

Key Files Explained

  1. App.tsx: The root component of your application
  2. package.json: Manages your project's dependencies and scripts
  3. android/ and ios/: Contains platform-specific native code
  4. index.js: The entry point for your React Native app

Running Your App

iOS Simulator (macOS only)

First, install iOS dependencies:

cd ios
pod install
cd ..

Then start the app:

npm run ios
# or for a specific device
npx react-native run-ios --simulator="iPhone 15 Pro"

Android Emulator

Ensure your Android emulator is running, then:

npm run android

Making Your First Changes

Let's modify the app to create a simple "Hello World" screen with some basic styling. Open App.tsx and replace its contents with:

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';

function App(): React.JSX.Element {
  const [count, setCount] = React.useState(0);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>
          Welcome to React Native!
        </Text>
        <Text style={styles.subtitle}>
          Start editing to see some magic happen
        </Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => setCount(prev => prev + 1)}
        >
          <Text style={styles.buttonText}>
            You clicked {count} times
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
    color: '#1a365d',
  },
  subtitle: {
    fontSize: 16,
    color: '#4a5568',
    marginBottom: 32,
  },
  button: {
    backgroundColor: '#FF6B2B',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

export default App;

Hot Reloading and Live Reload

React Native offers two types of automatic reloading:

  1. Fast Refresh: Automatically reloads your JavaScript code while preserving component state
  2. Live Reload: Reloads the entire app when you make changes

To experience Fast Refresh:

  1. Keep your app running
  2. Modify the text in the title or subtitle
  3. Save the file
  4. Watch the changes appear instantly!

Tips for Efficient Development

  • Use the in-app developer menu (⌘D on iOS simulator, ⌘M on Android emulator)
  • Enable Fast Refresh from the developer menu
  • Use the React Native Debugger for advanced debugging

Common Issues and Solutions

Metro Bundler Issues

If you encounter bundler issues:

npm start -- --reset-cache

iOS Build Errors

For iOS build problems:

cd ios
pod deintegrate
pod install
cd ..

Android Gradle Issues

For Android build issues:

cd android
./gradlew clean
cd ..

Next Steps

Congratulations! You've created your first React Native app. You've learned:

  • How to create a new React Native project
  • The basic project structure
  • Running on iOS and Android
  • Making live changes with Fast Refresh
  • Basic troubleshooting

In the next chapter, we'll dive deeper into React Native components and JSX syntax, where you'll learn how to create more complex UIs and handle user interactions.

Additional Resources