The Complete React Native Guide | Cross-Platform Mobile Apps, Navigation & Production Use

2026년 4월 7일 · 23분 읽기 · 수정 2026년 4월 7일 intermediate

What this post covers

This is a complete guide to developing iOS and Android apps with React Native. It covers Components, Navigation, Async Storage, APIs, and deployment—with practical examples.

From the field: Shipping the same app on iOS and Android with React Native cut development time by about 60% and pushed code reuse to around 90%.

Introduction: “Mobile app development feels too hard”

Real-world scenarios

Scenario 1: I have to build iOS and Android separately

You would need Swift and Kotlin. React Native targets both platforms from one codebase. Scenario 2: I want to leverage web development experience

Native stacks have a steep learning curve. React Native builds on React skills you already have. Scenario 3: I need fast prototyping

Native takes longer to iterate. React Native is faster to spin up.

1. What is React Native?

Core characteristics

React Native is a cross-platform mobile app framework.

Key advantages:

Cross-platform: iOS + Android
React: reuse web-oriented React experience
Native performance: real native UI components
Hot Reload: see changes instantly
Large ecosystem: thousands of libraries

2. Installation and project setup

Expo (recommended)

npx create-expo-app my-app
cd my-app
npx expo start

React Native CLI

Below is a simple Bash example. Run it locally to see how it behaves.

npx react-native init MyApp
cd MyApp
npm run android
npm run ios

3. Core components

import { View, Text, Image, ScrollView, TextInput, Button } from 'react-native';
export default function App() {
  return (
    <ScrollView>
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Hello React Native</Text>
        <Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 200, height: 200 }} />
        <TextInput placeholder="Enter text" style={{ borderWidth: 1, padding: 10 }} />
        <Button title="Click me" onPress={() => alert('Clicked!')} />
      </View>
    </ScrollView>
  );
}

4. StyleSheet

import { View, Text, StyleSheet } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

Installation

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

Stack Navigator

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/Home';
import DetailsScreen from './screens/Details';
const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
// screens/Home.tsx
import { View, Button } from 'react-native';
export default function HomeScreen({ navigation }) {
  return (
    <View>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', { id: 1 })}
      />
    </View>
  );
}

6. Async Storage

npm install @react-native-async-storage/async-storage

The snippet below is a TypeScript example. Import the modules you need and use async/await to work efficiently. Read through each part to understand its role.

import AsyncStorage from '@react-native-async-storage/async-storage';
// Save
await AsyncStorage.setItem('user', JSON.stringify({ name: 'John' }));
// Read
const user = await AsyncStorage.getItem('user');
const userData = JSON.parse(user);
// Delete
await AsyncStorage.removeItem('user');

7. Calling APIs

Below is a detailed TypeScript example. It imports the required modules, uses hooks for state, fetches data asynchronously, and branches with conditionals. Walk through each section to see how it fits together.

import { useEffect, useState } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
interface User {
  id: number;
  name: string;
}
export default function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch('https://api.example.com/users')
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      });
  }, []);
  if (loading) {
    return <ActivityIndicator size="large" />;
  }
  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.name}</Text>
        </View>
      )}
    />
  );
}

8. Platform-specific code

import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
  container: {
    padding: Platform.OS === 'ios' ? 20 : 10,
  },
});
// Or
import { Platform } from 'react-native';
const Component = Platform.select({
  ios: () => require('./ComponentIOS'),
  android: () => require('./ComponentAndroid'),
})();

Below is a detailed TypeScript example. It imports the modules you need, uses async/await for the network call, handles errors for stability, and branches with conditionals. Review each part to understand how it works.

import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import { useState } from 'react';
export default function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = async () => {
    try {
      const response = await fetch('https://api.example.com/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      });
      const data = await response.json();
      if (response.ok) {
        Alert.alert('Success', 'Logged in successfully');
      } else {
        Alert.alert('Error', data.message);
      }
    } catch (error) {
      Alert.alert('Error', 'Network error');
    }
  };
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login</Text>
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <TouchableOpacity style={styles.button} onPress={handleLogin}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    marginBottom: 32,
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 12,
    marginBottom: 16,
    borderRadius: 8,
  },
  button: {
    backgroundColor: '#3498db',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Summary and checklist

Key takeaways

React Native: cross-platform mobile
iOS + Android: one codebase
React: reuse web-oriented skills
Native performance: real native UI
Hot Reload: instant feedback
Large ecosystem: thousands of libraries

Implementation checklist

React Complete Guide
Expo Complete Guide
TypeScript Complete Guide

Keywords in this post

React Native, Mobile, iOS, Android, Cross-platform, TypeScript, Expo

Frequently asked questions (FAQ)

Q. How does it compare to Flutter?

A. React Native lets you lean on the JavaScript ecosystem. Flutter tends to offer faster, more consistent UI rendering.

Q. What about performance?

A. It is close to native, but not identical in every case.

Q. Should I use Expo?

A. Expo is a good default for beginners. If you need custom native modules, use the Bare Workflow.

Q. Is it production-ready?

A. Yes. Facebook, Instagram, Airbnb, and others have used it.