More in React Native — page 15
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.
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.
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.
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'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`.
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.
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.
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`.
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.
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.
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.