React Native Complete Guide: Build Cross-Platform Apps

# Create new project
npx react-native@latest init MyApp

# Run on iOS
cd MyApp
npx react-native run-ios

# Run on Android
npx react-native run-android

import { View } from 'react-native';

<View style={{ flex: 1, padding: 20 }}>
  {/* Content */}
</View>

import { Text } from 'react-native';

<Text style={{ fontSize: 16, fontWeight: 'bold' }}>
  Hello, World!
</Text>

import { Image } from 'react-native';

<Image
  source={{ uri: 'https://example.com/image.png' }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

import { ScrollView } from 'react-native';

<ScrollView style={{ flex: 1 }}>
  <Text>Content 1</Text>
  <Text>Content 2</Text>
  <Text>Content 3</Text>
</ScrollView>

import { FlatList } from 'react-native';

const data = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <Text>{item.title}</Text>
  )}
/>

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

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

import { TextInput } from 'react-native';

<TextInput
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
  onChangeText={(text) => setText(text)}
  value={text}
  placeholder="Enter text"
  keyboardType="email-address"
  autoCapitalize="none"
/>

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

<TouchableOpacity onPress={() => console.log('Pressed')}>
  <Text>Press Me</Text>
</TouchableOpacity>

import { useState } from 'react';

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

<TouchableOpacity onPress={() => setCount(count + 1)}>
  <Text>Count: {count}</Text>
</TouchableOpacity>

import { useEffect } from 'react';

useEffect(() => {
  // Component did mount
  console.log('Mounted');

  return () => {
    // Component will unmount
    console.log('Unmounted');
  };
}, []);

import { useLayoutEffect } from 'react';

useLayoutEffect(() => {
  // Runs synchronously after all DOM mutations
  navigation.setOptions({ title: 'Home' });
}, [navigation]);

import NetInfo from '@react-native-community/netinfo';

NetInfo.fetch().then(state => {
  console.log('Connection type', state.type);
  console.log('Is connected?', state.isConnected);
});

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

// Store
await AsyncStorage.setItem('key', 'value');

// Retrieve
const value = await AsyncStorage.getItem('key');

// Remove
await AsyncStorage.removeItem('key');

import { Camera } from 'expo-camera';

<Camera
  style={{ flex: 1 }}
  type={type}
  ref={(ref) => { camera = ref; }}
/>

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

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