React Native Basics

From Web to Mobile

If you know React, you're already halfway to building mobile apps. React Native lets you take your web development skills and apply them to creating apps for iOS and Android. The best part? You write the code once, and it runs on both platforms.

With React Native, developers write code once using JavaScript and React components, which can be shared across iOS and Android platforms.

Instead of using web components like <div> or <p>, you'll use mobile-specific components provided by React Native. Think of it as learning a new set of building blocks, but using the same instruction manual you already know from React: components, props, and state.

How It All Connects

React Native works by acting as a translator. Your JavaScript code, which describes the app's logic and what the UI should look like, runs in its own world. The phone's operating system, which actually draws buttons and text on the screen, runs in a separate, native world.

These two worlds can't talk to each other directly. They communicate across something called "the Bridge." When you want to show a button, your JavaScript sends a message across the Bridge to the native side. The native side receives the message and renders a real, native button. This process is asynchronous, meaning your app's interface stays smooth and responsive even while your code is busy.

This architecture is powerful. It gives you the development speed of JavaScript and React, combined with the performance and feel of a native application.

Getting Started with Expo

The easiest way to start a React Native project is with a tool called Expo. It's a framework and a platform that simplifies the development process. You don't need to install Xcode or Android Studio to get started. All you need is Node.js on your computer and the Expo Go app on your phone.

To create a new project, you run a single command in your terminal:

npx create-expo-app MyAwesomeApp

Once it's done, you navigate into the new directory and start the development server:

cd MyAwesomeApp
npx expo start

This will show a QR code in your terminal. Scan it with the Expo Go app on your phone, and your app will load right on your device. Any changes you make to the code will appear instantly on your phone thanks to a feature called Fast Refresh.

Core Building Blocks

React Native provides a set of essential components that are the foundation of any app. You'll use these in almost every screen you build.

Here are a few of the most common ones:

Component	Description
`<View>`	The most fundamental component. It's a container that supports layout with flexbox, styling, and touch handling. Think of it as a `<div>`.
`<Text>`	Used to display text. All text in a React Native app must be inside a `<Text>` component. It's your `<p>` or `<span>`.
`<Image>`	A component for displaying different types of images, including network images, static resources, and temporary local images.
`<TextInput>`	Allows the user to enter text. It has an `onChangeText` prop that you use to read the input as it changes.
`<StyleSheet>`	Provides an abstraction layer similar to CSS Stylesheets. You define styles in a JavaScript object for better performance and organization.

Let's see how these come together to build a simple screen.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.label}>What's your name?</Text>
      <TextInput
        style={styles.input}
        placeholder="e.g. Jane Doe"
      />
      <Button
        title="Say Hello"
        onPress={() => alert('Hello there!')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  label: {
    fontSize: 18,
    marginBottom: 8,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 12,
    paddingHorizontal: 8,
  },
});

This code creates a centered view with a text label, a text input field, and a button. Notice how we use the <StyleSheet> API to define our layout and visual styles. The onPress prop on the <Button> component is how we handle user taps. When the user presses the button, an alert pops up. It's that simple to handle basic user interactions.

Quiz Questions 1/6

What is the primary benefit of using React Native for mobile app development?

Quiz Questions 2/6

In the React Native architecture, how does the JavaScript code communicate with the native operating system?

With these basic components and the Expo workflow, you have everything you need to start building your own mobile apps using the React skills you already have.

AWS Scaling for React Native Apps