React Native Interview Questions and Answers: 60 Questions from Easy to Hard

const ROW_HEIGHT = 72;
const renderTxn = ({ item }) => <TxnRow txn={item} />;

<FlatList
  data={transactions}
  keyExtractor={item => item.id}
  renderItem={renderTxn}
  getItemLayout={(_, index) => ({
    length: ROW_HEIGHT,
    offset: ROW_HEIGHT * index,
    index,
  })}
  windowSize={7}
  maxToRenderPerBatch={8}
/>

// Bug: same array reference, the list never updates
const addItemBuggy = item => {
  cart.push(item);
  setCart(cart);
};

// Fix: a new array every time
const addItem = item => {
  setCart(prev => [...prev, item]);
};

<FlatList
  data={cart}
  extraData={selectedId}
  renderItem={renderCartRow}
/>

const Row = React.memo(function Row({ item, onPress, style }) {
  return (
    <Pressable onPress={() => onPress(item.id)} style={style}>
      <Text>{item.name}</Text>
    </Pressable>
  );
});

// Breaks memo: new function and object on every render
<Row item={item} onPress={id => open(id)} style={{ padding: 12 }} />

// Keeps memo: stable references
const handlePress = useCallback(id => open(id), [open]);
<Row item={item} onPress={handlePress} style={styles.row} />

const [seconds, setSeconds] = useState(60);

useEffect(() => {
  const id = setInterval(() => {
    setSeconds(seconds - 1);
  }, 1000);
  return () => clearInterval(id);
}, []);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [lastSeen, setLastSeen] = useState(Date.now());

  return (
    <AuthContext.Provider
      value={{ user, setUser, lastSeen, setLastSeen }}
    >
      {children}
    </AuthContext.Provider>
  );
}

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Orders" component={OrdersScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

<Stack.Navigator>
  <Stack.Screen
    name="Tabs"
    component={HomeTabs}
    options={{ headerShown: false }}
  />
  <Stack.Screen name="OrderDetails" component={OrderDetails} />
  <Stack.Screen name="Checkout" component={Checkout} />
</Stack.Navigator>

<Stack.Navigator>
  {userToken == null ? (
    <Stack.Screen name="SignIn" component={SignInScreen} />
  ) : (
    <>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </>
  )}
</Stack.Navigator>

const linking = {
  prefixes: ['myshop://', 'https://shop.example.in'],
  config: {
    screens: {
      Tabs: {
        screens: {
          Orders: 'orders',
        },
      },
      Product: {
        path: 'product/:id',
        parse: { id: Number },
      },
    },
  },
};

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

useEffect(() => {
  if (query.length < 2) return;
  const controller = new AbortController();
  const timer = setTimeout(async () => {
    try {
      const res = await fetch(
        `${API}/cities?q=${encodeURIComponent(query)}`,
        { signal: controller.signal },
      );
      setResults(await res.json());
    } catch (e) {
      if (e.name !== 'AbortError') setError(e);
    }
  }, 300);
  return () => {
    clearTimeout(timer);
    controller.abort();
  };
}, [query]);

function ProductGrid({ products }) {
  const { width } = useWindowDimensions();
  const columns = width >= 600 ? 3 : 2;

  return (
    <FlatList
      key={columns}
      numColumns={columns}
      data={products}
      renderItem={renderProduct}
    />
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 12,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 6,
      },
      android: { elevation: 4 },
    }),
  },
});

useFocusEffect(
  useCallback(() => {
    const onBack = () => {
      if (!hasUnsavedChanges) return false;
      Alert.alert('Discard changes?', '', [
        { text: 'Stay', style: 'cancel' },
        { text: 'Discard', onPress: () => navigation.goBack() },
      ]);
      return true;
    };
    const sub = BackHandler.addEventListener(
      'hardwareBackPress',
      onBack,
    );
    return () => sub.remove();
  }, [hasUnsavedChanges, navigation]),
);

async function ensureCamera() {
  if (Platform.OS !== 'android') return true; // iOS asks on first use
  const result = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.CAMERA,
    {
      title: 'Camera access',
      message: 'We need the camera to scan your PAN card.',
      buttonPositive: 'Allow',
    },
  );
  if (result === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN) {
    Linking.openSettings();
  }
  return result === PermissionsAndroid.RESULTS.GRANTED;
}

const fade = useRef(new Animated.Value(0)).current;

useEffect(() => {
  Animated.timing(fade, {
    toValue: 1,
    duration: 300,
    useNativeDriver: true,
  }).start();
}, [fade]);

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

const scale = useSharedValue(1);

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

const onLike = () => {
  scale.value = withSequence(withSpring(1.3), withSpring(1));
};

<Animated.View style={[styles.heart, heartStyle]} />

android {
    defaultConfig {
        versionCode 42
        versionName "2.3.0"
    }
    signingConfigs {
        release {
            storeFile file(MYAPP_UPLOAD_STORE_FILE)
            storePassword MYAPP_UPLOAD_STORE_PASSWORD
            keyAlias MYAPP_UPLOAD_KEY_ALIAS
            keyPassword MYAPP_UPLOAD_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}