React Native Basics

Build Mobile Apps with JavaScript

Imagine writing code once and having it run as a native app on both an iPhone and an Android phone. That's the core promise of React Native. It's a framework, created by Meta (formerly Facebook), that lets web developers use their existing JavaScript and React skills to build mobile applications.

Unlike other frameworks that run inside a web view (essentially a browser window inside your app), React Native uses your code to create real native user interface elements. The button in your React Native app is the actual, native iOS or Android button. This gives your apps the speed, feel, and responsiveness users expect from their devices.

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

How It Works The Bridge

So how does JavaScript, which normally runs in a browser, talk to the native parts of a phone? The magic lies in something called the "bridge." Your JavaScript code runs in its own thread, separate from the main UI thread of the app. When your app needs to render a button or display some text, your JavaScript sends a message across this bridge to the native side. The native side interprets this message and creates the corresponding native UI component.

This architecture means your app's logic runs in JavaScript, while the UI is fully native. It's a clever way to get the best of both worlds: the ease and speed of web development with the performance of native applications.

Components and APIs

If you've used React for the web, you're already familiar with components, props, and state. The same concepts apply in React Native. The main difference is the components you use to build your UI. Instead of web-specific tags like <div> and <h1>, React Native provides a set of its own components that map directly to native UI elements.

Web (HTML)	React Native	Purpose
`<div>`	`<View>`	A generic container for other elements.
`<p>`, `<span>`	`<Text>`	For displaying text.
`<img>`	`<Image>`	For displaying images.
`<button>`	`<Button>`	A basic, pressable button.
`<input>`	`<TextInput>`	A field for user text input.
`<ul>`, `<ol>`	`<FlatList>`	For rendering scrollable lists of data.

Beyond these basic UI components, React Native also gives you access to a rich set of APIs. These are JavaScript modules that let you interact with device features like the camera, geolocation, storage, and network requests. This allows your app to do much more than a typical website.

Your First App

The easiest way to get started is with a tool called Expo. It's a framework and platform for React Native that simplifies development, letting you build apps without needing to install and configure Xcode or Android Studio right away.

After setting up your environment with Node.js and the Expo CLI, you can create a new project. The basic starting code looks something like this:

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

export default function App() {
  return (
    // View is like a div, it's a container.
    <View style={styles.container}>
      {/* Text must be inside a Text component. */}
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

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

Notice a few things here. We import components like View and Text directly from react-native. Styling isn't done with CSS files; instead, you create style objects in JavaScript using StyleSheet.create. Properties like alignItems and justifyContent work much like they do in CSS Flexbox.

When you run this app, Expo will show you a QR code. You can scan it with the Expo Go app on your phone, and you'll see your "Hello, World!" app running instantly on a real device. This fast feedback loop makes development a breeze.

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, what is the role of the 'bridge'?

Android TV Universal Remote App with React Native