From ce4ce1eb1607d835cc0645bd0e56f2574b8b437c Mon Sep 17 00:00:00 2001
From: Teemu Taskula <themetor@gmail.com>
Date: Wed, 7 Dec 2022 18:21:34 +0200
Subject: [PATCH] Add perf test component

---
 example/src/PerfTest.tsx | 56 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 example/src/PerfTest.tsx

diff --git a/example/src/PerfTest.tsx b/example/src/PerfTest.tsx
new file mode 100644
index 0000000..05476ec
--- /dev/null
+++ b/example/src/PerfTest.tsx
@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import { Stack } from './components';
+import { styled } from './styles';
+
+let measured = false;
+
+export default function PerfTest() {
+  const start = useMemo(() => new Date(), []);
+
+  return (
+    <Wrapper
+      onLayout={() => {
+        if (!measured) {
+          measured = true;
+          console.log(
+            `Time taken: ${new Date().getTime() - start.getTime()} ms`
+          );
+        }
+      }}
+    >
+      <Content>
+        <Stack axis="y" space="4">
+          {Array.from({ length: 1000 }).map((_, i) => (
+            <Box key={i}>
+              <BoxText>{i + 1}</BoxText>
+            </Box>
+          ))}
+        </Stack>
+      </Content>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled('SafeAreaView', {
+  flex: 1,
+  backgroundColor: '$background',
+});
+
+const Content = styled('ScrollView', {
+  flex: 1,
+}).attrs((p) => ({
+  contentContainerStyle: {
+    padding: p.theme.space[2],
+  },
+}));
+
+const Box = styled('View', {
+  minHeight: 100,
+  backgroundColor: '$primaryMuted',
+  flexCenter: 'row',
+  borderRadius: '$md',
+});
+
+const BoxText = styled('Text', {
+  color: '$primaryText',
+});