How to Install and Configure React Native: A Step-by-Step Guide for Beginners

React Native Basics: Components and Building an APK with EAS (Part 2)

In Part 1, we set up our development environment and created a simple React Native project. Now, let’s dive into the basics of React Native components and learn how to build an APK using Expo Application Services (EAS) for testing on Android devices.

1. Understanding Basic Components in React Native

React Native comes with a set of basic components that are essential for building mobile apps. Let’s go through some of the most common ones you will use:

1.1 View

The View component is the fundamental building block in React Native. It is similar to a div in web development and is used as a container for other components.

Example:

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

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello, React Native!</Text>
    </View>
  );
};

export default App;

In this example, the View component acts as a container for the Text component, which displays the message on the screen.

1.2 Text

The Text component is used to display text in your app.

Example:

<Text style={{ fontSize: 20, color: "blue" }}>
  This is a basic Text component!
</Text>

1.3 Image

The Image component is used to display images in your app. It requires a source prop that defines the image to display.

Example:

import { Image } from "react-native";

<Image
  source={{ uri: "https://example.com/my-image.png" }}
  style={{ width: 200, height: 200 }}
/>;

1.4 Button

The Button component allows users to perform actions. It comes with an onPress prop to handle button presses.

Example:

import { Button, Alert } from "react-native";

<Button title="Press me" onPress={() => Alert.alert("Button pressed!")} />;

1.5 ScrollView

The ScrollView component provides a scrolling container that can hold multiple child components.

Example:

import { ScrollView, Text } from "react-native";

<ScrollView>
  <Text>Scroll me!</Text>
  {/* Add more content here */}
</ScrollView>;

These are just a few of the core components that you’ll use frequently when building React Native apps. Now that we’ve covered the basics, let’s move on to building an APK.

2. Using Expo and EAS to Build an APK

Expo Application Services (EAS) is a suite of tools provided by Expo to streamline building and deploying React Native apps. In this section, we’ll guide you through using EAS to generate an APK for your React Native project.

2.1 Install Expo CLI

If you haven’t installed Expo CLI, do so using npm:

npm install -g expo-cli

2.2 Create a New Expo Project

For this part, we’ll use Expo to manage our React Native project. Run the following command to create a new project:

expo init MyExpoApp

Follow the prompts to select a template. For beginners, we recommend the blank template.

Navigate into your project directory:

cd MyExpoApp

2.3 Install EAS CLI

EAS CLI is necessary for building the APK. Install it globally:

npm install -g eas-cli

2.4 Configure EAS for Your Project

First, log in to your Expo account (or create one if you don’t have it):

eas login

Next, configure your project for EAS:

eas build:configure

This command sets up your project for EAS builds, creating an eas.json file in your project directory. Follow the prompts to select the correct workflow (managed or bare).

2.5 Building the APK

Now, it’s time to build your APK:

eas build -p android --profile preview

This command will create a build for the Android platform. EAS will handle the building process in the cloud, so you don’t need to have Android Studio or other build tools installed locally.

Once the build is complete, you will receive a URL to download the APK. The build process might take several minutes, so be patient.

2.6 Installing the APK on Your Device

After downloading the APK, transfer it to your Android device. You can use various methods, such as a USB cable, email, or cloud storage.

1. On your Android device, navigate to the location where you saved the APK.
2. Tap the APK file to begin the installation.
3. Follow the on-screen instructions to complete the installation.

Make sure to allow installations from unknown sources if prompted.

3. Testing Your App on a Physical Device

Once installed, open your app to test its functionality on a real device. This step is crucial for identifying any platform-specific issues that may not appear on emulators.

Conclusion

Congratulations! You’ve learned the basics of React Native components and successfully built an APK using Expo Application Services. With these skills, you can now start building and testing your own mobile apps.

In future posts, we’ll dive into more advanced components, navigation, and state management in React Native. Stay tuned!

Feel free to explore more components and check the official React Native documentation for further details. For now, happy coding and building your next awesome mobile application!