@xhsreds/reds-rn-next 0.8.4-image-optimization202510222117 → 0.9.1-feat-image-2202510231126

package/src/components/Sheets/AnimatedSheets.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useMemo, useEffect, useCallback, forwardRef, u
 import { alwaysColor } from "@xhs/reds-token-next";
 import {
   View,
-  TouchableWithoutFeedback,
+  TouchableOpacity,
   Text,
   Animated,
   LayoutChangeEvent,
@@ -11,6 +11,7 @@ import {
   Easing,
   Platform,
   StatusBar,
+  TouchableWithoutFeedback,
 } from "react-native";
 import {
   RedsSheets,
@@ -28,6 +29,7 @@ import { Icon, IconType } from "../Icon";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { useLanguage } from "../LanguageProvider";
 import { getSafeAreaInsets } from "../StatusBar";
+import { CancelM } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
   useMounted("AnimatedSheets");
@@ -194,10 +196,8 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
     const halfScreenHeight = Math.floor(fullScreenHeight / 2);
     const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75);
     // 适配底部bottom
-    const windowHeight = Dimensions.get("screen").height;
     const isIos = Platform.OS === "ios";
-    const androidSafeBottom = fullScreenHeight - windowHeight - (StatusBar.currentHeight || 0);
-    const SAFE_BOTTOM = Platform.OS === "ios" ? getSafeAreaInsets().bottom : androidSafeBottom;
+    const SAFE_BOTTOM = getSafeAreaInsets().bottom;
     // 适配底部bottom
     let calculateHeight = 0;
     if (props.animatedSheetsSize === "fixed") {
@@ -230,7 +230,9 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       childHeightRef.current = calculateHeight;
     }
     setSheetsHeight(
-      isIos ? calculateHeight : androidSafeBottom > 0 ? calculateHeight : calculateHeight - SAFE_BOTTOM || 34,
+      props.sheetsStyle?.backgroundColor === "transparent"
+        ? calculateHeight
+        : calculateHeight + (SAFE_BOTTOM || (isIos ? 34 : 20)),
     );
   }, [actionHeight, labelHeight, childHeight, props.animatedSheetsSize, props.autoSize, size, screenHeight]);
 
@@ -297,16 +299,16 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
           type === "confirm" ? handleConfirm() : handleCancel();
         }}
       >
-        <View style={[styles.iconBg, { backgroundColor: themeColor.Fill1 }]}>
+        <View style={[styles.iconBg, { backgroundColor: themeColor.Disabled }]}>
           {type === "confirm" ? (
-            <Icon icon={Close} type={IconType.iconType.image} size={20} onClick={handleConfirm} />
+            <Icon icon={CancelM} size={20} onClick={handleConfirm} fill={"rgba(255,255,255,1)"} />
           ) : (
             <Icon icon={ArrowLeft} type={IconType.iconType.image} size={20} onClick={handleCancel} />
           )}
         </View>
       </TouchableWithoutFeedback>
     ) : type === "confirm" ? (
-      <Icon icon={Close} type={IconType.iconType.image} size={20} onClick={handleConfirm} />
+      <Icon icon={CancelM} size={20} onClick={handleConfirm} fill={"rgba(0,0,0,1)"} />
     ) : (
       <Icon icon={ArrowLeft} type={IconType.iconType.image} size={20} onClick={handleCancel} />
     );
@@ -417,27 +419,46 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
         {/** normal */}
         {showLabel && !props.header ? (
           <View
-            style={[styles.labelContainer, { backgroundColor: themeColor.Bg2 }, props.headerStyle]}
+            style={[
+              props.headlerLayout === "center" ? styles.labelContainer : styles.leftLabelContainer,
+              { backgroundColor: themeColor.Bg2 },
+              props.headerStyle,
+            ]}
             onLayout={handleLabelLayout}
           >
-            {cancel ? (
-              <TouchableWithoutFeedback onPress={handleCancel}>
+            {!cancel ? (
+              props.headlerLayout === "center" ? (
+                <Block />
+              ) : (
+                <></>
+              )
+            ) : (
+              <TouchableOpacity onPress={handleCancel} activeOpacity={1}>
                 {cancelType === SheetsActionType.text ? (
-                  <View>
-                    <Text style={[styles.cancel, { color: themeColor.Title }]} testID="cancel">
-                      {cancelText || cancelKey}
-                    </Text>
-                  </View>
+                  <Text style={[styles.cancel, { color: themeColor.Title }]} testID="cancel">
+                    {cancelText || cancelKey}
+                  </Text>
                 ) : (
                   iconWrapper("cancel")
                 )}
-              </TouchableWithoutFeedback>
+              </TouchableOpacity>
+            )}
+            {label ? (
+              <Text style={[styles.label, { color: themeColor.Title }]}>
+                {label}
+                {showMask}
+              </Text>
             ) : (
-              <Block />
+              <></>
             )}
-            {label ? <Text style={[styles.label, { color: themeColor.Title }]}>{label}</Text> : <></>}
-            {close ? (
-              <TouchableWithoutFeedback onPress={handleConfirm}>
+            {!close ? (
+              props.headlerLayout === "center" ? (
+                <Block />
+              ) : (
+                <></>
+              )
+            ) : (
+              <TouchableOpacity onPress={handleConfirm} activeOpacity={1}>
                 {closeType === SheetsActionType.text ? (
                   <View>
                     <Text
@@ -454,9 +475,7 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
                 ) : (
                   iconWrapper("confirm")
                 )}
-              </TouchableWithoutFeedback>
-            ) : (
-              <Block />
+              </TouchableOpacity>
             )}
           </View>
         ) : (
@@ -503,7 +522,7 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
     </>
   );
 });
-
+// @ts-ignore
 AnimatedSheets.defaultProps = SheetsDefaultProps;
 
 export default AnimatedSheets;

package/src/components/Sheets/api.tsx

@@ -36,7 +36,7 @@ const useAnimatedSheets = (rootHostName?: string, multi: boolean = false) => {
     }
 
     animatedSheetsKey = Math.random().toString();
-
+    // @ts-ignore
     const render = () => <AnimatedSheetsContainer {...propsObject} ref={animatedRef} key={animatedSheetsKey} />;
 
     addPortal(animatedSheetsKey, render());
@@ -68,7 +68,7 @@ export const useSheets = () => {
       removePortal(sheetsKey);
     }
     sheetsKey = Math.random().toString();
-
+    // @ts-ignore
     addPortal(sheetsKey, <SheetsContainer {...propsObject} />);
   };
 

package/src/components/Sheets/demo/index.tsx

@@ -90,6 +90,7 @@ const ScrollChildren = () => {
   );
 };
 export default function App() {
+  const [visible, setVisible] = useState(false);
   const [visible1, setVisible1] = useState(false);
   const [visible2, setVisible2] = useState(false);
   const [visible3, setVisible3] = useState(false);
@@ -135,7 +136,26 @@ export default function App() {
   return (
     <View style={styles.container}>
       <ScrollView>
-        <Button onClick={() => setVisible1(true)}>显示标题与关闭按钮</Button>
+        <Button onClick={() => setVisible(true)}>显示标题与关闭按钮</Button>
+        <Portal>
+          <AnimatedSheets
+            visible={visible}
+            label={"标题"}
+            onCancel={() => setVisible(false)}
+            onConfirm={() => setVisible(false)}
+            cancel={false}
+            close={true}
+            closeType={SheetsType.SheetsActionType.icon}
+            cancelType={SheetsType.SheetsActionType.icon}
+            mask={true}
+          >
+            <Children />
+            <Button onClick={() => setShowView((val) => !val)}>测试弹窗高度变化</Button>
+            {showView ? <Text style={{ width: "100%", height: 900, backgroundColor: "#f00" }}>xxxxxxx</Text> : <></>}
+          </AnimatedSheets>
+        </Portal>
+
+        <Button onClick={() => setVisible1(true)}>左侧标题</Button>
         <Portal>
           <AnimatedSheets
             visible={visible1}
@@ -143,11 +163,11 @@ export default function App() {
             onCancel={() => setVisible1(false)}
             onConfirm={() => setVisible1(false)}
             cancel={false}
-            close={true}
+            close={false}
+            headlerLayout={"left"}
             avoidSheetsMove={true}
             closeType={SheetsType.SheetsActionType.icon}
             mask={true}
-            size={SheetsType.SheetsSize.half}
           >
             <Children />
             <Button onClick={() => setShowView((val) => !val)}>测试弹窗高度变化</Button>

package/src/components/Sheets/doc/index.mdx

@@ -10,33 +10,34 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性               | 描述                               | 类型               | 默认值                  |
-| ------------------ | ---------------------------------- | ------------------ | ----------------------- |
-| label              | 标题                               | string             |                         |
-| mask               | 是否展示遮罩层                     | boolean            | true                    |
-| maskMode           | 背景颜色类型                       | SheetsMaskMode     | SheetsMaskMode.light    |
-| sheetsType         | sheets类型                         | SheetsType         | SheetsType.normal       |
-| cancel             | 返回按钮                           | boolean            | true                    |
-| close              | 关闭按钮                           | boolean            | true                    |
-| zIndex             | 容器层级                           | number             | 0                       |
-| cancelType         | 返回按钮类型                       | SheetsActionType   | SheetsActionType.icon   |
-| closeType          | 确定按钮类型                       | SheetsActionType   | SheetsActionType.icon   |
-| cancelText         | 取消操作文案                       | string             |                         |
-| closeText          | 确定操作文案                       | string             |                         |
-| iconType           | icon 类型                          | SheetsIconType     | SheetsIconType.normal   |
-| size               | size                               | SheetsSize         | SheetsSize.auto         |
-| children           | sheets内容                         | ReactNode          |                         |
-| maskStyle          | mask style                         | ViewStyle          | `{}`                    |
-| sheetsStyle        | sheets style                       | ViewStyle          | `{}`                    |
-| headerStyle        | header样式                         | ViewStyle          | `{}`                    |
-| autoSize           | 高度                               | number             |                         |
-| header             | 自定义header                       | ReactNode          |                         |
-| animatedSheetsSize | AnimatedSheets是否是固定高度       | AnimatedSheetsSize | AnimatedSheetsSize.auto |
-| isMaskClose        | 点击弹层回调                       | boolean            | true                    |
-| visible            | 是否展示sheets                     | boolean            | false                   |
-| onImmediateCancel  | 点击关闭弹窗立即执行               | () => void         | () => {}                |
-| onImmediateConfirm | 点击确定弹窗立即执行               | () => void         | () => {}                |
-| avoidSheetsMove    | 安卓上是否阻止键盘弹出弹窗位置上移 | boolean            | false                   |
+| 属性               | 描述                               | 类型                   | 默认值                  |
+| ------------------ | ---------------------------------- | ---------------------- | ----------------------- |
+| label              | 标题                               | string                 |                         |
+| mask               | 是否展示遮罩层                     | boolean                | true                    |
+| maskMode           | 背景颜色类型                       | SheetsMaskMode         | SheetsMaskMode.light    |
+| sheetsType         | sheets类型                         | SheetsType             | SheetsType.normal       |
+| cancel             | 返回按钮                           | boolean                | true                    |
+| close              | 关闭按钮                           | boolean                | true                    |
+| zIndex             | 容器层级                           | number                 | 0                       |
+| cancelType         | 返回按钮类型                       | SheetsActionType       | SheetsActionType.icon   |
+| closeType          | 确定按钮类型                       | SheetsActionType       | SheetsActionType.icon   |
+| cancelText         | 取消操作文案                       | string                 |                         |
+| closeText          | 确定操作文案                       | string                 |                         |
+| iconType           | icon 类型                          | SheetsIconType         | SheetsIconType.normal   |
+| size               | size                               | SheetsSize             | SheetsSize.auto         |
+| children           | sheets内容                         | ReactNode              |                         |
+| maskStyle          | mask style                         | ViewStyle              | `{}`                    |
+| sheetsStyle        | sheets style                       | ViewStyle              | `{}`                    |
+| headerStyle        | header样式                         | ViewStyle              | `{}`                    |
+| autoSize           | 高度                               | number                 |                         |
+| header             | 自定义header                       | ReactNode              |                         |
+| animatedSheetsSize | AnimatedSheets是否是固定高度       | AnimatedSheetsSize     | AnimatedSheetsSize.auto |
+| isMaskClose        | 点击弹层回调                       | boolean                | true                    |
+| visible            | 是否展示sheets                     | boolean                | false                   |
+| onImmediateCancel  | 点击关闭弹窗立即执行               | () => void             | () => {}                |
+| onImmediateConfirm | 点击确定弹窗立即执行               | () => void             | () => {}                |
+| avoidSheetsMove    | 安卓上是否阻止键盘弹出弹窗位置上移 | boolean                | false                   |
+| headlerLayout      | headlerLayout                      | "center" | "left" | center                  |
 
 ### Events
 

package/src/components/Sheets/interface/index.ts

@@ -62,6 +62,7 @@ export interface RedsSheets {
   onImmediateCancel?: () => void;
   onImmediateConfirm?: () => void;
   avoidSheetsMove?: boolean;
+  headlerLayout?: "center" | "left";
 }
 
 export interface RedsSheetsEvent {}
@@ -89,4 +90,5 @@ export const SheetsDefaultProps = {
   onImmediateCancel: () => {},
   onImmediateConfirm: () => {},
   avoidSheetsMove: false,
+  headlerLayout: "center",
 };

package/src/components/Sheets/styles.ts

@@ -37,6 +37,17 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
   },
+  leftLabelContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexDirection: "row",
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+  },
   cancel: {
     fontSize: typography.B1LooseFontSize,
     fontWeight: typography.B1LooseFontWeight,
@@ -79,6 +90,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     flexDirection: "row",
     width: "100%",
+    paddingHorizontal: 56,
   },
   action: {
     flex: 1,

package/src/components/Skeleton/Item/SkeletonItem.tsx

@@ -3,12 +3,19 @@ import { View, Easing, Animated, Text } from "react-native";
 import { RedsSkeletonItem, SkeletonItemDefaultProps } from "./interface/index";
 import createStyles from "./styles";
 import { useThemeColor } from "../../ConfigProvider";
-import Svg, { Defs, LinearGradient, Stop, Rect } from "react-native-svg";
+import Svg, { Defs, LinearGradient, Stop, Rect, ClipPath } from "react-native-svg";
 
 const RectAnimation = Animated.createAnimatedComponent(Rect);
 
 const SkeletonItem = (props: RedsSkeletonItem) => {
-  const { loading, type, animation, containerStyle } = { ...SkeletonItemDefaultProps, ...props };
+  const {
+    loading,
+    type,
+    animation,
+    containerStyle,
+    borderRadius, // 解构新属性
+  } = { ...SkeletonItemDefaultProps, ...props };
+
   const animValue = useRef(new Animated.Value(0)).current;
   const themeColor = useThemeColor();
   const styles = createStyles(type);
@@ -33,7 +40,16 @@ const SkeletonItem = (props: RedsSkeletonItem) => {
 
   return (
     loading && (
-      <Animated.View style={[styles, containerStyle]}>
+      <Animated.View
+        style={[
+          styles,
+          {
+            borderRadius: borderRadius, // 应用 borderRadius
+            overflow: "hidden", // 确保内容不会超出圆角边界
+          },
+          containerStyle,
+        ]}
+      >
         <Svg height="100%" width="100%">
           <Defs>
             <LinearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0%">
@@ -41,8 +57,29 @@ const SkeletonItem = (props: RedsSkeletonItem) => {
               <Stop offset="28%" stopColor={props.color || themeColor.Fill1} stopOpacity={0.15} />
               <Stop offset="35%" stopColor={props.color || themeColor.Fill1} stopOpacity={0.2} />
             </LinearGradient>
+            {/* 如果需要 SVG 内容也遵循圆角，添加 ClipPath */}
+            {borderRadius > 0 && (
+              <ClipPath id="clip">
+                <Rect
+                  x="0"
+                  y="0"
+                  width="100%"
+                  height="100%"
+                  rx={type === "avatar" ? 100 : borderRadius}
+                  ry={type === "avatar" ? 100 : borderRadius}
+                />
+              </ClipPath>
+            )}
           </Defs>
-          <RectAnimation x={interpolatedValue} y="0%" width="400%" height="100%" fill="url(#gradient)" opacity={0.3} />
+          <RectAnimation
+            x={interpolatedValue}
+            y="0%"
+            width="400%"
+            height="100%"
+            fill="url(#gradient)"
+            opacity={0.3}
+            clipPath={borderRadius > 0 ? "url(#clip)" : undefined} // 应用裁剪路径
+          />
         </Svg>
       </Animated.View>
     )

package/src/components/Skeleton/Item/interface/index.ts

@@ -6,10 +6,12 @@ export interface RedsSkeletonItem {
   animation?: boolean;
   loading?: boolean;
   color?: string;
+  borderRadius?: number;
 }
 
 export const SkeletonItemDefaultProps = {
   type: "paragraph",
   animation: true,
   loading: true,
+  borderRadius: 4,
 };

package/src/components/Skeleton/Skeleton.tsx

@@ -9,7 +9,6 @@ const Skeleton = (props: RedsSkeleton) => {
   useMounted("Skeleton");
   const { loading, animation } = { ...SkeletonDefaultProps, ...props };
   const styles = createStyles();
-
   return (
     loading && (
       <>
@@ -33,11 +32,16 @@ const Skeleton = (props: RedsSkeleton) => {
           color={props.color}
         />
         <View style={styles.defaultBottomButton}>
-          <SkeletonItem animation={animation} type="button" containerStyle={{ width: 124 }} color={props.color} />
           <SkeletonItem
             animation={animation}
             type="button"
-            containerStyle={{ flex: 1, marginLeft: 15 }}
+            containerStyle={{ width: 124, borderRadius: 100 }}
+            color={props.color}
+          />
+          <SkeletonItem
+            animation={animation}
+            type="button"
+            containerStyle={{ flex: 1, marginLeft: 15, borderRadius: 100 }}
             color={props.color}
           />
         </View>

package/src/components/Skeleton/demo/button.tsx

@@ -5,8 +5,8 @@ import { SkeletonItem } from "@xhs/reds-rn-next";
 export default function App() {
   return (
     <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
-      <SkeletonItem type="button" containerStyle={{ width: 124 }} />
-      <SkeletonItem type="button" containerStyle={{ flex: 1, marginLeft: 15 }} />
+      <SkeletonItem type="button" containerStyle={{ width: 124, borderRadius: 100 }} />
+      <SkeletonItem type="button" containerStyle={{ flex: 1, marginLeft: 15, borderRadius: 100 }} />
     </View>
   );
 }

package/src/components/StatusBar/hook/getStatusHeight.ts

@@ -162,6 +162,10 @@ export const safeAreaBottomInset = () => {
     return 20;
   }
 
+  if (Platform.OS === "android") {
+    return 20;
+  }
+
   return 0;
 };
 

package/src/components/Tab/Tabs.tsx

@@ -74,7 +74,9 @@ const Tabs = (props: RedsTab) => {
         ? styles.tabLeftContainer
         : props?.layout === TabLayoutType.middle
           ? styles.tabCenterContainer
-          : styles.tabSpaceContainer,
+          : props?.layout === TabLayoutType.space
+            ? styles.tabSpaceContainer
+            : styles.tabRightContainer,
     ];
   }, [props?.layout]);
 
@@ -122,7 +124,7 @@ const Tabs = (props: RedsTab) => {
    * Icon颜色
    */
   const iconColor = (item: TabItemType) => {
-    return props.active === item.value ? item.iconProps?.fill : "";
+    return item.iconProps?.fill;
   };
 
   /**
@@ -157,6 +159,7 @@ const Tabs = (props: RedsTab) => {
         if (!widths.current[index]) {
           widths.current[index] = width;
         }
+
         const scaleWidth = 100 - ((widths.current?.[activeIndex] || 0) - 4);
         const offset = offsets.current[activeIndex];
         scrollRef.current?.scrollTo({
@@ -206,21 +209,21 @@ const Tabs = (props: RedsTab) => {
     <>
       <Wrapper testID="TabContainer">
         <View style={[styles.tabWrapper, props.containerStyle]}>
+          {/* 下划线  */}
+          {props.theme === TabThemeType.underline ? (
+            <Animated.View
+              style={[
+                styles.underline,
+                { width: initialWidth },
+                { opacity: underlineOpacity }, // 控制透明度
+                { transform: [{ translateX: underlineOffset }, { scaleX: underlineScale }] },
+                computedStyle.backgroundColor.primary,
+              ]}
+            ></Animated.View>
+          ) : (
+            <></>
+          )}
           <View style={[...containerStyle]} ref={parentRef}>
-            {/* 下划线  */}
-            {props.theme === TabThemeType.underline ? (
-              <Animated.View
-                style={[
-                  styles.underline,
-                  { width: initialWidth },
-                  { opacity: underlineOpacity }, // 控制透明度
-                  { transform: [{ translateX: underlineOffset }, { scaleX: underlineScale }] },
-                  computedStyle.backgroundColor.primary,
-                ]}
-              ></Animated.View>
-            ) : (
-              <></>
-            )}
             {list.map((item: TabItemType, index: number) => {
               return (
                 <TouchableWithoutFeedback

package/src/components/Tab/doc/index.mdx

@@ -19,7 +19,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | badge           | 是badge类型     | boolean              | false                  |
 | containerStyle  | tab容器样式     | any                  |                        |
 | spaceWidth      | tab间距         | number               | 12                     |
-| tabPadding      | tab padding     | number               | 24                     |
+| tabPadding      | tab padding     | number               | 0                      |
 | active          | 当前激活tab     | string               |                        |
 | children        | tab组件         | ReactNode[]          |                        |
 | key             | key             | string | number |                        |

package/src/components/Tab/interface/index.ts

@@ -33,6 +33,7 @@ export const enum TabLayoutType {
   left = "left",
   middle = "middle",
   space = "space",
+  right = "right",
 }
 export interface RedsTab {
   theme?: TabThemeType;
@@ -60,7 +61,7 @@ export const TabDefaultProps = {
   layout: TabLayoutType.left,
   badge: false,
   spaceWidth: 12,
-  tabPadding: 24,
+  tabPadding: 0,
   active: "",
   contentOffset: 0,
   textStyle: {},

package/src/components/Tab/styles.ts

@@ -23,6 +23,11 @@ const createStyles = (props: RedsTab) => {
       flexDirection: "row",
       justifyContent: "flex-start",
     },
+    tabRightContainer: {
+      flex: 1,
+      flexDirection: "row",
+      justifyContent: "flex-end",
+    },
     tabSpaceContainer: {
       width: "100%",
       flexDirection: "row",
@@ -40,7 +45,7 @@ const createStyles = (props: RedsTab) => {
       borderRadius: 2,
       paddingHorizontal: 2,
       position: "absolute",
-      bottom: -2,
+      bottom: 8,
     },
     capsule: {
       borderRadius: 25,

package/src/components/TabBar/TabBar.tsx

@@ -9,7 +9,7 @@ import useMounted from "../../pvCount/useUnmountedProcess";
 /**
  * 默认icon大小
  */
-const defaultIconSize = 20;
+const defaultIconSize = 24;
 
 const TabBar = (props: RedsTabBar) => {
   const styles = createStyles();
@@ -74,7 +74,9 @@ const TabBar = (props: RedsTabBar) => {
   const Wrapper = (wrapperProps: { badgeProps: RedsBadge; children: React.ReactNode }) => {
     return props?.badge ? (
       <View style={styles.badgeWrapper}>
-        <Badge {...wrapperProps.badgeProps}>{wrapperProps.children}</Badge>
+        <Badge {...wrapperProps.badgeProps} offset={wrapperProps.badgeProps.dot ? [0, 0] : [10, 0]}>
+          {wrapperProps.children}
+        </Badge>
       </View>
     ) : (
       wrapperProps.children