Frontend – Setting Up React Native

Welcome to the exciting part where things start coming together: the frontend. In this chapter, you’re going to meet the star of the show, React Native, and learn how to set up the frontend for your app. If Node.js is the brain of your app, React Native is the face—it’s what your users will see and interact with.

By the end of this chapter, you’ll not only have React Native up and running but also understand how to use it to create a beautiful mobile interface. Whether it’s a simple form, a list of items, or even a navigation system, React Native will help you build a sleek and functional app.

Let’s dive in!

Step 1: What is React Native?

Before we start coding, let’s talk about what React Native is and why we’re using it.

React Native is a JavaScript framework that lets you build mobile apps for both iOS and Android using a single codebase. It’s based on React, a popular JavaScript library used for building web applications. So, if you’re familiar with React for web development, you’ll find React Native quite similar.

Why React Native?

Here are a few reasons why React Native is a great choice:

Cross-Platform: You write one codebase, and it works on both iOS and Android.
Familiar Syntax: If you know React, you already know the basics of React Native.
Huge Community: React Native has a large, active community, which means tons of resources, libraries, and support.
Native Performance: Although you’re writing in JavaScript, React Native translates your code into native components, so your app performs just like any other native app.

Step 2: Creating a New React Native Project

Now, let’s create your React Native project. We’ll use Expo, which is a powerful toolkit that makes it super easy to get started with React Native. If you followed Chapter 1, you’ve already installed Expo.

Initializing a New Project

Open your terminal and navigate to the directory where you want to create your project. Run the following command to create a new React Native project:

npx expo init my-first-app

You’ll be prompted to choose a template. For now, select the “blank” template, as it’s the simplest way to start.

Expo will then set up the project, install all necessary dependencies, and create the basic folder structure. Once it’s done, navigate into the project folder:

cd my-first-app

You’ve now got a fresh React Native project ready to go!

Step 3: Running the App on Your Device

Before we dive into coding, let’s make sure everything is working by running your app on a real device or emulator.

Running on a Physical Device

If you’re using a physical device (which I highly recommend), you can run your app directly on your phone.

Download the Expo Go app from the App Store (iOS) or Google Play (Android).
Start the Expo development server by running this command in your project folder:

npx expo start

This will open a new window in your browser with a QR code.

Open the Expo Go app on your phone, scan the QR code, and voilà! Your app will be running on your device.

Running on an Emulator

If you don’t have a physical device handy, you can use an emulator instead. Here’s how:

For iOS, you can use Xcode’s iOS simulator. Simply run npx expo start, and click “Run on iOS simulator” in the browser window that opens.
For Android, you’ll need to install Android Studio. After setting it up, you can run npx expo start and click “Run on Android device/emulator” to open your app in the emulator.

Step 4: Understanding the Project Structure

Now that you’ve got your app running, let’s take a quick look at the files and folders that were created in your project.

App.js: This is the entry point of your React Native app. It’s the file that contains the code for what is displayed on the screen.
node_modules: This folder contains all the dependencies that your project needs to run. It’s automatically generated by npm when you install packages.
package.json: This file lists the project’s dependencies and scripts. It’s important because it keeps track of all the external libraries and tools your project is using.

For now, we’ll focus on App.js since that’s where all the magic happens.

Step 5: Building Your First UI with React Native

Time to start coding! Let’s modify App.js to build a basic UI. Here’s what your App.js file might look like by default:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Let’s break this down:

import statements: These bring in the necessary React Native components and Expo utilities.
View: This is like a <div> in HTML. It’s a container that holds other components.
Text: This is used to display text on the screen.
StyleSheet.create: This is how you define styles for your components. Think of it as similar to CSS.

When you run this app, you’ll see a message saying, “Open up App.js to start working on your app!”

Customizing the UI

Let’s make this more interesting by customizing the UI a bit. Replace the code in App.js with this:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to My First React Native App!</Text>
      <Button title="Click Me" onPress={() => alert('Button Pressed!')} />
    </View>
  );
}

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

Here’s what we’ve changed:

Text styling: We added a style prop to the Text component to change its appearance.
Button: We added a button with an onPress handler that triggers an alert when clicked.

Now, when you run your app, you’ll see a bold “Welcome to My First React Native App!” message and a button that pops up an alert when pressed.

Step 6: Understanding React Native Components

React Native apps are built with components. If you’ve used React for the web, this will feel familiar. A component is like a building block that can be reused across your app.

Here are a few common components you’ll use in React Native:

View: A container for other components.
Text: Displays text.
Image: Displays images.
Button: A clickable button.
TextInput: An input field for users to type into.
ScrollView: A container that lets you scroll through its content.

Let’s add a few more components to your app. Modify App.js to include an image and a text input field:

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

export default function App() {
  const [name, setName] = useState('');

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

      <Image
        source={{ uri: 'https://placekitten.com/200/200' }}
        style={styles.image}
      />

      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        onChangeText={setName}
      />

      <Button
        title="Greet Me"
        onPress={() => alert(`Hello, ${name}!`)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  image: {
    width: 200,
    height: 200,
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 10,
    width: '80%',
  },
});

Here’s what’s new:

Image: We added an image of a cute kitten using the Image component.
TextInput: We added a text input field where users can type their name.
useState: We introduced state using the useState hook to store the user’s input.

Now, when you run your app, you’ll see a kitten, a text input field, and a button that greets the user with their name when pressed.

Step 7: Next Steps

Congratulations! You’ve successfully set up your React Native frontend and built a basic UI. You’ve learned how to use components like View, Text, Button, Image, and TextInput, and styled them using StyleSheet.

In the next chapter, we’ll start connecting your frontend to the backend you built with Node.js. This is where the magic happens, as your mobile app will start communicating with your server, exchanging data, and creating a fully functional experience for your users.

🚀

0x3d.Site