All skills
callstackincubator avatar

/react-native-best-practices

@fa0bad0 official

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

Use this Skill: https://skilld.dev/gh/callstackincubator/agent-skills/react-native-best-practices

This session only. Nothing lands on disk.

referencesnative-android-16kb-alignment.md

≈941 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Android 16 KB page size alignment


Quick Reference

Item Details
Google Play requirement Apps and updates targeting Android 15+ must support 16 KB page sizes on 64-bit devices
React Native support RN 0.79+ includes aligned RN-provided native binaries; still verify third-party .so files
What to check Third-party native libraries (.so files)
Official documentation developer.android.com/guide/practices/page-sizes

Quick Command

Verify generated APK alignment using Android's official zipalign tool:

zipalign -c -P 16 -v 4 app-release.apk

If any 64-bit libraries (arm64-v8a, x86_64) show misalignment, they need updating.

For deeper ELF-level inspection, use Android's check_elf_alignment.sh script.


When to Check

React Native 0.79+ builds core binaries with correct alignment. However, third-party native libraries may still be misaligned. Check alignment when:

  • Adding or updating SDKs with native code
  • Preparing a release for Google Play
  • Investigating crashes on Android 15+ devices with 16 KB page size

CI Integration

Add alignment checks to your release pipeline after producing release APKs. If you ship AABs, generate device APKs with your normal release tooling or bundletool, then run zipalign on those APKs:

zipalign -c -P 16 -v 4 app-release.apk 2>&1 | tee alignment.log
if grep -q "Verification FAILED" alignment.log; then exit 1; fi

Step-by-Step

  1. Build your release artifact
  2. Generate or locate the release APK(s)
  3. Run zipalign verification (see Quick Command)
  4. If misaligned libraries are found, trace them to source packages (see below)
  5. 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.


Tracing Misaligned Libraries

When zipalign reports a misaligned library like libfoo.so, find its source package:

# Find the .so file in node_modules
find node_modules -name "libfoo.so" 2>/dev/null

# Or search gradle files for references
grep -r "foo" node_modules/*/android --include="*.gradle" 2>/dev/null

Once identified, update the dependency or contact the vendor for a 16KB-compatible build.


Common Pitfalls

  • Waiting for Play Store rejection instead of checking in CI
  • Assuming a React Native upgrade rebuilds third-party native binaries
  • Only checking 32-bit ABIs (armeabi-v7a, x86) — these are not affected
  • Using zipalign without the -P 16 flag (checks 4 KB, not 16 KB)
  • Validating only debug builds

Fixing Alignment Issues

Alignment issues require rebuilding the native library with a compatible toolchain. Repackaging alone does not fix them.

See official remediation steps for detailed guidance.


Related Skills

Source: SKILL.md on GitHub

1 alert17d5 checks · Risk SAFE
  • Gen Agent Trust Hub17d

    This skill provides a comprehensive performance optimization guide for React Native applications. It contains standard developer workflows using command-line tools and patterns for advanced techniques like remote code splitting, which include detailed security hardening advice.

  • Socket17d

    No alerts

  • Snyk17d

    Risk: LOW · No issues

  • Runlayer7mo

    11/31 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Signed by skilld at fa0bad0. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 weeks ago.

Activeupdated 2 months ago
  • Performance
  • react-native
  • optimization
  • profiling
  • fps
  • bundle-size
  • memory
  • hermes
  • flatlist
  • animations

README badge

README badge for callstackincubator/agent-skills/react-native-best-practices

Provides React Native performance optimization guidelines covering FPS, TTI, bundle size, memory leaks, re-renders, and animations. Includes reference documentation for Hermes, FlashList, Turbo Modules, React Compiler, Reanimated, and profiling with Xcode and Android Studio.

Generated from the current SKILL.md.

Does this skill cover Expo apps?
Yes. The guidelines apply to both bare React Native and Expo projects. Expo SDK 52+ supports tree shaking and Re.Pack code splitting.
What performance metrics should I measure first?
Start with FPS (use React Native DevTools), Time To Interactive (TTI), bundle size, and memory growth. The skill emphasizes measuring baseline metrics before and after optimization to validate improvements.
Does this cover Hermes optimization?
Yes. The skill includes Hermes-specific guidance such as disabling JS bundle compression on Android to enable mmap, and checking Hermes API coverage before removing polyfills.
What if I'm using a list library other than FlatList or FlashList?
The skill prioritizes FlatList and FlashList as virtualized replacements for ScrollView. It includes library version checks (e.g., FlashList v2 API changes) but focuses on these two libraries.
Does this include native profiling guidance?
Yes. The skill covers profiling with Xcode Instruments (iOS) and Android Studio CPU Profiler, plus guidance on native threading, Turbo Modules, and C++ performance-critical code.

Generated from the current SKILL.md. These answers refresh after source changes.