React Native - Complete Development Guide

• Teams with React/JavaScript expertise
• MVPs and rapid prototyping
• Apps with standard UI patterns
• Cross-platform apps with shared codebase
• Content-heavy applications

• App requires heavy graphics/animations (games)
• Need maximum performance for complex calculations
• Extensive use of platform-specific features
• Team has no JavaScript experience

JavaScript Thread         Bridge         Native Thread
      │                      │                  │
      │─── Button Press ────→│                  │
      │                      │─── Event ──────→│
      │                      │                  │
      │                      │←── UI Update ────│
      │←─── Render ─────────│                  │

# Install Expo CLI
npm install -g expo-cli

# Create new project
expo init MyApp
cd MyApp

# Start development server
expo start

# Scan QR code with Expo Go app on your phone

# Create new project
npx react-native init MyApp
cd MyApp

# Run on iOS (macOS only)
npx react-native run-ios

# Run on Android
npx react-native run-android

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

function App() {
  return (
    <View style={{flex: 1, padding: 20}}>
      {/* Text Display */}
      <Text style={{fontSize: 24, fontWeight: 'bold'}}>
        Hello React Native!
      </Text>

      {/* Image */}
      <Image
        source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
        style={{width: 50, height: 50}}
      />

      {/* Text Input */}
      <TextInput
        placeholder="Type here..."
        style={{borderWidth: 1, padding: 10, marginTop: 10}}
      />

      {/* Button */}
      <Button title="Press Me" onPress={() => alert('Pressed!')} />

      {/* Custom Touchable */}
      <TouchableOpacity
        style={{backgroundColor: 'blue', padding: 15, marginTop: 10}}
        onPress={() => console.log('Tapped')}
      >
        <Text style={{color: 'white', textAlign: 'center'}}>
          Custom Button
        </Text>
      </TouchableOpacity>
    </View>
  );
}

import {FlatList} from 'react-native';

const DATA = [
  {id: '1', title: 'First Item'},
  {id: '2', title: 'Second Item'},
  {id: '3', title: 'Third Item'},
];

function MyList() {
  const renderItem = ({item}) => (
    <View style={{padding: 20, borderBottomWidth: 1}}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
}

import {SectionList} from 'react-native';

const DATA = [
  {
    title: 'Fruits',
    data: ['Apple', 'Banana', 'Orange'],
  },
  {
    title: 'Vegetables',
    data: ['Carrot', 'Cucumber', 'Tomato'],
  },
];

function MySectionList() {
  return (
    <SectionList
      sections={DATA}
      renderItem={({item}) => <Text>{item}</Text>}
      renderSectionHeader={({section}) => (
        <Text style={{fontWeight: 'bold'}}>{section.title}</Text>
      )}
      keyExtractor={(item, index) => item + index}
    />
  );
}

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

function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Styled Text</Text>
      <Text style={[styles.text, styles.bold]}>Multiple Styles</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  text: {
    fontSize: 16,
    color: '#666',
  },
  bold: {
    fontWeight: 'bold',
  },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',        // 'row' or 'column'
    justifyContent: 'center',    // 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'
    alignItems: 'center',        // 'flex-start', 'flex-end', 'center', 'stretch'
    flexWrap: 'wrap',            // 'nowrap' or 'wrap'
  },
  box: {
    flex: 1,                     // Takes available space
    margin: 10,
    padding: 20,
  },
});

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

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

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

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen({navigation}) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details', {itemId: 42})}
      />
    </View>
  );
}

function DetailsScreen({route}) {
  const {itemId} = route.params;
  return <Text>Details Screen - Item ID: {itemId}</Text>;
}

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

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;
          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'settings' : 'settings-outline';
          }
          return <Icon name={iconName} size={size} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

import React, {useState, useEffect} from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count changed to ${count}`);
  }, [count]);

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

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

const ThemeContext = createContext();

function ThemeProvider({children}) {
  const [theme, setTheme] = useState('light');

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

function ThemedComponent() {
  const {theme, setTheme} = useContext(ThemeContext);
  return (
    <View style={{backgroundColor: theme === 'light' ? 'white' : 'black'}}>
      <Button
        title="Toggle Theme"
        onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      />
    </View>
  );
}

import React, {useState, useEffect} from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error}</Text>;

  return <Text>{JSON.stringify(data)}</Text>;
}

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {'Authorization': 'Bearer TOKEN'},
});

async function fetchData() {
  try {
    const response = await api.get('/users');
    return response.data;
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
}

// POST request
async function createUser(userData) {
  const response = await api.post('/users', userData);
  return response.data;
}

import AsyncStorage from '@react-native-async-storage/async-storage';

// Store data
const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error('Error storing data:', error);
  }
};

// Retrieve data
const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value != null ? JSON.parse(value) : null;
  } catch (error) {
    console.error('Error retrieving data:', error);
  }
};

// Enable performance monitor
// Shake device and select "Show Perf Monitor"

// Or programmatically
import {NativeModules} from 'react-native';
NativeModules.DevSettings.setIsDebuggingRemotely(false);

import React from 'react';
import {render} from '@testing-library/react-native';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const {getByText} = render(<MyComponent />);
    expect(getByText('Hello')).toBeTruthy();
  });

  it('handles button press', () => {
    const {getByText} = render(<MyComponent />);
    const button = getByText('Press Me');
    fireEvent.press(button);
    // Assert expected behavior
  });
});

describe('Login Flow', () => {
  beforeAll(async () => {
    await device.launchApp();
  });

  it('should login successfully', async () => {
    await element(by.id('email')).typeText('user@example.com');
    await element(by.id('password')).typeText('password123');
    await element(by.id('loginButton')).tap();
    await expect(element(by.text('Welcome'))).toBeVisible();
  });
});

# Generate release bundle
cd android
./gradlew bundleRelease

# The AAB will be in:
# android/app/build/outputs/bundle/release/app-release.aab

src/
├── components/      # Reusable components
├── screens/         # Screen components
├── navigation/      # Navigation configuration
├── services/        # API calls, utilities
├── store/           # State management
├── assets/          # Images, fonts
├── styles/          # Global styles
└── utils/           # Helper functions