React Native — Cheat Sheet
Tags: react-native, mobile, ios, android, hermes, fabric, metro, javascript
Level: intermediate
TL;DR: Cross-platform framework compiling React UI to native host components via New Architecture (Fabric, TurboModules) and Hermes engine.
Key concepts
-
Bridges JavaScript logic to native platform threads asynchronously in the legacy architecture.
-
New Architecture replaces the legacy bridge with JSI (JavaScript Interface) for synchronous C++ invocations.
-
Fabric is the concurrent native rendering system mapping React primitives directly to native view backends.
-
TurboModules provide lazy-loading for native device modules instead of eager initialization on startup.
-
Hermes is the default lightweight JavaScript engine optimized specifically for fast Android/iOS cold start.
-
Yoga is the underlying C++ layout engine implementing Flexbox for mobile platform rendering.
-
Metro bundler compiles JSX, TypeScript, and assets into a single platform-specific JS bundle.
-
Component lifecycle follows standard React execution with hooks, state reconcilers, and shadow trees.
-
FlatList uses windowing to virtualize large lists and conserve mobile memory footprints.
-
StyleSheet.create validates rules and optimizes style references across the native runtime layer.
Typical questions and ready answers
-
Q: How does the New Architecture differ from the legacy React Native bridge?R: I leverage JSI for direct C++ bindings between JS and native layers, eliminating JSON serialization bottlenecks and enabling synchronous rendering through Fabric.
-
Q: How do you troubleshoot performance regressions and dropped frames?R: I profile JS and UI threads with Flipper or React Profiler, virtualize lists, move animations to the native driver, and eliminate unnecessary re-renders.
-
Q: What is the difference between FlatList and ScrollView?R: I use ScrollView only for small static content because it renders everything immediately; I use FlatList for dynamic collections since it virtualizes offscreen rows.
-
Q: How do native UI events propagate to the JavaScript layer?R: Native views capture touch events, dispatch them via the platform event queue, and serialize them into React synthetic events handled in JS.
-
Q: When should you use TurboModules over traditional native modules?R: I use TurboModules for on-demand lazy initialization, which reduces application launch time and lowers startup memory overhead.
Pitfalls and common mistakes
-
Running heavy synchronous calculations on the JavaScript thread, which freezes user touch responses.
-
Forgetting useNativeDriver: true in Animated API calls, forcing animation steps over the JS thread.
-
Omitting getItemLayout on fixed-size FlatList elements, causing dynamic layout recalculation lag during scroll.
-
Storing large binary blobs directly in AsyncStorage instead of writing to the platform filesystem.
-
Relying on deep anonymous arrow functions inside list render items, creating unnecessary allocations per frame.
-
Misconfiguring Android ProGuard rules, which strips required native module reflection calls in release builds.
Snippets and commands
# Initialize a new project with modern template
npx @react-native-community/cli init MyApp
# Start Metro bundler with cache reset
npx react-native start --reset-cache
# Run debug build on connected Android device or emulator
npx react-native run-android
# Install CocoaPods dependencies for iOS target
bundle exec pod install --project-directory=iosTypeScript
```import React, { useCallback } from 'react';
import { FlatList, ListRenderItem, StyleSheet, Text, View } from 'react-native';
interface Item {
id: string;
title: string;
}
export const OptimizedList = ({ data }: { data: Item[] }) => {
const renderItem: ListRenderItem<Item> = useCallback(
({ item }) => (
<View style={styles.card}>
<Text style={styles.text}>{item.title}</Text>
</View>
),
[]
);
return (
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={renderItem}
getItemLayout={(_, index) => ({
length: 48,
offset: 48 * index,
index,
})}
initialNumToRender={10}
maxToRenderPerBatch={10}
windowSize={5}
removeClippedSubviews={true}
/>
);
};
const styles = StyleSheet.create({
card: {
height: 48,
justifyContent: 'center',
paddingHorizontal: 16,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#ccc',
},
text: {
fontSize: 14,
color: '#111',
},
});
```
To review
-
[ ] JSI direct host object memory layout and C++ bindings.
-
[ ] Fabric shadow node diffing algorithm versus React DOM reconciliation.
-
[ ] Custom TurboModule creation with Codegen specs.
-
[ ] Gesture Handler 2 integration with Reanimated 3 worklets.
-
[x] Hermes bytecode precompilation process.
-
[x] FlatList windowSize and virtualization mechanics.
-
[x] Flexbox cross-axis alignment defaults in Yoga.
References
-
React Native Official Documentation (reactnative.dev)
-
React Native Architecture Overview & Fabric Renderer Guide
-
Hermes Engine Technical Design & Benchmarks
