react-native-mantine 0.5.0 → 0.7.0

package/lib/typescript/module/src/theme/functions/fns/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/theme/functions/fns/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIvD,eAAO,MAAM,GAAG;iBAJkC,iDACrC;;;kBAGI,kDAEZ;wBAIsJ,kDAAoB;;;YAA4F,kDAAoB,MAAM,eAAkB;;;;;;;YAAsI,kDAAoB,MAAM,WAAW;mBAAuM,kDAAoB;;;;;;;qEAAlW,uCAAmB;;CAD7W,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/theme/functions/fns/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAIvD,eAAO,MAAM,GAAG;iBALG,iDACZ;;;sBAYA,iDAAmB;;;kBAAwH,kDAAoB;wBAAgM,kDAAoB;;;YAA8F,kDAAoB,MAAQ,eAAkB;;;;;;;YAAkJ,kDAAoB,MAAM,WAAW;mBAAuM,kDAAoB;;;;;;;;;qEAA3oB,uCAAmB;;CAD/R,CAAC"}

package/lib/typescript/module/src/theme/functions/fns/rgba.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Converts a hex or rgb color string to rgba with the specified alpha value
+ * @param color - The color string (hex or rgb)
+ * @param alpha - Alpha value between 0 and 1
+ * @returns rgba color string
+ */
+export declare function rgba(_theme: any): (color: string, alpha: number) => string;
+//# sourceMappingURL=rgba.d.ts.map

package/lib/typescript/module/src/theme/functions/fns/rgba.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rgba.d.ts","sourceRoot":"","sources":["../../../../../../../src/theme/functions/fns/rgba.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,MAAM,EAAE,GAAG,IACtB,OAAO,MAAM,EAAE,OAAO,MAAM,KAAG,MAAM,CAqC9C"}

package/lib/typescript/module/src/theme/functions/fns/size.d.ts

@@ -0,0 +1,6 @@
+import type { MantineNumberSize } from '../../types';
+export declare function size(_theme: any): <Sizes extends Record<any, any>>({ size, sizes, }: {
+    size: MantineNumberSize;
+    sizes: Sizes;
+}) => number;
+//# sourceMappingURL=size.d.ts.map

package/lib/typescript/module/src/theme/functions/fns/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../../../../src/theme/functions/fns/size.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGrD,wBAAgB,IAAI,CAAC,MAAM,EAAE,GAAG,IACtB,KAAK,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,kBAGrC;IACD,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC;CACd,KAAG,MAAM,CAGX"}

package/lib/typescript/module/src/theme/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { rem, em } from './rem';
+export { withTextWrapper, type WithTextWrapperProps } from './withTextWrapper';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/theme/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/typescript/module/src/theme/utils/withTextWrapper.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { TextProps } from '../../components/Text';
+/**
+ * Conditionally wraps content in a Text component based on the withTextWrapper prop.
+ *
+ * In React Native, all text must be wrapped in a Text component. However, some
+ * components may need flexibility to render with or without this wrapper depending
+ * on whether their content is text or other components (like icons, views, etc.).
+ *
+ * @param children - The content to potentially wrap
+ * @param shouldWrap - Whether to wrap the content in a Text component
+ * @param textStyle - Optional style to apply to the Text wrapper
+ * @param textProps - Optional additional props to pass to the Text component
+ * @returns The children wrapped in Text if shouldWrap is true, otherwise just the children
+ *
+ * @example
+ * // Wrap text content
+ * withTextWrapper('Hello', true, styles.text)
+ *
+ * @example
+ * // Don't wrap components
+ * withTextWrapper(<Icon />, false)
+ *
+ * @example
+ * // Default behavior (wrap)
+ * withTextWrapper('Text', true, styles.text, { numberOfLines: 1 })
+ */
+export declare function withTextWrapper(children: ReactNode, shouldWrap?: boolean, textStyle?: any, textProps?: Omit<TextProps, 'children' | 'style'>): ReactNode;
+/**
+ * Type helper for components that support the withTextWrapper pattern.
+ * Add this to your component props interface.
+ */
+export interface WithTextWrapperProps {
+    /**
+     * If false, children will not be wrapped in a Text component.
+     * This is useful when the children contain non-text elements like icons or custom components.
+     * @default true
+     */
+    withTextWrapper?: boolean;
+}
+//# sourceMappingURL=withTextWrapper.d.ts.map

package/lib/typescript/module/src/theme/utils/withTextWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTextWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/withTextWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,SAAS,EACnB,UAAU,GAAE,OAAc,EAC1B,SAAS,CAAC,EAAE,GAAG,EACf,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAC,GAChD,SAAS,CAUX;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-mantine",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Make Mantine Accessable on React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -74,7 +74,8 @@
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^29.5.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.44",
+    "@types/react": "^19.0.0",
+    "@types/react-native-vector-icons": "^6.4.18",
     "commitlint": "^17.0.2",
     "del-cli": "^5.1.0",
     "eslint": "^8.51.0",
@@ -83,18 +84,20 @@
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "prettier-eslint": "^16.3.0",
-    "react": "18.3.1",
-    "react-native": "0.76.9",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-builder-bob": "latest",
+    "react-native-vector-icons": "^10.0.0",
     "release-it": "^15.0.0",
     "typescript": "^5.2.2"
   },
   "resolutions": {
-    "@types/react": "^18.2.44"
+    "@types/react": "^19.0.0"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-vector-icons": "^10.0.0"
   },
   "workspaces": [
     "example"
@@ -189,9 +192,9 @@
     "version": "0.41.2"
   },
   "dependencies": {
-    "expo-clipboard": "~7.0.0",
-    "expo-font": "~13.0.0",
-    "expo-linear-gradient": "~14.0.0",
+    "expo-clipboard": "~8.0.8",
+    "expo-font": "~14.0.10",
+    "expo-linear-gradient": "~15.0.8",
     "lodash-es": "^4.17.21"
   }
 }

package/src/components/Anchor/index.tsx

@@ -10,8 +10,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import type { WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface AnchorProps extends DefaultProps {
+export interface AnchorProps extends DefaultProps, WithTextWrapperProps {
   /** Anchor text color from theme */
   color?: MantineColor;
 
@@ -103,10 +104,11 @@ const defaultProps: Partial<AnchorProps> = {
   weight: '400',
   underline: true,
   variant: 'link',
+  withTextWrapper: true,
 };
 
 export const Anchor = forwardRef<RNText, AnchorProps>((props, ref) => {
-  const { color, size, weight, underline, variant, href, onPress, children, style, ...others} =
+  const { color, size, weight, underline, variant, href, onPress, children, style, withTextWrapper: shouldWrapInText, ...others} =
     useComponentDefaultProps('Anchor', defaultProps, props);
 
   const { styles, sx} = useStyles(
@@ -124,6 +126,10 @@ export const Anchor = forwardRef<RNText, AnchorProps>((props, ref) => {
     }
   };
 
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/components/Badge/index.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import { Text } from '../Text';
 import { BoxView } from '../BoxView';
 import type {
   DefaultProps,
@@ -11,8 +10,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface BadgeProps extends DefaultProps {
+export interface BadgeProps extends DefaultProps, WithTextWrapperProps {
   /** Badge color from theme */
   color?: MantineColor;
 
@@ -157,6 +157,7 @@ const defaultProps: Partial<BadgeProps> = {
   size: 'md',
   radius: 'xl',
   fullWidth: false,
+  withTextWrapper: true,
 };
 
 export const Badge = forwardRef<any, BadgeProps>((props, ref) => {
@@ -170,6 +171,7 @@ export const Badge = forwardRef<any, BadgeProps>((props, ref) => {
     rightSection,
     children,
     style,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('Badge', defaultProps, props);
 
@@ -183,7 +185,7 @@ export const Badge = forwardRef<any, BadgeProps>((props, ref) => {
       <BoxView style={styles.inner}>
         {variant === 'dot' && <BoxView style={styles.dot} />}
         {leftSection && <BoxView style={styles.leftSection}>{leftSection}</BoxView>}
-        <Text style={styles.label}>{children}</Text>
+        {withTextWrapper(children, shouldWrapInText, styles.label)}
         {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
       </BoxView>
     </BoxView>

package/src/components/Blockquote/index.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import type {
   DefaultProps,
   MantineColor,
@@ -9,8 +8,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface BlockquoteProps extends DefaultProps {
+export interface BlockquoteProps extends DefaultProps, WithTextWrapperProps {
   /** Blockquote color from theme */
   color?: MantineColor;
 
@@ -80,10 +80,11 @@ const useStyles = createStyles(
 const defaultProps: Partial<BlockquoteProps> = {
   color: 'blue',
   radius: 'sm',
+  withTextWrapper: true,
 };
 
 export const Blockquote = forwardRef<any, BlockquoteProps>((props, ref) => {
-  const { color, icon, cite, radius, children, style} =
+  const { color, icon, cite, radius, children, style, withTextWrapper: shouldWrapInText} =
     useComponentDefaultProps('Blockquote', defaultProps, props);
 
   const { styles, sx, ...others} = useStyles({ color, radius}, { name: 'Blockquote' }) as any;
@@ -93,8 +94,8 @@ export const Blockquote = forwardRef<any, BlockquoteProps>((props, ref) => {
       <BoxView style={styles.inner}>
         {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
         <BoxView style={styles.body}>
-          <Text style={styles.content}>{children}</Text>
-          {cite && <Text style={styles.cite}>{cite}</Text>}
+          {withTextWrapper(children, shouldWrapInText, styles.content)}
+          {cite && withTextWrapper(cite, shouldWrapInText, styles.cite)}
         </BoxView>
       </BoxView>
     </BoxView>

package/src/components/Button/Button.styles.ts

@@ -189,10 +189,8 @@ const useStyles = createStyles(
 
       inner: {
         display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
         height: '100%',
-        overflow: 'visible',
+        flex: 1,
       },
 
       label: {
@@ -202,6 +200,8 @@ const useStyles = createStyles(
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        flexDirection: 'row',
+        flex: 1,
       },
     };
   }

package/src/components/Button/index.tsx

@@ -13,11 +13,11 @@ import { ActivityIndicator, View } from 'react-native';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import useStyles from './Button.styles';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
 export type ButtonStylesNames = any;
 
-export interface ButtonProps extends DefaultProps {
+export interface ButtonProps extends DefaultProps, WithTextWrapperProps {
   /** Predefined button size */
   size?: MantineSize;
 
@@ -76,60 +76,62 @@ const defaultProps: Partial<ButtonProps> = {
   type: 'button',
   variant: 'filled',
   loaderPosition: 'left',
+  withTextWrapper: true,
 };
 
-export const _Button = forwardRef<View, ButtonProps>(
-  (props, ref) => {
-    const {
-      size,
+export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
+  const {
+    size,
+    color,
+    type,
+    disabled,
+    children,
+    leftIcon,
+    rightIcon,
+    fullWidth,
+    variant,
+    radius,
+    uppercase,
+    compact,
+    loading,
+    loaderPosition,
+    loaderProps,
+    gradient,
+    style,
+    withTextWrapper: shouldWrapInText,
+    ...others
+  } = useComponentDefaultProps('Button', defaultProps, props);
+
+  const { styles, sx } = useStyles(
+    {
+      radius,
       color,
-      type,
-      disabled,
-      children,
-      leftIcon,
-      rightIcon,
       fullWidth,
-      variant,
-      radius,
-      uppercase,
       compact,
-      loading,
-      loaderPosition,
-      loaderProps,
       gradient,
-      style,
-      ...others
-    } = useComponentDefaultProps('Button', defaultProps, props);
-
-    const { styles, sx} = useStyles(
-      {
-        radius,
-        color,
-        fullWidth,
-        compact,
-        gradient,
-        withLeftIcon: !!leftIcon,
-        withRightIcon: !!rightIcon,
-      },
-      {
-        name: 'Button',
-        variant,
-        size,
-      }
-    );
-
-    const loader = <ActivityIndicator />;
-
-    return (
-      <UnstyledButton
-        style={sx(styles.root, style)}
-        data-button
-        data-disabled={disabled || undefined}
-        data-loading={loading || undefined}
-        ref={ref}
-        {...others}
-      >
-        <BoxView style={styles.inner}>
+      withLeftIcon: !!leftIcon,
+      withRightIcon: !!rightIcon,
+    },
+    {
+      name: 'Button',
+      variant,
+      size,
+    }
+  );
+
+  const loader = <ActivityIndicator />;
+
+  return (
+    <UnstyledButton
+      style={sx(styles.root, style)}
+      data-button
+      data-disabled={disabled || undefined}
+      data-loading={loading || undefined}
+      ref={ref}
+      {...others}
+    >
+      <BoxView style={styles.inner}>
+        <BoxView style={styles.label}>
           {(leftIcon || (loading && loaderPosition === 'left')) && (
             <BoxView style={sx(styles.icon, styles.leftIcon)}>
               {loading && loaderPosition === 'left' ? loader : leftIcon}
@@ -139,24 +141,16 @@ export const _Button = forwardRef<View, ButtonProps>(
           {loading && loaderPosition === 'center' && (
             <BoxView style={styles.centerLoader}>{loader}</BoxView>
           )}
-
-          <BoxView style={styles.label}>
-            {typeof children === 'string' || typeof children === 'number' ? (
-              <Text>{children}</Text>
-            ) : (
-              children
-            )}
-          </BoxView>
-
+          {withTextWrapper(children, shouldWrapInText)}
           {(rightIcon || (loading && loaderPosition === 'right')) && (
             <BoxView style={sx(styles.icon, styles.rightIcon)}>
               {loading && loaderPosition === 'right' ? loader : rightIcon}
             </BoxView>
           )}
         </BoxView>
-      </UnstyledButton>
-    );
-  }
-) as any;
+      </BoxView>
+    </UnstyledButton>
+  );
+}) as any;
 
 export const Button = _Button;

package/src/components/Chip/index.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import type {
   DefaultProps,
   MantineColor,
@@ -12,8 +11,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface ChipProps extends DefaultProps {
+export interface ChipProps extends DefaultProps, WithTextWrapperProps {
   /** Chip label */
   children: React.ReactNode;
 
@@ -174,6 +174,7 @@ const defaultProps: Partial<ChipProps> = {
   variant: 'filled',
   disabled: false,
   type: 'checkbox',
+  withTextWrapper: true,
 };
 
 export const Chip = forwardRef<any, ChipProps>((props, ref) => {
@@ -192,6 +193,7 @@ export const Chip = forwardRef<any, ChipProps>((props, ref) => {
     textStyle,
     value,
     type,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('Chip', defaultProps, props);
 
@@ -226,7 +228,7 @@ export const Chip = forwardRef<any, ChipProps>((props, ref) => {
       {...others}
     >
       {showIcon && <BoxView style={styles.icon}>{icon}</BoxView>}
-      <Text style={sx(styles.text, textStyle)}>{children}</Text>
+      {withTextWrapper(children, shouldWrapInText, sx(styles.text, textStyle))}
     </TouchableOpacity>
   );
 });
@@ -325,10 +327,10 @@ export const ChipGroup = forwardRef<any, ChipGroupProps>((props, ref) => {
   };
 
   const enhancedChildren = React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && child.type === Chip) {
-      const chipValue = child.props.value;
+    if (React.isValidElement(child) && (child.type as any) === Chip) {
+      const chipValue = (child.props as ChipProps).value;
       if (chipValue !== undefined) {
-        return React.cloneElement(child as React.ReactElement<ChipProps>, {
+        return React.cloneElement<ChipProps>(child as React.ReactElement<ChipProps>, {
           checked: isChecked(chipValue),
           onChange: (checked: boolean) => handleChipChange(chipValue, checked),
         });

package/src/components/CloseButton/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { BoxView } from '../BoxView';
+import { Icon } from '../Icon';
 import type { DefaultProps, MantineSize } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
@@ -81,28 +81,7 @@ const useStyles = createStyles(
 );
 
 const CloseIcon = ({ size, color }: { size: number; color: string }) => (
-  <BoxView style={{ width: size, height: size, position: 'relative' }}>
-    <BoxView
-      style={{
-        position: 'absolute',
-        width: size,
-        height: 2,
-        backgroundColor: color,
-        top: (size - 2) / 2,
-        transform: [{ rotate: '45deg' }],
-      }}
-    />
-    <BoxView
-      style={{
-        position: 'absolute',
-        width: size,
-        height: 2,
-        backgroundColor: color,
-        top: (size - 2) / 2,
-        transform: [{ rotate: '-45deg' }],
-      }}
-    />
-  </BoxView>
+  <Icon name="times" size={size} color={color} />
 );
 
 const defaultProps: Partial<CloseButtonProps> = {

package/src/components/Code/index.tsx

@@ -3,8 +3,9 @@ import { Text } from '../Text';
 import type { TextProps } from '../Text';
 import { useTheme } from '../../theme/theme-provider';
 import { BoxView } from '../BoxView';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface CodeProps extends Omit<TextProps, 'children'> {
+export interface CodeProps extends Omit<TextProps, 'children'>, WithTextWrapperProps {
   /** Code content */
   children?: React.ReactNode;
 
@@ -19,7 +20,7 @@ export interface CodeProps extends Omit<TextProps, 'children'> {
  * Code component renders inline code or code blocks with monospace font
  */
 export const Code = forwardRef<any, CodeProps>((props, ref) => {
-  const { children, color, block = false, style, ...others} = props;
+  const { children, color, block = false, style, withTextWrapper: shouldWrapInText = true, ...others} = props;
 
   const theme = useTheme();
 
@@ -52,23 +53,27 @@ export const Code = forwardRef<any, CodeProps>((props, ref) => {
           },
           style,
         ]}
+        {...others}
       >
-        <Text
-          style={[
-            {
-              fontFamily: 'Courier',
-              fontSize: theme.fontSizes.sm as number || 14,
-              color: textColor,
-            },
-          ]}
-          {...others}
-        >
-          {children}
-        </Text>
+        {withTextWrapper(
+          children,
+          shouldWrapInText,
+          {
+            fontFamily: 'Courier',
+            fontSize: theme.fontSizes.sm as number || 14,
+            color: textColor,
+          }
+        )}
       </BoxView>
     );
   }
 
+  // For inline code, we need to return a component that can accept the ref
+  // So we wrap in a View-like Text component
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/components/Collapse/index.tsx

@@ -46,6 +46,7 @@ export const Collapse = forwardRef<any, CollapseProps>((props, ref) => {
   } = useComponentDefaultProps('Collapse', defaultProps, props);
 
   const [contentHeight, setContentHeight] = useState<number>(0);
+  const [isFirstLayout, setIsFirstLayout] = useState(true);
   const heightAnim = useRef(new Animated.Value(opened ? 1 : 0)).current;
   const opacityAnim = useRef(new Animated.Value(opened ? 1 : 0)).current;
 
@@ -53,10 +54,18 @@ export const Collapse = forwardRef<any, CollapseProps>((props, ref) => {
     const { height } = event.nativeEvent.layout;
     if (height > 0 && height !== contentHeight) {
       setContentHeight(height);
+      if (isFirstLayout) {
+        setIsFirstLayout(false);
+      }
     }
   };
 
   useEffect(() => {
+    // Don't animate on first render or if content height hasn't been measured yet
+    if (isFirstLayout || contentHeight === 0) {
+      return;
+    }
+
     const animations = [
       Animated.timing(heightAnim, {
         toValue: opened ? 1 : 0,
@@ -80,11 +89,11 @@ export const Collapse = forwardRef<any, CollapseProps>((props, ref) => {
         onTransitionEnd();
       }
     });
-  }, [opened, heightAnim, opacityAnim, transitionDuration, animateOpacity, onTransitionEnd]);
+  }, [opened, heightAnim, opacityAnim, transitionDuration, animateOpacity, onTransitionEnd, contentHeight, isFirstLayout]);
 
   const animatedHeight = heightAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, contentHeight || 0],
+    outputRange: [0, contentHeight],
   });
 
   return (