feat: use anim+layout+draw sum for primary table

Compute per-frame UI thread time (animation + layout + draw) natively
so percentiles are statistically correct. Show this as the primary
metric on Android with avg/p95/p99.

Author: janicduplessis

example/modules/frame-metrics/android/src/main/java/expo/modules/framemetrics/FrameMetricsModule.kt

@@ -74,6 +74,9 @@ class FrameMetricsModule : Module() {
                     "avgAnimationTime" to 0.0,
                     "p95AnimationTime" to 0.0,
                     "p99AnimationTime" to 0.0,
+                    "avgUiThreadTime" to 0.0,
+                    "p95UiThreadTime" to 0.0,
+                    "p99UiThreadTime" to 0.0,
                     "avgLayoutTime" to 0.0,
                     "avgDrawTime" to 0.0,
                 )
@@ -86,6 +89,7 @@ class FrameMetricsModule : Module() {
             val dropped = totalDurations.count { it > 16.67 }
 
             val animDurations = samples.map { it.animationMs }.sorted()
+            val uiThreadDurations = samples.map { it.animationMs + it.layoutMs + it.drawMs }.sorted()
 
             mapOf(
                 "avgFrameTime" to avg,
@@ -97,6 +101,9 @@ class FrameMetricsModule : Module() {
                 "avgAnimationTime" to animDurations.average(),
                 "p95AnimationTime" to animDurations[(animDurations.size * 0.95).toInt().coerceAtMost(animDurations.size - 1)],
                 "p99AnimationTime" to animDurations[(animDurations.size * 0.99).toInt().coerceAtMost(animDurations.size - 1)],
+                "avgUiThreadTime" to uiThreadDurations.average(),
+                "p95UiThreadTime" to uiThreadDurations[(uiThreadDurations.size * 0.95).toInt().coerceAtMost(uiThreadDurations.size - 1)],
+                "p99UiThreadTime" to uiThreadDurations[(uiThreadDurations.size * 0.99).toInt().coerceAtMost(uiThreadDurations.size - 1)],
                 "avgLayoutTime" to samples.map { it.layoutMs }.average(),
                 "avgDrawTime" to samples.map { it.drawMs }.average(),
             )

example/modules/frame-metrics/src/index.ts

@@ -19,6 +19,12 @@ interface FrameMetricsResult {
   p95AnimationTime?: number;
   /** P99 animation time (Android only) */
   p99AnimationTime?: number;
+  /** Average UI thread time: anim + layout + draw (Android only) */
+  avgUiThreadTime?: number;
+  /** P95 UI thread time (Android only) */
+  p95UiThreadTime?: number;
+  /** P99 UI thread time (Android only) */
+  p99UiThreadTime?: number;
   /** Average layout/measure time (Android only) */
   avgLayoutTime?: number;
   /** Average draw time (Android only) */

example/src/demos/BenchmarkDemo.tsx

@@ -355,7 +355,7 @@ export function BenchmarkDemo() {
           {/* Primary table: animation time (Android) or frame time (iOS) */}
           <Text style={styles.subtitleText}>
             {isAndroid
-              ? 'Animation evaluator time per frame (ms). Lower is better.'
+              ? 'UI thread time per frame: anim + layout + draw (ms). Lower is better.'
               : 'Frame delivery time (ms). Lower is better.'}
           </Text>
           <View style={styles.tableHeader}>
@@ -368,9 +368,9 @@ export function BenchmarkDemo() {
           </View>
           {APPROACHES.filter((a) => results[a.key]).map((a) => {
             const r = results[a.key]!;
-            const avg = isAndroid ? r.avgAnimationTime ?? 0 : r.avgFrameTime;
-            const p95 = isAndroid ? r.p95AnimationTime ?? 0 : r.p95FrameTime;
-            const p99 = isAndroid ? r.p99AnimationTime ?? 0 : r.p99FrameTime;
+            const avg = isAndroid ? r.avgUiThreadTime ?? 0 : r.avgFrameTime;
+            const p95 = isAndroid ? r.p95UiThreadTime ?? 0 : r.p95FrameTime;
+            const p99 = isAndroid ? r.p99UiThreadTime ?? 0 : r.p99FrameTime;
             return (
               <View key={a.key} style={styles.tableRow}>
                 <Text