fix: Updated web support

App.tsx

@@ -59,7 +59,8 @@ import Stack, { HStack } from "./src/components/atoms/stack/stack";
 import IconButton from "./src/components/molecules/icon-button/icon-button";
 import Box from "./src/components/atoms/box/box";
 import { FlatList, ScrollView } from "react-native";
-import { useTheme } from "./src";
+import { useResponsiveProp, useTheme } from "./src";
+import { MotiView } from "moti";
 
 const App = () => {
   const [haveFontsLoaded] = useFonts({
@@ -249,14 +250,18 @@ const Index = () => {
   const [activeComponent, setActiveComponent] = useState<string | undefined>(
     undefined
   );
+  const numColumns = useResponsiveProp({
+    phone: 2,
+    largeTablet: 8,
+  });
 
   const renderMainComponent = () => {
     if (!activeComponent)
       return (
         <FlatList
           data={componentList}
           horizontal={false}
-          numColumns={2}
+          numColumns={numColumns}
           renderItem={({ item, index }) => (
             <ComponentCard
               label={item.label}

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.0.2",
+    "@expo/webpack-config": "^18.1.3",
     "@react-native-async-storage/async-storage": "^1.18.2",
     "crypto-js": "^4.2.0",
     "expo": "^49.0.13",

src/hooks/useResponsiveProp.ts

@@ -1,5 +1,9 @@
 import { useTheme } from "./useTheme";
-import { PropValue, ResponsiveValue } from "../theme/src/types";
+import {
+  AtLeastOneResponsiveValue,
+  PropValue,
+  ResponsiveValue,
+} from "../theme/src/types";
 import {
   getValueForScreenSize,
   isResponsiveObjectValue,
@@ -12,7 +16,9 @@ import { useWindowDimensions } from "react-native";
  * @param propValue An object that specifies the values based on the different breakpoints
  * @returns The appropriate value from the responsive style object based on the current screen size
  */
-export const useResponsiveProp = (propValue: ResponsiveValue<PropValue>) => {
+export const useResponsiveProp = <T extends PropValue = PropValue>(
+  propValue: ResponsiveValue<T>
+): T => {
   const { theme } = useTheme();
   const dimensions = useWindowDimensions();
 
@@ -21,14 +27,14 @@ export const useResponsiveProp = (propValue: ResponsiveValue<PropValue>) => {
   return useMemo(() => {
     if (isResponsiveObjectValue(propValue, theme)) {
       const valueForScreenSize = getValueForScreenSize({
-        responsiveValue: propValue,
+        responsiveValue: propValue as AtLeastOneResponsiveValue<T>,
         breakpoints: theme.breakpoints,
         dimensions,
       });
-      return valueForScreenSize;
+      return valueForScreenSize as T;
     }
 
     // If the propValue is not a responsive object value, return the propValue as is
-    return propValue;
+    return propValue as T;
   }, [propValue, theme, dimensions]);
 };

src/pearl.tsx

@@ -13,6 +13,8 @@ import { useStyleProps } from "./hooks/useStyleProps";
 import { useMolecularComponentConfig } from "./hooks/useMolecularComponentConfig";
 import { motify } from "moti";
 import { useMotiWithStyleProps } from "./hooks/useMotiWithStyleProps";
+import { useTheme } from "./hooks/useTheme";
+import { Platform } from "react-native";
 
 /**
  * Configuration object that adds metadata to a component that's required by Pearl UI
@@ -60,7 +62,7 @@ export function pearl<
   } = {}
 ) {
   let FinalComponent: any | undefined;
-  const isAnimatable = config.animatable && config.type !== "molecule";
+  const isAnimatable = !!config.animatable && config.type !== "molecule";
 
   if (isAnimatable) {
     const ConvertedClassComponent = class extends React.Component<any, any> {
@@ -96,9 +98,8 @@ export function pearl<
           },
         ref: any
       ) => {
-        /**
-         * The converted props that will be passed to the final component
-         */
+        const { colorMode } = useTheme();
+
         let convertedProps;
         if (config.type === "atom") {
           convertedProps = useAtomicComponentConfig(
@@ -143,6 +144,14 @@ export function pearl<
         return (
           <FinalComponent
             {...convertedProps}
+            key={
+              Platform.OS === "web" &&
+              ["Text", "Icon", "Box"].includes(config.componentName as string)
+                ? convertedProps.key
+                  ? `${convertedProps.key}-${colorMode}`
+                  : `${colorMode}-${Math.random()}`
+                : convertedProps.key
+            }
             transition={
               convertedProps.transition ?? {
                 type: "spring",

src/theme/src/responsive-helpers.ts

@@ -12,15 +12,15 @@ import {
  * Returns the value of a responsive object for the current screen size.
  * @param responsiveValue - The responsive object to get the value from.
  * @param breakpoints - The breakpoints object from the theme.
- * @param dimensions - The dimensions object containing the current screen width and height.
+ * @param dimensions - The dimensions object containing the current scree n width and height.
  * @returns The value of the responsive object for the current screen size.
  */
-export const getValueForScreenSize = ({
+export const getValueForScreenSize = <T extends PropValue = PropValue>({
   responsiveValue,
   breakpoints,
   dimensions,
 }: {
-  responsiveValue: AtLeastOneResponsiveValue;
+  responsiveValue: AtLeastOneResponsiveValue<T>;
   breakpoints: FinalPearlTheme["breakpoints"];
   dimensions: Dimensions;
 }) => {

src/theme/src/types.ts

@@ -225,11 +225,11 @@ export type RNStyleProperty =
 export type PropValue =
   | string
   | number
-  | undefined
   | boolean
-  | null
   | object
-  | symbol;
+  | symbol
+  | undefined
+  | null;
 
 export type ComponentTypes = "basic" | "atom" | "molecule";