FormidableLabs · atanaskanchev · Jul 29, 2023 · Jul 29, 2023
diff --git a/package.json b/package.json
@@ -9,24 +9,24 @@
     ]
   },
   "devDependencies": {
-    "@changesets/cli": "^2.26.1",
-    "@svitejs/changesets-changelog-github-compact": "^0.1.1",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@testing-library/react-native": "^9.1.0",
-    "@types/react": "^18.0.12",
-    "@types/react-native": "^0.67.8",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
-    "concurrently": "^7.2.2",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "prettier": "^2.6.2",
-    "react": "^18.1.0",
-    "react-native": "^0.68.2",
-    "react-test-renderer": "^18.2.0",
-    "typescript": "^4.7.3",
-    "vitest": "^0.14.2"
+    "@changesets/cli": "2.26.2",
+    "@svitejs/changesets-changelog-github-compact": "1.1.0",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react-native": "12.1.3",
+    "@types/react": "18.2.17",
+    "@types/react-native": "0.72.2",
+    "@typescript-eslint/eslint-plugin": "6.2.0",
+    "@typescript-eslint/parser": "6.2.0",
+    "concurrently": "8.2.0",
+    "eslint": "8.46.0",
+    "eslint-config-prettier": "8.9.0",
+    "eslint-plugin-prettier": "5.0.0",
+    "prettier": "3.0.0",
+    "react": "18.2.0",
+    "react-native": "0.72.3",
+    "react-test-renderer": "18.2.0",
+    "typescript": "5.1.6",
+    "vitest": "0.33.0"
   },
   "scripts": {
     "dev:core": "yarn workspace react-native-zephyr run dev",

diff --git a/packages/sample/AppBody.tsx b/packages/sample/AppBody.tsx
@@ -1,9 +1,39 @@
-import * as React from "react";
+import { FC, useCallback, useState } from "react";
 import { Text, TouchableOpacity } from "react-native";
-import { styled, StyledImage, StyledText, StyledView } from "./styled";
+import PerfTestComponent from "./components/PerfTestComponent";
+import PerfTestComponentBaseline from "./components/PerfTestComponentBaseline";
+import TimedRender from "./components/TimedRender";
+import {
+  StyledImage,
+  StyledText,
+  StyledTouchableOpacity,
+  StyledView,
+  styled,
+} from "./styled";
+
+type PerformanceTestType = "React Native" | "Zephyr";
 
 export const AppBody = () => {
-  const [isPrimary, setIsPrimary] = React.useState(false);
+  const [isPrimary, setIsPrimary] = useState(false);
+  const [styleType, setStyleType] = useState<PerformanceTestType | undefined>(
+    undefined
+  );
+
+  const onStyleTypePress = useCallback(
+    (type: PerformanceTestType) => setStyleType(type),
+    []
+  );
+
+  const renderPerfTest = useCallback(() => {
+    switch (styleType) {
+      case "React Native":
+        return <PerfTestComponentBaseline />;
+      case "Zephyr":
+        return <PerfTestComponent />;
+      default:
+        return null;
+    }
+  }, [styleType]);
 
   return (
     <StyledView classes={["flex:1", "justify:center", "items:center"]}>
@@ -26,6 +56,52 @@ export const AppBody = () => {
           jumped over the lazy dog
         </MyText>
       </MyTouchable>
+
+      <StyledView
+        classes={[
+          "bg:white",
+          "bg-opacity:80",
+          "p:3",
+          "m:3",
+          "rounded:xl",
+          "justify:center",
+          "items:center",
+          "overflow:hidden",
+        ]}
+        style={{ rowGap: 24 }}
+      >
+        <StyledText
+          classes={[
+            "text:3xl",
+            "color:indigo-600",
+            "leading:loose",
+            "font-weight:medium",
+          ]}
+        >
+          Rendering performance test
+        </StyledText>
+        <StyledView classes={["flex:row"]}>
+          <PerfTestButton
+            label="React Native"
+            onPress={() => onStyleTypePress("React Native")}
+          />
+          <PerfTestButton
+            label="Zephyr"
+            onPress={() => onStyleTypePress("Zephyr")}
+          />
+        </StyledView>
+
+        {styleType ? (
+          <TimedRender key={styleType}>
+            <StyledText
+              classes={["text:sm", "color:gray-600", "font-weight:semibold"]}
+            >
+              Rendered with {styleType}
+            </StyledText>
+          </TimedRender>
+        ) : null}
+        {renderPerfTest()}
+      </StyledView>
     </StyledView>
   );
 };
@@ -45,3 +121,22 @@ const MyText = styled(Text)<{ isPrimary?: boolean }>({
   classes: ({ isPrimary }) => ["text:4xl", isPrimary && "color:red-200"],
   darkClasses: ({ isPrimary }) => [isPrimary && "color:red-800"],
 });
+
+const PerfTestButton: FC<{ label: string; onPress: () => void }> = ({
+  label,
+  onPress,
+}) => (
+  <StyledTouchableOpacity
+    classes={[
+      "px:3",
+      "py:3",
+      "mx:3",
+      "rounded:lg",
+      "shadow:2xl",
+      "bg:indigo-600",
+    ]}
+    onPress={onPress}
+  >
+    <StyledText classes={["color:white"]}>{label}</StyledText>
+  </StyledTouchableOpacity>
+);
diff --git a/packages/sample/components/PerfTestComponent.tsx b/packages/sample/components/PerfTestComponent.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { View } from "react-native";
+import { StyledView } from "../styled";
+
+/**
+ * Performance test component
+ *
+ * @returns an array of 1000 styled views
+ */
+const PerfTestComponent = () => {
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+      }}
+    >
+      {new Array(1000).fill(0).map((_, i) => (
+        <StyledView
+          key={i}
+          classes={[
+            "border:2",
+            "p:1",
+            "border-color:indigo-600",
+            "overflow:hidden",
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default PerfTestComponent;
diff --git a/packages/sample/components/PerfTestComponentBaseline.tsx b/packages/sample/components/PerfTestComponentBaseline.tsx
@@ -0,0 +1,31 @@
+import { StyleSheet, View } from "react-native";
+/**
+ * Performance test component
+ *
+ * @returns an array of 1000 styled views
+ */
+const PerfTestComponentBaseline = () => {
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+      }}
+    >
+      {new Array(1000).fill(0).map((_, i) => (
+        <View key={i} style={styles.styledView} />
+      ))}
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  styledView: {
+    borderColor: "red",
+    borderWidth: 2,
+    padding: 5,
+    overflow: "hidden",
+  },
+});
+
+export default PerfTestComponentBaseline;
diff --git a/packages/sample/components/TimedRender.tsx b/packages/sample/components/TimedRender.tsx
@@ -0,0 +1,31 @@
+import { FC, ReactElement, useLayoutEffect, useState } from "react";
+import { StyledText, StyledView } from "../styled";
+
+const TimedRender: FC<{ children: ReactElement }> = ({ children }) => {
+  const [start] = useState(Date.now());
+  const [end, setEnd] = useState(0);
+
+  useLayoutEffect(() => {
+    setEnd(Date.now());
+  }, []);
+
+  return (
+    <StyledView classes={[]}>
+      {!!end && (
+        <StyledText
+          classes={[
+            "text:lg",
+            "color:indigo-500",
+            "leading:loose",
+            "font-weight:semibold",
+          ]}
+        >
+          Render Took {end - start}ms
+        </StyledText>
+      )}
+      {children}
+    </StyledView>
+  );
+};
+
+export default TimedRender;
diff --git a/packages/sample/package.json b/packages/sample/package.json
@@ -3,26 +3,26 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "eject": "expo eject"
+    "start": "npx expo start",
+    "android": "npx expo start --android",
+    "ios": "npx expo start --ios",
+    "web": "npx expo start --web",
+    "eject": "npx expo eject"
   },
   "dependencies": {
-    "@expo/vector-icons": "^13.0.0",
-    "expo": "~45.0.0",
-    "expo-status-bar": "~1.3.0",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-zephyr": "*",
-    "react-native-web": "0.17.7"
+    "@expo/vector-icons": "13.0.0",
+    "expo": "49.0.6",
+    "expo-status-bar": "1.6.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.3",
+    "react-native-safe-area-context": "4.7.1",
+    "react-native-web": "0.19.7",
+    "react-native-zephyr": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "~0.66.13"
+    "@babel/core": "7.22.9",
+    "@types/react": "18.2.17",
+    "@types/react-native": "~0.72.2"
   },
   "private": true
 }