@utilitywarehouse/hearth-react-native 0.6.0 → 0.7.0

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,40 @@
+import { View, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useCardContext } from './Card.context';
+
+const CardContent = ({ children, style, ...props }: ViewProps) => {
+  const { noPadding, space } = useCardContext();
+  styles.useVariants({
+    noPadding,
+    space,
+  });
+  return (
+    <View style={[styles.container, style]} {...props}>
+      {children}
+    </View>
+  );
+};
+
+CardContent.displayName = 'CardContent';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      space: theme.globalStyle.variants.space,
+      noPadding: {
+        true: {
+          padding: theme.components.card.mobile.paddingNone,
+        },
+        false: {
+          padding: {
+            base: theme.components.card.mobile.padding,
+            md: theme.components.card.tablet.padding,
+            lg: theme.components.card.desktop.padding,
+          },
+        },
+      },
+    },
+  },
+}));
+
+export default CardContent;

package/src/components/Card/CardPressHandler.context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+interface CardPressHandlerContextProps {
+  pressed?: boolean;
+}
+
+export const CardPressHandlerContext = createContext<CardPressHandlerContextProps>({});
+
+export const useCardPressHandlerContext = (): CardPressHandlerContextProps => {
+  const context = useContext(CardPressHandlerContext);
+  return context;
+};

package/src/components/Card/CardPressHandler.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren, useMemo } from 'react';
+import { useCardContext } from './Card.context';
+import { CardPressHandlerContext } from './CardPressHandler.context';
+
+const CardPressHandler = ({ children }: PropsWithChildren<{ handlerToInherit?: string }>) => {
+  const { pressed } = useCardContext();
+  const context = useMemo(
+    () => ({
+      pressed,
+    }),
+    [pressed]
+  );
+  return (
+    <CardPressHandlerContext.Provider value={context}>{children}</CardPressHandlerContext.Provider>
+  );
+};
+
+CardPressHandler.displayName = 'CardPressHandler';
+
+export default CardPressHandler;

package/src/components/Card/CardRoot.tsx

@@ -4,6 +4,72 @@ import { StyleSheet } from 'react-native-unistyles';
 import { useStyleProps } from '../../hooks';
 import { CardContext } from './Card.context';
 import CardProps from './Card.props';
+import CardContent from './CardContent';
+
+// Helper to check if children contain specific component types
+const checkForComponentType = (children: React.ReactNode, displayName: string): boolean => {
+  return React.Children.toArray(children).some(child => {
+    if (React.isValidElement(child)) {
+      // @ts-expect-error - type
+      if (child.type.displayName === displayName) {
+        return true;
+      }
+      const childProps = child.props as any;
+      if (childProps.children) {
+        return checkForComponentType(childProps.children, displayName);
+      }
+    }
+    return false;
+  });
+};
+
+// Helper to filter out specific component types from children
+const filterChildren = (children: React.ReactNode, excludeDisplayName: string): React.ReactNode => {
+  return React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      // @ts-expect-error - type
+      if (child.type.displayName === excludeDisplayName) {
+        return null;
+      }
+      const childProps = child.props as any;
+      if (childProps.children) {
+        return React.cloneElement(child, {
+          ...childProps,
+          children: filterChildren(childProps.children, excludeDisplayName),
+        });
+      }
+    }
+    return child;
+  });
+};
+
+// Helper to extract specific component types from children
+const extractChildren = (
+  children: React.ReactNode,
+  includeDisplayName: string,
+  markFirst = false
+): React.ReactNode => {
+  let isFirstFound = false;
+  return React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      // @ts-expect-error - type
+      if (child.type.displayName === includeDisplayName) {
+        const isFirst = markFirst && !isFirstFound;
+        if (isFirst) {
+          isFirstFound = true;
+        }
+        return markFirst
+          ? React.cloneElement(child, { ...(child.props || {}), isFirst } as any)
+          : child;
+      }
+      const childProps = child.props as any;
+      if (childProps.children) {
+        return extractChildren(childProps.children, includeDisplayName, markFirst);
+      }
+    }
+    return null;
+  });
+};
 
 // Helper that recursively collects onPress or other defined handlers from descendants
 const collectChildActionHandlers = (
@@ -14,15 +80,15 @@ const collectChildActionHandlers = (
       if (React.isValidElement(child)) {
         const childProps = child.props as any;
         // @ts-expect-error - type
-        if (child.type.displayName === 'CardAction') {
+        if (child.type.displayName === 'CardPressHandler') {
           const actionChildren = React.Children.toArray(childProps.children);
-          const actionToInherit = childProps['actionToInherit'] || 'onPress';
+          const handlerToInherit = childProps['handlerToInherit'] || 'onPress';
           const firstChild = actionChildren[0];
           if (
             React.isValidElement(firstChild) &&
-            typeof (firstChild.props as any)[actionToInherit] === 'function'
+            typeof (firstChild.props as any)[handlerToInherit] === 'function'
           ) {
-            handlers.push((firstChild.props as any)[actionToInherit]);
+            handlers.push((firstChild.props as any)[handlerToInherit]);
           }
         }
         if (childProps.children) {
@@ -48,6 +114,8 @@ const Card = ({
 }: CardProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || { active: false };
   const childActionHandlers = collectChildActionHandlers(children as ReactNode);
+  const hasActions = checkForComponentType(children as ReactNode, 'CardAction');
+  const hasContent = checkForComponentType(children as ReactNode, 'CardContent');
   // Extract style props using our custom hook
   const { computedStyles, remainingProps } = useStyleProps(rest);
 
@@ -62,22 +130,69 @@ const Card = ({
   const inheritChildAction = childActionHandlers.length > 0;
   const showPressed = inheritChildAction || !!onPress;
 
+  const filteredChildren =
+    !hasContent && hasActions ? filterChildren(children as ReactNode, 'CardAction') : null;
+
+  // Check if there's any content besides CardActions
+  const hasOnlyActions =
+    hasActions &&
+    !hasContent &&
+    React.Children.toArray(filteredChildren).filter(child => child != null).length === 0;
+
+  const filteredCardActions =
+    !hasContent && hasActions
+      ? extractChildren(children as ReactNode, 'CardAction', hasOnlyActions)
+      : null;
+
+  const context = useMemo(
+    () => ({
+      pressed: showPressed && active,
+      noPadding,
+      hasActions,
+      hasContent,
+      hasOnlyActions,
+      space,
+      variant,
+    }),
+    [showPressed, active, hasActions, hasContent, hasOnlyActions, noPadding, space, variant]
+  );
+
   styles.useVariants({
     variant,
     colorScheme,
-    noPadding,
+    noPadding: noPadding || hasActions || hasContent,
     active,
     showPressed,
     disabled,
-    space,
+    space: hasActions || hasContent ? 'none' : space,
   });
 
-  const context = useMemo(
-    () => ({
-      pressed: showPressed && active,
-    }),
-    [showPressed, active]
-  );
+  const renderChildren = () => {
+    // Default: render children as-is
+    if (hasContent || !hasActions) {
+      return children as ReactNode;
+    }
+
+    // Card has actions but no explicit CardContent
+    if (hasOnlyActions) {
+      // Only CardActions, no other content - render actions directly
+      return filteredCardActions as ReactNode;
+    }
+
+    if (filteredChildren) {
+      // Has both actions and other content - wrap content and render actions below
+      return (
+        <>
+          <CardContent>{filteredChildren as ReactNode}</CardContent>
+          {filteredCardActions as ReactNode}
+        </>
+      );
+    }
+
+    // Fallback
+    return children as ReactNode;
+  };
+
   return (
     <CardContext.Provider value={context}>
       <Pressable
@@ -88,7 +203,7 @@ const Card = ({
         accessible={showPressed}
         importantForAccessibility={showPressed ? 'yes' : 'no'}
       >
-        {children}
+        {renderChildren()}
       </Pressable>
     </CardContext.Provider>
   );

package/src/components/Card/index.ts

@@ -1,4 +1,5 @@
 export { default as Card } from './Card';
 export { useCardContext } from './Card.context';
-export { useCardActionContext } from './CardAction.context';
-export { default as CardAction } from './CardAction';
+export * from './CardAction';
+export { default as CardPressHandler } from './CardPressHandler';
+export { useCardPressHandlerContext } from './CardPressHandler.context';

package/src/components/Checkbox/CheckboxIcon.tsx

@@ -11,7 +11,8 @@ const CheckboxIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as any, style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as ViewStyle, style] as any)
       }
     />

package/src/components/Container/Container.tsx

@@ -37,9 +37,9 @@ const styles = StyleSheet.create(theme => ({
     marginHorizontal:
       typeof extra.margin === 'undefined' && typeof extra.marginHorizontal === 'undefined'
         ? {
-            base: theme.layout.mobile.container.margin,
-            md: theme.layout.tablet.container.margin,
-            lg: theme.layout.desktop.container.margin,
+            base: theme.layout.mobile.container.marginHorizontal,
+            md: theme.layout.tablet.container.marginHorizontal,
+            lg: theme.layout.desktop.container.marginHorizontal,
           }
         : undefined,
     ...extra,

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -82,7 +82,7 @@ const styles = StyleSheet.create(theme => ({
   input: {
     fontSize: theme.typography.mobile.detailText['4xl'].fontSize,
     fontFamily: theme.typography.mobile.detailText.fontFamily,
-    fontWeight: theme.typography.mobile.detailText.fontWeight,
+    fontWeight: `${theme.typography.mobile.detailText.fontWeight}`,
     paddingTop: 0,
     paddingBottom: 0,
     paddingLeft: 0,

package/src/components/Helper/HelperIcon.tsx

@@ -12,7 +12,8 @@ const HelperIcon = (props: IconProps) => {
     <Icon
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
       {...props}

package/src/components/Icon/Icon.tsx

@@ -1,4 +1,5 @@
 import { createIcon } from '@gluestack-ui/icon';
+import type React from 'react';
 import { useMemo } from 'react';
 import { Svg } from 'react-native-svg';
 import { withUnistyles } from 'react-native-unistyles';
@@ -44,8 +45,8 @@ const PrimitiveIcon = withUnistyles(
 
 PrimitiveIcon.displayName = 'PrimitiveIcon';
 
-export const Icon = createIcon({
-  Root: PrimitiveIcon,
-});
+export const Icon: React.ForwardRefExoticComponent<IconProps> = createIcon({
+  Root: PrimitiveIcon as any,
+}) as React.ForwardRefExoticComponent<IconProps>;
 
 export default Icon;

package/src/components/IconButton/IconButtonIcon.tsx

@@ -18,7 +18,8 @@ const IconButtonIcon = (props: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as ViewStyle, props.style]
       }
     >

package/src/components/IconContainer/IconContainer.tsx

@@ -1,27 +1,25 @@
 import { View } from 'react-native';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import type IconContainerProps from './IconContainer.props';
 
-const IconContainer = withUnistyles(
-  ({
-    icon: IconComp,
-    size = 'md',
-    radiusNone = false,
-    variant = 'subtle',
-    color = 'pig',
-    style,
-    ...props
-  }: IconContainerProps) => {
-    styles.useVariants({ size, radiusNone, variant, color });
+const IconContainer = ({
+  icon: IconComp,
+  size = 'md',
+  radiusNone = false,
+  variant = 'subtle',
+  color = 'pig',
+  style,
+  ...props
+}: IconContainerProps) => {
+  styles.useVariants({ size, radiusNone, variant, color });
 
-    return (
-      <View style={[styles.container, style]} {...props}>
-        {IconComp ? <Icon as={IconComp} style={styles.icon} /> : null}
-      </View>
-    );
-  }
-);
+  return (
+    <View style={[styles.container, style]} {...props}>
+      {IconComp ? <Icon as={IconComp} style={styles.icon} /> : null}
+    </View>
+  );
+};
 
 IconContainer.displayName = 'IconContainer';
 

package/src/components/Input/InputField.tsx

@@ -15,6 +15,7 @@ const InputField = ({
 
   if (inBottomSheet) {
     return (
+      // @ts-expect-error - BottomSheetTextInput type issue
       <BottomSheetTextInput
         placeholderTextColor={color.text.secondary}
         selectionColor={color.purple[700]}
@@ -52,7 +53,7 @@ const styles = StyleSheet.create(theme => ({
     color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: theme.typography.mobile.bodyText.fontWeight,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
     borderWidth: 0,
     variants: {
       focused: {

package/src/components/Input/InputIcon.tsx

@@ -9,7 +9,8 @@ const InputIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) =
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

package/src/components/Link/LinkIcon.tsx

@@ -1,8 +1,8 @@
 import { Platform, type StyleProp, type ViewStyle } from 'react-native';
-import { useLinkContext } from './Link.context';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
 import IconProps from '../Icon/Icon.props';
+import { useLinkContext } from './Link.context';
 
 const LinkIcon = ({ children, ...props }: IconProps) => {
   const { active, inverted, disabled } = useLinkContext();
@@ -13,7 +13,8 @@ const LinkIcon = ({ children, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }
     >

package/src/components/List/ListAction/ListActionTrailingIcon.tsx

@@ -10,7 +10,8 @@ const ListActionTrailingIcon = ({ children, ...props }: IconProps & { as?: Compo
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

package/src/components/List/ListItem/ListItemIcon.tsx

@@ -9,7 +9,8 @@ const ListItemIcon = ({ children, ...props }: IconProps & { as?: ComponentType }
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >

package/src/components/List/ListItem/ListItemTrailingIcon.tsx

@@ -10,7 +10,8 @@ const ListItemTrailingIcon = ({ children, ...props }: IconProps & { as?: Compone
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.icon as StyleProp<ViewStyle>, props.style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
       }
     >
@@ -24,8 +25,6 @@ ListItemTrailingIcon.displayName = 'ListItemTrailingIcon';
 const styles = StyleSheet.create(theme => ({
   icon: {
     color: theme.color.icon.primary,
-    width: 24,
-    height: 24,
   },
 }));
 

package/src/components/Radio/RadioIcon.tsx

@@ -1,8 +1,8 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-import { CircleIcon } from '../Icons';
 import IconProps from '../Icon/Icon.props';
-import { Platform } from 'react-native';
+import { CircleIcon } from '../Icons';
 
 const RadioIcon = ({ style, ...props }: IconProps) => {
   return (
@@ -11,7 +11,12 @@ const RadioIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.container, style)
+          ? {
+              // @ts-expect-error - style prop type issue
+              ...(styles.container as StyleProp<ViewStyle>),
+              // @ts-expect-error - style prop type issue
+              ...(props.style as StyleProp<ViewStyle>),
+            }
           : ([styles.container, style] as any)
       }
     />

package/src/components/RadioCard/RadioCardIcon.tsx

@@ -1,8 +1,8 @@
+import { Platform, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { Icon } from '../Icon';
-import { CircleIcon } from '../Icons';
 import IconProps from '../Icon/Icon.props';
-import { Platform } from 'react-native';
+import { CircleIcon } from '../Icons';
 
 const RadioCardIcon = ({ style, ...props }: IconProps) => {
   return (
@@ -11,7 +11,8 @@ const RadioCardIcon = ({ style, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? StyleSheet.compose(styles.container, style)
+          ? // @ts-expect-error - style prop type issue
+            { ...(styles.container as StyleProp<ViewStyle>), ...props.style }
           : ([styles.container, style] as any)
       }
     />

package/src/components/Spinner/Spinner.tsx

@@ -18,7 +18,9 @@ import { ColorValue } from '../../types';
 import { getFlattenedColorValue } from '../../utils';
 import type SpinnerProps from './Spinner.props';
 
+// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
+// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {

package/src/components/Spinner/Spinner.web.tsx

@@ -18,7 +18,9 @@ import { ColorValue } from '../../types';
 import { getFlattenedColorValue } from '../../utils';
 import type SpinnerProps from './Spinner.props';
 
+// @ts-expect-error - Animated.View type issue
 const AnimatedSvg = Animated.createAnimatedComponent(Svg as React.ComponentType<any>);
+// @ts-expect-error - Animated.View type issue
 const AnimatedCircle = Animated.createAnimatedComponent(Circle as React.ComponentType<any>);
 
 const SpinnerRoot = ({ size = 'md', color, ...props }: SpinnerProps) => {

package/src/components/Switch/Switch.tsx

@@ -11,6 +11,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
+import { useAnimatedTheme } from 'react-native-unistyles/reanimated';
 import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 import SwitchProps from './Switch.props';
@@ -23,6 +24,7 @@ const CustomSwitch = ({
   ...accessibilityProps
 }: SwitchProps) => {
   const { components, color } = useTheme();
+  const theme = useAnimatedTheme();
   const SWITCH_WIDTH = size === 'medium' ? components.switch.md.width : components.switch.sm.width;
   const THUMB_SIZE =
     size === 'medium' ? components.switch.md.circle.size : components.switch.sm.circle.size;
@@ -34,17 +36,20 @@ const CustomSwitch = ({
   const offset = useSharedValue(value ? SWITCH_WIDTH - THUMB_SIZE - PADDING * 2 : 0);
   const progress = useSharedValue(value ? 1 : 0);
 
-  const animatedThumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: offset.value }],
-  }));
+  const animatedThumbStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ translateX: offset.value }],
+    }),
+    [offset]
+  );
 
   const animatedSwitchBackgroundStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
       progress.value,
       [0, 1],
       [
-        color.interactive.functional.surface.strong.default,
-        color.interactive.brand.surface.strong.default,
+        theme.value.color.interactive.functional.surface.strong.default,
+        theme.value.color.interactive.brand.surface.strong.default,
       ]
     );
     return { backgroundColor };

package/src/components/Switch/Switch.web.tsx

@@ -15,6 +15,7 @@ import { useTheme } from '../../hooks';
 import { Icon } from '../Icon';
 import SwitchProps from './Switch.props';
 
+// @ts-expect-error - Animated.View type issue
 const AnimatedView = Animated.createAnimatedComponent(View);
 
 const CustomSwitch = ({
@@ -114,14 +115,18 @@ const CustomSwitch = ({
       accessibilityHint={accessibilityProps.accessibilityHint}
       {...accessibilityProps}
     >
+      {/* @ts-expect-error - Animated.View type issue */}
       <AnimatedView style={[styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle]}>
+        {/* @ts-expect-error - Animated.View type issue */}
         <AnimatedView style={[styles.thumb, animatedThumbStyle]}>
+          {/* @ts-expect-error - Animated.View type issue */}
           <AnimatedView style={[styles.iconWrap, animatedTickStyle]}>
             {(() => {
               const IconAny = Icon as any;
               return <IconAny as={TickSmallIcon} style={styles.icon as any} />;
             })()}
           </AnimatedView>
+          {/* @ts-expect-error - Animated.View type issue */}
           <AnimatedView style={[styles.iconWrap, animatedCrossStyle]}>
             {(() => {
               const IconAny = Icon as any;

package/src/components/Tabs/TabsList.tsx

@@ -15,6 +15,7 @@ import { UnstyledIconButton } from '../UnstyledIconButton';
 import { useTabsContext } from './Tabs.context';
 import type TabsListProps from './TabsList.props';
 
+// @ts-expect-error - Animated.View type issue
 const Indicator = Animated.createAnimatedComponent(View);
 
 const SCROLL_STEP_RATIO = 0.6;
@@ -112,6 +113,7 @@ const TabsList = ({ children, style, ...rest }: TabsListProps) => {
         <View style={styles.container}>
           {children}
           <Indicator
+            // @ts-expect-error - Animated.View type issue
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
             style={[styles.indicator, indicatorStyle]}

package/src/components/Textarea/TextareaField.tsx

@@ -33,7 +33,7 @@ const styles = StyleSheet.create(theme => ({
     color: theme.color.text.primary,
     fontSize: theme.typography.mobile.bodyText.md.fontSize,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: theme.typography.mobile.bodyText.fontWeight,
+    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
     borderWidth: 0,
     outlineWidth: 0,
     _web: {