Introduction to React Native

React Native, introduced by Facebook (now Meta) in 2015, revolutionized mobile development by allowing developers to build native-performing iOS and Android apps from a single JavaScript codebase. It renders using actual native UI components, creating apps indistinguishable from those built with Swift or Kotlin.

Key Benefits:

Reduced development time and cost.
Significant code sharing between platforms.
Faster iteration with Hot Reloading.
Access to native device features.
Easier transition for web developers into mobile development.

The New Architecture

React Native’s New Architecture significantly improves performance and capabilities by replacing the old asynchronous bridge. It consists of several key components:

JavaScript Interface (JSI)

A C++ layer enabling direct, synchronous communication between JavaScript and native code, eliminating the need for JSON serialization used by the old bridge. Benefits: Faster performance, lower memory usage, quicker startup, enables modern React features like Suspense.

Turbo Modules

The evolution of Native Modules. They load lazily (only when needed) and use JSI for direct, efficient communication with native platform APIs. Benefits: Lazy loading, direct JSI communication (faster), supports sync/async calls, type-safe (via CodeGen), better memory management.

Fabric

The new rendering system. It uses JSI for direct UI manipulation and enables multi-threaded rendering for a smoother user experience. Benefits: Multi-threaded rendering, synchronous layout potential, direct native UI access via JSI, improved state management with persistent C++ UI trees.

Asynchronous communication only.
Used JSON serialization/deserialization (overhead).
All Native Modules loaded at startup.
Single-threaded UI updates.
Slower performance and higher memory usage.

Expo: Simplifying React Native Development

Expo is an open-source framework and platform built on top of React Native. It provides a managed workflow with pre-built tools and services, abstracting away much of the native configuration complexity.

Core Features:

Expo CLI: Development command-line tool.
Expo Go: A client app to instantly run projects on physical devices without native builds.
Expo SDK: A curated set of native APIs and components (location, camera, etc.).
EAS (Expo Application Services): Cloud build, submission, and update services.

Why Recommended:

Rapid Start: Minimal setup required (npx create-expo-app).
Simplified Workflow: Often avoids direct interaction with native Xcode/Android Studio projects.
Easy Testing: Instantly preview on devices using Expo Go.
Over-the-Air (OTA) Updates: Push JS updates directly to users via EAS Update.
Managed Builds: EAS Build handles native compilation in the cloud.

Expo Go vs. Development Builds

Expo offers two main ways to run your app during development:

Expo Go
Development Build

What: A pre-built app from the App/Play Store containing the Expo SDK. Pros:

Fastest way to start and test.
No native build tools needed initially.
Instantly run code on a physical device. Cons:
Limited to native modules included in the Expo SDK version.
Cannot add custom native code or libraries not in Expo Go.
Limited native configuration (app icon, splash screen require a build). Use When: Starting new projects, prototyping, learning, apps using only Expo SDK APIs.

What: A custom build of your own app that includes expo-dev-client. Pros:

Full access to any native module (Expo SDK or third-party).
Allows custom native code modifications.
Full control over native configuration (app icon, etc.).
Retains Expo workflow benefits (Fast Refresh, Dev Menu). Cons:
Requires an initial native build (local or via EAS Build).
Slightly longer setup than Expo Go. Use When: Needing custom native modules, modifying native config, preparing for production.

Creating a Development Build (using EAS):

# Install EAS CLI (if needed)
npm install -g eas-cli
# Log in
eas login
# Configure project (if needed)
eas build:configure
# Build for platform
eas build --profile development --platform android # or ios

Run with: npx expo start --dev-client

React vs. React Native Syntax

While built on React, React Native uses native components instead of web elements (HTML DOM).

Similarities:

JSX syntax.
Component-based architecture.
React Hooks (useState, useEffect, etc.).
Props system.
State management principles.

Key Differences:

// React (Web)
<div>
  <h1>Title</h1>
  <p>Paragraph</p>
  <img src="..." alt="..." />
  <input type="text" />
</div>

// React Native
import { View, Text, Image, TextInput } from 'react-native';

<View>
  <Text style={{fontWeight: 'bold'}}>Title</Text>
  <Text>Paragraph</Text>
  <Image source={{ uri: '...' }} style={{width: 50, height: 50}} />
  <TextInput />
</View>

React Native uses JavaScript objects for styling, similar to inline styles in web, but commonly uses StyleSheet.create for organization and performance. It primarily uses Flexbox for layout (applied by default to <View>).

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

const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up available space
    padding: 20,
    backgroundColor: 'white',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'blue',
    marginBottom: 10, // Use numbers for pixel values
  }
});

<View style={styles.container}>
  <Text style={styles.title}>Styled Title</Text>
</View>

Event names differ (onClick vs. onPress). React Native provides touchable components like TouchableOpacity or Pressable.

// React (Web)
<button onClick={handleClick}>Click</button>

// React Native
import { TouchableOpacity, Text } from 'react-native';

<TouchableOpacity onPress={handlePress}>
  <Text>Press Me</Text>
</TouchableOpacity>

Web uses libraries like react-router-dom. React Native uses dedicated libraries like react-navigation designed for native stack, tab, and drawer navigation patterns.

Environment Setup

Choose the setup method that best suits your needs.

1. Using Expo (Recommended Start)

The quickest way to get started.

Install Expo CLI (Optional but Recommended):
Terminal window
```
npm install -g expo-cli
```

Create a New Project:

npx create-expo-app@latest YourProjectName
cd YourProjectName

Start the Development Server:
Terminal window
```
npx expo start
```
Scan the QR code with the Expo Go app on your device, or use the commands to open in an emulator/simulator. For custom native code, create a Development Build (see above).

2. Using React Native CLI (Bare Workflow)

Provides full control over the native project files. Requires more setup.

General Steps (Summarized - Refer to Official Docs for Details):

Install Core Dependencies:
- Node.js: Use the LTS version.
- Watchman: (Recommended for macOS/Linux) File watching service. brew install watchman
- Java Development Kit (JDK): Typically OpenJDK 17. Use package managers like brew (macOS) or download directly. Set JAVA_HOME.
Install Android Dependencies:
- Android Studio: Install the latest version.
- Android SDK: Use Android Studio’s SDK Manager to install the required SDK Platform (e.g., Android 14 - API 34) and Build-Tools. Ensure Command-line Tools are installed.
- Emulator/Device: Set up an Android Virtual Device (AVD) via Android Studio or enable USB Debugging on a physical device.
- Configure Environment Variables: Set ANDROID_HOME and add platform-tools/emulator to your PATH.
Install iOS Dependencies (macOS Only):
- Xcode: Install from the Mac App Store.
- Xcode Command Line Tools: Install via Xcode or xcode-select --install.
- CocoaPods: Dependency manager for iOS. sudo gem install cocoapods

Create React Native CLI Project:

npx react-native@latest init YourProjectName
cd YourProjectName

Run the App:
- Start Metro Bundler: npx react-native start (or npm start / yarn start).
- (New Terminal) Run on Platform:
  Terminal window
```
# Android
npx react-native run-android
# iOS (macOS only)
npx react-native run-ios
```
  iOS may require cd ios && pod install && cd .. first.

Device Connection Tips:

Android USB: Enable Developer Options & USB Debugging. Connect via USB. Verify with adb devices.
Android WiFi: Enable Wireless Debugging. Pair device (adb pair ...). Connect (adb connect ...).
iOS USB (macOS): Connect via USB. Trust the computer. May need Apple Developer account setup in Xcode.
Reverse Tethering (for accessing local dev server): adb reverse tcp:8081 tcp:8081 (Ensure Metro runs on port 8081).

Styling with TailwindCSS (NativeWind)

NativeWind brings the utility-first power of TailwindCSS to React Native. It compiles Tailwind classes into StyleSheet objects.

Integrating NativeWind v4+ (CLI Project)

This setup uses Metro to process a global CSS file.

Install Dependencies:

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context
# or yarn add ..., pnpm add ..., bun add ...

Link Native Dependencies (iOS):
Terminal window
```
npx pod-install
```

Initialize & Configure Tailwind:

Generate config: npx tailwindcss init

Edit tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}" // Adjust paths as needed
  ],
  presets: [require("nativewind/preset")], // Add preset
  theme: { extend: {} },
  plugins: [],
}

Create global.css (e.g., in root or ./src):

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure Babel: Add the preset to babel.config.js.

module.exports = {
  presets: [
    'module:@react-native/babel-preset',
    'nativewind/babel' // Add NativeWind preset
  ],
  plugins: [
    // Reanimated plugin must be LAST
    'react-native-reanimated/plugin',
  ],
};

Configure Metro: Use withNativeWind in metro.config.js.

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const { withNativeWind } = require("nativewind/metro");

/** @type {import('metro-config').MetroConfig} */
const config = {}; // Your base config

module.exports = withNativeWind(
  mergeConfig(getDefaultConfig(__dirname), config),
  {
    // Correct relative path to your CSS file:
    input: "./global.css",
    // Optional output file name:
    // output: "nativewind-output.js",
  }
);

Import CSS in App Entry: Import the CSS file in App.js or App.tsx.

import "./global.css"; // Import the CSS file

import React from 'react';
// ... other imports
import { SafeAreaView, View, Text } from 'react-native';

const App = () => {
  return (
    <SafeAreaView className="flex-1 items-center justify-center">
      <Text className="text-xl text-blue-600 dark:text-blue-400">
        Hello NativeWind!
      </Text>
    </SafeAreaView>
  );
};
export default App;

TypeScript Setup (If using TS): Create a type definition file (e.g., nativewind-env.d.ts).
```
/// <reference types="nativewind/types" />
```
Restart with Cache Reset: Crucial after config changes!
Terminal window
```
npm start -- --reset-cache
# or yarn start --reset-cache
```
Then run npx react-native run-android or run-ios in another terminal.