Support react-native 0.87

.github/workflows/tests.yml

@@ -12,9 +12,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v7
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v7
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
@@ -27,9 +27,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v7
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v7
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
@@ -42,9 +42,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v7
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v7
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
@@ -61,9 +61,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v7
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v7
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
@@ -76,9 +76,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v7
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v7
         with:
           node-version-file: '.node-version'
       - name: Install dependencies

.node-version

@@ -1 +1 @@
-22.12.0
+24.21.0

.prettierignore

@@ -0,0 +1,2 @@
+packages/react-native-performance/android/build
+packages/react-native-performance/lib

examples/vanilla/App.tsx

@@ -3,13 +3,17 @@
  * https://github.com/facebook/react-native
  *
  * @format
- * @flow strict-local
  */
 
 import React, { Profiler, ProfilerOnRenderCallback } from 'react';
-import { StyleSheet, ScrollView, View, Text } from 'react-native';
-
-import { Header, Colors } from 'react-native/Libraries/NewAppScreen';
+import {
+  StyleSheet,
+  ScrollView,
+  View,
+  Text,
+  PlatformColor,
+  Platform,
+} from 'react-native';
 
 import performance, {
   setResourceLoggingEnabled,
@@ -29,13 +33,13 @@ const traceRender: ProfilerOnRenderCallback = (
   actualDuration, // time spent rendering the committed update
   baseDuration, // estimated time to render the entire subtree without memoization
   startTime, // when React began rendering this update
-  _commitTime, // when React committed this update
-  _interactions // the Set of interactions belonging to this update
-) =>
+  _commitTime // when React committed this update
+) => {
   performance.measure(id, {
     start: startTime,
     duration: actualDuration,
   });
+};
 
 const formatValue = (value: number, unit?: string) => {
   switch (unit) {
@@ -69,6 +73,7 @@ const App = () => {
   const [nativeMarks, setNativeMarks] = React.useState<
     PerformanceReactNativeMark[]
   >([]);
+  console.log(nativeMarks);
   const [resources, setResources] = React.useState<PerformanceResourceTiming[]>(
     []
   );
@@ -99,70 +104,62 @@ const App = () => {
 
   return (
     <Profiler id="App.render()" onRender={traceRender}>
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={styles.scrollView}
-      >
-        <Header />
-        <View style={styles.body}>
-          <View style={styles.sectionContainer}>
-            <Text style={styles.sectionTitle}>
-              performance.getEntriesByType('metric')
-            </Text>
-            {metrics.map(({ name, startTime, value, detail }) => (
-              <Entry
-                key={startTime}
-                name={name}
-                value={value as number}
-                unit={detail?.unit}
-              />
-            ))}
-          </View>
-          <View style={styles.sectionContainer}>
-            <Text style={styles.sectionTitle}>
-              performance.getEntriesByType('resource')
-            </Text>
-            {resources.map(({ name, duration, startTime }) => (
-              <Entry key={startTime} name={name} value={duration} />
-            ))}
-          </View>
-          <View style={styles.sectionContainer}>
-            <Text style={styles.sectionTitle}>
-              performance.getEntriesByType('react-native-mark')
-            </Text>
-            {nativeMarks.map(({ name, startTime }) => (
-              <Entry
-                key={`${name}:${startTime}`}
-                name={name}
-                value={startTime - performance.timeOrigin}
-              />
-            ))}
-          </View>
+      <ScrollView contentInsetAdjustmentBehavior="automatic">
+        <View style={styles.sectionContainer}>
+          <Text style={styles.sectionTitle}>
+            performance.getEntriesByType('metric')
+          </Text>
+          {metrics.map(({ name, startTime, value, detail }) => (
+            <Entry
+              key={startTime}
+              name={name}
+              value={value as number}
+              unit={detail?.unit}
+            />
+          ))}
+        </View>
+        <View style={styles.sectionContainer}>
+          <Text style={styles.sectionTitle}>
+            performance.getEntriesByType('resource')
+          </Text>
+          {resources.map(({ name, duration, startTime }) => (
+            <Entry key={startTime} name={name} value={duration} />
+          ))}
+        </View>
+        <View style={styles.sectionContainer}>
+          <Text style={styles.sectionTitle}>
+            performance.getEntriesByType('react-native-mark')
+          </Text>
+          {nativeMarks.map(({ name, startTime }) => (
+            <Entry
+              key={`${name}:${startTime}`}
+              name={name}
+              value={startTime - performance.timeOrigin}
+            />
+          ))}
         </View>
       </ScrollView>
     </Profiler>
   );
 };
 
+const labelColor = PlatformColor(
+  Platform.OS === 'android' ? '?android:attr/textColor' : 'label'
+);
+
 const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
   engine: {
     position: 'absolute',
     right: 0,
   },
-  body: {
-    backgroundColor: Colors.white,
-  },
   sectionContainer: {
     marginBottom: 20,
     paddingHorizontal: 24,
   },
   sectionTitle: {
     fontSize: 20,
     fontWeight: '600',
-    color: Colors.black,
+    color: labelColor,
     fontFamily: 'Courier',
     marginTop: 20,
     marginBottom: 10,
@@ -171,11 +168,11 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     fontSize: 14,
     fontWeight: '400',
-    color: Colors.dark,
+    color: labelColor,
     fontFamily: 'Courier',
   },
   footer: {
-    color: Colors.dark,
+    color: labelColor,
     fontSize: 12,
     fontWeight: '600',
     padding: 4,

examples/vanilla/Gemfile

@@ -8,3 +8,10 @@ gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
 gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
 gem 'xcodeproj', '< 1.26.0'
 gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'
+gem 'nkf'

examples/vanilla/Gemfile.lock

@@ -1,31 +1,21 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.7)
-      base64
-      nkf
-      rexml
-    activesupport (7.2.2.1)
-      base64
-      benchmark (>= 0.3)
-      bigdecimal
-      concurrent-ruby (~> 1.0, >= 1.3.1)
-      connection_pool (>= 2.2.5)
-      drb
+    CFPropertyList (3.0.9)
+    activesupport (6.1.7.10)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
-      logger (>= 1.4.2)
       minitest (>= 5.1)
-      securerandom (>= 0.3)
-      tzinfo (~> 2.0, >= 2.0.5)
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
+      tzinfo (~> 2.0)
+      zeitwerk (~> 2.3)
+    addressable (2.9.0)
+      public_suffix (>= 2.0.2, < 8.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
       json (>= 1.5.1)
     atomos (0.1.3)
-    base64 (0.2.0)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    benchmark (0.5.0)
+    bigdecimal (4.1.2)
     claide (1.1.0)
     cocoapods (1.15.2)
       addressable (~> 2.8)
@@ -66,34 +56,32 @@ GEM
     cocoapods-try (1.2.0)
     colored2 (3.1.2)
     concurrent-ruby (1.3.3)
-    connection_pool (2.5.0)
-    drb (2.2.1)
     escape (0.0.4)
-    ethon (0.16.0)
+    ethon (0.18.0)
       ffi (>= 1.15.0)
-    ffi (1.17.1)
+      logger
+    ffi (1.17.4)
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
     httpclient (2.9.0)
       mutex_m
-    i18n (1.14.7)
+    i18n (1.14.8)
       concurrent-ruby (~> 1.0)
-    json (2.10.2)
+    json (2.7.6)
     logger (1.7.0)
-    minitest (5.25.5)
+    minitest (5.25.4)
     molinillo (0.8.0)
     mutex_m (0.3.0)
     nanaimo (0.3.0)
     nap (1.1.0)
     netrc (0.11.0)
-    nkf (0.2.0)
+    nkf (0.3.0)
     public_suffix (4.0.7)
-    rexml (3.4.1)
+    rexml (3.4.4)
     ruby-macho (2.5.1)
-    securerandom (0.4.1)
-    typhoeus (1.4.1)
-      ethon (>= 0.9.0)
+    typhoeus (1.6.0)
+      ethon (>= 0.18.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     xcodeproj (1.25.1)
@@ -103,18 +91,24 @@ GEM
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
       rexml (>= 3.3.6, < 4.0)
+    zeitwerk (2.6.18)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   activesupport (>= 6.1.7.5, != 7.1.0)
+  benchmark
+  bigdecimal
   cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
   concurrent-ruby (< 1.3.4)
+  logger
+  mutex_m
+  nkf
   xcodeproj (< 1.26.0)
 
 RUBY VERSION
-   ruby 3.2.1p31
+   ruby 2.6.10p210
 
 BUNDLED WITH
-   2.6.0
+   2.4.10

examples/vanilla/android/app/build.gradle

@@ -19,9 +19,9 @@ react {
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to
-    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   skip the bundling of the JS bundle and the assets. Default is "debug", "debugOptimized".
     //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
+    // debuggableVariants = ["liteDebug", "liteDebugOptimized", "prodDebug", "prodDebugOptimized"]
 
     /* Bundling */
     //   A list containing the node command and its flags. Default is just 'node'.
@@ -102,7 +102,7 @@ android {
             // see https://reactnative.dev/docs/signed-apk-android.
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
         }
     }
 }

examples/vanilla/android/app/src/main/AndroidManifest.xml

@@ -9,6 +9,7 @@
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme"
+      android:usesCleartextTraffic="${usesCleartextTraffic}"
       android:supportsRtl="true">
       <activity
         android:name=".MainActivity"