React Native Interview Questions with Answers

// Hello World in React Native
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'black',
  },
});

export default App;

// Variables in React Native
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  // State variables
  const [mutableVar, setMutableVar] = useState('Hello');
  const [count, setCount] = useState(0);
  
  // Constants
  const API_URL = 'https://api.example.com';
  
  // Regular variables (re-renders won't update UI)
  let regularVar = 'World';
  
  return (
    <View>
      <Text>{mutableVar}</Text>
      <Text>Count: {count}</Text>
      <Button 
        title="Update" 
        onPress={() => {
          setMutableVar('Updated');
          setCount(count + 1);
        }}
      />
    </View>
  );
};

// Data Types in React Native
import React from 'react';
import { View, Text } from 'react-native';

const DataTypesExample = () => {
  // String
  const str = 'Hello React Native';
  
  // Number
  const intNum = 10;
  const floatNum = 3.14;
  
  // Boolean
  const isActive = true;
  
  // Array
  const arr = [1, 2, 3, 4, 5];
  
  // Object
  const person = {
    name: 'Alice',
    age: 25,
    city: 'NYC'
  };
  
  // Null and Undefined
  const nullValue = null;
  const undefinedValue = undefined;
  
  return (
    <View>
      <Text>String: {str}</Text>
      <Text>Number: {intNum}</Text>
      <Text>Boolean: {isActive ? 'Active' : 'Inactive'}</Text>
      <Text>Array: {arr.join(', ')}</Text>
      <Text>Object: {person.name}</Text>
    </View>
  );
};

export default DataTypesExample;

// Functions in React Native
import React from 'react';
import { View, Text, Button } from 'react-native';

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const subtract = (a, b) => a - b;

// Function with default parameters
const greet = (name = 'Guest') => `Hello, ${name}!`;

// Function component
const App = () => {
  // Function with multiple return values
  const divide = (a, b) => ({
    quotient: Math.floor(a / b),
    remainder: a % b
  });
  
  // Higher-order function
  const operate = (a, b, operation) => operation(a, b);
  
  // Lambda function
  const multiply = (a, b) => a * b;
  
  const result = divide(10, 3);
  
  return (
    <View>
      <Text>Add: {add(5, 3)}</Text>
      <Text>Subtract: {subtract(10, 4)}</Text>
      <Text>Greet: {greet('Alice')}</Text>
      <Text>Quotient: {result.quotient}</Text>
      <Text>Remainder: {result.remainder}</Text>
      <Text>Multiply: {operate(6, 7, multiply)}</Text>
    </View>
  );
};

export default App;

// Arrays in React Native
import React, { useState } from 'react';
import { View, Text, Button, FlatList } from 'react-native';

const App = () => {
  // Array creation
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);
  const strings = ['Apple', 'Banana', 'Orange'];
  
  // Array operations
  const addNumber = () => {
    setNumbers([...numbers, numbers.length + 1]);
  };
  
  const removeNumber = () => {
    setNumbers(numbers.slice(0, -1));
  };
  
  // Array methods
  const doubled = numbers.map(x => x * 2);
  const filtered = numbers.filter(x => x > 2);
  const sum = numbers.reduce((a, b) => a + b, 0);
  
  return (
    <View>
      <Text>Numbers: {numbers.join(', ')}</Text>
      <Text>Doubled: {doubled.join(', ')}</Text>
      <Text>Filtered: {filtered.join(', ')}</Text>
      <Text>Sum: {sum}</Text>
      <Button title="Add Number" onPress={addNumber} />
      <Button title="Remove Number" onPress={removeNumber} />
      
      <FlatList
        data={strings}
        renderItem={({item}) => <Text>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
};

export default App;

// Collections in React Native
import React, { useState } from 'react';
import { View, Text, FlatList } from 'react-native';

const App = () => {
  // Array (List)
  const [list, setList] = useState([1, 2, 3, 4, 5]);
  
  // Object (Map/Dictionary)
  const user = {
    name: 'Alice',
    age: 25,
    city: 'NYC'
  };
  
  // Array of objects
  const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
  ];
  
  // Set (using array with unique values)
  const uniqueValues = [...new Set([1, 2, 2, 3, 3, 4])];
  
  // Map (using object)
  const userMap = {
    'user1': { name: 'Alice', age: 25 },
    'user2': { name: 'Bob', age: 30 }
  };
  
  // Collection operations
  const evens = list.filter(x => x % 2 === 0);
  const doubled = list.map(x => x * 2);
  const sum = list.reduce((a, b) => a + b, 0);
  
  return (
    <View>
      <Text>List: {list.join(', ')}</Text>
      <Text>User: {user.name}, {user.age}</Text>
      <Text>Unique: {uniqueValues.join(', ')}</Text>
      
      <FlatList
        data={users}
        renderItem={({item}) => (
          <Text>{item.name} ({item.age})</Text>
        )}
        keyExtractor={(item) => item.id.toString()}
      />
    </View>
  );
};

export default App;

// Components as Data Classes in React Native
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// Functional component as data class
const Person = ({ name, age, city = 'Unknown' }) => {
  return (
    <View style={styles.personContainer}>
      <Text style={styles.name}>Name: {name}</Text>
      <Text style={styles.age}>Age: {age}</Text>
      <Text style={styles.city}>City: {city}</Text>
    </View>
  );
};

// Class component as data class
class PersonClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name || 'Unknown',
      age: props.age || 0,
      city: props.city || 'Unknown'
    };
  }
  
  render() {
    return (
      <View style={styles.personContainer}>
        <Text style={styles.name}>Name: {this.state.name}</Text>
        <Text style={styles.age}>Age: {this.state.age}</Text>
        <Text style={styles.city}>City: {this.state.city}</Text>
      </View>
    );
  }
}

const App = () => {
  return (
    <View style={styles.container}>
      <Person name="Alice" age={25} city="NYC" />
      <PersonClass name="Bob" age={30} city="LA" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  personContainer: {
    padding: 10,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
  },
  name: { fontSize: 18, fontWeight: 'bold' },
  age: { fontSize: 16 },
  city: { fontSize: 16 },
});

export default App;

// PropTypes and Type Checking in React Native
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

const User = ({ name, age, email, status, hobbies }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.name}>Name: {name}</Text>
      <Text style={styles.text}>Age: {age}</Text>
      <Text style={styles.text}>Email: {email}</Text>
      <Text style={styles.text}>Status: {status}</Text>
      <Text style={styles.text}>Hobbies: {hobbies.join(', ')}</Text>
    </View>
  );
};

// PropTypes for type checking
User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  email: PropTypes.string,
  status: PropTypes.oneOf(['active', 'inactive', 'pending']),
  hobbies: PropTypes.arrayOf(PropTypes.string)
};

// Default props
User.defaultProps = {
  email: 'No email provided',
  status: 'active',
  hobbies: []
};

// Using TypeScript interface (TypeScript)
interface UserProps {
  name: string;
  age: number;
  email?: string;
  status?: 'active' | 'inactive' | 'pending';
  hobbies?: string[];
}

const UserTS: React.FC<UserProps> = ({ name, age, email = 'No email', status = 'active', hobbies = [] }) => {
  return (
    <View>
      <Text>{name}</Text>
      <Text>{age}</Text>
    </View>
  );
};

const App = () => {
  return (
    <View>
      <User name="Alice" age={25} status="active" hobbies={['reading', 'gaming']} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 10, margin: 10, borderWidth: 1, borderRadius: 5 },
  name: { fontSize: 18, fontWeight: 'bold' },
  text: { fontSize: 16 }
});

export default App;

// Null Safety in React Native
import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

const App = () => {
  const [nullableString, setNullableString] = useState(null);
  const [nonNullableString, setNonNullableString] = useState('Hello');
  
  // Safe access with optional chaining
  const displayString = nullableString?.toUpperCase() || 'Default';
  
  // Null check with conditional rendering
  const renderContent = () => {
    if (nullableString) {
      return <Text>String is: {nullableString}</Text>;
    } else {
      return <Text>String is null</Text>;
    }
  };
  
  // Elvis operator equivalent
  const elvis = (value, defaultValue) => value || defaultValue;
  
  // Safe navigation with optional chaining
  const user = {
    name: 'Alice',
    address: {
      city: 'NYC'
    }
  };
  
  const city = user?.address?.city || 'Unknown';
  
  return (
    <View>
      <Text>Nullable: {displayString}</Text>
      <Text>City: {city}</Text>
      {renderContent()}
      
      <TextInput
        placeholder="Enter text"
        onChangeText={setNullableString}
        value={nullableString || ''}
      />
      
      <Button
        title="Set to null"
        onPress={() => setNullableString(null)}
      />
    </View>
  );
};

export default App;

// Conditional Rendering in React Native
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const App = () => {
  const [age, setAge] = useState(25);
  const [isLoggedIn, setIsLoggedIn] = useState(true);
  const [status, setStatus] = useState('loading');
  
  // If-else in render
  const renderStatus = () => {
    if (age < 18) {
      return <Text style={styles.minor}>Minor</Text>;
    } else if (age < 65) {
      return <Text style={styles.adult}>Adult</Text>;
    } else {
      return <Text style={styles.senior}>Senior</Text>;
    }
  };
  
  // Ternary operator
  const loginStatus = isLoggedIn ? 'Logged In' : 'Logged Out';
  
  // Logical AND (&&)
  const showAdmin = isLoggedIn && age >= 18 && <Text>Admin Panel</Text>;
  
  // Switch statement
  const renderSwitch = () => {
    switch(status) {
      case 'loading':
        return <Text>Loading...</Text>;
      case 'success':
        return <Text>Success!</Text>;
      case 'error':
        return <Text>Error occurred</Text>;
      default:
        return null;
    }
  };
  
  return (
    <View style={styles.container}>
      <Text>Age: {age}</Text>
      {renderStatus()}
      <Text>Status: {loginStatus}</Text>
      {showAdmin}
      {renderSwitch()}
      
      <Button title="Increment Age" onPress={() => setAge(age + 1)} />
      <Button title="Toggle Login" onPress={() => setIsLoggedIn(!isLoggedIn)} />
      <Button title="Toggle Status" onPress={() => {
        const states = ['loading', 'success', 'error'];
        const currentIndex = states.indexOf(status);
        setStatus(states[(currentIndex + 1) % states.length]);
      }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  minor: { color: 'orange', fontSize: 18 },
  adult: { color: 'green', fontSize: 18 },
  senior: { color: 'red', fontSize: 18 }
});

export default App;

// Components and Props in React Native
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// Base component
const Animal = ({ name, sound = 'Animal sound' }) => {
  return (
    <View style={styles.animalContainer}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.sound}>Sound: {sound}</Text>
    </View>
  );
};

// Derived component (composition)
const Dog = ({ name, breed }) => {
  return (
    <View style={styles.dogContainer}>
      <Animal name={name} sound="Woof!" />
      <Text style={styles.breed}>Breed: {breed}</Text>
    </View>
  );
};

// Component with children
const Card = ({ children, title }) => {
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>{title}</Text>
      {children}
    </View>
  );
};

// Higher-Order Component (HOC)
const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering component with props:', props);
    return <WrappedComponent {...props} />;
  };
};

const LoggedAnimal = withLogger(Animal);

// Render Props pattern
const DataProvider = ({ render }) => {
  const data = { name: 'Alice', age: 25 };
  return render(data);
};

const App = () => {
  return (
    <View style={styles.container}>
      <Card title="Animal Info">
        <Animal name="Rex" sound="Woof!" />
      </Card>
      
      <Dog name="Rex" breed="German Shepherd" />
      
      <LoggedAnimal name="Whiskers" sound="Meow!" />
      
      <DataProvider render={(data) => (
        <Text>{data.name} is {data.age} years old</Text>
      )} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  animalContainer: { padding: 10, marginBottom: 5, borderWidth: 1 },
  dogContainer: { padding: 10, marginBottom: 5, borderWidth: 1, borderColor: 'blue' },
  card: { padding: 15, marginBottom: 10, borderWidth: 1, borderRadius: 5 },
  cardTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10 },
  name: { fontSize: 16, fontWeight: 'bold' },
  sound: { fontSize: 14 },
  breed: { fontSize: 14, color: 'blue' }
});

export default App;

// State Management in React Native
import React, { useState, useReducer } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

// useState example
const Counter = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  
  return (
    <View style={styles.container}>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      <Button title="Decrement" onPress={() => setCount(count - 1)} />
      <Button title="Reset" onPress={() => setCount(0)} />
    </View>
  );
};

// useReducer example
const initialState = { count: 0 };
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      return state;
  }
};

const ReducerCounter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <View style={styles.container}>
      <Text>Count: {state.count}</Text>
      <Button title="Increment" onPress={() => dispatch({ type: 'increment' })} />
      <Button title="Decrement" onPress={() => dispatch({ type: 'decrement' })} />
      <Button title="Reset" onPress={() => dispatch({ type: 'reset' })} />
    </View>
  );
};

// useState with object
const UserForm = () => {
  const [user, setUser] = useState({ name: '', age: '' });
  
  const updateUser = (field, value) => {
    setUser({ ...user, [field]: value });
  };
  
  return (
    <View>
      <Text>Name: {user.name}</Text>
      <Text>Age: {user.age}</Text>
      <Button title="Update Name" onPress={() => updateUser('name', 'Alice')} />
      <Button title="Update Age" onPress={() => updateUser('age', '25')} />
    </View>
  );
};

const App = () => {
  return (
    <View style={styles.appContainer}>
      <Counter />
      <ReducerCounter />
      <UserForm />
    </View>
  );
};

const styles = StyleSheet.create({
  appContainer: { flex: 1, padding: 20 },
  container: { marginBottom: 20, padding: 10, borderWidth: 1 }
});

export default App;

// Custom Hooks in React Native
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

// Custom hook for counter
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);
  
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);
  
  return { count, increment, decrement, reset };
};

// Custom hook for toggle
const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue(!value);
  return [value, toggle];
};

// Custom hook with side effects
const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });
  
  useEffect(() => {
    const updateSize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };
    
    window.addEventListener('resize', updateSize);
    updateSize();
    
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  
  return size;
};

// Custom hook for API calls
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };
    
    fetchData();
  }, [url]);
  
  return { data, loading, error };
};

// Using custom hooks
const App = () => {
  const { count, increment, decrement, reset } = useCounter(10);
  const [isOn, toggle] = useToggle(false);
  
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
      <Button title="Decrement" onPress={decrement} />
      <Button title="Reset" onPress={reset} />
      <Text>Toggle: {isOn ? 'ON' : 'OFF'}</Text>
      <Button title="Toggle" onPress={toggle} />
    </View>
  );
};

export default App;

// Error Handling in React Native
import React, { useState } from 'react';
import { View, Text, Button, Alert } from 'react-native';

// Try-catch in component
const SafeComponent = () => {
  const [error, setError] = useState(null);
  
  const riskyOperation = () => {
    try {
      // Simulate error
      throw new Error('Something went wrong');
    } catch (err) {
      setError(err.message);
      Alert.alert('Error', err.message);
    }
  };
  
  return (
    <View>
      {error && <Text style={{color: 'red'}}>Error: {error}</Text>}
      <Button title="Risky Operation" onPress={riskyOperation} />
    </View>
  );
};

// Error Boundary
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.log('Error caught:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <View>
          <Text style={{color: 'red', fontSize: 18}}>Something went wrong</Text>
          <Text>{this.state.error?.message}</Text>
          <Button 
            title="Reset" 
            onPress={() => this.setState({ hasError: false, error: null })}
          />
        </View>
      );
    }

    return this.props.children;
  }
}

// Async error handling
const AsyncComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <View>
      {loading && <Text>Loading...</Text>}
      {error && <Text style={{color: 'red'}}>Error: {error}</Text>}
      {data && <Text>Data loaded</Text>}
      <Button title="Fetch Data" onPress={fetchData} />
    </View>
  );
};

const App = () => {
  return (
    <View style={{flex: 1, padding: 20}}>
      <ErrorBoundary>
        <SafeComponent />
        <AsyncComponent />
      </ErrorBoundary>
    </View>
  );
};

export default App;

// Arrow Functions in React Native
import React from 'react';
import { View, Text, Button } from 'react-native';

// Basic arrow function
const square = (x) => x * x;

// Arrow function with multiple parameters
const add = (a, b) => a + b;

// Arrow function with multiple lines
const multiply = (a, b) => {
  const result = a * b;
  return result;
};

// Higher-order function
const operate = (a, b, operation) => operation(a, b);

// Returning arrow function
const getMultiplier = (factor) => {
  return (x) => x * factor;
};

// Arrow function in component
const App = () => {
  // Arrow function as event handler
  const handlePress = () => {
    console.log('Button pressed');
  };
  
  // Arrow function with parameters
  const handlePressWithParam = (value) => {
    console.log('Value:', value);
  };
  
  // Arrow function in render
  const renderItem = (item) => (
    <Text key={item.id}>{item.name}</Text>
  );
  
  const double = getMultiplier(2);
  const result = operate(10, 20, (a, b) => a + b);
  
  return (
    <View>
      <Text>Square of 5: {square(5)}</Text>
      <Text>Add: {add(5, 3)}</Text>
      <Text>Multiply: {multiply(5, 3)}</Text>
      <Text>Double of 5: {double(5)}</Text>
      <Text>Result: {result}</Text>
      
      <Button title="Press Me" onPress={handlePress} />
      <Button 
        title="Press with Param" 
        onPress={() => handlePressWithParam('Hello')}
      />
    </View>
  );
};

export default App;

// useEffect and Lifecycle in React Native
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);
  
  // ComponentDidMount (runs once)
  useEffect(() => {
    console.log('Component mounted');
    
    // Cleanup (ComponentWillUnmount)
    return () => {
      console.log('Component unmounted');
    };
  }, []);
  
  // ComponentDidUpdate (runs when count changes)
  useEffect(() => {
    console.log('Count updated to:', count);
  }, [count]);
  
  // ComponentDidUpdate (runs on any update)
  useEffect(() => {
    console.log('Component updated');
  });
  
  // Fetch data on mount
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
    };
    
    fetchData();
  }, []);
  
  // Timer effect
  useEffect(() => {
    const interval = setInterval(() => {
      console.log('Tick');
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);
  
  // Effect with dependencies
  const [userId, setUserId] = useState(1);
  
  useEffect(() => {
    console.log('User ID changed to:', userId);
    // Fetch user data when userId changes
  }, [userId]);
  
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      <Button title="Change User" onPress={() => setUserId(userId + 1)} />
      {data && <Text>Data loaded</Text>}
    </View>
  );
};

export default App;

// Custom Hooks and Reusability in React Native
import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Button, TextInput } from 'react-native';

// Custom hook for form handling
const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  
  const handleChange = (name, value) => {
    setValues({ ...values, [name]: value });
  };
  
  const validate = (validationRules) => {
    const newErrors = {};
    for (const field in validationRules) {
      const rule = validationRules[field];
      if (rule.required && !values[field]) {
        newErrors[field] = `${field} is required`;
      }
      if (rule.pattern && !rule.pattern.test(values[field])) {
        newErrors[field] = `${field} is invalid`;
      }
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const reset = () => {
    setValues(initialValues);
    setErrors({});
  };
  
  return { values, errors, handleChange, validate, reset };
};

// Custom hook for debounce
const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => clearTimeout(handler);
  }, [value, delay]);
  
  return debouncedValue;
};

// Custom hook for previous value
const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
};

// Custom hook for local storage
const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });
  
  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };
  
  return [storedValue, setValue];
};

// Using custom hooks
const App = () => {
  const form = useForm({ name: '', email: '' });
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 500);
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  
  return (
    <View>
      <TextInput
        placeholder="Name"
        value={form.values.name}
        onChangeText={(text) => form.handleChange('name', text)}
      />
      <TextInput
        placeholder="Email"
        value={form.values.email}
        onChangeText={(text) => form.handleChange('email', text)}
      />
      <Text>Search: {debouncedSearch}</Text>
      <Text>Count: {count}</Text>
      <Text>Previous Count: {prevCount}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default App;

// TypeScript in React Native
import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

// Type definitions
type User = {
  id: number;
  name: string;
  age: number;
  email?: string;
};

type Status = 'active' | 'inactive' | 'pending';

interface UserProps {
  user: User;
  status?: Status;
  onPress?: (id: number) => void;
}

// Functional component with TypeScript
const UserCard: React.FC<UserProps> = ({ user, status = 'active', onPress }) => {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{user.name}</Text>
      <Text style={styles.text}>Age: {user.age}</Text>
      {user.email && <Text style={styles.text}>Email: {user.email}</Text>}
      <Text style={[styles.status, styles[status]]}>Status: {status}</Text>
    </View>
  );
};

// Generic component
const DataList = <T extends { id: number }>({ 
  data, 
  renderItem 
}: { 
  data: T[]; 
  renderItem: (item: T) => React.ReactNode;
}) => {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => renderItem(item)}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

// Custom hook with TypeScript
const useFetch = <T,>(url: string) => {
  const [data, setData] = React.useState<T | null>(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<Error | null>(null);
  
  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (err) {
        setError(err as Error);
        setLoading(false);
      }
    };
    
    fetchData();
  }, [url]);
  
  return { data, loading, error };
};

// App component
const App: React.FC = () => {
  const users: User[] = [
    { id: 1, name: 'Alice', age: 25, email: 'alice@example.com' },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 }
  ];
  
  return (
    <View style={styles.container}>
      <DataList
        data={users}
        renderItem={(item) => (
          <UserCard user={item} status="active" />
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  card: { padding: 15, marginBottom: 10, borderWidth: 1, borderRadius: 5 },
  name: { fontSize: 18, fontWeight: 'bold' },
  text: { fontSize: 16 },
  status: { fontSize: 16, marginTop: 5 },
  active: { color: 'green' },
  inactive: { color: 'red' },
  pending: { color: 'orange' }
});

export default App;

// Higher-Order Components (HOC) in React Native
import React from 'react';
import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';

// HOC for logging
const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering component with props:', props);
    return <WrappedComponent {...props} />;
  };
};

// HOC for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = true; // Would come from context or state
    
    if (!isAuthenticated) {
      return (
        <View style={styles.authContainer}>
          <Text>Please login to continue</Text>
        </View>
      );
    }
    
    return <WrappedComponent {...props} />;
  };
};

// HOC for loading state
const withLoading = (WrappedComponent) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#0000ff" />
          <Text>Loading...</Text>
        </View>
      );
    }
    
    return <WrappedComponent {...props} />;
  };
};

// HOC for data fetching
const withData = (url) => (WrappedComponent) => {
  return (props) => {
    const [data, setData] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [error, setError] = React.useState(null);
    
    React.useEffect(() => {
      const fetchData = async () => {
        try {
          const response = await fetch(url);
          const json = await response.json();
          setData(json);
          setLoading(false);
        } catch (err) {
          setError(err);
          setLoading(false);
        }
      };
      
      fetchData();
    }, []);
    
    if (loading) {
      return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" />
          <Text>Loading...</Text>
        </View>
      );
    }
    
    if (error) {
      return (
        <View style={styles.errorContainer}>
          <Text>Error loading data</Text>
        </View>
      );
    }
    
    return <WrappedComponent data={data} {...props} />;
  };
};

// HOC for style enhancement
const withStyles = (styles) => (WrappedComponent) => {
  return (props) => {
    return <WrappedComponent {...props} style={[props.style, styles]} />;
  };
};

// Base component
const UserProfile = ({ name, age, email, style }) => {
  return (
    <View style={[styles.profileContainer, style]}>
      <Text style={styles.profileName}>Name: {name}</Text>
      <Text style={styles.profileText}>Age: {age}</Text>
      <Text style={styles.profileText}>Email: {email}</Text>
    </View>
  );
};

// Enhanced components
const LoggedUserProfile = withLogger(UserProfile);
const AuthenticatedUserProfile = withAuth(UserProfile);
const LoadingUserProfile = withLoading(UserProfile);
const DataUserProfile = withData('https://api.example.com/user')(UserProfile);
const StyledUserProfile = withStyles({ backgroundColor: '#f0f0f0' })(UserProfile);

// Composing HOCs
const EnhancedUserProfile = withStyles({ backgroundColor: '#f0f0f0' })(
  withLogger(
    withLoading(
      withAuth(UserProfile)
    )
  )
);

// App
const App = () => {
  return (
    <View style={styles.appContainer}>
      <UserProfile name="Alice" age={25} email="alice@example.com" />
      <LoggedUserProfile name="Bob" age={30} email="bob@example.com" />
      <LoadingUserProfile isLoading={false} name="Charlie" age={35} email="charlie@example.com" />
    </View>
  );
};

const styles = StyleSheet.create({
  appContainer: { flex: 1, padding: 20 },
  authContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  errorContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  profileContainer: { padding: 15, marginBottom: 10, borderWidth: 1, borderRadius: 5 },
  profileName: { fontSize: 18, fontWeight: 'bold' },
  profileText: { fontSize: 16 }
});

export default App;

// Higher-Order Functions in React Native
import React, { useState } from 'react';
import { View, Text, Button, FlatList } from 'react-native';

// Function that takes a function as parameter
const applyOperation = (a, b, operation) => operation(a, b);

// Function that returns a function
const getMultiplier = (factor) => {
  return (x) => x * factor;
};

// Function composition
const compose = (f, g) => {
  return (x) => f(g(x));
};

// Higher-order function with multiple lambdas
const processValue = (value, transform, filter) => {
  return filter(value) ? transform(value) : null;
};

// Array higher-order functions
const App = () => {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);
  
  // Using higher-order functions
  const square = (x) => x * x;
  const addTen = (x) => x + 10;
  const isEven = (x) => x % 2 === 0;
  
  const double = getMultiplier(2);
  const squareThenAddTen = compose(addTen, square);
  
  const result = applyOperation(10, 20, (a, b) => a + b);
  const processed = processValue(5, square, isEven);
  
  // Array operations
  const doubled = numbers.map(double);
  const evens = numbers.filter(isEven);
  const sum = numbers.reduce((a, b) => a + b, 0);
  
  return (
    <View>
      <Text>Result: {result}</Text>
      <Text>Double of 5: {double(5)}</Text>
      <Text>Square then add ten: {squareThenAddTen(5)}</Text>
      <Text>Processed: {processed}</Text>
      <Text>Doubled: {doubled.join(', ')}</Text>
      <Text>Evens: {evens.join(', ')}</Text>
      <Text>Sum: {sum}</Text>
      
      <Button 
        title="Add Number" 
        onPress={() => setNumbers([...numbers, numbers.length + 1])}
      />
    </View>
  );
};

export default App;

// Async/Await in React Native
import React, { useState } from 'react';
import { View, Text, Button, ActivityIndicator, FlatList } from 'react-native';

const App = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  // Basic async function
  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      
      // Simulate API call
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const json = await response.json();
      setData(json);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  // Async function with timeout
  const fetchWithTimeout = async (url, timeout) => {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeout);
    
    try {
      const response = await fetch(url, { signal: controller.signal });
      const json = await response.json();
      clearTimeout(timeoutId);
      return json;
    } catch (err) {
      clearTimeout(timeoutId);
      if (err.name === 'AbortError') {
        throw new Error('Request timed out');
      }
      throw err;
    }
  };
  
  // Async function with multiple API calls
  const fetchMultiple = async () => {
    try {
      setLoading(true);
      const [users, posts] = await Promise.all([
        fetch('https://jsonplaceholder.typicode.com/users').then(res => res.json()),
        fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json())
      ]);
      setData({ users, posts });
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  // Async function with retry
  const fetchWithRetry = async (url, retries = 3) => {
    for (let i = 0; i < retries; i++) {
      try {
        const response = await fetch(url);
        return await response.json();
      } catch (err) {
        if (i === retries - 1) throw err;
        await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
      }
    }
  };
  
  // Async function in useEffect
  React.useEffect(() => {
    fetchData();
  }, []);
  
  return (
    <View style={{ flex: 1, padding: 20 }}>
      {loading && <ActivityIndicator size="large" />}
      {error && <Text style={{ color: 'red' }}>Error: {error}</Text>}
      
      {data && (
        <FlatList
          data={Array.isArray(data) ? data : []}
          renderItem={({ item }) => (
            <Text>{item.name}</Text>
          )}
          keyExtractor={(item) => item.id.toString()}
        />
      )}
      
      <Button title="Fetch Data" onPress={fetchData} />
      <Button title="Fetch Multiple" onPress={fetchMultiple} />
    </View>
  );
};

export default App;

// Custom Hooks for Async Operations
import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';

// Custom hook for async operations
const useAsync = (asyncFn) => {
  const [state, setState] = useState({
    data: null,
    loading: false,
    error: null
  });
  
  const execute = useCallback(async (...args) => {
    try {
      setState(prev => ({ ...prev, loading: true, error: null }));
      const result = await asyncFn(...args);
      setState(prev => ({ ...prev, data: result, loading: false }));
      return result;
    } catch (error) {
      setState(prev => ({ ...prev, error: error.message, loading: false }));
      throw error;
    }
  }, [asyncFn]);
  
  return { ...state, execute };
};

// Custom hook for polling
const usePolling = (asyncFn, interval) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    let mounted = true;
    let intervalId;
    
    const poll = async () => {
      try {
        if (mounted) setLoading(true);
        const result = await asyncFn();
        if (mounted) {
          setData(result);
          setError(null);
        }
      } catch (err) {
        if (mounted) setError(err.message);
      } finally {
        if (mounted) setLoading(false);
      }
    };
    
    poll();
    intervalId = setInterval(poll, interval);
    
    return () => {
      mounted = false;
      clearInterval(intervalId);
    };
  }, [asyncFn, interval]);
  
  return { data, loading, error };
};

// Custom hook for pagination
const usePagination = (asyncFn) => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [error, setError] = useState(null);
  
  const loadMore = async () => {
    if (loading || !hasMore) return;
    
    try {
      setLoading(true);
      const result = await asyncFn(page);
      setData(prev => [...prev, ...result.items]);
      setHasMore(result.hasMore);
      setPage(prev => prev + 1);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  const reset = () => {
    setData([]);
    setPage(1);
    setHasMore(true);
    setError(null);
    loadMore();
  };
  
  return { data, loading, hasMore, error, loadMore, reset };
};

// Using custom hooks
const App = () => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    return response.json();
  };
  
  const { data, loading, error, execute } = useAsync(fetchData);
  
  return (
    <View style={{ flex: 1, padding: 20 }}>
      {loading && <ActivityIndicator size="large" />}
      {error && <Text style={{ color: 'red' }}>Error: {error}</Text>}
      {data && <Text>Data loaded</Text>}
      <Button title="Execute" onPress={execute} />
    </View>
  );
};

export default App;

// Context API in React Native
import React, { createContext, useContext, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

// Create contexts
const ThemeContext = createContext();
const UserContext = createContext();
const SettingsContext = createContext();

// Custom hooks for contexts
const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
};

const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
};

// Theme provider
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
  
  const value = {
    theme,
    toggleTheme,
    colors: theme === 'light' ? {
      background: '#ffffff',
      text: '#000000',
      primary: '#007AFF'
    } : {
      background: '#000000',
      text: '#ffffff',
      primary: '#007AFF'
    }
  };
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
};

// User provider
const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  
  const login = (userData) => {
    setUser(userData);
  };
  
  const logout = () => {
    setUser(null);
  };
  
  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
};

// Combined provider
const AppProvider = ({ children }) => {
  return (
    <ThemeProvider>
      <UserProvider>
        {children}
      </UserProvider>
    </ThemeProvider>
  );
};

// Components using context
const SettingsScreen = () => {
  const { theme, toggleTheme, colors } = useTheme();
  const { user } = useUser();
  
  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Text style={[styles.text, { color: colors.text }]}>User: {user?.name || 'Not logged in'}</Text>
      <Text style={[styles.text, { color: colors.text }]}>Theme: {theme}</Text>
      <Button title="Toggle Theme" onPress={toggleTheme} />
    </View>
  );
};

const ProfileScreen = () => {
  const { colors } = useTheme();
  const { user, logout } = useUser();
  
  if (!user) {
    return (
      <View style={[styles.container, { backgroundColor: colors.background }]}>
        <Text style={[styles.text, { color: colors.text }]}>Not logged in</Text>
      </View>
    );
  }
  
  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Text style={[styles.text, { color: colors.text }]}>Name: {user.name}</Text>
      <Text style={[styles.text, { color: colors.text }]}>Email: {user.email}</Text>
      <Button title="Logout" onPress={logout} />
    </View>
  );
};

const App = () => {
  const { login } = useUser();
  
  React.useEffect(() => {
    login({ name: 'Alice', email: 'alice@example.com' });
  }, []);
  
  return (
    <View style={{ flex: 1 }}>
      <SettingsScreen />
      <ProfileScreen />
    </View>
  );
};

// Main app with provider
const MainApp = () => {
  return (
    <AppProvider>
      <App />
    </AppProvider>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, margin: 10, borderWidth: 1, borderRadius: 5 },
  text: { fontSize: 16, marginBottom: 10 }
});

export default MainApp;

// Redux-like State Management in React Native
import React, { createContext, useContext, useReducer } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';

// Action types
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const DELETE_TODO = 'DELETE_TODO';
const SET_FILTER = 'SET_FILTER';

// Initial state
const initialState = {
  todos: [],
  filter: 'all'
};

// Reducer function
const todoReducer = (state, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, {
          id: Date.now(),
          text: action.payload,
          completed: false
        }]
      };
    case TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.payload
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter(todo => todo.id !== action.payload)
      };
    case SET_FILTER:
      return {
        ...state,
        filter: action.payload
      };
    default:
      return state;
  }
};

// Context
const TodoContext = createContext();

// Provider
const TodoProvider = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, initialState);
  
  const addTodo = (text) => {
    dispatch({ type: ADD_TODO, payload: text });
  };
  
  const toggleTodo = (id) => {
    dispatch({ type: TOGGLE_TODO, payload: id });
  };
  
  const deleteTodo = (id) => {
    dispatch({ type: DELETE_TODO, payload: id });
  };
  
  const setFilter = (filter) => {
    dispatch({ type: SET_FILTER, payload: filter });
  };
  
  const getFilteredTodos = () => {
    switch (state.filter) {
      case 'active':
        return state.todos.filter(todo => !todo.completed);
      case 'completed':
        return state.todos.filter(todo => todo.completed);
      default:
        return state.todos;
    }
  };
  
  return (
    <TodoContext.Provider value={{
      todos: state.todos,
      filter: state.filter,
      filteredTodos: getFilteredTodos(),
      addTodo,
      toggleTodo,
      deleteTodo,
      setFilter
    }}>
      {children}
    </TodoContext.Provider>
  );
};

// Custom hook
const useTodos = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodos must be used within TodoProvider');
  }
  return context;
};

// Components
const TodoList = () => {
  const { filteredTodos, toggleTodo, deleteTodo } = useTodos();
  
  return (
    <FlatList
      data={filteredTodos}
      renderItem={({ item }) => (
        <View style={styles.todoItem}>
          <Text
            style={[
              styles.todoText,
              item.completed && styles.completedText
            ]}
            onPress={() => toggleTodo(item.id)}
          >
            {item.text}
          </Text>
          <Button title="Delete" onPress={() => deleteTodo(item.id)} />
        </View>
      )}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

const TodoInput = () => {
  const [text, setText] = React.useState('');
  const { addTodo } = useTodos();
  
  const handleSubmit = () => {
    if (text.trim()) {
      addTodo(text);
      setText('');
    }
  };
  
  return (
    <View style={styles.inputContainer}>
      <TextInput
        style={styles.input}
        placeholder="Enter todo"
        value={text}
        onChangeText={setText}
        onSubmitEditing={handleSubmit}
      />
      <Button title="Add" onPress={handleSubmit} />
    </View>
  );
};

const TodoFilter = () => {
  const { filter, setFilter } = useTodos();
  const filters = ['all', 'active', 'completed'];
  
  return (
    <View style={styles.filterContainer}>
      {filters.map((f) => (
        <Button
          key={f}
          title={f}
          onPress={() => setFilter(f)}
          disabled={filter === f}
        />
      ))}
    </View>
  );
};

const App = () => {
  return (
    <TodoProvider>
      <View style={styles.container}>
        <Text style={styles.title}>Todo App</Text>
        <TodoInput />
        <TodoFilter />
        <TodoList />
      </View>
    </TodoProvider>
  );
};

// TextInput component (since we're using it in TodoInput)
const TextInput = ({ style, ...props }) => (
  <View style={[styles.input, style]}>
    <Text>{props.value}</Text>
  </View>
);

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  inputContainer: { flexDirection: 'row', marginBottom: 10 },
  input: { flex: 1, borderWidth: 1, padding: 10, marginRight: 10 },
  todoItem: { flexDirection: 'row', justifyContent: 'space-between', padding: 10, borderWidth: 1, marginBottom: 5 },
  todoText: { fontSize: 16 },
  completedText: { textDecorationLine: 'line-through', color: 'gray' },
  filterContainer: { flexDirection: 'row', justifyContent: 'space-around', marginVertical: 10 }
});

export default App;

// Navigation in React Native (React Navigation)
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';

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

const DetailsScreen = ({ route, navigation }) => {
  const { itemId } = route.params || {};
  
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Details Screen</Text>
      <Text>Item ID: {itemId}</Text>
      <Button
        title="Go Back"
        onPress={() => navigation.goBack()}
      />
      <Button
        title="Go Home"
        onPress={() => navigation.navigate('Home')}
      />
    </View>
  );
};

const ProfileScreen = () => {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Profile Screen</Text>
    </View>
  );
};

const SettingsScreen = () => {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Settings Screen</Text>
    </View>
  );
};

// Stack Navigator
const Stack = createStackNavigator();
const StackNavigator = () => {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerStyle: { backgroundColor: '#007AFF' },
        headerTintColor: '#fff',
        headerTitleStyle: { fontWeight: 'bold' }
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
};

// Tab Navigator
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

// Drawer Navigator
const Drawer = createDrawerNavigator();
const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
};

// Nested Navigation
const App = () => {
  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  screen: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 }
});

export default App;

// Lists and FlatList in React Native
import React, { useState } from 'react';
import { View, Text, FlatList, SectionList, StyleSheet, Button } from 'react-native';

// Basic FlatList
const BasicFlatList = () => {
  const [data, setData] = useState([
    { id: '1', name: 'Item 1' },
    { id: '2', name: 'Item 2' },
    { id: '3', name: 'Item 3' },
    { id: '4', name: 'Item 4' },
    { id: '5', name: 'Item 5' }
  ]);
  
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>{item.name}</Text>
    </View>
  );
  
  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      ListHeaderComponent={<Text style={styles.header}>Header</Text>}
      ListFooterComponent={<Text style={styles.footer}>Footer</Text>}
      onRefresh={() => console.log('Refreshing')}
      refreshing={false}
    />
  );
};

// SectionList
const SectionListExample = () => {
  const sections = [
    {
      title: 'Section 1',
      data: ['Item 1A', 'Item 1B', 'Item 1C']
    },
    {
      title: 'Section 2',
      data: ['Item 2A', 'Item 2B', 'Item 2C']
    },
    {
      title: 'Section 3',
      data: ['Item 3A', 'Item 3B', 'Item 3C']
    }
  ];
  
  return (
    <SectionList
      sections={sections}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (
        <View style={styles.sectionItem}>
          <Text>{item}</Text>
        </View>
      )}
      renderSectionHeader={({ section }) => (
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionHeaderText}>{section.title}</Text>
        </View>
      )}
    />
  );
};

// FlatList with pagination
const PaginatedList = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  
  const loadMore = () => {
    if (loading || !hasMore) return;
    
    setLoading(true);
    // Simulate API call
    setTimeout(() => {
      const newItems = Array.from({ length: 10 }, (_, i) => ({
        id: `${page}-${i}`,
        name: `Item ${page * 10 + i + 1}`
      }));
      setData([...data, ...newItems]);
      setPage(page + 1);
      setHasMore(page < 5);
      setLoading(false);
    }, 1000);
  };
  
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.name}</Text>
        </View>
      )}
      keyExtractor={(item) => item.id}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={
        loading && <Text style={styles.loading}>Loading more...</Text>
      }
    />
  );
};

// FlatList with complex items
const ComplexList = () => {
  const data = [
    { id: '1', title: 'Item 1', description: 'Description 1' },
    { id: '2', title: 'Item 2', description: 'Description 2' },
    { id: '3', title: 'Item 3', description: 'Description 3' }
  ];
  
  const renderItem = ({ item }) => (
    <View style={styles.complexItem}>
      <Text style={styles.complexTitle}>{item.title}</Text>
      <Text style={styles.complexDescription}>{item.description}</Text>
      <Button title="Action" onPress={() => console.log('Pressed', item.id)} />
    </View>
  );
  
  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
};

// App
const App = () => {
  return (
    <View style={styles.container}>
      <BasicFlatList />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  item: { padding: 15, backgroundColor: '#f9f9f9' },
  itemText: { fontSize: 16 },
  separator: { height: 1, backgroundColor: '#ccc' },
  header: { fontSize: 20, fontWeight: 'bold', padding: 10 },
  footer: { fontSize: 16, padding: 10, textAlign: 'center' },
  sectionHeader: { padding: 10, backgroundColor: '#e0e0e0' },
  sectionHeaderText: { fontSize: 18, fontWeight: 'bold' },
  sectionItem: { padding: 10, borderWidth: 1, borderColor: '#ccc' },
  loading: { textAlign: 'center', padding: 10 },
  complexItem: { padding: 15, borderWidth: 1, marginBottom: 10 },
  complexTitle: { fontSize: 18, fontWeight: 'bold' },
  complexDescription: { fontSize: 14, color: '#666', marginVertical: 5 }
});

export default App;

// Forms and Input in React Native
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ScrollView, Alert } from 'react-native';

const App = () => {
  const [form, setForm] = useState({
    name: '',
    email: '',
    password: '',
    phone: '',
    age: ''
  });
  
  const [errors, setErrors] = useState({});
  
  const handleChange = (field, value) => {
    setForm({ ...form, [field]: value });
    // Clear error when user types
    if (errors[field]) {
      setErrors({ ...errors, [field]: null });
    }
  };
  
  const validate = () => {
    const newErrors = {};
    
    if (!form.name.trim()) {
      newErrors.name = 'Name is required';
    }
    
    if (!form.email.trim()) {
      newErrors.email = 'Email is required';
    } else if (!/S+@S+.S+/.test(form.email)) {
      newErrors.email = 'Email is invalid';
    }
    
    if (!form.password.trim()) {
      newErrors.password = 'Password is required';
    } else if (form.password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters';
    }
    
    if (form.phone && !/^d{10}$/.test(form.phone)) {
      newErrors.phone = 'Phone must be 10 digits';
    }
    
    if (form.age && (isNaN(form.age) || parseInt(form.age) < 0 || parseInt(form.age) > 150)) {
      newErrors.age = 'Age must be between 0 and 150';
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };
  
  const handleSubmit = () => {
    if (validate()) {
      Alert.alert('Success', 'Form submitted successfully!');
      console.log('Form data:', form);
    }
  };
  
  const handleReset = () => {
    setForm({
      name: '',
      email: '',
      password: '',
      phone: '',
      age: ''
    });
    setErrors({});
  };
  
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Registration Form</Text>
      
      <View style={styles.field}>
        <Text style={styles.label}>Name *</Text>
        <TextInput
          style={[styles.input, errors.name && styles.inputError]}
          placeholder="Enter your name"
          value={form.name}
          onChangeText={(text) => handleChange('name', text)}
        />
        {errors.name && <Text style={styles.errorText}>{errors.name}</Text>}
      </View>
      
      <View style={styles.field}>
        <Text style={styles.label}>Email *</Text>
        <TextInput          style={[styles.input, errors.email && styles.inputError]}
          placeholder="Enter your email"
          keyboardType="email-address"
          autoCapitalize="none"
          value={form.email}
          onChangeText={(text) => handleChange('email', text)}
        />
        {errors.email && <Text style={styles.errorText}>{errors.email}</Text>}
      </View>
      
      <View style={styles.field}>
        <Text style={styles.label}>Password *</Text>
        <TextInput
          style={[styles.input, errors.password && styles.inputError]}
          placeholder="Enter your password"
          secureTextEntry
          value={form.password}
          onChangeText={(text) => handleChange('password', text)}
        />
        {errors.password && <Text style={styles.errorText}>{errors.password}</Text>}
      </View>
      
      <View style={styles.field}>
        <Text style={styles.label}>Phone</Text>
        <TextInput
          style={[styles.input, errors.phone && styles.inputError]}
          placeholder="Enter your phone (10 digits)"
          keyboardType="phone-pad"
          value={form.phone}
          onChangeText={(text) => handleChange('phone', text)}
        />
        {errors.phone && <Text style={styles.errorText}>{errors.phone}</Text>}
      </View>
      
      <View style={styles.field}>
        <Text style={styles.label}>Age</Text>
        <TextInput
          style={[styles.input, errors.age && styles.inputError]}
          placeholder="Enter your age"
          keyboardType="number-pad"
          value={form.age}
          onChangeText={(text) => handleChange('age', text)}
        />
        {errors.age && <Text style={styles.errorText}>{errors.age}</Text>}
      </View>
      
      <View style={styles.buttonContainer}>
        <Button title="Submit" onPress={handleSubmit} />
        <Button title="Reset" onPress={handleReset} color="#666" />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', marginBottom: 20 },
  field: { marginBottom: 15 },
  label: { fontSize: 16, fontWeight: 'bold', marginBottom: 5 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, borderRadius: 5, fontSize: 16 },
  inputError: { borderColor: 'red' },
  errorText: { color: 'red', fontSize: 14, marginTop: 5 },
  buttonContainer: { flexDirection: 'row', justifyContent: 'space-around', marginTop: 20 }
});

export default App;

// API Integration in React Native
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, ActivityIndicator, Button, StyleSheet, Alert } from 'react-native';

// API service
const API = {
  baseURL: 'https://jsonplaceholder.typicode.com',
  
  getUsers: async () => {
    const response = await fetch(`${API.baseURL}/users`);
    if (!response.ok) throw new Error('Failed to fetch users');
    return response.json();
  },
  
  getUserPosts: async (userId) => {
    const response = await fetch(`${API.baseURL}/posts?userId=${userId}`);
    if (!response.ok) throw new Error('Failed to fetch posts');
    return response.json();
  },
  
  createPost: async (post) => {
    const response = await fetch(`${API.baseURL}/posts`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(post)
    });
    if (!response.ok) throw new Error('Failed to create post');
    return response.json();
  }
};

// Custom hook for API calls
const useAPI = (apiFn, initialData = null) => {
  const [data, setData] = useState(initialData);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const execute = async (...args) => {
    try {
      setLoading(true);
      setError(null);
      const result = await apiFn(...args);
      setData(result);
      return result;
    } catch (err) {
      setError(err.message);
      Alert.alert('Error', err.message);
      return null;
    } finally {
      setLoading(false);
    }
  };
  
  return { data, loading, error, execute };
};

// Users list component
const UsersList = ({ onSelectUser }) => {
  const { data: users, loading, error, execute } = useAPI(API.getUsers);
  
  useEffect(() => {
    execute();
  }, []);
  
  if (loading) {
    return (
      <View style={styles.centerContainer}>
        <ActivityIndicator size="large" />
        <Text>Loading users...</Text>
      </View>
    );
  }
  
  if (error) {
    return (
      <View style={styles.centerContainer}>
        <Text style={styles.errorText}>Error: {error}</Text>
        <Button title="Retry" onPress={() => execute()} />
      </View>
    );
  }
  
  return (
    <FlatList
      data={users}
      renderItem={({ item }) => (
        <View style={styles.userItem}>
          <Text style={styles.userName}>{item.name}</Text>
          <Text style={styles.userEmail}>{item.email}</Text>
          <Button title="View Posts" onPress={() => onSelectUser(item.id)} />
        </View>
      )}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

// Posts list component
const PostsList = ({ userId }) => {
  const { data: posts, loading, error, execute } = useAPI(API.getUserPosts);
  
  useEffect(() => {
    if (userId) {
      execute(userId);
    }
  }, [userId]);
  
  if (loading) {
    return (
      <View style={styles.centerContainer}>
        <ActivityIndicator size="large" />
        <Text>Loading posts...</Text>
      </View>
    );
  }
  
  if (error) {
    return (
      <View style={styles.centerContainer}>
        <Text style={styles.errorText}>Error: {error}</Text>
      </View>
    );
  }
  
  return (
    <FlatList
      data={posts}
      renderItem={({ item }) => (
        <View style={styles.postItem}>
          <Text style={styles.postTitle}>{item.title}</Text>
          <Text style={styles.postBody}>{item.body}</Text>
        </View>
      )}
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

// Create post component
const CreatePost = ({ userId, onPostCreated }) => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const { loading, execute } = useAPI(API.createPost);
  
  const handleSubmit = async () => {
    if (!title.trim() || !body.trim()) {
      Alert.alert('Error', 'Title and body are required');
      return;
    }
    
    const post = {
      userId,
      title,
      body
    };
    
    const result = await execute(post);
    if (result) {
      setTitle('');
      setBody('');
      if (onPostCreated) onPostCreated(result);
    }
  };
  
  return (
    <View style={styles.createPostContainer}>
      <Text style={styles.createPostTitle}>Create Post</Text>
      <TextInput
        style={styles.input}
        placeholder="Post title"
        value={title}
        onChangeText={setTitle}
      />
      <TextInput
        style={[styles.input, styles.textArea]}
        placeholder="Post body"
        value={body}
        onChangeText={setBody}
        multiline
        numberOfLines={4}
      />
      <Button
        title={loading ? 'Creating...' : 'Create Post'}
        onPress={handleSubmit}
        disabled={loading}
      />
    </View>
  );
};

// Main App
const App = () => {
  const [selectedUserId, setSelectedUserId] = useState(null);
  
  return (
    <View style={styles.container}>
      {selectedUserId ? (
        <>
          <Button title="Back to Users" onPress={() => setSelectedUserId(null)} />
          <PostsList userId={selectedUserId} />
          <CreatePost userId={selectedUserId} />
        </>
      ) : (
        <UsersList onSelectUser={setSelectedUserId} />
      )}
    </View>
  );
};

// TextInput component
const TextInput = ({ style, ...props }) => (
  <View style={style}>
    <Text>{props.value}</Text>
  </View>
);

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  centerContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  userItem: { padding: 15, borderWidth: 1, marginBottom: 10, borderRadius: 5 },
  userName: { fontSize: 18, fontWeight: 'bold' },
  userEmail: { fontSize: 14, color: '#666', marginBottom: 10 },
  postItem: { padding: 15, borderWidth: 1, marginBottom: 10, borderRadius: 5 },
  postTitle: { fontSize: 16, fontWeight: 'bold' },
  postBody: { fontSize: 14, color: '#666', marginTop: 5 },
  errorText: { color: 'red', fontSize: 16 },
  createPostContainer: { padding: 15, borderWidth: 1, borderRadius: 5, marginTop: 20 },
  createPostTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10 },
  input: { borderWidth: 1, padding: 10, marginBottom: 10, borderRadius: 5 },
  textArea: { height: 100, textAlignVertical: 'top' }
});

export default App;

// Modals and Popups in React Native
import React, { useState } from 'react';
import { View, Text, Button, Modal, StyleSheet, TouchableOpacity, Alert } from 'react-native';

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [modalType, setModalType] = useState('basic');
  
  // Basic Modal
  const BasicModal = () => (
    <Modal
      animationType="slide"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => setModalVisible(false)}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>Basic Modal</Text>
          <Text style={styles.modalText}>This is a basic modal dialog.</Text>
          <Button title="Close" onPress={() => setModalVisible(false)} />
        </View>
      </View>
    </Modal>
  );
  
  // Custom Modal
  const CustomModal = () => (
    <Modal
      animationType="fade"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => setModalVisible(false)}
    >
      <View style={styles.modalOverlay}>
        <View style={[styles.modalContent, styles.customModal]}>
          <Text style={styles.modalTitle}>Custom Modal</Text>
          <Text style={styles.modalText}>This is a custom modal with actions.</Text>
          <View style={styles.modalActions}>
            <TouchableOpacity
              style={[styles.modalButton, styles.cancelButton]}
              onPress={() => setModalVisible(false)}
            >
              <Text style={styles.modalButtonText}>Cancel</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.modalButton, styles.confirmButton]}
              onPress={() => {
                Alert.alert('Confirmed', 'Action confirmed!');
                setModalVisible(false);
              }}
            >
              <Text style={styles.modalButtonText}>Confirm</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
  
  // Full Screen Modal
  const FullScreenModal = () => (
    <Modal
      animationType="slide"
      visible={modalVisible}
      onRequestClose={() => setModalVisible(false)}
    >
      <View style={styles.fullScreenModal}>
        <Text style={styles.modalTitle}>Full Screen Modal</Text>
        <Text style={styles.modalText}>This is a full screen modal.</Text>
        <Button title="Close" onPress={() => setModalVisible(false)} />
      </View>
    </Modal>
  );
  
  // Alert Modal
  const showAlert = () => {
    Alert.alert(
      'Alert Title',
      'This is an alert message with options.',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel'
        },
        {
          text: 'OK',
          onPress: () => console.log('OK Pressed')
        },
        {
          text: 'Delete',
          onPress: () => console.log('Delete Pressed'),
          style: 'destructive'
        }
      ],
      { cancelable: true }
    );
  };
  
  // Prompt Alert (simple)
  const showPrompt = () => {
    Alert.prompt(
      'Enter Name',
      'Please enter your name:',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel'
        },
        {
          text: 'OK',
          onPress: (text) => console.log('Name entered:', text)
        }
      ],
      'plain-text',
      'Default name'
    );
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Modal Examples</Text>
      
      <Button
        title="Open Basic Modal"
        onPress={() => {
          setModalType('basic');
          setModalVisible(true);
        }}
      />
      
      <Button
        title="Open Custom Modal"
        onPress={() => {
          setModalType('custom');
          setModalVisible(true);
        }}
      />
      
      <Button
        title="Open Full Screen Modal"
        onPress={() => {
          setModalType('fullscreen');
          setModalVisible(true);
        }}
      />
      
      <Button title="Show Alert" onPress={showAlert} />
      <Button title="Show Prompt" onPress={showPrompt} />
      
      {modalType === 'basic' && <BasicModal />}
      {modalType === 'custom' && <CustomModal />}
      {modalType === 'fullscreen' && <FullScreenModal />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    gap: 10
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center'
  },
  modalOverlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    minWidth: 300
  },
  customModal: {
    backgroundColor: '#f0f0f0',
    minWidth: 350
  },
  fullScreenModal: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: 'white'
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10
  },
  modalText: {
    fontSize: 16,
    marginBottom: 20
  },
  modalActions: {
    flexDirection: 'row',
    justifyContent: 'space-around'
  },
  modalButton: {
    padding: 10,
    borderRadius: 5,
    minWidth: 80,
    alignItems: 'center'
  },
  cancelButton: {
    backgroundColor: '#ccc'
  },
  confirmButton: {
    backgroundColor: '#007AFF'
  },
  modalButtonText: {
    color: 'white',
    fontWeight: 'bold'
  }
});

export default App;

// Styling in React Native
import React from 'react';
import { View, Text, StyleSheet, Dimensions, Platform, StatusBar } from 'react-native';

// Get screen dimensions
const { width, height } = Dimensions.get('window');

// Platform specific styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    paddingTop: Platform.OS === 'ios' ? 20 : StatusBar.currentHeight,
    backgroundColor: '#f5f5f5'
  },
  box: {
    width: width * 0.8,
    height: height * 0.3,
    backgroundColor: '#007AFF',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    // Shadow for iOS
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
      },
      android: {
        elevation: 5,
      },
    }),
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#ffffff'
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    flexWrap: 'wrap'
  },
  card: {
    backgroundColor: '#fff',
    padding: 15,
    borderRadius: 8,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: '#ddd'
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333'
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 5
  }
});

// Component with dynamic styling
const DynamicStyleExample = () => {
  const [pressed, setPressed] = useState(false);
  
  return (
    <TouchableOpacity
      style={[
        styles.box,
        pressed && { backgroundColor: '#FF3B30', transform: [{ scale: 0.95 }] }
      ]}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
    >
      <Text style={styles.text}>
        {pressed ? 'Pressed!' : 'Press Me'}
      </Text>
    </TouchableOpacity>
  );
};

// Responsive styles
const responsiveStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: width < 400 ? 10 : 20
  },
  title: {
    fontSize: width < 400 ? 18 : 24,
    fontWeight: 'bold'
  },
  grid: {
    flexDirection: width < 400 ? 'column' : 'row',
    flexWrap: 'wrap'
  },
  item: {
    width: width < 400 ? '100%' : '48%',
    margin: width < 400 ? 5 : '1%'
  }
});

// Theme styles
const lightTheme = {
  background: '#ffffff',
  text: '#000000',
  primary: '#007AFF',
  border: '#cccccc'
};

const darkTheme = {
  background: '#000000',
  text: '#ffffff',
  primary: '#0A84FF',
  border: '#333333'
};

const ThemeExample = ({ theme }) => {
  const currentTheme = theme === 'dark' ? darkTheme : lightTheme;
  
  return (
    <View style={[styles.container, { backgroundColor: currentTheme.background }]}>
      <Text style={[styles.text, { color: currentTheme.text }]}>
        Theme Example
      </Text>
    </View>
  );
};

// App
const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.box}>
          <Text style={styles.text}>Box 1</Text>
        </View>
        <View style={[styles.box, { backgroundColor: '#FF3B30' }]}>
          <Text style={styles.text}>Box 2</Text>
        </View>
      </View>
      
      <View style={styles.card}>
        <Text style={styles.title}>Card Title</Text>
        <Text style={styles.subtitle}>This is a subtitle with some descriptive text.</Text>
      </View>
      
      <DynamicStyleExample />
      <ThemeExample theme="dark" />
    </View>
  );
};

export default App;

// Reverse a string in React Native
const reverseString = (str) => {
  return str.split('').reverse().join('');
};

// Usage in component
const App = () => {
  const [text, setText] = useState('hello');
  const reversed = reverseString(text);
  
  return (
    <View>
      <Text>Original: {text}</Text>
      <Text>Reversed: {reversed}</Text>
      <Button title="Reverse" onPress={() => setText(reverseString(text))} />
    </View>
  );
};

// Check palindrome in React Native
const isPalindrome = (str) => {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
  return cleaned === cleaned.split('').reverse().join('');
};

// Two-pointer approach
const isPalindromeTwoPointer = (str) => {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, '');
  let left = 0;
  let right = cleaned.length - 1;
  while (left < right) {
    if (cleaned[left] !== cleaned[right]) return false;
    left++;
    right--;
  }
  return true;
};

// Usage in component
const App = () => {
  const [text, setText] = useState('racecar');
  const result = isPalindrome(text);
  
  return (
    <View>
      <TextInput value={text} onChangeText={setText} />
      <Text>Is palindrome: {result ? 'Yes' : 'No'}</Text>
    </View>
  );
};

// Find max in array in React Native
const findMax = (arr) => {
  return Math.max(...arr);
};

// Manual implementation
const findMaxManual = (arr) => {
  if (arr.length === 0) return null;
  let maxVal = arr[0];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] > maxVal) maxVal = arr[i];
  }
  return maxVal;
};

// Usage in component
const App = () => {
  const numbers = [1, 5, 3, 9, 2];
  const maxValue = findMax(numbers);
  
  return (
    <View>
      <Text>Numbers: {numbers.join(', ')}</Text>
      <Text>Max: {maxValue}</Text>
    </View>
  );
};

// Remove duplicates in React Native
const removeDuplicates = (arr) => {
  return [...new Set(arr)];
};

// Preserving order
const removeDuplicatesOrder = (arr) => {
  const seen = new Set();
  return arr.filter(item => {
    if (seen.has(item)) return false;
    seen.add(item);
    return true;
  });
};

// Usage in component
const App = () => {
  const numbers = [1, 2, 2, 3, 3, 4];
  const unique = removeDuplicates(numbers);
  
  return (
    <View>
      <Text>Original: {numbers.join(', ')}</Text>
      <Text>Unique: {unique.join(', ')}</Text>
    </View>
  );
};

// Merge arrays in React Native
const mergeArrays = (arr1, arr2) => {
  return [...arr1, ...arr2];
};

// Merge and remove duplicates
const mergeUnique = (arr1, arr2) => {
  return [...new Set([...arr1, ...arr2])];
};

// Usage in component
const App = () => {
  const arr1 = [1, 2, 3];
  const arr2 = [3, 4, 5];
  const merged = mergeArrays(arr1, arr2);
  const unique = mergeUnique(arr1, arr2);
  
  return (
    <View>
      <Text>Merged: {merged.join(', ')}</Text>
      <Text>Unique: {unique.join(', ')}</Text>
    </View>
  );
};

// Convert string to number in React Native
const stringToNumber = (str) => {
  return parseInt(str, 10);
};

// Safe conversion
const stringToNumberSafe = (str) => {
  const num = parseFloat(str);
  return isNaN(num) ? null : num;
};

// Usage in component
const App = () => {
  const [input, setInput] = useState('42');
  const number = stringToNumberSafe(input);
  
  return (
    <View>
      <TextInput
        value={input}
        onChangeText={setInput}
        keyboardType="numeric"
        placeholder="Enter a number"
      />
      <Text>Number: {number !== null ? number : 'Invalid'}</Text>
    </View>
  );
};

// Loop through object in React Native
const loopObject = (obj) => {
  const entries = [];
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      entries.push(`${key}: ${obj[key]}`);
    }
  }
  return entries;
};

// Using Object.entries
const loopObjectEntries = (obj) => {
  return Object.entries(obj).map(([key, value]) => `${key}: ${value}`);
};

// Usage in component
const App = () => {
  const user = { name: 'Alice', age: 25, city: 'NYC' };
  const entries = loopObject(user);
  
  return (
    <View>
      {entries.map((entry, index) => (
        <Text key={index}>{entry}</Text>
      ))}
    </View>
  );
};

// Delay function execution in React Native
const delay = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};

// Usage in component
const App = () => {
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');
  
  const handleDelay = async () => {
    setLoading(true);
    await delay(2000);
    setLoading(false);
    setMessage('Executed after 2 seconds');
  };
  
  return (
    <View>
      {loading && <ActivityIndicator size="large" />}
      <Text>{message}</Text>
      <Button title="Delay" onPress={handleDelay} />
    </View>
  );
};

// HTTP GET request in React Native
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
};

// Usage in component
const App = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const loadData = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await fetchData('https://jsonplaceholder.typicode.com/users');
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <View>
      {loading && <ActivityIndicator size="large" />}
      {error && <Text style={{color: 'red'}}>Error: {error}</Text>}
      {data && (
        <FlatList
          data={data}
          renderItem={({item}) => <Text>{item.name}</Text>}
          keyExtractor={(item) => item.id.toString()}
        />
      )}
      <Button title="Fetch Data" onPress={loadData} />
    </View>
  );
};

// Create a promise-like Deferred in React Native
const createDeferred = () => {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });
  return { promise, resolve, reject };
};

// Usage in component
const App = () => {
  const [result, setResult] = useState('');
  
  const handleDeferred = async () => {
    const deferred = createDeferred();
    
    // Simulate async operation
    setTimeout(() => {
      deferred.resolve('Success!');
    }, 2000);
    
    try {
      const result = await deferred.promise;
      setResult(result);
    } catch (error) {
      setResult('Error: ' + error.message);
    }
  };
  
  return (
    <View>
      <Text>Result: {result}</Text>
      <Button title="Execute Deferred" onPress={handleDeferred} />
    </View>
  );
};

// Factorial in React Native
const factorial = (n) => {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
};

const factorialIterative = (n) => {
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
};

// Usage in component
const App = () => {
  const [number, setNumber] = useState(5);
  const result = factorial(number);
  
  return (
    <View>
      <Text>Number: {number}</Text>
      <Text>Factorial: {result}</Text>
      <Button title="Increment" onPress={() => setNumber(number + 1)} />
      <Button title="Decrement" onPress={() => setNumber(Math.max(0, number - 1))} />
    </View>
  );
};

// Fibonacci in React Native
const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

const fibonacciIterative = (n) => {
  if (n <= 1) return n;
  let a = 0, b = 1;
  for (let i = 2; i <= n; i++) {
    const temp = a + b;
    a = b;
    b = temp;
  }
  return b;
};

// Memoized version
const fibMemo = {};
const fibonacciMemo = (n) => {
  if (n <= 1) return n;
  if (fibMemo[n]) return fibMemo[n];
  fibMemo[n] = fibonacciMemo(n - 1) + fibonacciMemo(n - 2);
  return fibMemo[n];
};

// Usage in component
const App = () => {
  const [n, setN] = useState(10);
  const result = fibonacciMemo(n);
  
  return (
    <View>
      <Text>Fibonacci({n}) = {result}</Text>
      <Button title="Next" onPress={() => setN(n + 1)} />
    </View>
  );
};

// FizzBuzz in React Native
const fizzbuzz = (n) => {
  const result = [];
  for (let i = 1; i <= n; i++) {
    if (i % 15 === 0) {
      result.push('FizzBuzz');
    } else if (i % 3 === 0) {
      result.push('Fizz');
    } else if (i % 5 === 0) {
      result.push('Buzz');
    } else {
      result.push(String(i));
    }
  }
  return result;
};

// Usage in component
const App = () => {
  const [count, setCount] = useState(15);
  const results = fizzbuzz(count);
  
  return (
    <View>
      <FlatList
        data={results}
        renderItem={({item, index}) => (
          <Text>{index + 1}: {item}</Text>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
      <Button title="More" onPress={() => setCount(count + 5)} />
    </View>
  );
};

// Find missing number in React Native
const findMissing = (arr) => {
  const n = arr.length + 1;
  const total = n * (n + 1) / 2;
  const sum = arr.reduce((a, b) => a + b, 0);
  return total - sum;
};

// Using XOR
const findMissingXOR = (arr) => {
  const n = arr.length + 1;
  let xorSum = 0;
  for (let i = 1; i <= n; i++) {
    xorSum ^= i;
  }
  for (let i = 0; i < arr.length; i++) {
    xorSum ^= arr[i];
  }
  return xorSum;
};

// Usage in component
const App = () => {
  const numbers = [1, 2, 4, 5, 6];
  const missing = findMissing(numbers);
  
  return (
    <View>
      <Text>Array: {numbers.join(', ')}</Text>
      <Text>Missing number: {missing}</Text>
    </View>
  );
};

// Find duplicates in React Native
const findDuplicates = (arr) => {
  const seen = new Set();
  const duplicates = new Set();
  for (const item of arr) {
    if (seen.has(item)) {
      duplicates.add(item);
    } else {
      seen.add(item);
    }
  }
  return Array.from(duplicates);
};

// Using filter
const findDuplicatesFilter = (arr) => {
  return arr.filter((item, index) => arr.indexOf(item) !== index);
};

// Usage in component
const App = () => {
  const numbers = [1, 2, 3, 2, 4, 3];
  const duplicates = findDuplicates(numbers);
  
  return (
    <View>
      <Text>Array: {numbers.join(', ')}</Text>
      <Text>Duplicates: {duplicates.join(', ')}</Text>
    </View>
  );
};

// Sum of array in React Native
const sumArray = (arr) => {
  return arr.reduce((a, b) => a + b, 0);
};

// Manual implementation
const sumArrayManual = (arr) => {
  let total = 0;
  for (let i = 0; i < arr.length; i++) {
    total += arr[i];
  }
  return total;
};

// Usage in component
const App = () => {
  const numbers = [1, 2, 3, 4, 5];
  const sum = sumArray(numbers);
  
  return (
    <View>
      <Text>Array: {numbers.join(', ')}</Text>
      <Text>Sum: {sum}</Text>
    </View>
  );
};

// Average of array in React Native
const averageArray = (arr) => {
  if (arr.length === 0) return 0;
  return arr.reduce((a, b) => a + b, 0) / arr.length;
};

// Usage in component
const App = () => {
  const numbers = [1, 2, 3, 4, 5];
  const avg = averageArray(numbers);
  
  return (
    <View>
      <Text>Array: {numbers.join(', ')}</Text>
      <Text>Average: {avg}</Text>
    </View>
  );
};

// Sort array ascending in React Native
const sortAscending = (arr) => {
  return [...arr].sort((a, b) => a - b);
};

// In-place sorting
const sortAscendingInPlace = (arr) => {
  return arr.sort((a, b) => a - b);
};

// Usage in component
const App = () => {
  const numbers = [5, 2, 8, 1, 9];
  const sorted = sortAscending(numbers);
  
  return (
    <View>
      <Text>Original: {numbers.join(', ')}</Text>
      <Text>Sorted: {sorted.join(', ')}</Text>
    </View>
  );
};

// Sort array descending in React Native
const sortDescending = (arr) => {
  return [...arr].sort((a, b) => b - a);
};

// In-place sorting
const sortDescendingInPlace = (arr) => {
  return arr.sort((a, b) => b - a);
};

// Usage in component
const App = () => {
  const numbers = [5, 2, 8, 1, 9];
  const sorted = sortDescending(numbers);
  
  return (
    <View>
      <Text>Original: {numbers.join(', ')}</Text>
      <Text>Sorted: {sorted.join(', ')}</Text>
    </View>
  );
};

// Flatten nested array in React Native
const flattenArray = (arr) => {
  const result = [];
  for (const item of arr) {
    if (Array.isArray(item)) {
      result.push(...flattenArray(item));
    } else {
      result.push(item);
    }
  }
  return result;
};

// Using reduce
const flattenArrayReduce = (arr) => {
  return arr.reduce((acc, val) => {
    return acc.concat(Array.isArray(val) ? flattenArrayReduce(val) : val);
  }, []);
};

// Using flat
const flattenArrayFlat = (arr) => {
  return arr.flat(Infinity);
};

// Usage in component
const App = () => {
  const nested = [1, [2, [3, 4], 5], 6];
  const flattened = flattenArray(nested);
  
  return (
    <View>
      <Text>Nested: {JSON.stringify(nested)}</Text>
      <Text>Flattened: {flattened.join(', ')}</Text>
    </View>
  );
};

// Chunk array in React Native
const chunkArray = (arr, size) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
};

// Usage in component
const App = () => {
  const numbers = [1, 2, 3, 4, 5, 6];
  const chunks = chunkArray(numbers, 2);
  
  return (
    <View>
      <Text>Array: {numbers.join(', ')}</Text>
      <Text>Chunks:</Text>
      {chunks.map((chunk, index) => (
        <Text key={index}>[{chunk.join(', ')}]</Text>
      ))}
    </View>
  );
};

// Binary search in React Native
const binarySearch = (arr, target) => {
  let left = 0;
  let right = arr.length - 1;
  while (left <= right) {
    const mid = Math.floor((left + right) / 2);
    if (arr[mid] === target) return mid;
    if (arr[mid] < target) left = mid + 1;
    else right = mid - 1;
  }
  return -1;
};

// Recursive binary search
const binarySearchRecursive = (arr, target, left = 0, right = arr.length - 1) => {
  if (left > right) return -1;
  const mid = Math.floor((left + right) / 2);
  if (arr[mid] === target) return mid;
  if (arr[mid] < target) return binarySearchRecursive(arr, target, mid + 1, right);
  return binarySearchRecursive(arr, target, left, mid - 1);
};

// Usage in component
const App = () => {
  const numbers = [1, 2, 3, 4, 5, 6, 7];
  const target = 5;
  const index = binarySearch(numbers, target);
  
  return (
    <View>
      <Text>Array: {numbers.join(', ')}</Text>
      <Text>Target: {target}</Text>
      <Text>Index: {index}</Text>
    </View>
  );
};

// Quick sort in React Native
const quickSort = (arr) => {
  if (arr.length <= 1) return arr;
  const pivot = arr[0];
  const left = [];
  const right = [];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] < pivot) left.push(arr[i]);
    else right.push(arr[i]);
  }
  return [...quickSort(left), pivot, ...quickSort(right)];
};

// In-place quick sort
const quickSortInPlace = (arr, low = 0, high = arr.length - 1) => {
  if (low < high) {
    const pi = partition(arr, low, high);
    quickSortInPlace(arr, low, pi - 1);
    quickSortInPlace(arr, pi + 1, high);
  }
  return arr;
};

const partition = (arr, low, high) => {
  const pivot = arr[high];
  let i = low - 1;
  for (let j = low; j < high; j++) {
    if (arr[j] <= pivot) {
      i++;
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
  }
  [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
  return i + 1;
};

// Usage in component
const App = () => {
  const numbers = [5, 3, 8, 4, 2, 7, 1, 6];
  const sorted = quickSort(numbers);
  
  return (
    <View>
      <Text>Original: {numbers.join(', ')}</Text>
      <Text>Sorted: {sorted.join(', ')}</Text>
    </View>
  );
};

// Merge sort in React Native
const mergeSort = (arr) => {
  if (arr.length <= 1) return arr;
  const mid = Math.floor(arr.length / 2);
  const left = mergeSort(arr.slice(0, mid));
  const right = mergeSort(arr.slice(mid));
  return merge(left, right);
};

const merge = (left, right) => {
  const result = [];
  let i = 0, j = 0;
  while (i < left.length && j < right.length) {
    if (left[i] <= right[j]) {
      result.push(left[i++]);
    } else {
      result.push(right[j++]);
    }
  }
  while (i < left.length) result.push(left[i++]);
  while (j < right.length) result.push(right[j++]);
  return result;
};

// Usage in component
const App = () => {
  const numbers = [5, 3, 8, 4, 2, 7, 1, 6];
  const sorted = mergeSort(numbers);
  
  return (
    <View>
      <Text>Original: {numbers.join(', ')}</Text>
      <Text>Sorted: {sorted.join(', ')}</Text>
    </View>
  );
};

// Bubble sort in React Native
const bubbleSort = (arr) => {
  const sorted = [...arr];
  for (let i = 0; i < sorted.length - 1; i++) {
    for (let j = 0; j < sorted.length - 1 - i; j++) {
      if (sorted[j] > sorted[j + 1]) {
        [sorted[j], sorted[j + 1]] = [sorted[j + 1], sorted[j]];
      }
    }
  }
  return sorted;
};

// Optimized bubble sort
const bubbleSortOptimized = (arr) => {
  const sorted = [...arr];
  for (let i = 0; i < sorted.length - 1; i++) {
    let swapped = false;
    for (let j = 0; j < sorted.length - 1 - i; j++) {
      if (sorted[j] > sorted[j + 1]) {
        [sorted[j], sorted[j + 1]] = [sorted[j + 1], sorted[j]];
        swapped = true;
      }
    }
    if (!swapped) break;
  }
  return sorted;
};

// Usage in component
const App = () => {
  const numbers = [5, 3, 8, 4, 2, 7, 1, 6];
  const sorted = bubbleSort(numbers);
  
  return (
    <View>
      <Text>Original: {numbers.join(', ')}</Text>
      <Text>Sorted: {sorted.join(', ')}</Text>
    </View>
  );
};

// Intersection of arrays in React Native
const intersection = (arr1, arr2) => {
  const set2 = new Set(arr2);
  return arr1.filter(item => set2.has(item));
};

// Using filter and includes
const intersectionFilter = (arr1, arr2) => {
  return arr1.filter(item => arr2.includes(item));
};

// Usage in component
const App = () => {
  const arr1 = [1, 2, 3, 4];
  const arr2 = [3, 4, 5, 6];
  const result = intersection(arr1, arr2);
  
  return (
    <View>
      <Text>Array1: {arr1.join(', ')}</Text>
      <Text>Array2: {arr2.join(', ')}</Text>
      <Text>Intersection: {result.join(', ')}</Text>
    </View>
  );
};

// Union of arrays in React Native
const union = (arr1, arr2) => {
  return [...new Set([...arr1, ...arr2])];
};

// Preserving order
const unionOrder = (arr1, arr2) => {
  const result = [...arr1];
  for (const item of arr2) {
    if (!result.includes(item)) {
      result.push(item);
    }
  }
  return result;
};

// Usage in component
const App = () => {
  const arr1 = [1, 2, 3];
  const arr2 = [3, 4, 5];
  const result = union(arr1, arr2);
  
  return (
    <View>
      <Text>Array1: {arr1.join(', ')}</Text>
      <Text>Array2: {arr2.join(', ')}</Text>
      <Text>Union: {result.join(', ')}</Text>
    </View>
  );
};

// Difference of arrays in React Native
const difference = (arr1, arr2) => {
  const set2 = new Set(arr2);
  return arr1.filter(item => !set2.has(item));
};

// Symmetric difference
const symmetricDifference = (arr1, arr2) => {
  const set1 = new Set(arr1);
  const set2 = new Set(arr2);
  const result = [];
  for (const item of set1) {
    if (!set2.has(item)) result.push(item);
  }
  for (const item of set2) {
    if (!set1.has(item)) result.push(item);
  }
  return result;
};

// Usage in component
const App = () => {
  const arr1 = [1, 2, 3, 4];
  const arr2 = [3, 4, 5, 6];
  const diff = difference(arr1, arr2);
  
  return (
    <View>
      <Text>Array1: {arr1.join(', ')}</Text>
      <Text>Array2: {arr2.join(', ')}</Text>
      <Text>Difference: {diff.join(', ')}</Text>
    </View>
  );
};

// Group by property in React Native
const groupByProperty = (items, key) => {
  const groups = {};
  for (const item of items) {
    const keyValue = item[key];
    if (!groups[keyValue]) {
      groups[keyValue] = [];
    }
    groups[keyValue].push(item);
  }
  return groups;
};

// Using reduce
const groupByPropertyReduce = (items, key) => {
  return items.reduce((groups, item) => {
    const keyValue = item[key];
    if (!groups[keyValue]) {
      groups[keyValue] = [];
    }
    groups[keyValue].push(item);
    return groups;
  }, {});
};

// Usage in component
const App = () => {
  const data = [
    { type: 'fruit', name: 'apple' },
    { type: 'fruit', name: 'banana' },
    { type: 'veg', name: 'carrot' }
  ];
  const groups = groupByProperty(data, 'type');
  
  return (
    <View>
      {Object.entries(groups).map(([key, items]) => (
        <View key={key}>
          <Text style={{fontWeight: 'bold'}}>{key}:</Text>
          {items.map((item, index) => (
            <Text key={index}>  - {item.name}</Text>
          ))}
        </View>
      ))}
    </View>
  );
};

// Deep clone object in React Native
const deepClone = (obj) => {
  if (obj === null || typeof obj !== 'object') return obj;
  if (Array.isArray(obj)) {
    return obj.map(item => deepClone(item));
  }
  const cloned = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloned[key] = deepClone(obj[key]);
    }
  }
  return cloned;
};

// Using JSON methods
const deepCloneJSON = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};

// Usage in component
const App = () => {
  const original = {
    name: 'Alice',
    address: { city: 'NYC', zip: '10001' }
  };
  const cloned = deepClone(original);
  cloned.name = 'Bob';
  cloned.address.city = 'LA';
  
  return (
    <View>
      <Text>Original: {JSON.stringify(original)}</Text>
      <Text>Cloned: {JSON.stringify(cloned)}</Text>
    </View>
  );
};

// Immutable update in React Native
const updateImmutable = (obj, path, value) => {
  const parts = path.split('.');
  if (parts.length === 1) {
    return { ...obj, [parts[0]]: value };
  }
  const first = parts[0];
  const rest = parts.slice(1).join('.');
  const nested = obj[first] || {};
  return { ...obj, [first]: updateImmutable(nested, rest, value) };
};

// Usage in component
const App = () => {
  const [state, setState] = useState({
    user: { name: 'Alice', age: 25 }
  });
  
  const handleUpdate = () => {
    const newState = updateImmutable(state, 'user.age', 26);
    setState(newState);
  };
  
  return (
    <View>
      <Text>Name: {state.user.name}</Text>
      <Text>Age: {state.user.age}</Text>
      <Button title="Update Age" onPress={handleUpdate} />
    </View>
  );
};

// Pipe function in React Native
const pipe = (...fns) => {
  return (value) => {
    return fns.reduce((acc, fn) => fn(acc), value);
  };
};

// Usage in component
const App = () => {
  const double = (x) => x * 2;
  const addTen = (x) => x + 10;
  const square = (x) => x * x;
  
  const process = pipe(double, addTen, square);
  const result = process(5);
  
  return (
    <View>
      <Text>Input: 5</Text>
      <Text>Result: {result}</Text>
    </View>
  );
};

// Compose function in React Native
const compose = (...fns) => {
  return (value) => {
    return fns.reduceRight((acc, fn) => fn(acc), value);
  };
};

// Usage in component
const App = () => {
  const double = (x) => x * 2;
  const addTen = (x) => x + 10;
  const square = (x) => x * x;
  
  const process = compose(square, addTen, double);
  const result = process(5);
  
  return (
    <View>
      <Text>Input: 5</Text>
      <Text>Result: {result}</Text>
    </View>
  );
};

// Memoization in React Native
const memoize = (fn) => {
  const cache = {};
  return (arg) => {
    const key = JSON.stringify(arg);
    if (cache.hasOwnProperty(key)) {
      return cache[key];
    }
    const result = fn(arg);
    cache[key] = result;
    return result;
  };
};

// Fibonacci with memoization
const fibMemo = memoize((n) => {
  if (n <= 1) return n;
  return fibMemo(n - 1) + fibMemo(n - 2);
});

// Usage in component
const App = () => {
  const [n, setN] = useState(10);
  const result = fibMemo(n);
  
  return (
    <View>
      <Text>Fibonacci({n}) = {result}</Text>
      <Button title="Next" onPress={() => setN(n + 1)} />
    </View>
  );
};

// Once function in React Native
const once = (fn) => {
  let called = false;
  let result = null;
  return (...args) => {
    if (!called) {
      called = true;
      result = fn(...args);
    }
    return result;
  };
};

// Usage in component
const App = () => {
  const [message, setMessage] = useState('');
  
  const initialize = once(() => {
    console.log('Initialized');
    return { id: 1, name: 'App' };
  });
  
  const handleInit = () => {
    const result = initialize();
    setMessage(JSON.stringify(result));
  };
  
  return (
    <View>
      <Text>{message}</Text>
      <Button title="Initialize" onPress={handleInit} />
      <Button title="Initialize Again" onPress={handleInit} />
    </View>
  );
};

// Debounce with leading edge in React Native
const debounceLeading = (delayMs, fn) => {
  let lastCall = 0;
  let timer = null;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall < delayMs) {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        lastCall = Date.now();
        fn(...args);
      }, delayMs);
    } else {
      lastCall = now;
      fn(...args);
    }
  };
};

// Usage in component
const App = () => {
  const [search, setSearch] = useState('');
  
  const handleSearch = debounceLeading(500, (text) => {
    console.log('Searching:', text);
  });
  
  return (
    <View>
      <TextInput
        value={search}
        onChangeText={(text) => {
          setSearch(text);
          handleSearch(text);
        }}
        placeholder="Search..."
      />
    </View>
  );
};

// Throttle with leading edge in React Native
const throttleLeading = (delayMs, fn) => {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delayMs) {
      lastCall = now;
      fn(...args);
    }
  };
};

// Usage in component
const App = () => {
  const [scrollPosition, setScrollPosition] = useState(0);
  
  const handleScroll = throttleLeading(200, (event) => {
    const y = event.nativeEvent.contentOffset.y;
    setScrollPosition(y);
  });
  
  return (
    <ScrollView onScroll={handleScroll}>
      <Text>Scroll Position: {scrollPosition}</Text>
      {Array.from({length: 20}, (_, i) => (
        <Text key={i}>Item {i + 1}</Text>
      ))}
    </ScrollView>
  );
};

// Deep equal in React Native
const deepEqual = (obj1, obj2) => {
  if (obj1 === obj2) return true;
  if (obj1 === null || obj2 === null) return false;
  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
  if (Array.isArray(obj1) !== Array.isArray(obj2)) return false;
  
  if (Array.isArray(obj1)) {
    if (obj1.length !== obj2.length) return false;
    for (let i = 0; i < obj1.length; i++) {
      if (!deepEqual(obj1[i], obj2[i])) return false;
    }
    return true;
  }
  
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  
  for (const key of keys1) {
    if (!obj2.hasOwnProperty(key)) return false;
    if (!deepEqual(obj1[key], obj2[key])) return false;
  }
  return true;
};

// Usage in component
const App = () => {
  const obj1 = { name: 'Alice', address: { city: 'NYC' } };
  const obj2 = { name: 'Alice', address: { city: 'NYC' } };
  const obj3 = { name: 'Bob', address: { city: 'LA' } };
  
  return (
    <View>
      <Text>obj1 === obj2: {deepEqual(obj1, obj2) ? 'Yes' : 'No'}</Text>
      <Text>obj1 === obj3: {deepEqual(obj1, obj3) ? 'Yes' : 'No'}</Text>
    </View>
  );
};

// Observable pattern in React Native
class Observable {
  constructor() {
    this.subscribers = [];
  }
  
  subscribe(callback) {
    this.subscribers.push(callback);
    return () => {
      this.subscribers = this.subscribers.filter(cb => cb !== callback);
    };
  }
  
  notify(data) {
    this.subscribers.forEach(callback => callback(data));
  }
}

// Usage in component
const App = () => {
  const [messages, setMessages] = useState([]);
  const observable = new Observable();
  
  useEffect(() => {
    const unsubscribe = observable.subscribe((data) => {
      setMessages(prev => [...prev, data]);
    });
    return unsubscribe;
  }, []);
  
  const handleNotify = () => {
    observable.notify(`Message ${messages.length + 1}`);
  };
  
  return (
    <View>
      <FlatList
        data={messages}
        renderItem={({item}) => <Text>{item}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
      <Button title="Send Message" onPress={handleNotify} />
    </View>
  );
};

// Singleton pattern in React Native
class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    this.data = {};
    Singleton.instance = this;
  }
  
  set(key, value) {
    this.data[key] = value;
  }
  
  get(key) {
    return this.data[key];
  }
}

// Usage in component
const App = () => {
  const [value, setValue] = useState('');
  
  const handleSet = () => {
    const singleton = new Singleton();
    singleton.set('name', 'Alice');
    setValue('Set name to Alice');
  };
  
  const handleGet = () => {
    const singleton = new Singleton();
    const name = singleton.get('name');
    setValue(`Retrieved name: ${name}`);
  };
  
  return (
    <View>
      <Text>{value}</Text>
      <Button title="Set" onPress={handleSet} />
      <Button title="Get" onPress={handleGet} />
    </View>
  );
};

// Factory pattern in React Native
const createUser = (type, name) => {
  switch(type) {
    case 'admin':
      return { role: 'admin', name, permissions: ['read', 'write'] };
    case 'guest':
      return { role: 'guest', name, permissions: ['read'] };
    default:
      return { role: 'user', name, permissions: ['read'] };
  }
};

// Usage in component
const App = () => {
  const admin = createUser('admin', 'Alice');
  const guest = createUser('guest', 'Bob');
  
  return (
    <View>
      <Text>Admin: {admin.name}, Role: {admin.role}</Text>
      <Text>Guest: {guest.name}, Role: {guest.role}</Text>
    </View>
  );
};

// Strategy pattern in React Native
const strategies = {
  credit: (amount) => `Paid $${amount} with Credit Card`,
  paypal: (amount) => `Paid $${amount} with PayPal`,
  crypto: (amount) => `Paid $${amount} with Crypto`
};

const PaymentContext = (strategy) => {
  return (amount) => strategies[strategy](amount);
};

// Usage in component
const App = () => {
  const [result, setResult] = useState('');
  
  const handlePayment = (strategy) => {
    const pay = PaymentContext(strategy);
    setResult(pay(100));
  };
  
  return (
    <View>
      <Text>{result}</Text>
      <Button title="Credit Card" onPress={() => handlePayment('credit')} />
      <Button title="PayPal" onPress={() => handlePayment('paypal')} />
      <Button title="Crypto" onPress={() => handlePayment('crypto')} />
    </View>
  );
};

// Observer pattern in React Native
class Subject {
  constructor() {
    this.observers = [];
    this.state = '';
  }
  
  attach(observer) {
    this.observers.push(observer);
  }
  
  detach(observer) {
    this.observers = this.observers.filter(o => o !== observer);
  }
  
  setState(state) {
    this.state = state;
    this.notify();
  }
  
  notify() {
    this.observers.forEach(observer => observer.update(this.state));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }
  
  update(data) {
    console.log(`${this.name} received: ${data}`);
  }
}

// Usage in component
const App = () => {
  const [messages, setMessages] = useState([]);
  const subject = new Subject();
  
  useEffect(() => {
    const observer1 = new Observer('Observer1');
    const observer2 = new Observer('Observer2');
    subject.attach(observer1);
    subject.attach(observer2);
    
    subject.setState('Hello World');
  }, []);
  
  return (
    <View>
      <Text>Check console for observer messages</Text>
    </View>
  );
};

// Decorator pattern in React Native
const coffee = () => ({
  cost: 5.0,
  description: 'Coffee'
});

const milkDecorator = (coffee) => ({
  cost: coffee.cost + 2.0,
  description: `${coffee.description}, Milk`
});

const sugarDecorator = (coffee) => ({
  cost: coffee.cost + 1.0,
  description: `${coffee.description}, Sugar`
});

// Usage in component
const App = () => {
  let myCoffee = coffee();
  myCoffee = milkDecorator(myCoffee);
  myCoffee = sugarDecorator(myCoffee);
  
  return (
    <View>
      <Text>Description: {myCoffee.description}</Text>
      <Text>Cost: ${myCoffee.cost}</Text>
    </View>
  );
};

// Command pattern in React Native
class AddCommand {
  constructor(receiver, value) {
    this.receiver = receiver;
    this.value = value;
  }
  
  execute() {
    this.receiver.push(this.value);
  }
  
  undo() {
    const index = this.receiver.indexOf(this.value);
    if (index !== -1) {
      this.receiver.splice(index, 1);
    }
  }
}

// Usage in component
const App = () => {
  const [items, setItems] = useState([1, 2, 3]);
  const [command, setCommand] = useState(null);
  
  const handleAdd = () => {
    const cmd = new AddCommand(items, 4);
    cmd.execute();
    setItems([...items]);
    setCommand(cmd);
  };
  
  const handleUndo = () => {
    if (command) {
      command.undo();
      setItems([...items]);
    }
  };
  
  return (
    <View>
      <Text>Items: {items.join(', ')}</Text>
      <Button title="Add 4" onPress={handleAdd} />
      <Button title="Undo" onPress={handleUndo} />
    </View>
  );
};

// Memento pattern in React Native
class Memento {
  constructor(state) {
    this.state = state;
  }
}

class Originator {
  constructor() {
    this.state = null;
  }
  
  saveState() {
    return new Memento(JSON.parse(JSON.stringify(this.state)));
  }
  
  restoreState(memento) {
    this.state = memento.state;
  }
}

class Caretaker {
  constructor() {
    this.mementos = [];
  }
  
  addMemento(memento) {
    this.mementos.push(memento);
  }
  
  getMemento(index) {
    return this.mementos[index];
  }
}

// Usage in component
const App = () => {
  const [state, setState] = useState({ name: 'State 1' });
  const originator = new Originator();
  const caretaker = new Caretaker();
  
  const handleSave = () => {
    originator.state = state;
    caretaker.addMemento(originator.saveState());
    setState({ ...state, name: `State ${caretaker.mementos.length + 1}` });
  };
  
  const handleRestore = () => {
    if (caretaker.mementos.length > 0) {
      originator.restoreState(caretaker.getMemento(0));
      setState(originator.state);
    }
  };
  
  return (
    <View>
      <Text>Current State: {state.name}</Text>
      <Button title="Save" onPress={handleSave} />
      <Button title="Restore First" onPress={handleRestore} />
    </View>
  );
};

// Mediator pattern in React Native
class Mediator {
  constructor() {
    this.colleagues = [];
  }
  
  register(colleague) {
    this.colleagues.push(colleague);
    colleague.mediator = this;
  }
  
  send(message, sender) {
    this.colleagues.forEach(colleague => {
      if (colleague !== sender) {
        colleague.receive(message);
      }
    });
  }
}

class Colleague {
  constructor(name) {
    this.name = name;
    this.mediator = null;
  }
  
  send(message) {
    if (this.mediator) {
      this.mediator.send(message, this);
    }
  }
  
  receive(message) {
    console.log(`${this.name} received: ${message}`);
  }
}

// Usage in component
const App = () => {
  useEffect(() => {
    const mediator = new Mediator();
    const alice = new Colleague('Alice');
    const bob = new Colleague('Bob');
    mediator.register(alice);
    mediator.register(bob);
    alice.send('Hello Bob!');
  }, []);
  
  return (
    <View>
      <Text>Check console for mediator messages</Text>
    </View>
  );
};

// Chain of Responsibility in React Native
class Handler {
  constructor() {
    this.nextHandler = null;
  }
  
  setNext(handler) {
    this.nextHandler = handler;
    return handler;
  }
  
  handle(request) {
    if (this.nextHandler) {
      return this.nextHandler.handle(request);
    }
    return null;
  }
}

class AuthHandler extends Handler {
  handle(request) {
    if (request.token) {
      console.log('Authentication passed');
      return super.handle(request);
    }
    console.log('Authentication failed');
    return null;
  }
}

class LoggerHandler extends Handler {
  handle(request) {
    console.log(`Logging request: ${request.url}`);
    return super.handle(request);
  }
}

// Usage in component
const App = () => {
  useEffect(() => {
    const auth = new AuthHandler();
    const logger = new LoggerHandler();
    auth.setNext(logger);
    auth.handle({ token: 'valid', url: '/api' });
  }, []);
  
  return (
    <View>
      <Text>Check console for chain messages</Text>
    </View>
  );
};

// State pattern in React Native
class Context {
  constructor() {
    this.state = new ReadyState();
  }
  
  setState(state) {
    this.state = state;
  }
  
  request() {
    this.state.handle(this);
  }
}

class ReadyState {
  handle(context) {
    console.log('Ready: Waiting for input');
    context.setState(new ProcessingState());
  }
}

class ProcessingState {
  handle(context) {
    console.log('Processing: Working on task');
    context.setState(new CompletedState());
  }
}

class CompletedState {
  handle(context) {
    console.log('Completed: Task finished');
  }
}

// Usage in component
const App = () => {
  const [status, setStatus] = useState('Ready');
  const context = new Context();
  
  const handleStep = () => {
    context.request();
    setStatus(context.state.constructor.name.replace('State', ''));
  };
  
  return (
    <View>
      <Text>Status: {status}</Text>
      <Button title="Next Step" onPress={handleStep} />
    </View>
  );
};

// Proxy pattern in React Native
class RealSubject {
  request() {
    console.log('RealSubject: Handling request');
  }
}

class Proxy {
  constructor() {
    this.realSubject = null;
  }
  
  request() {
    if (this.checkAccess()) {
      if (!this.realSubject) {
        this.realSubject = new RealSubject();
      }
      this.realSubject.request();
      this.logAccess();
    }
  }
  
  checkAccess() {
    console.log('Proxy: Checking access');
    return true;
  }
  
  logAccess() {
    console.log('Proxy: Logging access');
  }
}

// Usage in component
const App = () => {
  const proxy = new Proxy();
  
  useEffect(() => {
    proxy.request();
  }, []);
  
  return (
    <View>
      <Text>Check console for proxy messages</Text>
    </View>
  );
};

// Flyweight pattern in React Native
class Flyweight {
  constructor(sharedState) {
    this.sharedState = sharedState;
  }
  
  operation(uniqueState) {
    console.log(`Shared: ${this.sharedState}, Unique: ${uniqueState}`);
  }
}

class FlyweightFactory {
  constructor() {
    this.flyweights = {};
  }
  
  getFlyweight(sharedState) {
    if (!this.flyweights[sharedState]) {
      this.flyweights[sharedState] = new Flyweight(sharedState);
      console.log(`Creating new flyweight for: ${sharedState}`);
    }
    return this.flyweights[sharedState];
  }
}

// Usage in component
const App = () => {
  const factory = new FlyweightFactory();
  
  useEffect(() => {
    const fw1 = factory.getFlyweight('state1');
    const fw2 = factory.getFlyweight('state1');
    const fw3 = factory.getFlyweight('state2');
    fw1.operation('unique1');
    fw2.operation('unique2');
    fw3.operation('unique3');
  }, []);
  
  return (
    <View>
      <Text>Check console for flyweight messages</Text>
    </View>
  );
};

// Bridge pattern in React Native
class Implementation {
  operationImpl() {}
}

class ConcreteImplementationA extends Implementation {
  operationImpl() {
    console.log('ConcreteImplementationA: Operation');
  }
}

class ConcreteImplementationB extends Implementation {
  operationImpl() {
    console.log('ConcreteImplementationB: Operation');
  }
}

class Abstraction {
  constructor(impl) {
    this.impl = impl;
  }
  
  operation() {
    console.log('Abstraction: Additional logic');
    this.impl.operationImpl();
  }
}

// Usage in component
const App = () => {
  const implA = new ConcreteImplementationA();
  const implB = new ConcreteImplementationB();
  const abstraction1 = new Abstraction(implA);
  const abstraction2 = new Abstraction(implB);
  
  useEffect(() => {
    abstraction1.operation();
    abstraction2.operation();
  }, []);
  
  return (
    <View>
      <Text>Check console for bridge messages</Text>
    </View>
  );
};

// Adapter pattern in React Native
class Target {
  request() {
    console.log('Target: Request');
  }
}

class Adaptee {
  specificRequest() {
    console.log('Adaptee: Specific Request');
  }
}

class Adapter extends Target {
  constructor(adaptee) {
    super();
    this.adaptee = adaptee;
  }
  
  request() {
    this.adaptee.specificRequest();
  }
}

// Usage in component
const App = () => {
  const adaptee = new Adaptee();
  const adapter = new Adapter(adaptee);
  
  useEffect(() => {
    adapter.request();
  }, []);
  
  return (
    <View>
      <Text>Check console for adapter messages</Text>
    </View>
  );
};

// Facade pattern in React Native
class SubsystemA {
  operationA() {
    console.log('SubsystemA: Operation');
  }
}

class SubsystemB {
  operationB() {
    console.log('SubsystemB: Operation');
  }
}

class Facade {
  constructor() {
    this.subsystemA = new SubsystemA();
    this.subsystemB = new SubsystemB();
  }
  
  operation() {
    console.log('Facade: Complex operation');
    this.subsystemA.operationA();
    this.subsystemB.operationB();
  }
}

// Usage in component
const App = () => {
  const facade = new Facade();
  
  useEffect(() => {
    facade.operation();
  }, []);
  
  return (
    <View>
      <Text>Check console for facade messages</Text>
    </View>
  );
};

// Composite pattern in React Native
class Leaf {
  constructor(name) {
    this.name = name;
  }
  
  operation() {
    console.log(`Leaf ${this.name}: Operation`);
  }
}

class Composite {
  constructor(name) {
    this.name = name;
    this.children = [];
  }
  
  add(component) {
    this.children.push(component);
  }
  
  remove(component) {
    this.children = this.children.filter(c => c !== component);
  }
  
  operation() {
    console.log(`Composite ${this.name}: Operation`);
    this.children.forEach(child => child.operation());
  }
}

// Usage in component
const App = () => {
  const leaf1 = new Leaf('A');
  const leaf2 = new Leaf('B');
  const composite = new Composite('Root');
  composite.add(leaf1);
  composite.add(leaf2);
  
  useEffect(() => {
    composite.operation();
  }, []);
  
  return (
    <View>
      <Text>Check console for composite messages</Text>
    </View>
  );
};

// Visitor pattern in React Native
class Visitor {
  visitElementA(element) {}
  visitElementB(element) {}
}

class ElementA {
  accept(visitor) {
    visitor.visitElementA(this);
  }
}

class ElementB {
  accept(visitor) {
    visitor.visitElementB(this);
  }
}

class ConcreteVisitor extends Visitor {
  visitElementA(element) {
    console.log('Visiting ElementA');
  }
  
  visitElementB(element) {
    console.log('Visiting ElementB');
  }
}

// Usage in component
const App = () => {
  const visitor = new ConcreteVisitor();
  const elementA = new ElementA();
  const elementB = new ElementB();
  
  useEffect(() => {
    elementA.accept(visitor);
    elementB.accept(visitor);
  }, []);
  
  return (
    <View>
      <Text>Check console for visitor messages</Text>
    </View>
  );
};

// Iterator pattern in React Native
class Iterator {
  constructor(collection) {
    this.collection = collection;
    this.index = 0;
  }
  
  next() {
    if (this.hasNext()) {
      return this.collection[this.index++];
    }
    return null;
  }
  
  hasNext() {
    return this.index < this.collection.length;
  }
}

class CustomCollection {
  constructor() {
    this.items = [];
  }
  
  add(item) {
    this.items.push(item);
  }
  
  getIterator() {
    return new Iterator(this.items);
  }
}

// Usage in component
const App = () => {
  const [items, setItems] = useState([]);
  const collection = new CustomCollection();
  
  useEffect(() => {
    collection.add('A');
    collection.add('B');
    collection.add('C');
    const iterator = collection.getIterator();
    const result = [];
    while (iterator.hasNext()) {
      result.push(iterator.next());
    }
    setItems(result);
  }, []);
  
  return (
    <View>
      {items.map((item, index) => (
        <Text key={index}>{item}</Text>
      ))}
    </View>
  );
};

// Template Method pattern in React Native
class AbstractClass {
  templateMethod() {
    this.step1();
    this.step2();
    this.step3();
  }
  
  step1() {
    console.log('Step 1');
  }
  
  step2() {}
  
  step3() {
    console.log('Step 3');
  }
}

class ConcreteClass extends AbstractClass {
  step2() {
    console.log('Concrete Step 2');
  }
}

// Usage in component
const App = () => {
  const concrete = new ConcreteClass();
  
  useEffect(() => {
    concrete.templateMethod();
  }, []);
  
  return (
    <View>
      <Text>Check console for template method messages</Text>
    </View>
  );
};

// Builder pattern in React Native
class Product {
  constructor() {
    this.parts = [];
  }
  
  add(part) {
    this.parts.push(part);
  }
  
  listParts() {
    console.log(this.parts.join(', '));
  }
}

class Builder {
  constructor() {
    this.reset();
  }
  
  reset() {
    this.product = new Product();
  }
  
  buildStepA() {
    this.product.add('Part A');
  }
  
  buildStepB() {
    this.product.add('Part B');
  }
  
  getResult() {
    return this.product;
  }
}

class Director {
  constructor(builder) {
    this.builder = builder;
  }
  
  buildMinimal() {
    this.builder.buildStepA();
  }
  
  buildFull() {
    this.builder.buildStepA();
    this.builder.buildStepB();
  }
}

// Usage in component
const App = () => {
  const builder = new Builder();
  const director = new Director(builder);
  director.buildMinimal();
  const product = builder.getResult();
  
  return (
    <View>
      <Text>Product parts: {product.parts.join(', ')}</Text>
    </View>
  );
};

// Prototype pattern in React Native
class Prototype {
  constructor(name, nested) {
    this.name = name;
    this.nested = nested || {};
  }
  
  clone() {
    return new Prototype(this.name, { ...this.nested });
  }
  
  deepClone() {
    return new Prototype(
      this.name,
      JSON.parse(JSON.stringify(this.nested))
    );
  }
}

// Usage in component
const App = () => {
  const original = new Prototype('Original', { value: 42 });
  const copy = original.clone();
  copy.name = 'Copy';
  copy.nested.value = 99;
  
  const deepCopy = original.deepClone();
  deepCopy.nested.value = 100;
  
  return (
    <View>
      <Text>Original name: {original.name}</Text>
      <Text>Original nested value: {original.nested.value}</Text>
      <Text>Copy name: {copy.name}</Text>
      <Text>DeepCopy nested value: {deepCopy.nested.value}</Text>
    </View>
  );
};

// Async Storage in React Native
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const [data, setData] = useState('');
  const [loading, setLoading] = useState(false);
  
  const saveData = async (key, value) => {
    try {
      await AsyncStorage.setItem(key, value);
      console.log('Data saved successfully');
    } catch (error) {
      console.error('Error saving data:', error);
    }
  };
  
  const loadData = async (key) => {
    try {
      setLoading(true);
      const value = await AsyncStorage.getItem(key);
      setData(value || 'No data found');
    } catch (error) {
      console.error('Error loading data:', error);
    } finally {
      setLoading(false);
    }
  };
  
  const removeData = async (key) => {
    try {
      await AsyncStorage.removeItem(key);
      setData('Data removed');
    } catch (error) {
      console.error('Error removing data:', error);
    }
  };
  
  return (
    <View>
      {loading && <ActivityIndicator size="large" />}
      <Text>Data: {data}</Text>
      <Button title="Save Data" onPress={() => saveData('user', 'Alice')} />
      <Button title="Load Data" onPress={() => loadData('user')} />
      <Button title="Remove Data" onPress={() => removeData('user')} />
    </View>
  );
};

// Networking in React Native
const App = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const fetchData = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const json = await response.json();
      setData(json);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  const postData = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          title: 'Test Post',
          body: 'This is a test post',
          userId: 1,
        }),
      });
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const json = await response.json();
      Alert.alert('Success', 'Post created: ' + json.id);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  
  return (
    <View>
      {loading && <ActivityIndicator size="large" />}
      {error && <Text style={{color: 'red'}}>Error: {error}</Text>}
      
      {data && (
        <FlatList
          data={data}
          renderItem={({item}) => (
            <View style={styles.item}>
              <Text style={styles.name}>{item.name}</Text>
              <Text style={styles.email}>{item.email}</Text>
            </View>
          )}
          keyExtractor={item => item.id.toString()}
        />
      )}
      
      <Button title="Fetch Data" onPress={fetchData} />
      <Button title="Post Data" onPress={postData} />
    </View>
  );
};

const styles = StyleSheet.create({
  item: { padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' },
  name: { fontSize: 16, fontWeight: 'bold' },
  email: { fontSize: 14, color: '#666' }
});

// Image Handling in React Native
import { Image, ImageBackground } from 'react-native';

const App = () => {
  const [imageUri, setImageUri] = useState(null);
  
  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibrary({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
    });
    
    if (!result.canceled) {
      setImageUri(result.assets[0].uri);
    }
  };
  
  return (
    <View style={styles.container}>
      {/* Network image */}
      <Image
        source={{ uri: 'https://via.placeholder.com/150' }}
        style={styles.image}
        resizeMode="cover"
      />
      
      {/* Local image */}
      <Image
        source={require('./assets/logo.png')}
        style={styles.image}
        resizeMode="contain"
      />
      
      {/* Image with loading indicator */}
      <Image
        source={{ uri: 'https://via.placeholder.com/300' }}
        style={styles.image}
        onLoadStart={() => console.log('Loading started')}
        onLoadEnd={() => console.log('Loading ended')}
        onError={(error) => console.log('Error loading image', error)}
      />
      
      {/* ImageBackground */}
      <ImageBackground
        source={{ uri: 'https://via.placeholder.com/200' }}
        style={styles.imageBackground}
        resizeMode="cover"
      >
        <Text style={styles.backgroundText}>Background Image</Text>
      </ImageBackground>
      
      {/* Button to pick image */}
      <Button title="Pick Image" onPress={pickImage} />
      {imageUri && (
        <Image source={{ uri: imageUri }} style={styles.image} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, alignItems: 'center' },
  image: { width: 150, height: 150, marginVertical: 10, borderRadius: 10 },
  imageBackground: { width: 200, height: 100, justifyContent: 'center', alignItems: 'center' },
  backgroundText: { color: 'white', fontWeight: 'bold', fontSize: 16 }
});

// Animations in React Native
import { Animated, Easing } from 'react-native';

const App = () => {
  const fadeAnim = new Animated.Value(0);
  const scaleAnim = new Animated.Value(0);
  const rotateAnim = new Animated.Value(0);
  const translateYAnim = new Animated.Value(0);
  
  useEffect(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 2000,
        useNativeDriver: true,
        easing: Easing.ease,
      }),
      Animated.spring(scaleAnim, {
        toValue: 1,
        friction: 1,
        tension: 1,
        useNativeDriver: true,
      }),
      Animated.timing(rotateAnim, {
        toValue: 1,
        duration: 3000,
        useNativeDriver: true,
        easing: Easing.linear,
      }),
      Animated.spring(translateYAnim, {
        toValue: 1,
        useNativeDriver: true,
      }),
    ]).start();
  }, []);
  
  const rotate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });
  
  const translateY = translateYAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -100],
  });
  
  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.box,
          {
            opacity: fadeAnim,
            transform: [
              { scale: scaleAnim },
              { rotate: rotate },
              { translateY: translateY },
            ],
          },
        ]}
      >
        <Text style={styles.text}>Animated Box</Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  box: { width: 100, height: 100, backgroundColor: '#007AFF', justifyContent: 'center', alignItems: 'center' },
  text: { color: 'white', fontWeight: 'bold' }
});

// Gestures in React Native
import { PanResponder, TouchableOpacity } from 'react-native';

const App = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isPressed, setIsPressed] = useState(false);
  const panResponder = React.useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (evt, gestureState) => {
        setPosition({
          x: gestureState.dx,
          y: gestureState.dy,
        });
      },
      onPanResponderRelease: () => {
        setPosition({ x: 0, y: 0 });
      },
    })
  ).current;
  
  return (
    <View style={styles.container}>
      <View
        style={[styles.dragArea, { transform: [{ translateX: position.x }, { translateY: position.y }] }]}
        {...panResponder.panHandlers}
      >
        <Text style={styles.dragText}>Drag Me</Text>
      </View>
      
      <TouchableOpacity
        style={[styles.button, isPressed && styles.buttonPressed]}
        onPressIn={() => setIsPressed(true)}
        onPressOut={() => setIsPressed(false)}
        onPress={() => Alert.alert('Pressed', 'Button was pressed!')}
      >
        <Text style={styles.buttonText}>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  dragArea: { width: 100, height: 100, backgroundColor: '#007AFF', justifyContent: 'center', alignItems: 'center', borderRadius: 10 },
  dragText: { color: 'white', fontWeight: 'bold' },
  button: { padding: 15, backgroundColor: '#007AFF', borderRadius: 5, marginTop: 20 },
  buttonPressed: { backgroundColor: '#0055BB', transform: [{ scale: 0.95 }] },
  buttonText: { color: 'white', fontWeight: 'bold' }
});

// Push Notifications in React Native
import messaging from '@react-native-firebase/messaging';

const App = () => {
  const [token, setToken] = useState('');
  const [notification, setNotification] = useState(null);
  
  useEffect(() => {
    const requestPermission = async () => {
      const authStatus = await messaging().requestPermission();
      const enabled =
        authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
        authStatus === messaging.AuthorizationStatus.PROVISIONAL;
      
      if (enabled) {
        console.log('Authorization status:', authStatus);
        getFCMToken();
      }
    };
    
    const getFCMToken = async () => {
      const fcmToken = await messaging().getToken();
      if (fcmToken) {
        console.log('FCM Token:', fcmToken);
        setToken(fcmToken);
      }
    };
    
    // Foreground message handler
    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      console.log('Message received in foreground:', remoteMessage);
      setNotification(remoteMessage.notification);
      Alert.alert(
        remoteMessage.notification.title,
        remoteMessage.notification.body
      );
    });
    
    // Background message handler
    messaging().setBackgroundMessageHandler(async (remoteMessage) => {
      console.log('Message received in background:', remoteMessage);
    });
    
    requestPermission();
    
    return unsubscribe;
  }, []);
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Push Notifications</Text>
      <Text style={styles.text}>FCM Token:</Text>
      <Text style={styles.token}>{token}</Text>
      
      {notification && (
        <View style={styles.notification}>
          <Text style={styles.notificationTitle}>
            {notification.title}
          </Text>
          <Text style={styles.notificationBody}>
            {notification.body}
          </Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  text: { fontSize: 16, fontWeight: 'bold', marginTop: 10 },
  token: { fontSize: 14, color: '#666', marginTop: 5 },
  notification: { padding: 15, backgroundColor: '#f0f0f0', borderRadius: 5, marginTop: 20 },
  notificationTitle: { fontSize: 16, fontWeight: 'bold' },
  notificationBody: { fontSize: 14, marginTop: 5 }
});

// Permissions in React Native
import { PermissionsAndroid, Platform } from 'react-native';
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

const App = () => {
  const [permissionStatus, setPermissionStatus] = useState('');
  
  const checkPermission = async () => {
    const permission = Platform.select({
      android: PERMISSIONS.ANDROID.CAMERA,
      ios: PERMISSIONS.IOS.CAMERA,
    });
    
    const result = await check(permission);
    setPermissionStatus(`Permission: ${result}`);
  };
  
  const requestPermission = async () => {
    const permission = Platform.select({
      android: PERMISSIONS.ANDROID.CAMERA,
      ios: PERMISSIONS.IOS.CAMERA,
    });
    
    const result = await request(permission);
    setPermissionStatus(`Permission: ${result}`);
    
    if (result === RESULTS.GRANTED) {
      Alert.alert('Permission Granted', 'Camera permission granted!');
    } else if (result === RESULTS.DENIED) {
      Alert.alert('Permission Denied', 'Camera permission denied');
    } else if (result === RESULTS.BLOCKED) {
      Alert.alert('Permission Blocked', 'Camera permission blocked');
    }
  };
  
  // Android specific
  const requestAndroidPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Camera Permission',
          message: 'App needs access to your camera.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        }
      );
      
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        setPermissionStatus('Camera permission granted');
        Alert.alert('Success', 'Camera permission granted!');
      } else {
        setPermissionStatus('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Permissions</Text>
      <Text style={styles.status}>{permissionStatus}</Text>
      
      <Button title="Check Permission" onPress={checkPermission} />
      <Button title="Request Permission" onPress={requestPermission} />
      {Platform.OS === 'android' && (
        <Button title="Request Android Permission" onPress={requestAndroidPermission} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  status: { fontSize: 16, marginBottom: 20 }
});

// Device Features in React Native
import { Camera } from 'react-native-camera';
import Geolocation from 'react-native-geolocation-service';
import DeviceInfo from 'react-native-device-info';

const App = () => {
  const [location, setLocation] = useState(null);
  const [deviceInfo, setDeviceInfo] = useState({});
  
  useEffect(() => {
    // Get device info
    const info = {
      deviceId: DeviceInfo.getDeviceId(),
      deviceName: DeviceInfo.getDeviceName(),
      brand: DeviceInfo.getBrand(),
      model: DeviceInfo.getModel(),
      systemName: DeviceInfo.getSystemName(),
      systemVersion: DeviceInfo.getSystemVersion(),
      appVersion: DeviceInfo.getVersion(),
      buildNumber: DeviceInfo.getBuildNumber(),
    };
    setDeviceInfo(info);
    
    // Get location
    Geolocation.getCurrentPosition(
      (position) => {
        setLocation(position.coords);
      },
      (error) => {
        console.log('Location error:', error);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
    
    // Watch location
    const watchId = Geolocation.watchPosition(
      (position) => {
        setLocation(position.coords);
      },
      (error) => {
        console.log('Watch error:', error);
      },
      { enableHighAccuracy: true, distanceFilter: 10 }
    );
    
    return () => {
      Geolocation.clearWatch(watchId);
    };
  }, []);
  
  const renderDeviceInfo = () => {
    return Object.entries(deviceInfo).map(([key, value]) => (
      <Text key={key} style={styles.infoText}>
        {key}: {value}
      </Text>
    ));
  };
  
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>Device Features</Text>
      
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Device Info</Text>
        {renderDeviceInfo()}
      </View>
      
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Location</Text>
        {location ? (
          <Text style={styles.infoText}>
            Latitude: {location.latitude}, Longitude: {location.longitude}
          </Text>
        ) : (
          <Text style={styles.infoText}>Loading location...</Text>
        )}
      </View>
      
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Battery</Text>
        <Text style={styles.infoText}>Battery Level: {/* Battery info would go here */}</Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  section: { marginBottom: 20, padding: 15, borderWidth: 1, borderRadius: 5 },
  sectionTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 10 },
  infoText: { fontSize: 14, marginVertical: 2 }
});

// Debugging in React Native
const App = () => {
  const [logs, setLogs] = useState([]);
  
  const logDebug = (message, data) => {
    const timestamp = new Date().toISOString();
    const logEntry = {
      timestamp,
      message,
      data: data || null,
    };
    setLogs(prev => [logEntry, ...prev]);
    console.log(`[${timestamp}] ${message}`, data || '');
  };
  
  const handleAction = () => {
    logDebug('Button pressed', { action: 'test', value: 42 });
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Debug Console</Text>
      
      <Button title="Log Action" onPress={handleAction} />
      
      <ScrollView style={styles.logContainer}>
        {logs.map((log, index) => (
          <View key={index} style={styles.logEntry}>
            <Text style={styles.logTimestamp}>{log.timestamp}</Text>
            <Text style={styles.logMessage}>{log.message}</Text>
            {log.data && (
              <Text style={styles.logData}>
                {JSON.stringify(log.data, null, 2)}
              </Text>
            )}
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  logContainer: { flex: 1, marginTop: 20, borderWidth: 1, borderColor: '#ccc', padding: 10 },
  logEntry: { marginBottom: 10, padding: 5, borderBottomWidth: 1, borderBottomColor: '#eee' },
  logTimestamp: { fontSize: 12, color: '#666' },
  logMessage: { fontSize: 14, fontWeight: 'bold' },
  logData: { fontSize: 12, color: '#333', fontFamily: 'monospace', marginTop: 5 }
});

// Performance Optimization in React Native
import React, { useMemo, useCallback, memo } from 'react';

// Memoized component
const MemoizedItem = memo(({ item, onPress }) => {
  console.log('Rendering item:', item.id);
  return (
    <TouchableOpacity
      style={styles.item}
      onPress={() => onPress(item.id)}
    >
      <Text style={styles.itemText}>{item.name}</Text>
    </TouchableOpacity>
  );
});

const App = () => {
  const [items, setItems] = useState([]);
  const [filter, setFilter] = useState('');
  const [count, setCount] = useState(0);
  
  // Memoize expensive computation
  const expensiveCalculation = useMemo(() => {
    console.log('Calculating total...');
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]);
  
  // Memoize filtered items
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    if (!filter) return items;
    return items.filter(item => 
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]);
  
  // Memoize callback functions
  const handleItemPress = useCallback((id) => {
    console.log('Item pressed:', id);
    setItems(prev => prev.map(item => 
      item.id === id ? { ...item, selected: true } : item
    ));
  }, []);
  
  const handleAddItem = useCallback(() => {
    setItems(prev => [
      ...prev,
      { id: Date.now(), name: `Item ${prev.length + 1}`, value: Math.floor(Math.random() * 100) }
    ]);
  }, []);
  
  // Optimize list rendering
  const renderItem = useCallback(({ item }) => (
    <MemoizedItem item={item} onPress={handleItemPress} />
  ), [handleItemPress]);
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Performance Demo</Text>
      <Text>Total: {expensiveCalculation}</Text>
      <Text>Count: {count}</Text>
      
      <TextInput
        style={styles.input}
        placeholder="Filter items..."
        value={filter}
        onChangeText={setFilter}
      />
      
      <Button title="Add Item" onPress={handleAddItem} />
      <Button title="Increment" onPress={() => setCount(c => c + 1)} />
      
      <FlatList
        data={filteredItems}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
        removeClippedSubviews={true}
        maxToRenderPerBatch={10}
        updateCellsBatchingPeriod={50}
        windowSize={10}
        initialNumToRender={10}
        getItemLayout={(data, index) => ({
          length: 60,
          offset: 60 * index,
          index,
        })}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, marginVertical: 10 },
  item: { padding: 10, borderWidth: 1, borderColor: '#eee', marginVertical: 2 },
  itemText: { fontSize: 16 }
});