Easy everything in Mobile Dev, page 10
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.
React Native's Image Component
The Image component is React Native's tool for displaying pictures from network URLs, local app assets, or the device's camera roll. The biggest footgun: you must manually set width and height for any image loaded from a URL or it won't appear.
React Native's Text Component: Beyond Displaying Words
The React Native <Text> component creates a special text layout context, not a Flexbox one. Use it for all text, nesting components to style parts of a sentence.
The View Component: React Native's UI Building Block
Think of View as the <div> of React Native. It’s the fundamental container for grouping and styling other components, used everywhere to structure layouts with flexbox. The footgun: Text must be in a <Text> component, not directly in a View.
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