React Native

JavaScript Thread ──[JSON Bridge]──► Native Thread
      ↑                                    ↓
  React logic                    Native UI components
      ↑                                    ↓
  State changes ←──[Async Calls]─── Native events

JavaScript (Hermes Engine)
        ↕  [JSI — direct C++ bindings, synchronous calls]
    Native Modules (C++)
        ↕
   iOS / Android Platform

import React, { useState } from 'react';
import {
  View,        // like <div> — a container box
  Text,        // any visible text MUST be in here
  TextInput,   // keyboard input field
  Image,       // renders a native image view
  Pressable,   // tappable area (replaces TouchableOpacity)
  StyleSheet,  // validates + optimizes style objects
  ScrollView,  // renders ALL children at once (use for short lists)
} from 'react-native';

function ProfileCard({ name, avatar }) {
  const [liked, setLiked] = useState(false); // track like state

  return (
    <View style={styles.card}>               {/* container box */}
      <Image
        source={{ uri: avatar }}             {/* load remote image */}
        style={styles.avatar}
      />
      <Text style={styles.name}>{name}</Text>
      <Pressable
        style={({ pressed }) => [            {/* style changes when pressed */}
          styles.button,
          pressed && styles.buttonPressed,   {/* dims on press */}
        ]}
        onPress={() => setLiked(l => !l)}   {/* toggle on tap */}
      >
        <Text style={styles.buttonText}>
          {liked ? '❤️ Liked' : '🤍 Like'}
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#1e1e2e',
    borderRadius: 16,
    padding: 20,
    alignItems: 'center',
  },
  avatar: { width: 80, height: 80, borderRadius: 40 },
  name: { color: '#cdd6f4', fontSize: 20, fontWeight: '700', marginTop: 12 },
  button: {
    backgroundColor: '#89b4fa',
    paddingHorizontal: 24,
    paddingVertical: 10,
    borderRadius: 8,
    marginTop: 12,
  },
  buttonPressed: { opacity: 0.7 },          // visual feedback on press
  buttonText: { color: '#1e1e2e', fontWeight: '600' },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,                          // fills parent (like "Expanded" in Flutter)
    backgroundColor: '#13131a',
    padding: 16,
  },

  // Flexbox is THE layout model — default direction is column (vertical)
  row: {
    flexDirection: 'row',             // must be explicit — default is 'column'!
    justifyContent: 'space-between',  // main-axis alignment (horizontal here)
    alignItems: 'center',             // cross-axis alignment (vertical here)
  },

  text: {
    fontSize: 16,
    fontWeight: '600',
    color: '#ffffff',
    lineHeight: 24,
    letterSpacing: 0.5,
  },

  // Platform-specific shadow — two different APIs
  card: {
    backgroundColor: '#1e1e2e',
    borderRadius: 12,
    shadowColor: '#000',              // iOS shadow
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,                     // Android shadow (single number)
  },
});

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

const styles = StyleSheet.create({
  container: {
    // Inline ternary — quick one-liner for simple cases
    paddingTop: Platform.OS === 'ios' ? 50 : 30,

    // Platform.select — cleaner for multiple platforms
    paddingTop: Platform.select({
      ios: 50,
      android: 30,
    }),
  },
});

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

const DATA = [
  { id: '1', title: 'Flutter', subtitle: 'Google' },
  { id: '2', title: 'React Native', subtitle: 'Meta' },
  { id: '3', title: 'SwiftUI', subtitle: 'Apple' },
  { id: '4', title: 'Jetpack Compose', subtitle: 'Google' },
];

function FrameworkItem({ title, subtitle }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.subtitle}>{subtitle}</Text>
    </View>
  );
}

function FrameworkList() {
  return (
    <FlatList
      data={DATA}
      keyExtractor={(item) => item.id}               // unique key per item (like React's key prop)
      renderItem={({ item }) => (
        <FrameworkItem title={item.title} subtitle={item.subtitle} />
      )}
      ListHeaderComponent={<Text style={styles.header}>Frameworks</Text>}
      ListEmptyComponent={<Text>No items found</Text>}  // shown when data=[]
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      onEndReached={loadMoreData}                    // fires when user nears bottom (pagination)
      onEndReachedThreshold={0.5}                   // trigger at 50% from the bottom
      refreshing={isRefreshing}
      onRefresh={handleRefresh}                     // pull-to-refresh callback
      horizontal={false}                            // vertical by default
      numColumns={1}                                // set to 2 for a 2-column grid
    />
  );
}

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

const SECTIONS = [
  {
    title: 'Cross-Platform',
    data: ['Flutter', 'React Native', 'Xamarin'],
  },
  {
    title: 'Platform-Specific',
    data: ['SwiftUI', 'Jetpack Compose'],
  },
];

<SectionList
  sections={SECTIONS}
  keyExtractor={(item, index) => item + index}      // unique key for each row
  renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
  renderSectionHeader={({ section }) => (
    <Text style={styles.sectionHeader}>{section.title}</Text>  // sticky header
  )}
/>

// Install the core + dependencies
npm install @react-navigation/native
npm install @react-navigation/stack       // or native-stack (faster, uses native animations)
npm install @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context

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

const Stack = createNativeStackNavigator(); // creates the card-stack navigator

function App() {
  return (
    <NavigationContainer>               {/* wraps the whole app — provides nav context */}
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Dashboard' }}
        />
        <Stack.Screen
          name="Details"
          component={DetailsScreen}
          options={({ route }) => ({ title: route.params.itemName })} // dynamic title
        />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={{ presentation: 'modal' }}   // slides up from bottom like a modal
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Push a new screen onto the stack, passing data as params
function HomeScreen({ navigation }) {
  return (
    <Pressable
      onPress={() =>
        navigation.navigate('Details', {  // second argument is the params object
          itemId: 42,
          itemName: 'Flutter Framework',
        })
      }
    >
      <Text>Go to Details</Text>
    </Pressable>
  );
}

// Receive params via route.params on the destination screen
function DetailsScreen({ route, navigation }) {
  const { itemId, itemName } = route.params; // destructure whatever was passed

  return (
    <View>
      <Text>ID: {itemId}</Text>
      <Text>Name: {itemName}</Text>
      <Pressable onPress={() => navigation.goBack()}>
        <Text>Go Back</Text>
      </Pressable>
    </View>
  );
}

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

const Tab = createBottomTabNavigator();

function MainTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          // swap icon based on active/inactive state
          const iconMap = {
            Home: focused ? 'home' : 'home-outline',
            Search: focused ? 'search' : 'search-outline',
            Profile: focused ? 'person' : 'person-outline',
          };
          return <Ionicons name={iconMap[route.name]} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#89b4fa',
        tabBarInactiveTintColor: '#6c7086',
        tabBarStyle: { backgroundColor: '#1e1e2e', borderTopWidth: 0 },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

// Each tab can have its own independent stack — very common pattern
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeMain" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />  {/* only in Home tab */}
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStack} />  {/* Stack lives inside Tab */}
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

// useState — simple, single-value state
const [count, setCount] = useState(0);
const [user, setUser] = useState(null);

// useReducer — when you have multiple related pieces of state
const initialState = { count: 0, error: null, isLoading: false };

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT': return { ...state, count: state.count + 1 };
    case 'DECREMENT': return { ...state, count: state.count - 1 };
    case 'SET_LOADING': return { ...state, isLoading: action.payload };
    case 'SET_ERROR':   return { ...state, error: action.payload };
    default: return state; // always return state for unknown actions
  }
}

const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'INCREMENT' });
dispatch({ type: 'SET_LOADING', payload: true });

// AuthContext.jsx — share auth state across the whole app
const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = async (email, password) => {
    const data = await authApi.login(email, password); // call your backend
    setUser(data.user);                                // store returned user
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}  {/* everything inside can access auth state */}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext); // clean custom hook

// Usage anywhere in the tree — no prop drilling
function ProfileScreen() {
  const { user, logout } = useAuth();
  return (
    <View>
      <Text>Welcome, {user?.name}</Text>
      <Pressable onPress={logout}><Text>Logout</Text></Pressable>
    </View>
  );
}

import { create } from 'zustand';

const useCartStore = create((set, get) => ({
  items: [],
  total: 0,

  addItem: (item) =>
    set((state) => ({
      items: [...state.items, item],          // add item to list
      total: state.total + item.price,        // recalculate total
    })),

  removeItem: (id) =>
    set((state) => {
      const items = state.items.filter((i) => i.id !== id); // remove by id
      return {
        items,
        total: items.reduce((sum, i) => sum + i.price, 0),  // recalculate
      };
    }),

  clearCart: () => set({ items: [], total: 0 }),             // reset
}));

// No Provider needed — just call the hook anywhere
function CartScreen() {
  const { items, total, removeItem } = useCartStore(); // grab what you need

  return (
    <View>
      <Text>Total: ${total.toFixed(2)}</Text>
      <FlatList
        data={items}
        renderItem={({ item }) => (
          <View>
            <Text>{item.name}</Text>
            <Pressable onPress={() => removeItem(item.id)}>
              <Text>Remove</Text>
            </Pressable>
          </View>
        )}
      />
    </View>
  );
}

// store.js — define your slices and configure the store
import { configureStore, createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({
  name: 'user',
  initialState: { profile: null, isLoggedIn: false },
  reducers: {
    setUser: (state, action) => {
      state.profile = action.payload;   // Immer lets you "mutate" safely
      state.isLoggedIn = true;
    },
    clearUser: (state) => {
      state.profile = null;
      state.isLoggedIn = false;
    },
  },
});

export const { setUser, clearUser } = userSlice.actions;

export const store = configureStore({
  reducer: { user: userSlice.reducer },
});

// Wrap your app in Provider, then use hooks anywhere
import { Provider, useSelector, useDispatch } from 'react-redux';

function App() {
  return (
    <Provider store={store}>           {/* makes store available to all components */}
      <NavigationContainer>...</NavigationContainer>
    </Provider>
  );
}

function ProfileScreen() {
  const user = useSelector((state) => state.user.profile); // read from store
  const dispatch = useDispatch();                          // get dispatch function

  return (
    <Pressable onPress={() => dispatch(clearUser())}>     {/* fire action */}
      <Text>Logout {user?.name}</Text>
    </Pressable>
  );
}

import { useEffect, useState } from 'react';

// fetch is built into React Native's runtime — no imports needed
async function fetchPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!response.ok) throw new Error(`HTTP ${response.status}`); // throw on errors
  return response.json();                                        // parse JSON body
}

// axios — cleaner API, better interceptor support
// npm install axios
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://myapi.example.com/v1', // prepended to every request URL
  timeout: 10000,                          // fail after 10 seconds
  headers: { 'Content-Type': 'application/json' },
});

// Intercept every request to attach the auth token
api.interceptors.request.use((config) => {
  const token = getStoredToken();
  if (token) config.headers.Authorization = `Bearer ${token}`; // inject token
  return config;
});

// Intercept every response to handle 401 globally (logged out)
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      clearUserSession();          // clear stored creds
      navigation.navigate('Login'); // redirect to login
    }
    return Promise.reject(error);
  }
);

// Using in a component — always handle loading, error, and cleanup
function PostsList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false; // guard against setting state after component unmounts

    fetchPosts()
      .then((data) => { if (!cancelled) setPosts(data); })
      .catch((e) => { if (!cancelled) setError(e.message); })
      .finally(() => { if (!cancelled) setLoading(false); });

    return () => { cancelled = true; }; // cleanup: prevent stale state updates
  }, []);

  if (loading) return <ActivityIndicator size="large" />;
  if (error) return <Text style={{ color: 'red' }}>Error: {error}</Text>;
  return <FlatList data={posts} renderItem={/* ... */} keyExtractor={(p) => String(p.id)} />;
}

// npm install @tanstack/react-query
import { QueryClient, QueryClientProvider, useQuery, useMutation } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>  {/* provides cache to entire app */}
      <NavigationContainer>...</NavigationContainer>
    </QueryClientProvider>
  );
}

function PostsList() {
  const {
    data: posts,
    isLoading,
    isError,
    error,
    refetch,           // manually re-fetch (e.g., pull-to-refresh)
  } = useQuery({
    queryKey: ['posts'],              // cache key — same key = same cached data
    queryFn: fetchPosts,             // async function that returns the data
    staleTime: 5 * 60 * 1000,       // treat cached data as fresh for 5 minutes
  });

  if (isLoading) return <ActivityIndicator />;
  if (isError) return <Text>Error: {error.message}</Text>;

  return (
    <FlatList
      data={posts}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      keyExtractor={(item) => String(item.id)}
      onRefresh={refetch}            // pull-to-refresh triggers a fresh fetch
      refreshing={isLoading}
    />
  );
}

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

// Save — must stringify objects because AsyncStorage only stores strings
const saveUser = async (user) => {
  try {
    await AsyncStorage.setItem('user', JSON.stringify(user)); // serialize to string
  } catch (e) {
    console.error('Save failed:', e);
  }
};

// Load — must parse strings back to objects
const loadUser = async () => {
  try {
    const json = await AsyncStorage.getItem('user');
    return json ? JSON.parse(json) : null; // null if key doesn't exist
  } catch (e) {
    console.error('Load failed:', e);
    return null;
  }
};

await AsyncStorage.removeItem('user'); // delete a single key
await AsyncStorage.clear();           // wipe everything (use carefully!)

import {
  Platform,      // detect iOS vs Android
  Dimensions,    // get screen size
  Linking,       // open URLs, emails, phone calls
  Vibration,     // trigger haptic motor
  Alert,         // native alert/confirm dialogs
  Keyboard,      // show/hide keyboard programmatically
  AppState,      // detect foreground/background state
  PixelRatio,    // convert between dp and actual pixels
} from 'react-native';

// Platform detection — branch your logic per platform
const isIOS = Platform.OS === 'ios';
const isAndroid = Platform.OS === 'android';
const version = Platform.Version; // iOS version number or Android API level

// Screen dimensions — useful for percentage-based layouts
const { width, height } = Dimensions.get('window');
const { width: screenWidth } = Dimensions.get('screen'); // includes status bar area

// Open any URL the OS knows how to handle
await Linking.openURL('https://flutter.dev');
await Linking.openURL('mailto:[email protected]');  // opens mail app
await Linking.openURL('tel:+1234567890');         // opens phone dialer

// Vibration — single pulse or pattern
Vibration.vibrate(500);                     // vibrate for 500ms
Vibration.vibrate([0, 200, 100, 200]);      // pattern: wait, vibrate, wait, vibrate

// Alert — native OS dialog (not a web alert)
Alert.alert(
  'Confirm',
  'Are you sure you want to delete this?',
  [
    { text: 'Cancel', style: 'cancel' },
    { text: 'Delete', style: 'destructive', onPress: handleDelete },
  ]
);

Keyboard.dismiss(); // hide the software keyboard

// Camera — request permission then open camera
import { Camera } from 'expo-camera';

// Location — ask permission, then get GPS coordinates
import * as Location from 'expo-location';
const { status } = await Location.requestForegroundPermissionsAsync(); // ask first
const location = await Location.getCurrentPositionAsync({});          // then fetch

// Push Notifications
import * as Notifications from 'expo-notifications';

// Image Picker — open photo library or camera
import * as ImagePicker from 'expo-image-picker';
const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsEditing: true,  // show crop interface
  quality: 0.8,         // compress to 80% quality
});

// Haptics — fine-grained haptic feedback (better than Vibration)
import * as Haptics from 'expo-haptics';
await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); // medium bump

import { Animated, Easing, Pressable, Text } from 'react-native';
import { useRef } from 'react';

function PulseButton() {
  const scale = useRef(new Animated.Value(1)).current; // start at normal size

  const onPressIn = () => {
    Animated.spring(scale, {
      toValue: 0.95,              // shrink to 95% on press
      useNativeDriver: true,      // ALWAYS use this — runs on UI thread, not JS
    }).start();
  };

  const onPressOut = () => {
    Animated.spring(scale, {
      toValue: 1,                 // spring back to full size
      tension: 300,
      friction: 10,
      useNativeDriver: true,      // animation lives on the native side
    }).start();
  };

  return (
    <Animated.View style={{ transform: [{ scale }] }}>  {/* apply animated value */}
      <Pressable onPressIn={onPressIn} onPressOut={onPressOut}>
        <Text>Press Me</Text>
      </Pressable>
    </Animated.View>
  );
}

// Fade-in animation on mount
function FadeIn({ children }) {
  const opacity = useRef(new Animated.Value(0)).current; // start invisible

  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,          // animate to fully visible
      duration: 500,
      easing: Easing.ease,
      useNativeDriver: true,
    }).start();
  }, []);

  return <Animated.View style={{ opacity }}>{children}</Animated.View>;
}

import Animated, {
  useAnimatedStyle,    // creates a style that reacts to shared values
  useSharedValue,      // value that lives on both JS and native side
  withSpring,          // spring physics animation
  withTiming,          // linear/easing animation
  useAnimatedGestureHandler,
  interpolate,
  Extrapolation,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';

function DraggableCard() {
  const translateX = useSharedValue(0); // x position, lives on UI thread
  const translateY = useSharedValue(0); // y position, lives on UI thread

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = translateX.value; // save starting position
      ctx.startY = translateY.value;
    },
    onActive: (event, ctx) => {
      // runs on UI thread — no JS bridge involved
      translateX.value = ctx.startX + event.translationX;
      translateY.value = ctx.startY + event.translationY;
    },
    onEnd: () => {
      translateX.value = withSpring(0); // spring back to center on release
      translateY.value = withSpring(0);
    },
  });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value }, // updated on UI thread each frame
      { translateY: translateY.value },
    ],
  }));

  return (
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Animated.View style={[styles.card, animatedStyle]}>
        <Text>Drag me!</Text>
      </Animated.View>
    </PanGestureHandler>
  );
}

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={renderItem}
  // Performance tuning props
  removeClippedSubviews={true}      // unmount views outside the viewport (Android)
  maxToRenderPerBatch={10}          // how many items render in one batch
  updateCellsBatchingPeriod={50}    // ms to wait between batches
  windowSize={10}                   // total items kept in memory (5 above + 5 below)
  initialNumToRender={10}           // items rendered on the very first paint
  getItemLayout={(data, index) => ( // tell FlatList exact height upfront — HUGE boost
    { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
  )}
/>

// React.memo — bail out of re-rendering if props didn't change
const PostCard = React.memo(({ title, body, onPress }) => {
  return (
    <Pressable onPress={onPress}>
      <Text>{title}</Text>
      <Text>{body}</Text>
    </Pressable>
  );
}); // React.memo wraps the component — same props = skip render

// useMemo — memoize expensive computation between renders
const filteredPosts = useMemo(
  () => posts.filter((p) => p.category === selectedCategory), // only re-runs if deps change
  [posts, selectedCategory]
);

// useCallback — stable function reference prevents child re-renders
const handlePress = useCallback((id) => {
  navigation.navigate('Details', { id }); // stable reference across renders
}, [navigation]);

// FastImage — drops in for Image but with aggressive caching and faster loading
import FastImage from 'react-native-fast-image';

<FastImage
  source={{
    uri: 'https://example.com/image.jpg',
    priority: FastImage.priority.high,            // load this before others
    cache: FastImage.cacheControl.immutable,      // cache forever (never re-fetch)
  }}
  style={{ width: 200, height: 200 }}
  resizeMode={FastImage.resizeMode.cover}
/>

// ❌ WRONG — inline objects are created fresh on every render
<View style={{ flex: 1, backgroundColor: 'red' }}>

// ✅ CORRECT — StyleSheet.create() is defined once, outside the component
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'red' } });
<View style={styles.container}>

// ❌ WRONG — anonymous arrow function in renderItem recreates on every FlatList render
<FlatList renderItem={({ item }) => <PostCard title={item.title} onPress={() => navigate(item.id)} />} />

// ✅ CORRECT — extract renderItem to a stable reference with useCallback
const renderItem = useCallback(({ item }) => (
  <PostCard title={item.title} onPress={() => navigate(item.id)} />
), [navigate]); // only recreated if navigate changes
<FlatList renderItem={renderItem} />

Metro Bundler (JavaScript bundler and dev server)
  ↓
Hermes engine (executes JS on-device)
  ↓
React Native DevTools / Flipper

Key tools:
- Shake device / Cmd+D (iOS sim) / Cmd+M (Android emu) → opens Dev Menu
- React DevTools — inspect component tree, props, state live
- Flipper — view network requests, inspect layouts, browse logs
- LogBox — in-app overlay that shows warnings and errors
- console.log() → appears in Metro terminal output and Flipper Logs tab

// __DEV__ is true in development, false in production builds
// Use it to gate debug-only logging so it doesn't ship to users
if (__DEV__) {
  console.log('Debug info:', data); // stripped from production builds
}

// Performance monitoring — measure how long operations take
import { Performance } from 'react-native';
performance.mark('start');
// ...expensive operation (e.g., parsing, sorting)
performance.measure('myOperation', 'start'); // logs elapsed time

// Start with Expo — recommended for most projects
npx create-expo-app@latest MyApp
cd MyApp
npx expo start     // runs Metro, opens in Expo Go on your phone

// Start with React Native CLI — when you need full native control
npx @react-native-community/cli@latest init MyApp
cd MyApp
npx react-native run-ios       // requires Xcode installed
// or
npx react-native run-android   // requires Android Studio + emulator