fix: as forwarder type issue

gluestack · Sep 13, 2023 · 2e028da · 2e028da
1 parent c6e5ab4
commit 2e028da
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 41 deletions.
diff --git a/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx b/example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx
@@ -13,20 +13,14 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
-import {
-  AsForwarder,
-  createStyled,
-  styled1,
-  Theme,
-} from '@gluestack-style/react';
+import { AsForwarder, createStyled, styled } from '@gluestack-style/react';
 import { Wrapper } from '../../components/Wrapper';
 import { AddIcon, Box, Icon } from '@gluestack/design-system';
 // import { AddIcon } from '@gluestack/design-system';
 import { AlertCircle, Circle, Sun } from 'lucide-react-native';
 
 import { AnimationResolver } from '@gluestack-style/animation-plugin';
 
-const styled = createStyled([new AnimationResolver({})]);
 const styleshet = StyleSheet.create({
   style: {
     padding: 12,
@@ -37,7 +31,6 @@ const Pressable = styled(
   {
     bg: '$red500',
     p: '$2',
-
     // 'bg': '$red600',
     // 'w': 100,
     // 'h': 100,
@@ -115,32 +108,34 @@ const Text = styled(
 const StyledIcon = styled(
   AsForwarder,
   {
-    bg: '$red500',
-    variants: {
-      size: {
-        sm: {
-          width: 10,
-          height: 10,
-          // props: {
-          //   size: 32,
-          // },
-        },
-        md: {
-          // props: {
-          //   size: 32,
-          // },
-          width: '$4',
-          height: '$4',
-        },
-        lg: {
-          // props: {
-          //   size: 32,
-          // },
-          width: '$6',
-          height: '$6',
-        },
-      },
-    },
+    bg: '$amber100',
+    bgColor: '$amber100',
+
+    // variants: {
+    //   size: {
+    //     sm: {
+    //       width: 10,
+    //       height: 10,
+    //       // props: {
+    //       //   size: 32,
+    //       // },
+    //     },
+    //     md: {
+    //       // props: {
+    //       //   size: 32,
+    //       // },
+    //       width: '$4',
+    //       height: '$4',
+    //     },
+    //     lg: {
+    //       // props: {
+    //       //   size: 32,
+    //       // },
+    //       width: '$6',
+    //       height: '$6',
+    //     },
+    //   },
+    // },
   },
   {
     componentName: 'MyIcon',

diff --git a/packages/react/src/AsForwarder.tsx b/packages/react/src/AsForwarder.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 import Svg from 'react-native-svg';
-import type { ViewProps } from 'react-native';
-
-export interface InterfaceAsForwardedProps extends ViewProps {
-  as?: any;
-}
+import type { RNProps } from './types';
 
 const AsForwarderTemp = ({
   as,
@@ -16,5 +12,6 @@ const AsForwarderTemp = ({
 };
 AsForwarderTemp.displayName = '__AsForwarder__';
 
-export const AsForwarder =
-  AsForwarderTemp as React.ComponentType<InterfaceAsForwardedProps>;
+export const AsForwarder = AsForwarderTemp as React.ComponentType<
+  RNProps & { as?: any }
+>;