1.1 Introduction to React Native

Learning Objectives

• Differentiate between React.js, React DOM, and React Native.
• Explain how React Native components translate to native UI elements.
• Identify the role of native platform APIs in mobile development.

What is React Native?

React Native is a framework for building real mobile applications for iOS and Android using the React paradigm. Unlike a simple mobile website, the apps you build are distributed through the Apple App Store and Google Play Store and run as native binaries.

The React Ecosystem

To understand React Native, we must distinguish between the core React library and the platform-specific “renderers.”

Term	Role	Environment
React	Core library for state management and component logic.	Platform-agnostic
React DOM	Translates React logic into browser elements (HTML/CSS).	Web Browsers
React Native	Translates React logic into mobile UI elements.	iOS / Android

How It Works

React itself doesn’t know what a “Button” or “View” is in the context of a screen. It simply manages a virtual tree of components and state. React Native acts as the bridge:

1. You use built-in React Native components (like <Text> or <View>).
2. React Native communicates your UI intent to the mobile operating system.
3. The components are rendered as actual native UI elements (e.g., a UIView on iOS or an android.view on Android).

While the logic remains consistent, the “building blocks” change.

Web (React DOM)

// Uses standard HTML tags
<div>
  <h1>Hello Web</h1>
  <p>This is a browser element.</p>
</div>

Mobile (React Native)

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

export default function App() {
  return (
    <View>
      <Text style={{ fontSize: 24 }}>Hello Mobile</Text>
      <Text>This is a native UI element.</Text>
    </View>
  );
}

Deeper Dive: Is it just a WebView?

No. Unlike frameworks like Ionic or Cordova, React Native does not render your UI inside a mobile browser (WebView). It invokes the actual native rendering engine of the host OS. This results in superior performance and a “look and feel” that matches the platform’s design language.

Beyond UI, React Native allows you to interact with the device’s hardware. Even though you are writing JavaScript/TypeScript, you can access:

• Camera and Photos
• Geolocation (GPS)
• Local Storage (SQLite/MMKV)
• Sensors (Accelerometer, Haptics)

Under the Hood

Understanding how React Native works internally helps you write better apps and debug issues more effectively.

What Gets Compiled?

When you build a React Native app, only the UI elements (JSX) are compiled to native code. Your JavaScript logic remains as JavaScript.

// This Component structure is familiar from React.js
export default function App() {
  const [count, setCount] = useState(0); // Logic: NOT compiled

  return (
    <View>
      {' '}
      {/* JSX: COMPILED to native View */}
      <Text>Count: {count}</Text> {/* JSX: COMPILED to native Text */}
    </View>
  );
}

React Native’s compilation process:

1. JSX Components (<View>, <Text>, <TextInput>) → Compiled to their native platform equivalents
2. JavaScript Logic (functions, state, conditionals) → Runs in a JavaScript thread managed by React Native

The JavaScript Thread

Your JavaScript code doesn’t get converted to Swift or Kotlin. Instead:

• React Native spins up a JavaScript process within your native app
• This process runs your application logic (event handlers, state updates, API calls)
• The JavaScript thread communicates with the native platform through a bridge

Component Mapping

React Native provides a set of core components that map to native widgets. When you use these components, React Native handles the translation automatically:

React Native Component	Compiles To (Android)	Compiles To (iOS)
<View>	android.View	UIView
<Text>	TextView	UILabel
<TextInput>	EditText	UITextField
<ScrollView>	ScrollView	UIScrollView
<Image>	ImageView	UIImageView

Key Takeaway

You write JavaScript once, and React Native ensures your UI renders with the correct native components for each platform. Your logic runs as JavaScript, communicating with native code through the bridge.

Creating a React Native App

To start building React Native apps, you could visit reactnative.dev and follow the instructions to start a new app. However, the recommended approach is to use Expo, a popular React Native framework that simplifies development.

You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to manage native files.

- Official React Native Docs

Both tools are command line interfaces (CLI) designed to help you create, run, test, and build React Native apps. So, for this course, we’ll focus on using Expo to create and manage our React Native applications.

Deeper Dive: Expo vs React Native CLI

Expo is the default recommendation because:

1. Creating projects and writing code is simpler
2. Expo provides libraries that make accessing native device features (camera, sensors, storage) straightforward
3. Less configuration and setup work on your part
4. You can “eject” to the React Native CLI workflow anytime if you need deeper native code integration

Aspect	Expo CLI	React Native CLI
Provider	Third-party service (free!)	By the React Native team & community (also free)
Workflow	Managed app development	Bare-bone development (you need to set up way more)
Setup Convenience	Very convenient, less friction	Less convenience features
Native Features	Easier access to device APIs (camera, GPS, etc.)	More manual setup required
Native Code Integration	Requires an additional step (“eject”)	Easier integration with native source code

Since you can always switch later if needed, starting with Expo is the best choice for most projects. The bare-bone React Native CLI approach might be beneficial if:

• You need frequent, deep integration with native source code (Java, Kotlin, Swift, Objective-C)
• You’re working with existing native projects
• You have specific native module requirements that Expo doesn’t support

However, React Native’s philosophy is to minimize the need for direct native code interaction, so for the majority of apps, Expo is the better choice.