Concepts in React Native
React Native Core Components: Your UI Building Blocks
Think of Core Components as React Native's built-in LEGO bricks for UIs, translating your code into native Android and iOS views. Use them for layouts (View), text (Text), and lists (FlatList). The footgun: never use ScrollView for long lists.
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.
Flexbox: Responsive Layouts in React Native
Flexbox arranges components along a primary axis, creating responsive UIs without manual calculations. It's used for nearly all layout needs, from centering items to building complex grids.
Metro: The JavaScript Bundler for React Native
Metro bundles your React Native app's JavaScript, finding all modules, transpiling them for the device, and merging them into one file. It's what powers npx react-native start.
React Native: Platform-Specific Code
React Native lets you write platform-specific logic without ejecting. Use the Platform module for small style tweaks, and file extensions (.ios.js) for swapping entire components. The footgun is overusing Platform.select for complex UI, creating clutter.
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.
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.
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.
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.
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.
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.
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.
ScrollView: For Simple, Bounded Content
ScrollView is a container for a limited amount of scrollable content, rendering everything inside at once. Use it for short forms or articles where upfront loading is fine. The footgun: it's slow for long lists—use FlatList instead to avoid performance hits.
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.
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.
alignItems: Aligning Children on the Cross Axis
alignItems arranges children along the cross axis of a flex container. If items flow down (column), it aligns them left/right. If they flow across (row), it aligns them top/bottom. The footgun: alignSelf on a child overrides this parent property.
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.
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's Dimensions API: The Manual Approach
React Native's Dimensions API is a low-level way to get a one-time snapshot of screen or window sizes. Use it outside React components or when you need to subscribe to changes manually. The footgun is caching its value, as it won't update on rotation.
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