Building Cross-Platform Apps with React Native

React Native Overview

React Native lets you build mobile apps using JavaScript and React, sharing code between iOS and Android.

Setting Up React Native

# Install React Native CLI
npm install -g react-native-cli

# Create new project
npx react-native init MyApp

# Run on iOS
npx react-native run-ios

# Run on Android
npx react-native run-android

API Integration

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

function UserList() {
    const [users, setUsers] = useState([]);
    
    useEffect(() => {
        fetchUsers();
    }, []);
    
    const fetchUsers = async () => {
        try {
            const response = await axios.get('https://api.example.com/users');
            setUsers(response.data);
        } catch (error) {
            console.error('Error:', error);
        }
    };
    
    return (
        <FlatList
            data={users}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => (
                <View style={{ padding: 10 }}>
                    <Text style={{ fontSize: 18 }}>{item.name}</Text>
                    <Text style={{ color: 'gray' }}>{item.email}</Text>
                </View>
            )}
        />
    );
}

Best Practices

• Use React Hooks for state management
• Handle loading and error states
• Optimize images and assets
• Test on both iOS and Android
• Use TypeScript for type safety