feat: sample app updated

dream-sports-labs · Nov 14, 2024 · 60ac11d · 60ac11d
1 parent 1c26a6d
commit 60ac11d
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 40 deletions.
diff --git a/android/src/main/java/com/performancetracker/DrawEndEvent.kt b/android/src/main/java/com/performancetracker/DrawEndEvent.kt
@@ -5,7 +5,7 @@ import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
 import com.facebook.react.uimanager.events.RCTEventEmitter
 
-class DrawEndEvent(viewTag: Int, private val tagName: String, private  val drawTime: Double, private val renderTime: Double) : Event<DrawEndEvent>(viewTag) {
+class DrawEndEvent(viewTag: Int, private val tagName: String, private  val drawTime: Double, private val renderTime: Double, private val diffTime: Double?) : Event<DrawEndEvent>(viewTag) {
 
     override fun getEventName(): String {
         return EVENT_NAME
@@ -24,6 +24,11 @@ class DrawEndEvent(viewTag: Int, private val tagName: String, private  val drawT
         eventData.putString("tagName", tagName)
         eventData.putDouble("drawTime", drawTime)
         eventData.putDouble("renderTime", renderTime)
+        if (diffTime != null) {
+            eventData.putDouble("diffTime", diffTime)
+        } else {
+            eventData.putNull("diffTime")  // Explicitly set null if diffTime is null
+        }
         return eventData
     }
 

diff --git a/android/src/main/java/com/performancetracker/PerformanceTrackerStore.kt b/android/src/main/java/com/performancetracker/PerformanceTrackerStore.kt
@@ -29,6 +29,16 @@ object PerformanceTrackerStore {
         return eventSequence.any { it["tagName"] == tagName }
     }
 
+    fun getEventValue(tagName: String): Any? {
+        for (i in eventSequence.size - 1 downTo 0) {
+            val event = eventSequence[i]
+            if (event["tagName"] == tagName) {
+                return event["timestamp"]
+            }
+        }
+        return null
+    }
+
     override fun toString(): String {
         return eventSequence.joinToString(
             prefix = "[ ",

diff --git a/android/src/main/java/com/performancetracker/PerformanceTrackerView.kt b/android/src/main/java/com/performancetracker/PerformanceTrackerView.kt
@@ -10,6 +10,7 @@ class PerformanceTrackerView(context: Context) : ReactViewGroup(context) {
     var tagName: String = ""
     var eventTimeStamp = 0.0
     var isTrackingEnabled = true;
+    var startMarker = "";
 
     override fun onDraw(canvas: Canvas) {
         super.onDraw(canvas)
@@ -18,11 +19,18 @@ class PerformanceTrackerView(context: Context) : ReactViewGroup(context) {
             val reactContext: ReactContext = context as ReactContext
             val reactTag: Int = id
 
+            var diffTime: Double? = null;
             val time = System.currentTimeMillis().toDouble()
+
+            if (startMarker != "") {
+                val startTime = PerformanceTrackerStore.getEventValue(startMarker) as Double
+                diffTime = time - startTime;
+            }
+
             PerformanceTrackerStore.addEvent(tagName, time)
             val renderTime = time - eventTimeStamp
             UIManagerHelper.getEventDispatcherForReactTag(reactContext, reactTag)
-                ?.dispatchEvent(DrawEndEvent(reactTag, tagName, time, renderTime))
+                ?.dispatchEvent(DrawEndEvent(reactTag, tagName, time, renderTime, diffTime))
 
             PerformanceTrackerWriter.writeLogsInFile(tagName, time.toString(), context)
         }

diff --git a/android/src/main/java/com/performancetracker/PerformanceTrackerViewImpl.kt b/android/src/main/java/com/performancetracker/PerformanceTrackerViewImpl.kt
@@ -17,6 +17,10 @@ class PerformanceTrackerViewImpl {
         view.eventTimeStamp = value
     }
 
+    fun setStartMarker(view: PerformanceTrackerView, value: String?) {
+        view.startMarker = value ?: ""
+    }
+
     companion object {
         const val NAME = "PerformanceTrackerView"
     }

diff --git a/android/src/newarch/PerformanceTrackerViewManager.kt b/android/src/newarch/PerformanceTrackerViewManager.kt
@@ -45,6 +45,13 @@ class PerformanceTrackerViewManager :
         }
     }
 
+    @ReactProp(name = "startMarker")
+    override fun setStartMarker(view: PerformanceTrackerView?, value: String?) {
+        if (view != null) {
+            performanceTrackerViewImpl.setStartMarker(view, value)
+        }
+    }
+
     override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {
         val baseEventTypeConstants: Map<String, Any>? =
             super.getExportedCustomDirectEventTypeConstants()

diff --git a/android/src/oldarch/PerformanceTrackerViewManager.kt b/android/src/oldarch/PerformanceTrackerViewManager.kt
@@ -34,6 +34,13 @@ class PerformanceTrackerViewManager : ViewGroupManager<PerformanceTrackerView>()
         performanceTrackerViewImpl.setEventTimeStamp(view, value)
     }
 
+    @ReactProp(name = "startMarker")
+    fun setStartMarker(view: PerformanceTrackerView?, value: String?) {
+        if (view != null) {
+            performanceTrackerViewImpl.setStartMarker(view, value)
+        }
+    }
+
     override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any>? {
         val baseEventTypeConstants: Map<String, Any>? =
             super.getExportedCustomDirectEventTypeConstants()

diff --git a/example/android/gradle.properties b/example/android/gradle.properties
@@ -32,7 +32,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=true
+newArchEnabled=false
 
 # Use this property to enable or disable the Hermes JS engine.
 # If set to false, you will be using JSC instead.

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,52 +1,126 @@
-import { useState } from 'react';
-import { StyleSheet, Text, View, Button } from 'react-native';
+import { useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Button,
+  FlatList,
+  SafeAreaView,
+  StatusBar,
+  Platform,
+} from 'react-native';
 import { PerformanceTracker } from 'react-native-performance-tracker';
 
 PerformanceTracker.init({
   persistToFile: false,
 });
 
-export default function App() {
-  const [showPTView, setShowPTView] = useState(false);
-  const [res, _] = useState(0);
+interface ItemProps {
+  index: number;
+}
+
+const ItemCard = ({ index }: ItemProps) => {
+  const [endMarkers, setEndMarkers] = useState({
+    drawTime: '',
+    renderTime: '',
+    diffTime: '',
+  });
+
+  const isEnabled = index === 0 || index === 1;
+  return (
+    <PerformanceTracker
+      isEnabled={isEnabled}
+      startMarker="Screen_Mount"
+      tagName={`Item-${index}`}
+      eventTimeStamp={Date.now()}
+      style={{
+        margin: 20,
+      }}
+      onDrawEnd={({ nativeEvent }) => {
+        setEndMarkers({
+          drawTime: nativeEvent.drawTime.toString(),
+          renderTime: nativeEvent.renderTime.toString(),
+          diffTime: nativeEvent.diffTime?.toString() ?? '',
+        });
+      }}
+    >
+      <View
+        style={{
+          elevation: 1,
+          backgroundColor: 'white',
+          padding: 10,
+          height: 150,
+          width: '100%',
+          borderRadius: 20,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Text style={styles.text}>{`Card: ${index}`}</Text>
+        {isEnabled && (
+          <Text
+            style={styles.text}
+          >{`onDraw Timestamp: ${endMarkers.drawTime}`}</Text>
+        )}
+        {isEnabled && (
+          <Text
+            style={styles.text}
+          >{`Render Time: ${endMarkers.renderTime}ms`}</Text>
+        )}
+        {endMarkers.diffTime && (
+          <Text
+            style={styles.text}
+          >{`(Draw - Mount) Time: ${endMarkers.diffTime}ms`}</Text>
+        )}
+      </View>
+    </PerformanceTracker>
+  );
+};
 
+const DATA = new Array(100).fill(null);
+
+export default function App() {
   const getLogsFromNative = async () => {
-    await PerformanceTracker.getLogs();
+    const data = await PerformanceTracker.getLogs();
+    console.log(`Platform: ${Platform.OS} All events ${JSON.stringify(data)}`);
+  };
+
+  const resetEvents = async () => {
+    PerformanceTracker.resetLogs();
   };
+
+  useEffect(() => {
+    // Set Mount as T0 marker
+    PerformanceTracker.send('Screen_Mount', Date.now());
+  }, []);
+
   return (
-    <View>
-      <Button
-        title="Toggle Native View Display "
-        onPress={(e) => {
-          PerformanceTracker.send('Button_onPress', e.nativeEvent.timestamp);
-          setShowPTView(!showPTView);
+    <SafeAreaView style={{ flex: 1 }}>
+      <StatusBar />
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: 'white',
         }}
-      />
-      <Button title="GET ALL EVENTS" onPress={getLogsFromNative} />
-      {showPTView && (
-        <View style={styles.container}>
-          <PerformanceTracker
-            style={{ borderWidth: 1, flex: 1 }}
-            tagName={'Parent Tracker'}
-            eventTimeStamp={Date.now()}
-            onDrawEnd={() => {}}
-          >
-            <View
-              style={{
-                width: 200,
-                height: 200,
-                borderRadius: 100,
-                backgroundColor: 'pink',
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <Text>First View: {res}</Text>
-            </View>
-          </PerformanceTracker>
+      >
+        <Button title="Get All Events" onPress={getLogsFromNative} />
+        <Button title="Reset" onPress={resetEvents} />
+        <View
+          style={{
+            flex: 1,
+            backgroundColor: '#D3D3D3',
+          }}
+        >
+          <FlatList
+            initialNumToRender={10}
+            data={DATA}
+            renderItem={({ index }) => {
+              return <ItemCard index={index} />;
+            }}
+          />
         </View>
-      )}
-    </View>
+      </View>
+    </SafeAreaView>
   );
 }
 
@@ -61,4 +135,7 @@ const styles = StyleSheet.create({
     height: 60,
     marginVertical: 20,
   },
+  text: {
+    fontSize: 18,
+  },
 });
diff --git a/src/PerformanceTrackerViewNativeComponent.ts b/src/PerformanceTrackerViewNativeComponent.ts
@@ -9,9 +9,11 @@ interface FinishEventType {
   tagName: string;
   drawTime: Double;
   renderTime: Double;
+  diffTime?: Double;
 }
 
 export interface NativeProps extends ViewProps {
+  startMarker?: string;
   tagName: string;
   isEnabled?: boolean;
   eventTimeStamp: Double;