React Native Interview Questions

• React Native vs Expo? Expo = managed workflow with pre-built native modules, OTA updates, EAS build. Bare RN = full control but manual native setup. Start with Expo; eject only if needed

• How does the bridge work (new architecture)? Old: JS ↔ Bridge (async JSON serialization) ↔ Native. New Architecture (JSI): JS calls native synchronously via C++ interface — no serialization, lower latency

• How to optimize list performance? Use FlatList (not ScrollView for long lists), memo+keyExtractor, getItemLayout for fixed-height items, windowSize/maxToRenderPerBatch props, avoid anonymous render functions

• How to handle keyboard covering inputs? KeyboardAvoidingView with behavior="padding" (iOS) or "height" (Android). Or KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view

• StyleSheet.create vs plain objects? StyleSheet.create validates styles in dev, sends IDs not objects across bridge, enables native-side caching — always prefer it

• How to run code only on iOS or Android? Platform.OS === "ios", Platform.select({ios: ..., android: ...}), or file extensions: Component.ios.tsx / Component.android.tsx

• State management options? Same as React: Zustand (lightweight), Redux Toolkit (complex global state), React Query / TanStack Query for server state + React Context for simple sharing

React Native Essentials

Core Components

import {
  View, Text, TextInput, TouchableOpacity, Pressable,
  ScrollView, FlatList, Image, StyleSheet, Platform,
  SafeAreaView, KeyboardAvoidingView, ActivityIndicator,
} from 'react-native';

// Layout — flexbox by default (column direction)
const styles = StyleSheet.create({
  container: {
    flex: 1,                          // fill available space
    flexDirection: 'column',          // default (unlike web)
    backgroundColor: '#fff',
    paddingHorizontal: 16,
  },
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  card: {
    backgroundColor: '#f9fafb',
    borderRadius: 12,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,                     // Android shadow
  },
});

// FlatList — performant list (virtualised)
function UserList({ users }: { users: User[] }) {
  return (
    <FlatList
      data={users}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <UserCard user={item} />}
      ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
      ListEmptyComponent={<Text>No users found</Text>}
      onEndReached={loadMore}        // pagination
      onEndReachedThreshold={0.5}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
}

// Platform-specific code
const hitSlop = Platform.select({
  ios: { top: 10, bottom: 10, left: 10, right: 10 },
  android: { top: 8, bottom: 8, left: 8, right: 8 },
});

Navigation (Expo Router / React Navigation)

// Expo Router (file-based, recommended for new projects)
// app/index.tsx       → /
// app/profile.tsx     → /profile
// app/users/[id].tsx  → /users/:id
// app/(tabs)/home.tsx → tab layout

// app/users/[id].tsx
import { useLocalSearchParams, useRouter } from 'expo-router';

export default function UserScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();

  return (
    <View>
      <Text>User {id}</Text>
      <Pressable onPress={() => router.back()}>
        <Text>Go back</Text>
      </Pressable>
      <Pressable onPress={() => router.push('/settings')}>
        <Text>Settings</Text>
      </Pressable>
    </View>
  );
}

// app/(tabs)/_layout.tsx — tab navigation
import { Tabs } from 'expo-router';
export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="home" options={{ title: 'Home', tabBarIcon: ... }} />
      <Tabs.Screen name="profile" options={{ title: 'Profile' }} />
    </Tabs>
  );
}

Hooks & Native APIs

import { useState, useEffect, useCallback } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as SecureStore from 'expo-secure-store';
import * as Haptics from 'expo-haptics';
import { useColorScheme } from 'react-native';

// Persist data
await AsyncStorage.setItem('key', JSON.stringify(data));
const raw = await AsyncStorage.getItem('key');
const data = raw ? JSON.parse(raw) : null;

// Secure storage (keychain / keystore)
await SecureStore.setItemAsync('token', jwtToken);
const token = await SecureStore.getItemAsync('token');

// Haptics feedback
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);

// Dark mode
const colorScheme = useColorScheme(); // 'light' | 'dark'

// Custom hook: keyboard height
import { Keyboard, KeyboardEvent } from 'react-native';
function useKeyboardHeight() {
  const [height, setHeight] = useState(0);
  useEffect(() => {
    const show = Keyboard.addListener('keyboardDidShow', (e: KeyboardEvent) =>
      setHeight(e.endCoordinates.height)
    );
    const hide = Keyboard.addListener('keyboardDidHide', () => setHeight(0));
    return () => { show.remove(); hide.remove(); };
  }, []);
  return height;
}