Easy everything in Mobile Dev, page 10
React Native's Share API: Use the Native Share Sheet
The React Native Share API opens the native OS share sheet, letting users share content like URLs or text. It provides a familiar UI with a single cross-platform method call.
Handling Permissions in React Native
A unified permissions API gives you one way to request device features, avoiding separate logic for iOS and Android. It's essential for apps needing the camera or location. The main footgun is forgetting to configure the native project files.
useNativeDriver: Offload Animations from the JS Thread
useNativeDriver offloads animations from the JavaScript thread to the native UI thread for smoother performance. Use it in Animated API calls to prevent dropped frames.
Animated: Drive Styles with Values, Not Setters
React Native's Animated API lets you drive styles with a value, not manual setters. Use it for performant fades and slides. The biggest footgun is forgetting useNativeDriver: true, which keeps animations smooth by running them off the JS thread.
Animated.Value: The Driver for React Native Animations
Animated.Value is a single number that drives multiple UI properties, like one dimmer switch controlling many lights. Use it to fade, move, or scale components. The main footgun: you cannot read its value synchronously and must use an asynchronous listener.
ActionSheetIOS: Native iOS Action Menus
ActionSheetIOS presents a native iOS menu sliding up from the bottom, offering users contextual choices. It's ideal for simple actions like "Delete" or "Save" and can also trigger the native share sheet.
SafeAreaView: Avoid Notches and Status Bars (Deprecated)
SafeAreaView was a component that automatically padded your UI to avoid device notches and system bars. It was a simple way to keep content visible on iOS, but it is now deprecated. The modern approach is to use the react-native-safe-area-context library.
Axios: A Simpler Way to Make HTTP Requests
Axios simplifies making network requests by wrapping native browser APIs in a promise-based client. Use it to GET or POST data in any JavaScript app. The main footgun is forgetting requests are asynchronous; you must use async/await to get the data.
React Native: Making Network Requests with Fetch
fetch is your app's tool for requesting server data. It's asynchronous, returning a promise for a future response. Use it for API calls like loading profiles or posting updates. The footgun: always catch errors, or they will fail silently.
useReducer: Manage Complex State with Predictable Actions
useReducer centralizes complex state logic. Instead of setting state directly, you "dispatch" actions describing what happened. It's ideal for state with many sub-values or when the next state depends on the previous one.
React Context API: Avoid Prop Drilling
React Context is like a global announcement system for a component tree, letting distant children access data without passing it through every intermediate component. Use it for app-wide state like themes or user authentication.
Props Drilling: Passing Data Through Components
Props drilling is passing data through components that don't need it, just to get it to a deeply nested child. It's React's most direct way to share state down the component tree. The footgun: this couples intermediate components to data they never use.
SectionList: Displaying Grouped Data Efficiently
SectionList renders long lists grouped into sections, like a contact list. It virtualizes content, rendering only visible items to save memory. A common footgun: it won't re-render on external state changes unless you pass that state via the extraData prop.
FlatList: Performant Virtualized Lists in React Native
FlatList is a "window" over your data, only rendering visible items to save memory and keep scrolling smooth. It's ideal for long lists like feeds or contacts. The main footgun: if items don't update, you forgot to pass changing state to the extraData prop.
Passing Data to Routes in React Native
Think of it like passing arguments to a function. When you navigate to a new screen, you give it the data it needs, like a product ID. This is key for master-detail views. The footgun: only pass JSON-serializable data to avoid breaking state persistence.
Drawer Navigator: Your App's Slide-Out Main Menu
A Drawer Navigator is your app's slide-out 'hamburger' menu. Use it for primary navigation between distinct sections like Home, Profile, and Settings. A common footgun is misconfiguring backBehavior, leading to non-intuitive back button actions for users.
Stack Navigator: JavaScript-based Screen Transitions
Stack Navigator treats your screens like a stack of cards: push a new screen on top, pop it off to go back. It’s ideal for standard navigation flows, but its JavaScript-based implementation means you trade the performance of a native solution for…
React Native Slider: Selecting a Value from a Range
A slider is a visual control for selecting a numeric value from a range, like a volume knob. Use it for settings like brightness or price filters. The main footgun is forgetting to capture the slider's value in your app's state on value change.
React Native's Controlled Switch Component
The Switch component is a 'controlled' input; it doesn't manage its own state. You use it for on/off settings by telling it what to display via the value prop and updating that state in the onValueChange callback. The footgun is forgetting this link.
React Native's Basic Button Component
The Button component is React Native's 'easy button' for basic user interactions. It renders a native-looking button with just a title and onPress handler. Its main footgun is its lack of styling options; for custom designs, use Pressable instead.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles