# Check Node.js version
node --version

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

# Verify installation
react-native --version

xcode-select --install

sudo gem install cocoapods

# Add to ~/.bash_profile or ~/.zshrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

# Create a new React Native project
npx react-native init MyFirstApp

# Navigate to project directory
cd MyFirstApp

# Install dependencies
npm install

# Start Metro bundler
npm start

MyFirstApp/
├── android/          # Android-specific code
├── ios/             # iOS-specific code
├── node_modules/    # Dependencies
├── src/             # Source code
│   ├── components/  # Reusable components
│   ├── screens/     # Screen components
│   ├── navigation/  # Navigation configuration
│   └── assets/      # Images, fonts, etc.
├── App.js           # Root component
└── package.json     # Project configuration

# Start iOS simulator
npx react-native run-ios

# Specify simulator
npx react-native run-ios --simulator="iPhone 14"

# Start Android emulator
npx react-native run-android

# Install React Native Debugger (macOS)
brew install --cask react-native-debugger

# Start debugger
open "rndebugger://set-debugger-loc?host=localhost&port=8081"

# Start Metro
npm start

# Clear Metro cache
npm start -- --reset-cache

cd ios
pod install
cd ..

# Clean Android build
cd android
./gradlew clean
cd ..

// components/Button.js
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export const Button = ({ title, onPress }) => (
  <TouchableOpacity style={styles.button} onPress={onPress}>
    <Text style={styles.text}>{title}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  button: {
    padding: 12,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  text: {
    color: '#FFFFFF',
    fontSize: 16,
    textAlign: 'center',
  },
});