React Native Interview Questions and How to Answer Them (40+ Questions)

// React Native — this creates a real UILabel on iOS, a real TextView on Android
<Text style={{ fontSize: 18, color: '#333' }}>Hello, world</Text>

// Cordova — this renders an <p> tag inside a WebView
<p style="font-size: 18px; color: #333;">Hello, world</p>

JS Thread ──[JSON serialize]──> Bridge ──[JSON deserialize]──> Native Thread
Native Thread ──[JSON serialize]──> Bridge ──[JSON deserialize]──> JS Thread

// Old: asynchronous, serialized
NativeModules.CameraModule.takePicture(options, callback);

// New (TurboModule): synchronous reference, no serialization
const camera = TurboModuleRegistry.get<Spec>('CameraModule');
camera.takePicture(options); // direct C++ call

// This blocks the JS thread — causes dropped frames
const handlePress = () => {
  const result = heavyComputation(); // 300ms synchronous work
  setData(result);
};

// Better: move off the JS thread
const handlePress = async () => {
  const result = await runInWorker(() => heavyComputation());
  setData(result);
};

# Check if Hermes is enabled in your app
npx react-native info

# In your Metro bundle, you'll see .hbc (Hermes Bytecode) instead of .jsbundle

// android/app/build.gradle
project.ext.react = [
    enableHermes: true
]

// StyleSheet.create catches this at dev time
const styles = StyleSheet.create({
  container: {
    backgrondColor: '#fff', // typo! throws in dev
  },
});

// Plain object silently ignores the typo
const style = {
  backgrondColor: '#fff', // no error, no styling applied
};

// StyleSheet: sends { container: 1 } across the bridge on each render
// (the actual style object was sent once at creation time)
<View style={styles.container} />

// Inline object: re-serializes the full object on every render
<View style={{ padding: 16, backgroundColor: '#fff' }} />

// This can't be a StyleSheet — it depends on runtime state
<View style={[styles.base, { opacity: animatedValue }]} />

const styles = StyleSheet.create({
  base: {
    flex: 1,
    padding: 16,
  },
  active: {
    backgroundColor: '#007AFF',
  },
});

// Combine static StyleSheet with dynamic value
<View style={[styles.base, isActive && styles.active, { opacity: dynamicOpacity }]} />

// Wrong: forgetting that default flexDirection is 'column'
<View style={{ flex: 1 }}>
  {/* These stack vertically, not horizontally */}
  <Text>First</Text>
  <Text>Second</Text>
</View>

// Correct: explicit when you want horizontal layout
<View style={{ flex: 1, flexDirection: 'row' }}>
  <Text>First</Text>
  <Text>Second</Text>
</View>

// Full-screen container
<View style={{ flex: 1 }} />

// Center content both axes
<View style={{
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
}}>
  <Text>Centered</Text>
</View>

// Space items evenly
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 2 }} />
  <View style={{ flex: 1 }} />
</View>

// Before state update:
// Virtual tree: <View> <Text>0</Text> <Button /> </View>

// After setState({ count: 1 }):
// React diffs and finds only the Text changed
// Sends ONE update to native: "update Text node to '1'"

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>{count}</Text>           // only this updates
      <Button onPress={() => setCount(c => c + 1)} title="+" />  // this doesn't
    </View>
  );
};

// Without keys: React re-renders all items on insertion
{items.map(item => <Item text={item.text} />)}

// With keys: React identifies items by key, only updates what changed
{items.map(item => <Item key={item.id} text={item.text} />)}

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.OS === 'ios' ? 44 : 0, // status bar height
    shadowColor: Platform.OS === 'ios' ? '#000' : undefined,
    elevation: Platform.OS === 'android' ? 4 : undefined,
  },
});

const containerStyle = Platform.select({
  ios: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  android: {
    elevation: 5,
  },
  default: {
    // for web, desktop, etc.
  },
});

Button.ios.tsx       // loaded on iOS
Button.android.tsx   // loaded on Android
Button.tsx           // fallback for other platforms

// Button.ios.tsx
export const Button = () => (
  <TouchableOpacity style={styles.iosStyle}>...</TouchableOpacity>
);

// Button.android.tsx
export const Button = () => (
  <TouchableNativeFeedback>...</TouchableNativeFeedback>
);

// Usage — Metro resolves the right file automatically
import { Button } from './Button';

# Development: Metro serves the bundle live over HTTP
# The app fetches http://localhost:8081/index.bundle
npx react-native start

# Production: Metro builds a static bundle file
npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output android/app/src/main/assets/index.android.bundle

// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {
  resolver: {
    // Add custom file extensions
    assetExts: ['glb', 'gltf', 'png', 'jpg'],
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json'],
  },
  transformer: {
    // Custom transformer for SVGs
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

<TouchableOpacity
  activeOpacity={0.7}
  onPress={handlePress}
  onLongPress={handleLongPress}
>
  <Text>Press me</Text>
</TouchableOpacity>

<Pressable
  onPress={handlePress}
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed, // style changes on press
  ]}
>
  {({ pressed }) => (
    <Text style={pressed ? styles.textPressed : styles.text}>
      {pressed ? 'Pressing...' : 'Press me'}
    </Text>
  )}
</Pressable>

<Pressable
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  onPress={handlePress}
>
  <Icon name="close" size={16} /> {/* Small icon, large tap area */}
</Pressable>

const [count, setCount] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);

// Fragile: three separate state updates for one logical operation
const fetchUser = async () => {
  setIsLoading(true);
  setError(null);
  try {
    const user = await api.getUser(id);
    setUser(user);
    setIsLoading(false);
  } catch (e) {
    setError(e.message);
    setIsLoading(false);
  }
};

type State = {
  user: User | null;
  isLoading: boolean;
  error: string | null;
};

type Action =
  | { type: 'FETCH_START' }
  | { type: 'FETCH_SUCCESS'; payload: User }
  | { type: 'FETCH_ERROR'; payload: string };

const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'FETCH_START':
      return { user: null, isLoading: true, error: null };
    case 'FETCH_SUCCESS':
      return { user: action.payload, isLoading: false, error: null };
    case 'FETCH_ERROR':
      return { user: null, isLoading: false, error: action.payload };
  }
};

const UserProfile = ({ id }: { id: string }) => {
  const [state, dispatch] = useReducer(reducer, {
    user: null,
    isLoading: false,
    error: null,
  });

  const fetchUser = async () => {
    dispatch({ type: 'FETCH_START' });
    try {
      const user = await api.getUser(id);
      dispatch({ type: 'FETCH_SUCCESS', payload: user });
    } catch (e) {
      dispatch({ type: 'FETCH_ERROR', payload: e.message });
    }
  };
};

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

  // New function reference on every render
  const handlePress = () => {
    console.log('pressed');
  };

  return (
    <View>
      <Text>{count}</Text>
      <Button onPress={handlePress} /> {/* re-renders on every count change */}
      <ExpensiveList onItemPress={handlePress} /> {/* also re-renders */}
    </View>
  );
};

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

  // Same function reference unless dependencies change
  const handlePress = useCallback(() => {
    console.log('pressed');
  }, []); // empty deps: never recreated

  return (
    <View>
      <Text>{count}</Text>
      <Button onPress={handlePress} />
      <ExpensiveList onItemPress={handlePress} /> {/* skips re-render */}
    </View>
  );
};

// useCallback on handlePress is only useful if Button is wrapped in React.memo
const Button = React.memo(({ onPress, title }) => (
  <Pressable onPress={onPress}>
    <Text>{title}</Text>
  </Pressable>
));

// This adds overhead without benefit — handlePress has no dependencies
// and the component that receives it doesn't use React.memo
const handlePress = useCallback(() => {
  doSomethingSimple();
}, []);

const ProductList = ({ products, searchQuery, sortOrder }) => {
  // Without useMemo: this runs on every render
  // With useMemo: only runs when products, searchQuery, or sortOrder changes
  const filteredAndSorted = useMemo(() => {
    return products
      .filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()))
      .sort((a, b) =>
        sortOrder === 'asc' ? a.price - b.price : b.price - a.price
      );
  }, [products, searchQuery, sortOrder]);

  return (
    <FlatList
      data={filteredAndSorted}
      renderItem={({ item }) => <ProductCard product={item} />}
    />
  );
};

const UserCard = ({ userId, theme }) => {
  // Without useMemo: new object reference on every render
  // causes child components using this style prop to re-render
  const cardStyle = useMemo(() => ({
    backgroundColor: theme.colors.card,
    borderRadius: theme.radii.lg,
    padding: theme.spacing.md,
  }), [theme]);

  return <AnimatedCard style={cardStyle} />;
};

const TextInputFocus = () => {
  const inputRef = useRef<TextInput>(null);

  useEffect(() => {
    // Focus the input after mount
    inputRef.current?.focus();
  }, []);

  return <TextInput ref={inputRef} placeholder="Name" />;
};

const VoiceRecorder = () => {
  const recordingRef = useRef<Recording | null>(null);
  const [isRecording, setIsRecording] = useState(false);

  const startRecording = async () => {
    // Store the recording object without triggering re-render
    recordingRef.current = await Audio.Recording.createAsync(
      Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY
    );
    setIsRecording(true);
  };

  const stopRecording = async () => {
    await recordingRef.current?.stopAndUnloadAsync();
    recordingRef.current = null;
    setIsRecording(false);
  };
};

const usePrevious = <T>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

const Counter = () => {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <Text>
      Current: {count}, Previous: {prevCount ?? 'none'}
    </Text>
  );
};

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});

  const validate = () => {
    const newErrors: typeof errors = {};
    if (!email.includes('@')) newErrors.email = 'Valid email required';
    if (password.length < 8) newErrors.password = 'At least 8 characters';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = () => {
    if (validate()) {
      api.login({ email, password });
    }
  };

  return (
    <View>
      <TextInput
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
      />
      {errors.email && <Text style={styles.error}>{errors.email}</Text>}

      <TextInput
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      {errors.password && <Text style={styles.error}>{errors.password}</Text>}

      <Button onPress={handleSubmit} title="Log In" />
    </View>
  );
};

// Option 1: useReducer to batch all field updates
const [form, dispatch] = useReducer(formReducer, initialValues);

// Option 2: react-hook-form (uncontrolled by default, best performance)
import { useForm, Controller } from 'react-hook-form';

const { control, handleSubmit } = useForm({
  defaultValues: { email: '', password: '' },
});

<Controller
  control={control}
  name="email"
  rules={{ required: true, pattern: /\S+@\S+\.\S+/ }}
  render={({ field: { onChange, value }, fieldState: { error } }) => (
    <>
      <TextInput value={value} onChangeText={onChange} />
      {error && <Text>{error.message}</Text>}
    </>
  )}
/>

// ScrollView — renders ALL 500 items immediately
<ScrollView>
  {items.map(item => <ItemCard key={item.id} item={item} />)}
</ScrollView>

// FlatList — renders ~20 items, recycles views as you scroll
<FlatList
  data={items}
  keyExtractor={item => item.id}
  renderItem={({ item }) => <ItemCard item={item} />}
  // Performance tuning props:
  initialNumToRender={10}       // items rendered before first paint
  maxToRenderPerBatch={10}      // items added per render batch
  windowSize={5}                // units of screen height to render (above + below)
  removeClippedSubviews={true}  // detach off-screen views (Android)
  getItemLayout={(data, index) => ({  // skip dynamic measurement if items are fixed height
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

keyExtractor={item => item.id.toString()}

import { KeyboardAvoidingView, Platform, ScrollView } from 'react-native';

const CommentForm = () => (
  <KeyboardAvoidingView
    style={{ flex: 1 }}
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
  >
    <ScrollView>
      {/* content */}
    </ScrollView>
    <TextInput
      style={styles.input}
      placeholder="Add a comment..."
    />
  </KeyboardAvoidingView>
);

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const Form = () => (
  <KeyboardAwareScrollView>
    <TextInput ... />
    <TextInput ... />
    <TextInput ... />
    <Button ... />
  </KeyboardAwareScrollView>
);

useEffect(() => {
  const showSub = Keyboard.addListener('keyboardDidShow', (e) => {
    setKeyboardHeight(e.endCoordinates.height);
  });
  const hideSub = Keyboard.addListener('keyboardDidHide', () => {
    setKeyboardHeight(0);
  });

  return () => {
    showSub.remove();
    hideSub.remove();
  };
}, []);

type FetchState<T> = {
  data: T | null;
  isLoading: boolean;
  error: string | null;
  refetch: () => void;
};

const useFetch = <T>(url: string): FetchState<T> => {
  const [data, setData] = useState<T | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetch = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const json = await response.json();
      setData(json);
    } catch (e) {
      setError(e.message);
    } finally {
      setIsLoading(false);
    }
  }, [url]);

  useEffect(() => {
    fetch();
  }, [fetch]);

  return { data, isLoading, error, refetch: fetch };
};

// Usage — clean, no repeated logic
const UserScreen = ({ userId }) => {
  const { data: user, isLoading, error, refetch } = useFetch<User>(
    `/api/users/${userId}`
  );

  if (isLoading) return <ActivityIndicator />;
  if (error) return <ErrorView message={error} onRetry={refetch} />;
  return <UserProfile user={user} />;
};

// 1. Create context
type ThemeContextType = {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// 2. Custom hook for safe access
const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
};

// 3. Provider
const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const value = useMemo(() => ({
    theme,
    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light'),
  }), [theme]);

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

// 4. Consume
const Header = () => {
  const { theme, toggleTheme } = useTheme();
  return (
    <View style={{ backgroundColor: theme === 'dark' ? '#000' : '#fff' }}>
      <Button onPress={toggleTheme} title="Toggle" />
    </View>
  );
};

// BAD: new object reference on every render → all consumers re-render
const Provider = ({ children }) => (
  <AuthContext.Provider value={{ user, logout }}>
    {children}
  </AuthContext.Provider>
);

// GOOD: useMemo stabilizes the reference
const Provider = ({ children }) => {
  const value = useMemo(() => ({ user, logout }), [user]);
  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
};

import { Animated } from 'react-native';

const FadeIn = ({ children }) => {
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true, // CRITICAL: runs on UI thread, not JS thread
    }).start();
  }, []);

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

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

const SpringButton = () => {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Animated.View style={animatedStyle}>
      <Pressable
        onPressIn={() => { scale.value = withSpring(0.95); }}
        onPressOut={() => { scale.value = withSpring(1); }}
      >
        <Text>Press</Text>
      </Pressable>
    </Animated.View>
  );
};

import { LayoutAnimation, UIManager, Platform } from 'react-native';

// Required for Android
if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental?.(true);
}

const toggle = () => {
  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  setExpanded(e => !e); // layout change animates automatically
};

// App.tsx
const Stack = createNativeStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen
        name="Settings"
        component={SettingsScreen}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  </NavigationContainer>
);

app/
  index.tsx        → /
  profile.tsx      → /profile
  (tabs)/
    home.tsx       → /home (tab)
    search.tsx     → /search (tab)
  user/
    [id].tsx       → /user/:id (dynamic)

const linking = {
  prefixes: ['myapp://', 'https://myapp.com'],
  config: {
    screens: {
      Home: '',
      Profile: 'user/:id',
      Settings: 'settings',
    },
  },
};

<NavigationContainer linking={linking}>
  ...
</NavigationContainer>

// Navigating with params
navigation.navigate('Profile', {
  userId: '123',
  fromScreen: 'Home',
});

// Receiving params
const ProfileScreen = ({ route }) => {
  const { userId, fromScreen } = route.params;
  // ...
};

// TypeScript: type your params
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; fromScreen: string };
};

// WRONG: non-serializable objects crash deep links and state persistence
navigation.navigate('Profile', {
  user: userObject,      // large object
  onSuccess: () => {},   // function reference
  ref: componentRef,     // ref
});

// RIGHT: pass IDs, fetch data in the screen
navigation.navigate('Profile', {
  userId: user.id,       // just the ID
});

// Context is better than drilling params through 3 navigator levels
const CartContext = createContext<CartContextType>(null);

// Any screen can access the cart without passing it as a param
const CheckoutScreen = () => {
  const { items, total } = useCart();
};

// Screen A navigates to Screen B and wants a result back
navigation.navigate('ColorPicker', {
  onColorSelected: (color: string) => {
    setSelectedColor(color);
  },
});

// Screen B calls the callback
const ColorPicker = ({ route }) => {
  const { onColorSelected } = route.params;

  return (
    <FlatList
      data={colors}
      renderItem={({ item }) => (
        <Pressable onPress={() => {
          onColorSelected(item.hex);
          navigation.goBack();
        }}>
          <ColorSwatch color={item.hex} />
        </Pressable>
      )}
    />
  );
};

// Outer: Bottom tabs
const Tab = createBottomTabNavigator();

// Inner: Stack inside each tab
const HomeStack = createNativeStackNavigator();
const SearchStack = createNativeStackNavigator();

const HomeStackNavigator = () => (
  <HomeStack.Navigator>
    <HomeStack.Screen name="Home" component={HomeScreen} />
    <HomeStack.Screen name="ProductDetail" component={ProductDetailScreen} />
  </HomeStack.Navigator>
);

const SearchStackNavigator = () => (
  <SearchStack.Navigator>
    <SearchStack.Screen name="Search" component={SearchScreen} />
    <SearchStack.Screen name="SearchResults" component={SearchResultsScreen} />
  </SearchStack.Navigator>
);

// Root: Tabs containing stacks
const RootNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="HomeTab" component={HomeStackNavigator} />
    <Tab.Screen name="SearchTab" component={SearchStackNavigator} />
    <Tab.Screen name="Profile" component={ProfileScreen} />
  </Tab.Navigator>
);

// From inside HomeStack, navigate to a screen in SearchStack:
navigation.navigate('SearchTab', {
  screen: 'SearchResults',
  params: { query: 'react native' },
});

// Good for: theme, auth state, user preferences
// Avoid for: frequently-updating state (cart items, search results)

const AuthContext = createContext<AuthState | null>(null);

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState<User | null>(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// store/slices/cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] as CartItem[] },
  reducers: {
    addItem: (state, action: PayloadAction<CartItem>) => {
      state.items.push(action.payload); // Immer handles immutability
    },
    removeItem: (state, action: PayloadAction<string>) => {
      state.items = state.items.filter(i => i.id !== action.payload);
    },
  },
});

// Component
const Cart = () => {
  const items = useSelector((state: RootState) => state.cart.items);
  const dispatch = useDispatch();

  return (
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <CartItem
          item={item}
          onRemove={() => dispatch(cartSlice.actions.removeItem(item.id))}
        />
      )}
    />
  );
};

// store/useCartStore.ts
import { create } from 'zustand';

interface CartStore {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  total: () => number;
}

const useCartStore = create<CartStore>((set, get) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (id) => set((state) => ({
    items: state.items.filter(i => i.id !== id)
  })),
  total: () => get().items.reduce((sum, item) => sum + item.price, 0),
}));

// Component — no Provider needed
const Cart = () => {
  const { items, removeItem, total } = useCartStore();
  // ...
};

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

const useNetworkStatus = () => {
  const [isConnected, setIsConnected] = useState<boolean | null>(null);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      setIsConnected(state.isConnected);
    });
    return unsubscribe;
  }, []);

  return isConnected;
};

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

const cacheKey = (url: string) => `cache:${url}`;

const useCachedFetch = <T>(url: string) => {
  const [data, setData] = useState<T | null>(null);
  const isConnected = useNetworkStatus();

  useEffect(() => {
    const load = async () => {
      // Always show cached data first
      const cached = await AsyncStorage.getItem(cacheKey(url));
      if (cached) setData(JSON.parse(cached));

      // Update from network if online
      if (isConnected) {
        const fresh = await fetch(url).then(r => r.json());
        setData(fresh);
        await AsyncStorage.setItem(cacheKey(url), JSON.stringify(fresh));
      }
    };
    load();
  }, [url, isConnected]);

  return data;
};

// With React Query + offline support
import { useMutation, useQueryClient } from '@tanstack/react-query';

const useSendMessage = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: api.sendMessage,
    onMutate: async (newMessage) => {
      // Optimistic update — show message immediately
      await queryClient.cancelQueries(['messages']);
      const previous = queryClient.getQueryData(['messages']);
      queryClient.setQueryData(['messages'], (old: Message[]) => [
        ...old,
        { ...newMessage, id: Date.now(), status: 'sending' },
      ]);
      return { previous };
    },
    onError: (error, newMessage, context) => {
      // Rollback on failure
      queryClient.setQueryData(['messages'], context?.previous);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['messages']);
    },
  });
};

# 1. Flipper — React DevTools + Performance Monitor
# Enable in development build, shows JS/UI thread FPS in real time

# 2. React DevTools Profiler
# Records which components rendered, why, and for how long

# 3. Systrace (Android)
# chrome://tracing — shows native thread activity
adb shell atrace -a com.yourapp -t 10 -b 16384 \
  sched gfx view wm am dalvik > /tmp/trace.systrace

// Problem: re-rendering an expensive list item when parent state changes
const ExpensiveItem = ({ item, onPress }) => {
  // This recalculates on every parent render
  const processed = heavyTransform(item);
  return <View>...</View>;
};

// Fix 1: React.memo to skip re-renders when props haven't changed
const ExpensiveItem = React.memo(({ item, onPress }) => {
  const processed = useMemo(() => heavyTransform(item), [item]);
  return <View>...</View>;
});

// Fix 2: Move heavy work off the JS thread with InteractionManager
useEffect(() => {
  InteractionManager.runAfterInteractions(() => {
    // Runs after animations complete, won't compete with transitions
    loadHeavyData();
  });
}, []);

// This component is expensive to render and receives stable props
const UserAvatar = React.memo(({ userId, size }) => {
  const user = useUser(userId); // fetches from cache
  return (
    <FastImage
      source={{ uri: user.avatarUrl }}
      style={{ width: size, height: size, borderRadius: size / 2 }}
    />
  );
});

// Parent re-renders frequently (e.g., scroll position updates)
// Without React.memo: UserAvatar re-renders on every scroll event
// With React.memo: UserAvatar only re-renders when userId or size changes

// Memoizing a cheap component that always receives new props
const LoadingDot = React.memo(({ color }) => (
  <View style={{ width: 8, height: 8, backgroundColor: color }} />
));

// If color changes on every render anyway, memo's shallow comparison
// runs every render and never finds a match — pure overhead

const FeedItem = React.memo(
  ({ post, onLike }) => <PostCard post={post} onLike={onLike} />,
  (prevProps, nextProps) => {
    // Custom equality: only re-render if id or like count changed
    return (
      prevProps.post.id === nextProps.post.id &&
      prevProps.post.likeCount === nextProps.post.likeCount
    );
    // Note: onLike reference change is ignored
    // Only works if onLike is stable (useCallback)
  }
);

import FastImage from 'react-native-fast-image';

// FastImage uses SDWebImage (iOS) and Glide (Android)
// Built-in caching, better memory management, progressive loading
<FastImage
  source={{
    uri: 'https://cdn.example.com/photo.jpg',
    priority: FastImage.priority.normal,
    cache: FastImage.cacheControl.immutable,
  }}
  style={{ width: 200, height: 200 }}
  resizeMode={FastImage.resizeMode.cover}
/>

// Don't load a 2000x2000 image for a 100x100 thumbnail
// Use image CDN transformations:
const getOptimizedUrl = (url: string, width: number) => {
  const pixelWidth = width * PixelRatio.get(); // account for screen density
  return `${url}?w=${Math.round(pixelWidth)}&q=80&f=webp`;
};

<FastImage source={{ uri: getOptimizedUrl(photo.url, 100) }} style={{ width: 100, height: 100 }} />

const FeedCard = React.memo(({ item }) => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View
      onLayout={() => {}} // triggers measurement
      // Use Intersection Observer pattern or FlatList's viewability callbacks
    >
      {isVisible ? (
        <FastImage source={{ uri: item.imageUrl }} style={styles.image} />
      ) : (
        <View style={[styles.image, styles.placeholder]} /> // skeleton
      )}
    </View>
  );
});

const onViewableItemsChanged = useCallback(({ viewableItems }) => {
  const visibleIds = new Set(viewableItems.map(({ item }) => item.id));
  setVisibleIds(visibleIds);
}, []);

<FlatList
  data={items}
  onViewableItemsChanged={onViewableItemsChanged}
  viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
/>

// Navigation push triggers an animation
// Without InteractionManager, this runs during the transition → jank
const ProductDetailScreen = ({ route }) => {
  const { productId } = route.params;

  useEffect(() => {
    // This runs immediately, competing with the push animation
    fetchRelatedProducts(productId);
    loadProductReviews(productId);
    initializeAnalytics(productId);
  }, [productId]);
};

const ProductDetailScreen = ({ route }) => {
  const { productId } = route.params;
  const [secondaryDataLoaded, setSecondaryDataLoaded] = useState(false);

  useEffect(() => {
    // Primary data: load immediately (above the fold)
    fetchProductDetails(productId);

    // Secondary data: wait for the transition animation to finish
    const task = InteractionManager.runAfterInteractions(async () => {
      await Promise.all([
        fetchRelatedProducts(productId),
        loadProductReviews(productId),
      ]);
      setSecondaryDataLoaded(true);
    });

    return () => task.cancel();
  }, [productId]);
};

// Tell InteractionManager about your custom animations
const handle = InteractionManager.createInteractionHandle();

Animated.timing(animation, { toValue: 1, duration: 300 }).start(() => {
  InteractionManager.clearInteractionHandle(handle);
  // Now deferred work can run
});

// LEAK: subscription never removed
useEffect(() => {
  const subscription = DeviceEventEmitter.addListener('appStateChange', handler);
  // Missing cleanup!
}, []);

// FIX: return cleanup function
useEffect(() => {
  const subscription = DeviceEventEmitter.addListener('appStateChange', handler);
  return () => subscription.remove();
}, []);

// LEAK: setState called on unmounted component
const DataScreen = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => {
      setData(result); // may run after component unmounts
    });
  }, []);
};

// FIX: check if still mounted, or use AbortController
useEffect(() => {
  const controller = new AbortController();

  fetchData({ signal: controller.signal })
    .then(result => setData(result))
    .catch(e => {
      if (e.name === 'AbortError') return; // ignore cancelled requests
    });

  return () => controller.abort();
}, []);

// LEAK: timer fires after unmount
useEffect(() => {
  const timer = setInterval(pollForUpdates, 5000);
  // Missing cleanup!
}, []);

// FIX:
useEffect(() => {
  const timer = setInterval(pollForUpdates, 5000);
  return () => clearInterval(timer);
}, []);

useEffect(() => {
  const animation = Animated.loop(
    Animated.timing(spinValue, { toValue: 1, duration: 1000, useNativeDriver: true })
  );
  animation.start();
  return () => animation.stop();
}, []);

<FlatList
  data={thousandsOfItems}
  removeClippedSubviews={Platform.OS === 'android'}
  renderItem={renderItem}
/>

const ITEM_HEIGHT = 80;
const SEPARATOR_HEIGHT = 1;

<FlatList
  data={contacts}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: (ITEM_HEIGHT + SEPARATOR_HEIGHT) * index,
    index,
  })}
  ItemSeparatorComponent={() => <View style={{ height: SEPARATOR_HEIGHT }} />}
  renderItem={({ item }) => <ContactRow contact={item} style={{ height: ITEM_HEIGHT }} />}
/>

const [itemLayouts, setItemLayouts] = useState<{ [key: string]: { height: number; offset: number } }>({});

const onItemLayout = (id: string, event: LayoutChangeEvent) => {
  const { height } = event.nativeEvent.layout;
  setItemLayouts(prev => ({ ...prev, [id]: { height, offset: computeOffset(id) } }));
};

const FeedItem = React.memo(
  ({ post, onLike, onComment }) => {
    // expensive render
  },
  (prev, next) =>
    prev.post.id === next.post.id &&
    prev.post.likeCount === next.post.likeCount
);

const handleLike = useCallback((postId: string) => {
  dispatch(likePost(postId));
}, [dispatch]);

// Pass to FlatList — same reference means FeedItem won't re-render due to onLike
<FlatList
  renderItem={({ item }) => (
    <FeedItem post={item} onLike={handleLike} />
  )}
/>

<FlatList
  initialNumToRender={5}      // only render 5 items before first paint
  maxToRenderPerBatch={3}     // add 3 items per render batch (less jank)
  updateCellsBatchingPeriod={50} // ms between batches
  windowSize={7}              // 7 screen heights of rendered content
/>

// BAD: new function reference per render → FeedItem always re-renders
<FlatList
  renderItem={({ item }) => <FeedItem post={item} onLike={() => handleLike(item.id)} />}
/>

// GOOD: pass the item ID and let the item component build the handler
<FlatList
  renderItem={({ item }) => <FeedItem post={item} onLike={handleLike} />}
/>

// In FeedItem:
const FeedItem = React.memo(({ post, onLike }) => {
  const handlePress = useCallback(() => onLike(post.id), [post.id, onLike]);
  return <Pressable onPress={handlePress}>...</Pressable>;
});

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={renderItem}
  estimatedItemSize={80} // instead of getItemLayout
  keyExtractor={item => item.id}
/>

// ToastModule.java
public class ToastModule extends ReactContextBaseJavaModule {
  @Override
  public String getName() {
    return "ToastModule";
  }

  @ReactMethod
  public void show(String message, int duration) {
    Toast.makeText(
      getReactApplicationContext(),
      message,
      duration == 0 ? Toast.LENGTH_SHORT : Toast.LENGTH_LONG
    ).show();
  }
}

// ToastModule.m (iOS)
@implementation ToastModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(show:(NSString *)message
                  duration:(NSInteger)duration) {
  // iOS doesn't have Toast, so you'd show a custom overlay
}

@end

import { NativeModules } from 'react-native';

const { ToastModule } = NativeModules;

ToastModule.show('Hello from native', 0);

// NativeToastModule.ts — the spec file
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  show(message: string, duration: number): void;
}

export default TurboModuleRegistry.getEnforcing<Spec>('ToastModule');

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

// Write
await AsyncStorage.setItem('@user:token', JSON.stringify({ token, expiresAt }));

// Read
const raw = await AsyncStorage.getItem('@user:token');
const data = raw ? JSON.parse(raw) : null;

// Delete
await AsyncStorage.removeItem('@user:token');

// Multiple operations in one round trip
await AsyncStorage.multiSet([
  ['@prefs:theme', 'dark'],
  ['@prefs:lang', 'en'],
]);

import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

// Synchronous — no await needed
storage.set('user.token', token);
const token = storage.getString('user.token');
storage.set('user.notificationsEnabled', true);
const enabled = storage.getBoolean('user.notificationsEnabled');

// WatermelonDB — local-first database with sync
import { Database, Model, field } from '@nozbe/watermelondb';

class Post extends Model {
  static table = 'posts';
  @field('title') title: string;
  @field('body') body: string;
  @field('created_at') createdAt: number;
}

// 1. Request permissions (iOS only — Android grants by default)
import notifee, { AuthorizationStatus } from '@notifee/react-native';

const requestPermissions = async () => {
  const settings = await notifee.requestPermission();
  return settings.authorizationStatus === AuthorizationStatus.AUTHORIZED;
};

// 2. Get the FCM token
import messaging from '@react-native-firebase/messaging';

const getFCMToken = async () => {
  const token = await messaging().getToken();
  await api.saveDeviceToken(token); // send to your backend
  return token;
};

// 3. Handle foreground messages
useEffect(() => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    await notifee.displayNotification({
      title: remoteMessage.notification?.title,
      body: remoteMessage.notification?.body,
      android: {
        channelId: 'default',
        pressAction: { id: 'default' },
      },
    });
  });

  return unsubscribe;
}, []);

// 4. Handle notification taps (background/quit)
useEffect(() => {
  const unsubscribe = messaging().onNotificationOpenedApp((remoteMessage) => {
    navigation.navigate(remoteMessage.data?.screen as string);
  });

  // Check if the app was opened by a notification from quit state
  messaging()
    .getInitialNotification()
    .then((remoteMessage) => {
      if (remoteMessage) {
        navigation.navigate(remoteMessage.data?.screen as string);
      }
    });

  return unsubscribe;
}, []);

// 5. Handle token refresh
useEffect(() => {
  const unsubscribe = messaging().onTokenRefresh(async (newToken) => {
    await api.saveDeviceToken(newToken);
  });
  return unsubscribe;
}, []);

// Schedule a local notification
await notifee.createChannel({ id: 'reminders', name: 'Reminders' });

await notifee.createTriggerNotification(
  {
    title: 'Interview tomorrow',
    body: 'Your interview with Acme Corp is in 24 hours. Practice your answers.',
    android: { channelId: 'reminders' },
  },
  {
    type: TriggerType.TIMESTAMP,
    timestamp: interviewDate.getTime() - 24 * 60 * 60 * 1000,
  }
);

# Create a new Expo app
npx create-expo-app MyApp

# No native directories — Expo handles them
MyApp/
  app.json
  App.tsx
  package.json

# Build for app stores in the cloud — no local Xcode/Android Studio required
eas build --platform all

Client (React Native)
  ↕ WebSocket (real-time)
  ↕ REST (initial load, media upload)
Server
  ↕ Redis Pub/Sub (fan-out to multiple servers)
  ↕ PostgreSQL (persistence)
  ↕ S3 (media)

// Messages are server state → React Query + WebSocket sync
const useChatMessages = (conversationId: string) => {
  const queryClient = useQueryClient();

  // Initial load
  const { data: messages } = useQuery({
    queryKey: ['messages', conversationId],
    queryFn: () => api.getMessages(conversationId, { limit: 50 }),
  });

  // WebSocket sync
  useEffect(() => {
    const ws = new WebSocket(`wss://api.app.com/chat/${conversationId}`);

    ws.onmessage = (event) => {
      const message: Message = JSON.parse(event.data);
      queryClient.setQueryData(
        ['messages', conversationId],
        (old: Message[] = []) => [...old, message]
      );
    };

    return () => ws.close();
  }, [conversationId, queryClient]);

  return messages ?? [];
};

const useSendMessage = (conversationId: string) => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: api.sendMessage,
    onMutate: async (newMessage) => {
      const tempId = `temp-${Date.now()}`;
      const optimistic = { ...newMessage, id: tempId, status: 'sending' };

      queryClient.setQueryData(
        ['messages', conversationId],
        (old: Message[]) => [...old, optimistic]
      );

      return { tempId };
    },
    onSuccess: (serverMessage, _, context) => {
      queryClient.setQueryData(
        ['messages', conversationId],
        (old: Message[]) =>
          old.map(m => m.id === context?.tempId ? serverMessage : m)
      );
    },
    onError: (_, __, context) => {
      queryClient.setQueryData(
        ['messages', conversationId],
        (old: Message[]) =>
          old.map(m =>
            m.id === context?.tempId ? { ...m, status: 'failed' } : m
          )
      );
    },
  });
};

<FlatList
  data={messages}
  inverted // renders newest at bottom
  keyExtractor={m => m.id}
  renderItem={({ item }) => <MessageBubble message={item} />}
  // Don't use getItemLayout — messages have variable heights
  maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
/>

import { useInfiniteQuery } from '@tanstack/react-query';

type Post = { id: string; content: string; author: string };
type PageData = { posts: Post[]; nextCursor: string | null };

const useFeed = () => {
  return useInfiniteQuery({
    queryKey: ['feed'],
    queryFn: ({ pageParam = null }) =>
      api.getFeed({ cursor: pageParam, limit: 20 }),
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });
};

const FeedScreen = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isError,
    refetch,
  } = useFeed();

  const posts = useMemo(
    () => data?.pages.flatMap(page => page.posts) ?? [],
    [data]
  );

  const renderFooter = () => {
    if (!isFetchingNextPage) return null;
    return <ActivityIndicator style={{ padding: 20 }} />;
  };

  const onEndReached = useCallback(() => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);

  if (isLoading) return <FeedSkeleton />;
  if (isError) return <ErrorView onRetry={refetch} />;

  return (
    <FlatList
      data={posts}
      keyExtractor={post => post.id}
      renderItem={({ item }) => <PostCard post={item} />}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5} // trigger when 50% from the bottom
      ListFooterComponent={renderFooter}
      refreshControl={
        <RefreshControl refreshing={isLoading} onRefresh={refetch} />
      }
    />
  );
};

// Easy to test: no UI, no hooks
const formatDuration = (seconds: number): string => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, '0')}`;
};

test('formats duration correctly', () => {
  expect(formatDuration(90)).toBe('1:30');
  expect(formatDuration(3600)).toBe('60:00');
  expect(formatDuration(9)).toBe('0:09');
});

import { render, fireEvent, screen } from '@testing-library/react-native';

const LoginForm = ({ onSubmit }: { onSubmit: (email: string, password: string) => void }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  return (
    <View>
      <TextInput
        testID="email-input"
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
      />
      <TextInput
        testID="password-input"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Pressable testID="submit-button" onPress={() => onSubmit(email, password)}>
        <Text>Log In</Text>
      </Pressable>
    </View>
  );
};

test('calls onSubmit with email and password', () => {
  const onSubmit = jest.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  fireEvent.changeText(screen.getByTestId('email-input'), 'user@test.com');
  fireEvent.changeText(screen.getByTestId('password-input'), 'secret123');
  fireEvent.press(screen.getByTestId('submit-button'));

  expect(onSubmit).toHaveBeenCalledWith('user@test.com', 'secret123');
  expect(onSubmit).toHaveBeenCalledTimes(1);
});

import { setupServer } from 'msw/node';
import { rest } from 'msw';

const server = setupServer(
  rest.get('/api/user/:id', (req, res, ctx) => {
    return res(ctx.json({ id: req.params.id, name: 'Ana García' }));
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('shows user name after loading', async () => {
  render(<UserProfile userId="123" />);

  expect(screen.getByTestId('loading')).toBeTruthy();

  await screen.findByText('Ana García'); // waits for async render

  expect(screen.queryByTestId('loading')).toBeNull();
});

import * as Keychain from 'react-native-keychain';

// Store tokens securely
const saveTokens = async (accessToken: string, refreshToken: string) => {
  await Keychain.setGenericPassword(
    'tokens',
    JSON.stringify({ accessToken, refreshToken }),
    {
      service: 'com.myapp.auth',
      accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED,
    }
  );
};

// Read tokens
const getTokens = async () => {
  const credentials = await Keychain.getGenericPassword({ service: 'com.myapp.auth' });
  if (!credentials) return null;
  return JSON.parse(credentials.password);
};

// Clear on logout
const clearTokens = async () => {
  await Keychain.resetGenericPassword({ service: 'com.myapp.auth' });
};

let isRefreshing = false;
let failedQueue: Array<{ resolve: Function; reject: Function }> = [];

api.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;

    if (error.response?.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        // Queue the request until refresh completes
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        })
          .then(token => {
            originalRequest.headers.Authorization = `Bearer ${token}`;
            return api(originalRequest);
          });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      try {
        const { refreshToken } = await getTokens();
        const { data } = await api.post('/auth/refresh', { refreshToken });

        await saveTokens(data.accessToken, data.refreshToken);
        api.defaults.headers.Authorization = `Bearer ${data.accessToken}`;

        // Retry queued requests
        failedQueue.forEach(({ resolve }) => resolve(data.accessToken));
        failedQueue = [];

        return api(originalRequest);
      } catch (refreshError) {
        failedQueue.forEach(({ reject }) => reject(refreshError));
        failedQueue = [];
        await clearTokens();
        authStore.logout(); // redirect to login
        return Promise.reject(refreshError);
      } finally {
        isRefreshing = false;
      }
    }

    return Promise.reject(error);
  }
);

# Publish an OTA update with EAS Update
eas update --branch production --message "Fix login validation bug"

# Your app.json configures which branch to pull from
{
  "expo": {
    "updates": {
      "url": "https://u.expo.dev/your-project-id",
      "fallbackToCacheTimeout": 0,
      "checkAutomatically": "ON_LOAD"
    },
    "runtimeVersion": {
      "policy": "sdkVersion"
    }
  }
}

# Check which libraries are new-architecture compatible
npx react-native-new-architecture-check

# Or review manually: each library needs to either:
# a) Support TurboModules/Fabric natively
# b) Work in interop mode (the compatibility layer)

// android/gradle.properties
newArchEnabled=true

# ios/Podfile
ENV['RCT_NEW_ARCH_ENABLED'] = '1'

// Before: NativeModules
import { NativeModules } from 'react-native';
const { MyModule } = NativeModules;

// After: TurboModuleRegistry with TypeScript spec
import NativeMyModule from './NativeMyModule';
// NativeMyModule.ts defines the Spec interface, Codegen does the rest

# Sentry / Crashlytics: upload source maps at build time
# Sentry example:
npx sentry-cli react-native appcenter \
  --platform android \
  --bundle-id com.myapp \
  --release-name 1.2.3 \
  android/app/src/main/assets/index.android.bundle

# Manual symbolication with metro-symbolicate
cat crash.log | npx metro-symbolicate ./main.jsbundle

# Build in release mode locally
cd android && ./gradlew assembleRelease
react-native run-android --variant=release

# Enable production JS (no dev mode)
npx react-native bundle --platform android --dev false ...

// Sentry breadcrumbs for tracking user path before crash
import * as Sentry from '@sentry/react-native';

const fetchProduct = async (id: string) => {
  Sentry.addBreadcrumb({
    category: 'product',
    message: `Fetching product ${id}`,
    level: 'info',
  });

  try {
    const product = await api.getProduct(id);
    return product;
  } catch (e) {
    Sentry.captureException(e, {
      extra: { productId: id },
    });
    throw e;
  }
};