docs: added TimedRender for inline render measurement, picked it from…

… Tamagui Sandbox

App.js

@@ -2,13 +2,14 @@ import { Button, StyleSheet, Text, View } from "react-native";
 import { useState } from "react";
 import { useFonts } from "expo-font";
 
+import Dripsy from "./components/Dripsy";
 import EmotionNative from "./components/EmotionNative";
 import Native from "./components/ReactNative";
 import NativeWind from "./components/NativeWind";
 import Restyle from "./components/Restyle";
 import StyledComponents from "./components/StyledComponents";
 import Tamagui from "./components/Tamagui";
-import Dripsy from "./components/Dripsy";
+import TimedRender from "./components/TimedRender";
 import { Zephyr } from "./components/Zephyr";
 
 export default function App() {
@@ -68,7 +69,9 @@ export default function App() {
       />
       <Button title="Zephyr" onPress={onStyleTypePress("Zephyr")} />
       {styleType ? (
-        <Text style={styles.text}>Rendering with {styleType}</Text>
+        <TimedRender key={styleType}>
+          <Text style={styles.text}>Rendering with {styleType}</Text>
+        </TimedRender>
       ) : null}
       {renderStyleLibrary()}
     </View>

components/TimedRender.js

@@ -0,0 +1,27 @@
+/* picked from Tamagui Sandbox\
+ https://github.com/tamagui/tamagui/blob/a4cc57455c71287cc0ef995c4f55e52452504f79/apps/kitchen-sink/src/Sandbox.tsx#L82
+ */
+
+import { useLayoutEffect, useState } from "react";
+import { StyleSheet, Text } from "react-native";
+function TimedRender(props) {
+  const [start] = useState(Date.now());
+  const [end, setEnd] = useState(0);
+
+  useLayoutEffect(() => {
+    setEnd(Date.now());
+  }, []);
+
+  return (
+    <>
+      {!!end && <Text style={styles.text}>Took {end - start}ms</Text>}
+      {props.children}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: { color: "green", marginTop: 12, fontSize: 18 },
+});
+
+export default TimedRender;