Mobile
90 bites tagged Mobile — interview questions with model answers, and 60-second explainers.
Managing Splash Screens in React Native
A splash screen bridges the gap between tapping your app icon and your React Native bundle finishing its load, preventing a jarring white screen. Use it to improve perceived performance during launch.
PermissionsAndroid: Requesting Runtime Permissions
PermissionsAndroid lets you ask for sensitive permissions like camera or location at runtime. Use its `request` method to show the native Android dialog. The biggest footgun is ignoring the `NEVER_ASK_AGAIN` result, which requires sending the user to system…
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.
React Native: Infinite Scroll with onEndReached
The `onEndReached` prop is a callback that fires when you scroll near a list's end, letting you fetch more data. Use it in `FlatList` for feeds or catalogs. The main footgun: it can fire multiple times, so use a loading flag to prevent redundant API.
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.
React Native Auth Flows: Conditional Navigators
Think of your app as having two sets of maps: one for guests, one for members. React Navigation swaps the entire map when a user logs in, not just moves them. This is the key to preventing users from back-navigating to the login screen after.
React Navigation Lifecycle: Screens Don't Unmount
Unlike the web, React Native screens don't unmount when you navigate away; they stay mounted to preserve state. This means a standard `useEffect` only runs once. To run code when a screen is shown, you must listen for the `focus` event.
Native Stack Navigator: Native Performance, Less Customization
Native Stack Navigator uses the OS's built-in screen management for smooth, performant transitions. Use it for standard screen stacks where a native look and feel is key.
Nested Navigators: Building Complex UI Flows
Think of nested navigators as UI building blocks, placing one navigator (like tabs) inside a screen of another (a stack). This creates flows like a main tab bar inside a stack for modals.
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.
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 Reanimated: Off-Thread Animations
Reanimated moves animations off the busy JavaScript thread onto the native UI thread. This ensures smooth, 60-120 fps performance for gestures and transitions, even during heavy JS computation.
RefreshControl: The Pull-to-Refresh Handler
RefreshControl adds the native "pull-to-refresh" spinner to your lists. Use it inside a ScrollView or FlatList to let users manually trigger a data update. The footgun: you must control the 'refreshing' prop manually or the spinner vanishes instantly.
The Gesture Responder System: Who Gets the Touch?
The Gesture Responder System is React Native's negotiation protocol that decides which component owns a touch. It's how the framework distinguishes a button tap from a scroll. The main footgun is that the deepest component wins the touch by default.
Platform.select: Write Once, Adapt Anywhere
Platform.select is a switch statement for your UI, letting you apply styles or components for iOS and Android from one object. It's ideal for tweaking styles in StyleSheet.create or rendering different components. The footgun is forgetting a `default` key.
React Native Modal: Presenting Content Above Other Views
A Modal is a temporary screen takeover, presenting content above your current view. Use it for critical alerts or forms that demand user focus. The main footgun: forgetting `onRequestClose` disables the Android back button, trapping your user.
Pressable: A More Powerful Way to Handle Touches
The Pressable API wraps any component to detect granular press stages like press-in, press-out, and long-press. Use it for custom interactive elements. The main footgun is forgetting to use `hitSlop` on small targets, making them difficult to tap.
React Native TextInput: Handling User Input
TextInput is your app's keyboard entry point. Use it for search bars and forms, configuring features like auto-capitalization and keyboard type. Be careful with styling: Android adds a default underline, and multiline mode can break single-side border styles.
Adding Native Code to Expo (The Modern 'Eject')
Adding native code to Expo no longer means 'ejecting'. You create a custom development build with your specific native modules. This is for when a library has native code not in the Expo SDK. The footgun is thinking you must abandon Expo's tools and services.
Expo Application Services (EAS): The Cloud Toolchain for React Native
Expo Application Services (EAS) is the cloud toolchain for production React Native apps. It handles complex native builds, app store submissions, and over-the-air updates. The main footgun is confusing it with the local `expo` CLI for development.
The React Native Bridge: Why It's Being Replaced
Think of the React Native Bridge as an asynchronous JSON message queue between your JavaScript code and the native UI. This design is the source of its core limitation: communication delays that cause visible UI jank and prevent modern React features.
Hermes: The JS Engine for Faster React Native Apps
Hermes is a JavaScript engine optimized for React Native that prioritizes fast startup and low memory use. It's the default for new apps, pre-compiling JS to bytecode at build time. The footgun: don't just check a global variable; benchmark release builds.
Styling in React Native with StyleSheet
StyleSheet is React Native's answer to CSS, defining styles in JavaScript to separate presentation from logic. Use `StyleSheet.create()` to define reusable style objects that get static type checking. The footgun is styling inline, which hurts performance.
Realm Database
Realm is an object oriented mobile database that stores your Swift model objects directly, without an ORM layer translating to and from SQL, and gives you live objects that automatically update in your UI whenever the underlying data changes.
Get Mobile bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.