Getting Started with React Native

Why React Native?

If you are coming from a web development background, React Native is the natural choice. It allows you to build mobile applications using familiar React concepts while delivering native performance. Some key benefits include:

• Cross-platform development (iOS and Android)
• Reusable components
• Large community and extensive libraries
• Hot reloading for faster development

Creating Your First React Native Project

Let's walk through the process of setting up and creating your first React Native project using Expo and Visual Studio Code.

Prerequisites

• Node.js installed on your computer
• Visual Studio Code installed
• A mobile device or emulator for testing

Step 1: Install Required Software

• Install Node.js from nodejs.org
• Install VS Code from code.visualstudio.com
• Install Git from git-scm.com

Step 2: Install Expo CLI

Enter the below command in your terminal to install the Expo CLI globally.

npm install -g expo-cli

We'll use the Expo CLI to create and manage our React Native project.

Step 3: Create a New Project

npx create-expo-app@latest

Running the above command will prompt you to enter the app name of your project. This app name is also used in the app config's name property.

What is your app named? my-app

Enter the below command in your terminal to navigate to the project folder.

cd my-app

Step 4: Open VS Code

Open VS Code and navigate to the project folder.

Step 5: Start the Development Server

npx expo start

This will start the Metro Bundler and display a QR code in your terminal.

Step 6: Run on Your Device

1. Install the Expo Go app on your mobile device
2. Scan the QR code with your camera (iOS) or Expo Go app (Android)
3. The app will load on your device

Step 7: Make Your First Change

Navigate to app > (tabs) > index.js and replace the content with this basic example:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Save the file and your app will automatically reload with the changes.

Troubleshooting Tips

• Make sure your mobile device and computer are on the same WiFi network
• If the app doesn't load, try shaking your device to open the developer menu
• If you are having issues getting your app to load on your phone via the QR code, try the troubleshooting steps in my Expo QR Code Error Blog.
• Use the Expo documentation for detailed troubleshooting guides

Basic React Native Concepts

• Components: Building blocks of your UI
• Props: Properties passed to components
• State: Internal component data management
• StyleSheet: CSS-like styling system

Recommended VS Code Extensions

• React Native Tools
• ESLint
• Prettier

Next Steps

Once you have the basics down, you can start exploring more advanced concepts like navigation, state management, and native modules.