Getting Started with React Native (EXPO): A Beginner's Guide

React Native has emerged as one of the most popular frameworks for building mobile apps, enabling developers to use JavaScript and React to create cross-platform applications for both iOS and Android. Expo simplifies React Native development by offering a set of tools and services that help you quickly prototype, build, and deploy React Native apps without diving deep into native code.

In this beginner's guide, we'll walk you through setting up React Native with Expo, writing some basic components, and deploying your app. Let's get started!

What is Expo?

Expo is a framework and a platform for universal React applications. It is an open-source toolchain built around React Native that provides a rich set of features out of the box, such as access to the camera, location services, and other native functionalities. With Expo, you can avoid the complexities of native code while still building powerful, feature-rich mobile apps.

Why Expo?

1. Quick Setup: Expo handles most of the configuration for you.
2. Cross-Platform Development: Write one codebase and run it on both Android and iOS.
3. No Native Setup Required: You can run your app on your device or simulator with the Expo Go app, without needing to install Android Studio or Xcode.
4. Pre-built Modules: Expo includes a wide range of APIs to access native device functionalities.

Prerequisites

Before we start, ensure you have the following installed:

1. Node.js (v14 or higher): Download Node.js
2. Expo CLI: The command-line interface for Expo.
3. Expo Go: Download the Expo Go app from the App Store (iOS) or Google Play (Android) for testing on your mobile device.

To install Expo CLI, run this command:

npm install --global expo-cli

Now, let’s create our first React Native app using Expo.

Step 1: Creating a New Expo Project

First, open your terminal and navigate to the directory where you want to create your new project. Run the following command:

expo init MyFirstApp

You will be prompted to select a template. Choose "blank" for this guide. Once the project is set up, navigate to the project folder:

cd MyFirstApp

To start your app, run the following command:

expo start

This will open Expo DevTools in your browser. You can now scan the QR code using the Expo Go app on your phone, or you can run the app on an iOS/Android emulator.

Step 2: Basic App Structure

In the App.js file, you'll find a basic structure already provided by Expo. Let's modify it to display a welcome message.

Default App.js

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to My First React Native App!</Text>
    </View>
  );
}

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

Key Components:

• View: A container that supports layout with flexbox, styling, and touch handling.
• Text: The component to display text.
• StyleSheet: A method to style your components.

You can see this code on your device by scanning the QR code with the Expo Go app.

Step 3: Adding Buttons and State

Let’s make our app more interactive by adding a button that increments a counter.

Modifying App.js to Add a Button

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to My First React Native App!</Text>
      <Text style={styles.counter}>Count: {count}</Text>
      <Button title={'Increment'} onPress={() => setCount(count + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  counter: {
    fontSize: 20,
    marginVertical: 20,
  },
});

Explanation:

• State: We use the useState hook to create a piece of state to store the count.
• Button: The Button component has a title and an onPress handler, which increments the count.

Step 4: Styling Your App

React Native uses StyleSheet to style components. It’s similar to CSS, but with some differences in naming conventions and structure.

Here’s how you can enhance the appearance of the button and text:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F0F8FF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333333',
  },
  counter: {
    fontSize: 20,
    color: '#008080',
    marginVertical: 20,
  },
  button: {
    marginTop: 10,
    backgroundColor: '#008080',
    padding: 10,
    borderRadius: 5,
  },
});

Step 5: Adding an Image

Expo provides a great library called expo-image to handle images. You can use local images or remote URLs.

First, add an image to your project. Let's use an online image for this example.

Adding an Image

import { Image } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
      />
      <Text style={styles.title}>Welcome to My First React Native App!</Text>
      <Text style={styles.counter}>Count: {count}</Text>
      <Button title={'Increment'} onPress={() => setCount(count + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F0F8FF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 100,
    height: 100,
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333333',
  },
  counter: {
    fontSize: 20,
    color: '#008080',
    marginVertical: 20,
  },
});

Step 6: Testing on a Device

You can test your app in two ways:

1. Using Expo Go: Open the Expo Go app on your device and scan the QR code from the Expo Developer Tools.
2. Emulator/Simulator: If you’ve set up Xcode or Android Studio, you can run the app on a virtual device.

Step 7: Building and Publishing

Once you’re ready to deploy, Expo makes it easy to build your app.

1. Building the App:
   • Run the following command to build for both platforms:

   expo build

This will generate APK (Android) and IPA (iOS) files.

1. Publishing the App: If you’re not building a standalone app but want to share your project via Expo’s servers, run:

   expo publish

This will create a sharable link for your app!

Conclusion

In this guide, we’ve covered the basics of getting started with React Native using Expo. We’ve created a simple app, added interactivity with buttons, styled it, and even added an image. Expo makes it easy to start building powerful mobile applications without dealing with the complexity of native environments.

As you get more comfortable with React Native, you can start exploring advanced features like navigation, state management, and custom components.

Stay Connected

Thank you for following along with this React Native (Expo) beginner’s guide! If you'd like to stay updated with more content or connect with me, feel free to follow me on:

• LinkedIn: Vincent Odukwe
• GitHub: Vrinch
• X (formerly Twitter): @VrinchOfficial

Happy coding, and I look forward to connecting with you!