react-native-best-practices

Malicious tool definition detected

## Quick Command ```bash # React Native CLI npx react-native bundle \ --entry-file index.js \ --bundle-output output.js \ --platform ios \ --sourcemap-output output.js.map \ --dev false --minify true && \ npx source-map-explorer output.js --no-border-checks # Expo EXPO_UNSTABLE_ATLAS=true npx expo export --platform ios && npx expo-atlas ``` ## When to Use - JS bundle seems too large - Want to identify heavy dependencies - Investigating startup time issues - Before/after optimization comparison >

Malicious tool definition detected

If misaligned libraries are found, trace them to source packages (see below) 4. Update, replace, or remove the affected dependencies For runtime testing, use the [16KB Android Emulator image][] or enable "Boot with 16KB page size" on Pixel 8/8a/9 devices.

Malicious tool definition detected

Malicious tool definition detected

Tool: react-native-best-practices/references/js-profile-react.md Description: --- title: Profile React Performance impact: MEDIUM tags: profiling, devtools, re-renders, flamegraph --- # Skill: Profile React Performance Identify unnecessary re-renders and performance bottlenecks in React Native apps using React Native DevTools. ## Quick Command ```bash # Open React Native DevTools (press 'j' in Metro terminal) # Or shake device → "Open DevTools" # Go to Profiler tab → Start profiling → Perform ac

Tool passed security scan

Malicious tool definition detected

Migrate to function components for full benefits.

Malicious tool definition detected

## Quick Command ```bash # Method 1: Built-in Perf Monitor # Shake device → Dev Menu → "Perf Monitor" # Method 2: Flashlight (Android, detailed reports) curl https://get.flashlight.dev | bash flashlight measure ``` ## When to Use - Animations feel choppy or janky - Scrolling is not smooth - Need baseline FPS metrics before/after optimization - Want to compare performance across builds ## Prerequisites - React Native app running on device/simulator - For Flashlight: Android device (iOS not suppor

Malicious tool definition detected

Stop to analyze ### Analyzing Results **Flame Graph:** - Zoom with scroll/pinch - Click to expand call stacks - Filter by keyword (e.g., "hermes") **Views:** - **Top Down**: From entry points down - **Bottom Up**: From slowest functions up - **Flame Chart**: Timeline visualization ### Reading the Call Stack Example analysis: ``` JS Thread activity after button press: - Event handler on main thread - Triggers JS work via sync JSI calls - Hermes processes React reconciliation - ~30% time in "commi

Tool passed security scan

Tool passed security scan

Tool passed security scan

Tool passed security scan