RN New Arch Performance Benchmarks

This repo aims to provide different scenarios to benchmark performance difference between the new RN architecture and the old one.

Scenario 1: Just display 10k views

• Code
• Results

Run performance test

1. In one terminal, run npx appium
2. In another run NEW_ARCH=false npx ts-node performance/manyviews.ts
3. Then run NEW_ARCH=true npx ts-node performance/manyviews.ts
4. Compare results with npx @perf-profiler/web-reporter results_*

More details on https://github.com/bamlab/android-performance-profiler

Scenario 2: Just display 1k texts

• Code
• Results

Install APKs

adb install apks/fabric-many-texts.apk
adb install apks/nofabric-many-texts.apk

Run performance test

1. In one terminal, run npx appium
2. In another run NEW_ARCH=false npx ts-node performance/manyviews.ts
3. Then run NEW_ARCH=true npx ts-node performance/manyviews.ts
4. Compare results with npx @perf-profiler/web-reporter results_*

More details on https://github.com/bamlab/android-performance-profiler

Scenario 3: Just display 100 tweets

• Code
• Results low end Android (Samsung A10s)
• Results low end Android (Moto X4)

Install APKs

adb install apks/fabric-100-tweets.apk
adb install apks/nofabric-100-tweets.apk

Run performance test

1. In one terminal, run npx appium
2. In another run NEW_ARCH=false npx ts-node performance/tweets.ts
3. Then run NEW_ARCH=true npx ts-node performance/tweets.ts
4. Compare results with npx @perf-profiler/web-reporter results_*

More details on https://github.com/bamlab/android-performance-profiler

Scenario 4: Just display 2k SVGs

• Code
• Results

Run performance test

1. In one terminal, run npx appium
2. In another run NEW_ARCH=false npx ts-node performance/svg.ts
3. Then run NEW_ARCH=true npx ts-node performance/svg.ts
4. Compare results with npx @perf-profiler/web-reporter results_*

More details on https://github.com/bamlab/android-performance-profiler

Scenario 5: Pokedex Flatlist

• Code
• Results low end Android (Samsung J3 2017)
• Results low end Android (Moto X4)
• Results high end Android (Samsung S10)

Install APKs

adb install apks/fabric-flatlist.apk
adb install apks/nofabric-flatlist.apk

Scenario 6: Navigation

• Code
• Results low end Android
  • App start
  • Tab navigation
  • Stack navigation
• Results high end Android (Pixel 6 Pro)
  • App start
  • Tab navigation
  • Stack navigation

Install APKs

adb install apks/navigation-fabric.apk
adb install apks/navigation-nofabric.apk

Run performance test

1. In one terminal, run npx appium
2. In another run NEW_ARCH=false npx ts-node performance/navigation.ts
3. Then run NEW_ARCH=true npx ts-node performance/navigation.ts
4. Compare results with npx @perf-profiler/web-reporter results_*

More details on https://github.com/bamlab/android-performance-profiler

Build APKs

1. Change scenario import in FabricEnabled/index.js

• At the moment, if using navigation scenario, you also need to git checkout navigation

2. Copy code to FabricDisabled

# Copy code
cp -R FabricEnabled/index.js FabricDisabled
cp -R FabricEnabled/scenarios FabricDisabled

3. Make release builds

# Run builds
cd FabricEnabled/android && ./gradlew assembleRelease
cd FabricDisabled/android && ./gradlew assembleRelease