React Native Mobile

The default flexDirection is 'column' in React Native, which differs from the web's default of 'row'. Children stack vertically from top to bottom unless you change flexDirection to 'row', 'row-reverse', or 'column-reverse'.

Apply style={{flex: 1}} or alignSelf: 'stretch' to the Text component. Without these, Text only wraps its content. flex: 1 grows the component to fill remaining space along the main axis.

SafeAreaView renders content within device areas not covered by notches, status bars, or home indicators. It's primarily useful on iOS devices with notches and works best with the react-native-safe-area-context library for cross-platform handling.

useState triggers a re-render when updated and is meant for state that affects the UI. useRef returns a mutable object (.current) that persists across renders without causing re-renders, ideal for storing references like timer IDs or previous values.

Stack.Navigator manages a stack of screens where users push and pop views, typically used for hierarchical navigation flows. Tab.Navigator displays a tab bar at the bottom (or top) for switching between peer-level screens, like in a settings interface.

The cleanup function returned from useEffect runs before the component unmounts and before the effect re-runs (if dependencies change). It's used to unsubscribe from listeners, cancel timers, or abort network requests to prevent memory leaks.

Use the fetch API: fetch('https://api.example.com/data').then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err)). For more advanced features, use the axios library which supports interceptors and automatic JSON parsing.

Expo is a framework and platform for React Native that provides prebuilt native modules, easier setup, OTA updates, and tools like Expo Go for quick testing. It reduces native configuration but historically limited access to custom native code (now improved with dev clients).

Use expo-image-picker (in Expo) or react-native-image-picker. Request permissions with PermissionsAndroid on Android or via the library's built-in request method on iOS, then call launchCameraAsync or launchCamera to capture images or videos.

Controlled components have their value managed by React state via value and onChange props. Uncontrolled components store their own state internally and are accessed via refs (like defaultValue). Controlled components give more predictable behavior and validation.

Create a style object that includes conditional properties: style={[styles.button, isActive && styles.activeButton]}. You can also build the style dynamically inside the component: const dynamicStyle = {backgroundColor: enabled ? 'blue' : 'gray'}.

useCallback returns a memoized version of a callback function that only changes if its dependencies change. It prevents unnecessary re-creation of functions on every render, which is useful when passing callbacks to memoized child components to avoid re-renders.