React Native Reference

View is the fundamental container component in React Native, equivalent to a div in HTML. It is used to group and layout other components using Flexbox. Text is the only component that can display string content — unlike the web, in React Native you cannot render raw text outside a Text component. Every piece of visible text must be wrapped in a Text (or a component that renders Text internally).

Use FlatList instead of ScrollView for long or dynamic lists. FlatList uses virtualization — it only renders the items currently visible on screen plus a small buffer, keeping memory usage low even with thousands of items. You must provide a data array, a keyExtractor function returning a unique string per item, and a renderItem function that returns the JSX for each row.

React Navigation provides navigator components like createStackNavigator() for push/pop screen transitions and createBottomTabNavigator() for tab-bar navigation. Wrap your screens inside a navigator, then use the navigation prop that React Navigation injects into every screen component. Call navigation.navigate("ScreenName", { param: value }) to move to another screen and pass data, and read params with route.params.

StyleSheet.create() validates style properties at development time and can apply performance optimizations on some React Native bridges by sending style IDs instead of full objects over the bridge. Inline styles create a new object on every render, which can slow down components that re-render frequently. For static or rarely-changing styles, always prefer StyleSheet.create(). Dynamic styles (computed at runtime) can be inline or merged with StyleSheet styles using an array syntax.

Use Platform.select({ ios: value, android: value }) inside a StyleSheet to apply platform-specific values. For example, set paddingTop to 44 on iOS (to account for the notch) and 0 on Android. You can also use Platform.OS === "ios" in conditional logic, or create separate files with .ios.js and .android.js extensions that React Native will automatically pick up for the correct platform.

AsyncStorage (from @react-native-async-storage/async-storage) is a simple, persistent, unencrypted key-value store for React Native. Use it to save user preferences, auth tokens, or app state that should survive app restarts. All operations are asynchronous and return Promises, so use await AsyncStorage.setItem("key", "value") and await AsyncStorage.getItem("key"). For sensitive data like passwords, use a secure storage library instead.

Use useState for local component state (form inputs, toggle visibility). Use useContext for medium-complexity shared state like theme or locale that a subtree of components needs. Use Redux Toolkit when your app has complex state logic that many disconnected components need to read and update, when you need time-travel debugging with Redux DevTools, or when state updates depend on the previous state in non-trivial ways. Redux Toolkit's createSlice simplifies boilerplate significantly compared to plain Redux.

Setting useNativeDriver: true in Animated.timing() or Animated.spring() moves the animation to the native thread, bypassing the JavaScript bridge entirely. This gives you smooth 60fps animations even when the JS thread is busy. The trade-off is that only a subset of style properties (transform, opacity) support the native driver. Layout-affecting properties like width, height, and top/left cannot use useNativeDriver and must run on the JS thread.