fix: Fixed animateable Box for web

agrawal-rohit · Dec 18, 2023 · 7c532eb · 7c532eb · vercel · Dec 18, 2023
1 parent 247fa6c
commit 7c532eb
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 2 deletions.
diff --git a/App.tsx b/App.tsx
@@ -317,6 +317,68 @@ const Index = () => {
     return null;
   };
 
+  return (
+    <Screen p="0" scrollable={false}>
+      <Stack direction="vertical" flex={1} spacing="0" pb="20">
+        <Box
+          py="1.5"
+          flexDirection="row"
+          borderBottomWidth={1}
+          borderColor={{ light: "neutral.300", dark: "neutral.600" }}
+          justifyContent="space-between"
+          alignItems="center"
+          style={{
+            paddingHorizontal: 20,
+          }}
+        >
+          <Text key={colorMode} fontWeight="semibold">
+            Box
+          </Text>
+          <IconButton
+            size="s"
+            variant="ghost"
+            onPress={toggleColorMode}
+            icon={
+              <Icon
+                rawSize={15}
+                iconFamily="Feather"
+                iconName={colorMode === "light" ? "sun" : "moon"}
+              />
+            }
+          />
+        </Box>
+
+        <Box
+          p="5"
+          from={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ type: "timing", duration: 150 }}
+        >
+          <Box
+            width="100%"
+            height={200}
+            backgroundColor="primary.500"
+            marginBottom="4"
+          />
+          <Box
+            width="100%"
+            height={200}
+            backgroundColor="secondary.500"
+            borderRadius="full"
+          />
+          <Box
+            width="100%"
+            height={200}
+            backgroundColor="white"
+            borderWidth={1}
+            borderRadius="s"
+            marginTop="3"
+          />
+        </Box>
+      </Stack>
+    </Screen>
+  );
+
   return (
     <Screen p="0" scrollable={false}>
       <Stack direction="vertical" flex={1} spacing="0" pb="20">

diff --git a/src/pearl.tsx b/src/pearl.tsx
@@ -11,7 +11,7 @@ import { useAtomicComponentConfig } from "./hooks/useAtomicComponentConfig";
 import { boxStyleFunctions, BoxStyleProps } from "./theme/src/style-functions";
 import { useStyleProps } from "./hooks/useStyleProps";
 import { useMolecularComponentConfig } from "./hooks/useMolecularComponentConfig";
-import { motify } from "moti";
+import { MotiView, motify } from "moti";
 import { useMotiWithStyleProps } from "./hooks/useMotiWithStyleProps";
 import { useTheme } from "./hooks/useTheme";
 import { Platform } from "react-native";
@@ -80,7 +80,9 @@ export function pearl<
       }
     };
 
-    FinalComponent = motify(ConvertedClassComponent)();
+    if (Platform.OS === "web" && config.componentName === "Box")
+      FinalComponent = MotiView;
+    else FinalComponent = motify(ConvertedClassComponent)();
   } else {
     FinalComponent = Component;
   }