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.

referencesbundle-r8-android.md

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

Skill: R8 Code Shrinking

Enable R8 for Android to shrink, optimize, and obfuscate native code.

Quick Config

// android/app/build.gradle
def enableProguardInReleaseBuilds = true

android {
    buildTypes {
        release {
            minifyEnabled true
            shrinkResources true
        }
    }
}

When to Use

  • Android app size too large
  • Want basic obfuscation to raise reverse-engineering effort, not as a security boundary
  • Building release APK/AAB

What is R8?

R8 replaces ProGuard in Android:

  • Shrinks: Removes unused code
  • Optimizes: Improves bytecode
  • Obfuscates: Renames classes/methods

Compatibility: Uses ProGuard configuration format.

Step-by-Step Instructions

1. Enable R8

Edit android/app/build.gradle:

def enableProguardInReleaseBuilds = true

This sets minifyEnabled = true for release builds.

2. Enable Resource Shrinking (Optional)

Further reduces size by removing unused resources:

android {
    buildTypes {
        release {
            minifyEnabled true
            shrinkResources true  // Requires minifyEnabled
            
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

For Expo projects, wire release minification through android.enableMinifyInReleaseBuilds and resource shrinking through android.enableShrinkResourcesInReleaseBuilds. In managed/prebuild projects, set these through expo-build-properties so they survive expo prebuild.

3. Configure ProGuard Rules (If Needed)

Edit android/app/proguard-rules.pro. React Native defaults are usually sufficient—only add rules when specific libraries break after enabling R8.

Only add if using Firebase (@react-native-firebase/*):

-keep class io.invertase.firebase.** { *; }
-dontwarn io.invertase.firebase.**

Only add if using Retrofit:

-keepattributes Signature
-keepattributes *Annotation*
-keep class retrofit2.** { *; }
-dontwarn retrofit2.**

See Common Library Rules and Troubleshooting for more examples.

4. Build and Test

cd android
./gradlew assembleRelease
# or
./gradlew bundleRelease

Critical: Test thoroughly! R8 can remove code it thinks is unused.

ProGuard Rules Reference

Rule Effect
-keep class X Don't remove class X
-keepclassmembers Keep members but allow rename
-keepnames Keep names but allow removal if unused
-dontwarn X Suppress warnings for X
-dontobfuscate Disable obfuscation

Keep Entire Package

-keep class com.mypackage.** { *; }

Keep Classes with Annotation

-keep @interface com.facebook.proguard.annotations.DoNotStrip
-keep @com.facebook.proguard.annotations.DoNotStrip class *
-keepclassmembers class * {
    @com.facebook.proguard.annotations.DoNotStrip *;
}

Disable Obfuscation (If Needed)

# proguard-rules.pro
-dontobfuscate

Use when:

  • Debugging crashes (stack traces more readable)
  • Library requires class names

Size Impact

Example from guide:

  • Without R8: 9.5 MB
  • With R8: 6.3 MB
  • Savings: 33%

Larger apps may see 20-30% reduction.

Troubleshooting

App Crashes After R8

Usually means needed class was removed.

Debug steps:

  1. Check crash log for class name
  2. Add keep rule:
    -keep class com.example.CrashedClass { *; }
  3. Rebuild and test

Library Specific Rules

Many libraries provide ProGuard rules. Check:

  • Library README
  • Library's consumer-proguard-rules.pro
  • Stack Overflow for library + proguard

Common Library Rules

# Hermes (usually auto-included)
-keep class com.facebook.hermes.unicode.** { *; }

# React Native
-keep class com.facebook.react.** { *; }

# Gson
-keepattributes Signature
-keep class com.google.gson.** { *; }

# OkHttp
-dontwarn okhttp3.**
-dontwarn okio.**

Verification

Check APK Size

# Build
./gradlew assembleRelease

# Check size
ls -la android/app/build/outputs/apk/release/

Use Ruler for Detailed Analysis

See bundle-analyze-app.md.

Verify Obfuscation

Decompile APK to check class names are obfuscated:

# Using jadx or similar
jadx android/app/build/outputs/apk/release/app-release.apk

Verify Runtime Behavior

Use agent-device to install or open the release build, navigate critical flows, capture snapshots/screenshots, and collect logs. If it is missing and release verification is needed, install it through the environment's approved/trusted path or ask the user to install or enable it. Read the agent-device skill or CLI help when available before writing exact commands.

Common Pitfalls

  • Not testing release build: Always QA with R8 enabled
  • Missing library rules: Check library docs
  • Over-keeping: Too many keep rules negates benefits
  • Reflection: Code using reflection may break

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.