React Native — User Guide

React Native is Meta's open-source framework for building truly native mobile applications for iOS and Android using JavaScript and React. Rather than rendering web views, React Native translates your React components into real native platform widgets — delivering the performance and feel of a native app with the productivity of React's declarative UI model.

This guide covers everything you need to go from zero to a production-ready React Native app: installation, configuration, core concepts, common tasks, and troubleshooting for real-world issues.

Note

This guide covers React Native 0.86.x on the New Architecture (Fabric renderer, TurboModules, Codegen). The New Architecture is the default for all new projects. If you need details on internals, architecture decisions, or deployment infrastructure, see the Admin Guide (Admin section).

Table of Contents

• 1. Quick Start
• 2. Installation
• 3. Configuration
• 4. Core Usage
• 5. Common Tasks
• 6. Troubleshooting
• 7. FAQ

1. Quick Start

Get a new React Native app running on a simulator or device in under five minutes.

1.1 Prerequisites at a Glance

1.2 Create and Run Your First App

npx @react-native-community/cli@latest init MyFirstApp
cd MyFirstApp

Run on iOS:

npx react-native start
# In a new terminal:
npx react-native run-ios

Run on Android (ensure an emulator is running or a device is connected):

npx react-native start
# In a new terminal:
npx react-native run-android

Expected output from npx react-native start:

info Starting dev server on port 8081...

                        ▐▀▄       ▄▀▌
                        ▐ ▀▄▄▄▄▄▀ ▌
                        ▐         ▌
                        ▐         ▌
                        ▐    ▄    ▌
                        ▐   ▐ ▌   ▌
                        ▐   ▀ ▀   ▌

               Welcome to React Native 0.86
                 Dev server ready.

1.3 Edit Your App

Open App.tsx in your editor. Make a change, save, and watch it appear instantly on the device — Fast Refresh is enabled by default.

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

function App(): React.JSX.Element {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
    </SafeAreaView>
  );
}

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

export default App;

Tip

Shake your device (or press Cmd+D on iOS Simulator / Cmd+M on Android Emulator) to open the Dev Menu. From there you can toggle the inspector, reload the app, or open React Native DevTools.

2. Installation

2.1 System Requirements

2.1.1 All Platforms

2.1.2 iOS Development (macOS Only)

2.1.3 Android Development

2.2 macOS Setup

2.2.1 Install Homebrew Dependencies

brew install node watchman

Verify Node version:

node --version
# Expected: v22.x.x or v20.x.x (matching required range)

2.2.2 Install Ruby and CocoaPods (iOS)

macOS ships with Ruby, but using a version manager is recommended:

brew install rbenv ruby-build
rbenv install 3.3.0
rbenv global 3.3.0

# Verify
ruby --version
# Expected: ruby 3.3.0 or higher

gem install cocoapods

2.2.3 Install Xcode (iOS)

1. Install Xcode from the Mac App Store
2. Open Xcode and accept the license agreement
3. Install Command Line Tools:

xcode-select --install

4. Verify the installation:

xcodebuild -version
# Expected: Xcode 16.x, Build version ...

2.2.4 Install Android Studio (Android)

1. Download Android Studio from https://developer.android.com/studio
2. During installation, ensure these are checked:
   • Android SDK
   • Android SDK Platform
   • Android Virtual Device
3. Open Android Studio > Settings > SDK Manager
4. Install SDK Platform for your target API level (35+)
5. Install NDK (Side by side) under SDK Tools tab

2.2.5 Configure Environment Variables

Add to your ~/.zshrc or ~/.bash_profile:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Reload your shell:

source ~/.zshrc

2.3 Windows Setup (Android Only)

Important

iOS development requires macOS. On Windows, you can only build for Android. Use a Mac or a cloud-based Mac service for iOS builds.

2.3.1 Install Node.js

Download the LTS installer from https://nodejs.org/ or use a version manager:

# Using Chocolatey
choco install nodejs-lts

# Verify
node --version

2.3.2 Install Android Studio

1. Download from https://developer.android.com/studio
2. During install, check: Android SDK, Android SDK Platform, Android Virtual Device
3. Install SDK Platform API 35+ from SDK Manager
4. Install NDK from SDK Tools tab

2.3.3 Configure Environment Variables

Set the following system environment variables:

2.4 Linux Setup (Android Only)

# Install Node.js (using NodeSource)
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

# Install Watchman
sudo apt-get install watchman

# Install JDK 17
sudo apt-get install openjdk-17-jdk

Then install Android Studio as described in section 2.3.2.

2.5 Creating a New Project

2.5.1 Using npx (Recommended)

npx @react-native-community/cli@latest init MyProject

Expected output:

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Installing CocoaPods dependencies (iOS)

  Run instructions for iOS:
    npx react-native run-ios

  Run instructions for Android:
    npx react-native run-android

2.5.2 With a Specific Version

npx @react-native-community/cli@latest init MyProject --version 0.86.0

2.5.3 With a Custom Template

npx @react-native-community/cli@latest init MyProject --template react-native-template-typescript

2.6 Project Structure

After initialization, your project will have this structure:

MyProject/
├── __tests__/           # Jest test files
├── android/             # Android native project
│   ├── app/
│   │   ├── build.gradle
│   │   └── src/
│   ├── build.gradle
│   ├── gradle.properties
│   └── settings.gradle
├── ios/                 # iOS native project
│   ├── MyProject/
│   ├── Podfile
│   └── MyProject.xcworkspace
├── node_modules/
├── App.tsx              # Root component
├── app.json             # App configuration
├── babel.config.js      # Babel configuration
├── index.js             # App entry point
├── metro.config.js      # Metro bundler configuration
├── package.json
└── tsconfig.json        # TypeScript configuration

2.7 Verifying Your Setup

Run the built-in environment check:

npx react-native doctor

This checks for Node, Watchman, Xcode, CocoaPods, Android Studio, Android SDK, and JDK. Fix any issues it reports before proceeding.

3. Configuration

3.1 Metro Bundler Configuration

Metro is React Native's JavaScript bundler. The default configuration is provided by @react-native/metro-config.

3.1.1 Default Configuration

Your project's metro.config.js:

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

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

The default configuration includes:

3.1.2 Changing the Dev Server Port

Set the RCT_METRO_PORT environment variable:

RCT_METRO_PORT=8088 npx react-native start

Or configure it in metro.config.js:

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

const config = {
  server: {
    port: 8088,
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

3.1.3 Adding Asset Extensions

To support additional asset types beyond the defaults:

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

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, 'obj', 'mtl', 'gltf'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

3.1.4 Adding Source Extensions

To support additional source file extensions:

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

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  resolver: {
    sourceExts: [...defaultConfig.resolver.sourceExts, 'cjs', 'mjs'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

3.1.5 Configuring Module Aliases

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const path = require('path');

const config = {
  resolver: {
    extraNodeModules: {
      '@app': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

3.2 Babel Configuration

React Native uses @react-native/babel-preset which includes support for Flow stripping, class properties, async/await, optional chaining, nullish coalescing, and more.

3.2.1 Default Configuration

Your babel.config.js:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
};

3.2.2 Adding Plugins

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // Must be last
  ],
};

Warning

If you use react-native-reanimated, its Babel plugin must be listed last in the plugins array. Placing it elsewhere causes subtle runtime errors that are difficult to diagnose.

3.2.3 Environment-Specific Configuration

module.exports = (api) => {
  const isProd = api.env('production');

  return {
    presets: ['module:@react-native/babel-preset'],
    plugins: [
      isProd && 'transform-remove-console',
    ].filter(Boolean),
  };
};

3.3 TypeScript Configuration

Default tsconfig.json:

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "strict": true
  }
}

3.3.1 Path Aliases with TypeScript

If you configure Metro module aliases (section 3.1.5), mirror them in tsconfig.json:

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@app/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

3.4 ESLint Configuration

React Native provides @react-native/eslint-config and @react-native/eslint-plugin for code quality.

3.4.1 Default Setup

Your .eslintrc.js:

module.exports = {
  root: true,
  extends: '@react-native',
};

This extends @react-native/eslint-config, which bundles rules for React, React Native, Jest, Flow/TypeScript, and Prettier.

3.4.2 Adding Custom Rules

module.exports = {
  root: true,
  extends: '@react-native',
  rules: {
    'no-console': 'warn',
    'react-native/no-inline-styles': 'warn',
    'react/no-unstable-nested-components': 'error',
  },
};

3.5 Jest Configuration

React Native uses @react-native/jest-preset for testing.

3.5.1 Default Setup

In your package.json:

{
  "jest": {
    "preset": "react-native"
  }
}

Or in a standalone jest.config.js:

module.exports = {
  preset: 'react-native',
  setupFilesAfterSetup: ['./jest.setup.js'],
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|@react-native|@react-navigation)/)',
  ],
};

3.5.2 Module Name Mapping

If you use path aliases, configure Jest to resolve them:

module.exports = {
  preset: 'react-native',
  moduleNameMapper: {
    '^@app/(.*)$': '<rootDir>/src/$1',
    '^@components/(.*)$': '<rootDir>/src/components/$1',
    '^@utils/(.*)$': '<rootDir>/src/utils/$1',
  },
};

3.6 Prettier Configuration

React Native uses these Prettier settings internally:

{
  "arrowParens": "avoid",
  "singleQuote": true,
  "trailingComma": "all"
}

Create a .prettierrc in your project root with these or your preferred settings to maintain consistent formatting.

3.7 Android Configuration

3.7.1 Gradle Plugin

React Native's Gradle plugin is applied in your Android project. The key plugins are:

• com.facebook.react — applied to your app/build.gradle
• com.facebook.react.rootproject — applied to the root build.gradle

3.7.2 Gradle Properties

Key properties in android/gradle.properties:

# Enable the New Architecture (default: true in 0.86)
newArchEnabled=true

# Enable Hermes JS engine (default: true)
hermesEnabled=true

# Configure build variants
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

3.7.3 App-Level build.gradle

apply plugin: "com.facebook.react"

react {
    // Configures bundling for release builds
    // entryFile = file("index.js")
    // bundleCommand = "bundle"
}

android {
    namespace "com.myproject"
    compileSdk 35
    defaultConfig {
        applicationId "com.myproject"
        minSdk 24
        targetSdk 35
        versionCode 1
        versionName "1.0"
    }
}

3.8 iOS Configuration

3.8.1 Podfile

The iOS Podfile manages native dependencies via CocoaPods:

platform :ios, '15.1'

target 'MyProject' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true,
    :fabric_enabled => true,
  )

  post_install do |installer|
    react_native_post_install(installer)
  end
end

3.8.2 Installing iOS Dependencies

cd ios
bundle install     # Install Ruby gems (if using Bundler)
pod install        # Install CocoaPods dependencies
cd ..

Expected output:

Analyzing dependencies
Downloading dependencies
Installing React-Core (0.86.0)
Installing hermes-engine (0.86.0)
...
Pod installation complete!

3.9 App Configuration (app.json)

The app.json file provides basic app metadata:

{
  "name": "MyProject",
  "displayName": "My Project"
}

This is read by index.js to register the app:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

4. Core Usage

4.1 Components

React Native provides a set of core components that map directly to native platform views.

4.1.1 Basic Components

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

function BasicComponents(): React.JSX.Element {
  return (
    <ScrollView>
      <View style={{padding: 20}}>
        <Text>Hello, world!</Text>
        <Image
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
          style={{width: 50, height: 50}}
        />
        <TextInput placeholder="Type here..." />
        <Button title="Press Me" onPress={() => console.log('Pressed!')} />
      </View>
    </ScrollView>
  );
}

4.1.2 Layout with View and Flexbox

React Native uses Flexbox for layout. The default flexDirection is column (unlike web CSS which defaults to row).

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

function FlexboxExample(): React.JSX.Element {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={[styles.box, {backgroundColor: '#e74c3c'}]}>
          <Text style={styles.label}>1</Text>
        </View>
        <View style={[styles.box, {backgroundColor: '#3498db'}]}>
          <Text style={styles.label}>2</Text>
        </View>
        <View style={[styles.box, {backgroundColor: '#2ecc71'}]}>
          <Text style={styles.label}>3</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  box: {
    width: 80,
    height: 80,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  label: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

Key Flexbox properties:

4.1.3 Text and Typography

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

function Typography(): React.JSX.Element {
  return (
    <>
      <Text style={styles.heading}>Heading</Text>
      <Text style={styles.body}>
        Body text with <Text style={styles.bold}>bold</Text> and{' '}
        <Text style={styles.italic}>italic</Text> spans.
      </Text>
      <Text style={styles.link} onPress={() => console.log('Tapped!')}>
        Tappable text
      </Text>
      <Text numberOfLines={2} ellipsizeMode="tail">
        This is a very long paragraph that will be truncated after two lines
        because we set numberOfLines to 2 and ellipsizeMode to tail so it
        shows an ellipsis at the end.
      </Text>
    </>
  );
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  body: {
    fontSize: 16,
    lineHeight: 24,
    color: '#333',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  link: {
    color: '#3498db',
    textDecorationLine: 'underline',
  },
});

4.1.4 Images

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

function ImageExamples(): React.JSX.Element {
  return (
    <View>
      {/* Local image (require) */}
      <Image source={require('./assets/logo.png')} style={styles.localImage} />

      {/* Remote image (must specify dimensions) */}
      <Image
        source={{uri: 'https://example.com/photo.jpg'}}
        style={styles.remoteImage}
        resizeMode="cover"
      />

      {/* Background image */}
      <ImageBackground
        source={require('./assets/background.png')}
        style={styles.background}>
        <Text style={styles.overlayText}>Overlay text</Text>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  localImage: {
    width: 100,
    height: 100,
  },
  remoteImage: {
    width: 200,
    height: 150,
    borderRadius: 8,
  },
  background: {
    width: '100%',
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  overlayText: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Image resizeMode options:

4.1.5 TextInput

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

function FormExample(): React.JSX.Element {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [bio, setBio] = useState('');

  return (
    <View style={styles.form}>
      <Text style={styles.label}>Name</Text>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
        placeholder="Your name"
        autoCapitalize="words"
        returnKeyType="next"
      />

      <Text style={styles.label}>Email</Text>
      <TextInput
        style={styles.input}
        value={email}
        onChangeText={setEmail}
        placeholder="[email removed]"
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
        returnKeyType="next"
      />

      <Text style={styles.label}>Bio</Text>
      <TextInput
        style={[styles.input, styles.multiline]}
        value={bio}
        onChangeText={setBio}
        placeholder="Tell us about yourself..."
        multiline
        numberOfLines={4}
        textAlignVertical="top"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  form: {
    padding: 20,
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
    marginBottom: 4,
    color: '#333',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
    marginBottom: 16,
    fontSize: 16,
  },
  multiline: {
    height: 100,
  },
});

Keyboard types available via keyboardType:

4.2 Styling

4.2.1 StyleSheet API

Always use StyleSheet.create() for performance — it validates styles at creation time and creates optimized references:

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1a1a1a',
    marginBottom: 12,
  },
});

4.2.2 Combining Styles

// Array syntax — later styles override earlier ones
<View style={[styles.base, styles.active]} />

// Conditional styles
<View style={[styles.base, isActive && styles.active]} />

// Inline overrides
<View style={[styles.base, {marginTop: 10}]} />

4.2.3 Platform-Specific Styles

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.25,
        shadowRadius: 4,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});

4.2.4 Common Style Properties

React Native styles are a subset of CSS, written in camelCase. Key differences from web CSS:

Note

All dimensions in React Native are unitless and represent density-independent pixels (dp). There is no px, em, rem, or % unit (except for percentage strings like '50%' for width/height). This ensures consistent sizing across different screen densities.

4.3 Lists and Scrolling

4.3.1 FlatList — Virtualized List

FlatList is the primary component for rendering long, scrollable lists. It only renders items currently visible on screen, making it efficient for large datasets.

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

interface Item {
  id: string;
  title: string;
}

const DATA: Item[] = Array.from({length: 1000}, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

function ListExample(): React.JSX.Element {
  const renderItem = ({item}: {item: Item}) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      ListHeaderComponent={() => (
        <Text style={styles.header}>All Items</Text>
      )}
      ListEmptyComponent={() => (
        <Text style={styles.empty}>No items found</Text>
      )}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
  },
  itemText: {
    fontSize: 16,
  },
  separator: {
    height: 1,
    backgroundColor: '#eee',
  },
  header: {
    fontSize: 20,
    fontWeight: 'bold',
    padding: 16,
  },
  empty: {
    padding: 20,
    textAlign: 'center',
    color: '#999',
  },
});

4.3.2 SectionList — Grouped Data

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

const SECTIONS = [
  {
    title: 'Fruits',
    data: ['Apple', 'Banana', 'Cherry', 'Date'],
  },
  {
    title: 'Vegetables',
    data: ['Artichoke', 'Broccoli', 'Carrot', 'Daikon'],
  },
];

function SectionListExample(): React.JSX.Element {
  return (
    <SectionList
      sections={SECTIONS}
      keyExtractor={(item, index) => item + index}
      renderItem={({item}) => (
        <View style={styles.item}>
          <Text>{item}</Text>
        </View>
      )}
      renderSectionHeader={({section: {title}}) => (
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>{title}</Text>
        </View>
      )}
      stickySectionHeadersEnabled
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
  },
  sectionHeader: {
    padding: 12,
    backgroundColor: '#f5f5f5',
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

4.3.3 Pull-to-Refresh

import React, {useState, useCallback} from 'react';
import {FlatList, RefreshControl} from 'react-native';

function RefreshableList(): React.JSX.Element {
  const [refreshing, setRefreshing] = useState(false);
  const [data, setData] = useState(initialData);

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    const newData = await fetchData();
    setData(newData);
    setRefreshing(false);
  }, []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
}

4.3.4 Infinite Scroll / Pagination

function PaginatedList(): React.JSX.Element {
  const [data, setData] = useState<Item[]>([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const loadMore = useCallback(async () => {
    if (loading) return;
    setLoading(true);
    const newItems = await fetchPage(page + 1);
    setData(prev => [...prev, ...newItems]);
    setPage(prev => prev + 1);
    setLoading(false);
  }, [page, loading]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={loading ? <ActivityIndicator /> : null}
    />
  );
}

4.4 Handling User Input

4.4.1 Touchables and Pressable

import React from 'react';
import {
  Pressable,
  TouchableOpacity,
  TouchableHighlight,
  Text,
  StyleSheet,
} from 'react-native';

function ButtonExamples(): React.JSX.Element {
  return (
    <>
      {/* Pressable — most flexible, recommended */}
      <Pressable
        style={({pressed}) => [
          styles.button,
          pressed && styles.buttonPressed,
        ]}
        onPress={() => console.log('Pressed')}
        onLongPress={() => console.log('Long pressed')}
        hitSlop={10}>
        <Text style={styles.buttonText}>Pressable</Text>
      </Pressable>

      {/* TouchableOpacity — fades on press */}
      <TouchableOpacity
        style={styles.button}
        activeOpacity={0.7}
        onPress={() => console.log('Pressed')}>
        <Text style={styles.buttonText}>TouchableOpacity</Text>
      </TouchableOpacity>

      {/* TouchableHighlight — highlights on press */}
      <TouchableHighlight
        style={styles.button}
        underlayColor="#ddd"
        onPress={() => console.log('Pressed')}>
        <Text style={styles.buttonText}>TouchableHighlight</Text>
      </TouchableHighlight>
    </>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#3498db',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    marginBottom: 12,
  },
  buttonPressed: {
    backgroundColor: '#2980b9',
    transform: [{scale: 0.98}],
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
});

4.4.2 Gesture Handling

import React from 'react';
import {View, PanResponder, Animated} from 'react-native';

function DraggableBox(): React.JSX.Element {
  const pan = React.useRef(new Animated.ValueXY()).current;

  const panResponder = React.useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event(
        [null, {dx: pan.x, dy: pan.y}],
        {useNativeDriver: false},
      ),
      onPanResponderRelease: () => {
        Animated.spring(pan, {
          toValue: {x: 0, y: 0},
          useNativeDriver: true,
        }).start();
      },
    }),
  ).current;

  return (
    <Animated.View
      style={[
        {
          width: 100,
          height: 100,
          backgroundColor: '#3498db',
          borderRadius: 8,
          transform: [{translateX: pan.x}, {translateY: pan.y}],
        },
      ]}
      {...panResponder.panHandlers}
    />
  );
}

4.5 Navigation

React Native does not include a built-in navigation system. The community-standard library is React Navigation (@react-navigation).

4.5.1 Installing React Navigation

npm install @react-navigation/native @react-navigation/native-stack

# Required peer dependencies
npm install react-native-screens react-native-safe-area-context

For iOS, install pods:

cd ios && pod install && cd ..

4.5.2 Stack Navigation

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Button, Text, View} from 'react-native';

type RootStackParamList = {
  Home: undefined;
  Details: {itemId: number};
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function HomeScreen({navigation}: any): React.JSX.Element {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', {itemId: 42})}
      />
    </View>
  );
}

function DetailsScreen({route}: any): React.JSX.Element {
  const {itemId} = route.params;
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Details for item {itemId}</Text>
    </View>
  );
}

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

4.5.3 Tab Navigation

npm install @react-navigation/bottom-tabs

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

4.5.4 Drawer Navigation

npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

import {createDrawerNavigator} from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Settings" component={SettingsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

4.6 Networking

4.6.1 Fetch API

React Native includes the standard fetch API:

async function fetchUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch failed:', error);
    throw error;
  }
}

4.6.2 POST Requests

async function createUser(name: string, email: string) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer YOUR_TOKEN',
    },
    body: JSON.stringify({name, email}),
  });
  return response.json();
}

4.6.3 Using Data in Components

import React, {useState, useEffect} from 'react';
import {FlatList, Text, View, ActivityIndicator} from 'react-native';

interface User {
  id: number;
  name: string;
}

function UserList(): React.JSX.Element {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <ActivityIndicator size="large" />;
  if (error) return <Text>Error: {error}</Text>;

  return (
    <FlatList
      data={users}
      keyExtractor={item => String(item.id)}
      renderItem={({item}) => (
        <View style={{padding: 16}}>
          <Text>{item.name}</Text>
        </View>
      )}
    />
  );
}

4.6.4 WebSocket

const ws = new WebSocket('wss://echo.websocket.org');

ws.onopen = () => {
  ws.send('Hello from React Native!');
};

ws.onmessage = (event) => {
  console.log('Received:', event.data);
};

ws.onerror = (error) => {
  console.error('WebSocket error:', error);
};

ws.onclose = () => {
  console.log('WebSocket closed');
};

4.7 State Management

4.7.1 useState

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

function Counter(): React.JSX.Element {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(c => c + 1)} />
      <Button title="Decrement" onPress={() => setCount(c => c - 1)} />
      <Button title="Reset" onPress={() => setCount(0)} />
    </View>
  );
}

4.7.2 useReducer

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

type State = {count: number};
type Action = {type: 'increment'} | {type: 'decrement'} | {type: 'reset'};

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return {count: 0};
  }
}

function Counter(): React.JSX.Element {
  const [state, dispatch] = useReducer(reducer, {count: 0});

  return (
    <View>
      <Text>Count: {state.count}</Text>
      <Button title="+" onPress={() => dispatch({type: 'increment'})} />
      <Button title="-" onPress={() => dispatch({type: 'decrement'})} />
      <Button title="Reset" onPress={() => dispatch({type: 'reset'})} />
    </View>
  );
}

4.7.3 Context API

import React, {createContext, useContext, useState} from 'react';

interface ThemeContextType {
  isDark: boolean;
  toggle: () => void;
}

const ThemeContext = createContext<ThemeContextType>({
  isDark: false,
  toggle: () => {},
});

function ThemeProvider({children}: {children: React.ReactNode}) {
  const [isDark, setIsDark] = useState(false);
  const toggle = () => setIsDark(prev => !prev);

  return (
    <ThemeContext.Provider value={{isDark, toggle}}>
      {children}
    </ThemeContext.Provider>
  );
}

function useTheme() {
  return useContext(ThemeContext);
}

// Usage in a component
function ThemedScreen(): React.JSX.Element {
  const {isDark, toggle} = useTheme();

  return (
    <View style={{backgroundColor: isDark ? '#333' : '#fff', flex: 1}}>
      <Text style={{color: isDark ? '#fff' : '#333'}}>
        Current theme: {isDark ? 'Dark' : 'Light'}
      </Text>
      <Button title="Toggle Theme" onPress={toggle} />
    </View>
  );
}

4.8 Animations

4.8.1 Animated API

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

function FadeInView({children}: {children: React.ReactNode}): React.JSX.Element {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 800,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View style={{opacity: fadeAnim}}>
      {children}
    </Animated.View>
  );
}

4.8.2 Animation Types

// Spring animation
Animated.spring(value, {
  toValue: 1,
  friction: 5,
  tension: 40,
  useNativeDriver: true,
}).start();

// Timing animation with easing
import {Easing} from 'react-native';

Animated.timing(value, {
  toValue: 1,
  duration: 500,
  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
  useNativeDriver: true,
}).start();

// Decay animation (momentum-based)
Animated.decay(value, {
  velocity: 0.95,
  deceleration: 0.997,
  useNativeDriver: true,
}).start();

4.8.3 Composing Animations

// Sequential
Animated.sequence([
  Animated.timing(opacity, {toValue: 1, duration: 300, useNativeDriver: true}),
  Animated.timing(translateY, {toValue: 0, duration: 300, useNativeDriver: true}),
]).start();

// Parallel
Animated.parallel([
  Animated.timing(opacity, {toValue: 1, duration: 300, useNativeDriver: true}),
  Animated.timing(scale, {toValue: 1, duration: 300, useNativeDriver: true}),
]).start();

// Stagger
Animated.stagger(100, [
  Animated.timing(item1Opacity, {toValue: 1, duration: 300, useNativeDriver: true}),
  Animated.timing(item2Opacity, {toValue: 1, duration: 300, useNativeDriver: true}),
  Animated.timing(item3Opacity, {toValue: 1, duration: 300, useNativeDriver: true}),
]).start();

// Loop
Animated.loop(
  Animated.sequence([
    Animated.timing(rotation, {toValue: 1, duration: 1000, useNativeDriver: true}),
    Animated.timing(rotation, {toValue: 0, duration: 1000, useNativeDriver: true}),
  ]),
).start();

4.8.4 Interpolation

const spinValue = useRef(new Animated.Value(0)).current;

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

const backgroundColor = animValue.interpolate({
  inputRange: [0, 0.5, 1],
  outputRange: ['#e74c3c', '#f39c12', '#2ecc71'],
});

return (
  <Animated.View
    style={{
      transform: [{rotate: spin}],
      backgroundColor,
    }}
  />
);

4.9 Platform-Specific Code

4.9.1 Platform Module

import {Platform} from 'react-native';

// Simple check
if (Platform.OS === 'ios') {
  // iOS-specific code
} else if (Platform.OS === 'android') {
  // Android-specific code
}

// Version check
if (Platform.OS === 'android' && Platform.Version >= 33) {
  // Android 13+ specific code
}

// Platform.select
const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {paddingTop: 44},
      android: {paddingTop: 0},
      default: {paddingTop: 0},
    }),
  },
});

4.9.2 Platform-Specific Files

React Native automatically picks platform-specific files based on extension:

Button.ios.tsx      ← Used on iOS
Button.android.tsx  ← Used on Android
Button.tsx          ← Fallback for other platforms

Import normally — Metro resolves the correct file:

import Button from './Button'; // Resolves to .ios.tsx or .android.tsx

4.10 Safe Area Handling

import {SafeAreaView, StatusBar, StyleSheet} from 'react-native';

function App(): React.JSX.Element {
  return (
    <>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <SafeAreaView style={styles.container}>
        {/* Your content here — respects notch, status bar, home indicator */}
      </SafeAreaView>
    </>
  );
}

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