@xhsreds/reds-rn-next 0.8.3 → 0.8.4-beta202510231402

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

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { Text, ScrollView, View } from "react-native";
+import { Text, ScrollView, View, TouchableWithoutFeedback } from "react-native";
 import {
   Form,
   FormItem,
@@ -15,10 +15,14 @@ import {
   TextField,
   Icon,
   Image,
+  Picker,
+  useThemeColor,
+  Uploader,
 } from "@xhs/reds-rn-next";
-import { AddFriends } from "@xhs/reder-icon-svg-ReDs_icon";
+import { AddFriends, ArrowRightCenterM } from "@xhs/reder-icon-svg-ReDs_icon";
 
 export default function App() {
+  const themeColor = useThemeColor();
   const [formData, setFormData] = useState({
     textField: "设置默认值",
     rate: 0,
@@ -26,8 +30,12 @@ export default function App() {
     radio: "",
     checkbox: [1, 2, 3],
     switch: false,
+    picker: ["Thur", "am"],
+    upload: [],
   });
 
+  const [visible, setVisible] = useState(false);
+
   const formRef = useRef();
 
   const [formRules, setFormRules] = useState({
@@ -61,15 +69,44 @@ export default function App() {
     ],
   });
 
+  const twoColumns = [
+    [
+      { label: "周一", value: "Mon" },
+      { label: "周二", value: "Tues" },
+      { label: "周三", value: "Wed" },
+      { label: "周四", value: "Thur" },
+      { label: "周五", value: "Fri" },
+      { label: "周一1", value: "Mon1" },
+      { label: "周二1", value: "Tues1" },
+      { label: "周三1", value: "Wed1" },
+      { label: "周四1", value: "Thur1" },
+      { label: "周五1", value: "Fri1" },
+    ],
+    [
+      { label: "上午", value: "am" },
+      { label: "下午", value: "pm" },
+    ],
+  ];
+
   const handleSubmit = (value: any) => {
     console.log("handleSubmit", value);
   };
 
+  const handlePickerChange = (val: string[]) => {
+    console.log("handlePickerChange", val);
+  };
+
   const handleSubmitCustom = () => {
     // @ts-expect-error
     formRef?.current?.handleSubmit?.();
   };
 
+  const handlePickerConfirm = (val: string[]) => {
+    console.log("handlePickerConfirm", val);
+    setVisible(false);
+    setFormData((data) => ({ ...data, ...{ picker: val } }));
+  };
+
   return (
     <ScrollView style={{ paddingHorizontal: 16 }}>
       <Text>默认用法</Text>
@@ -98,7 +135,7 @@ export default function App() {
         <FormItem label="rate" name="rate" value={formData.rate} required key="rate">
           <Rate
             value={formData.rate}
-            onChange={(value) => {
+            onChange={(value: any) => {
               setFormData((data) => ({ ...data, ...{ rate: value } }));
             }}
           />
@@ -106,7 +143,7 @@ export default function App() {
         <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
           <Stepper
             value={formData.stepper}
-            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
         <FormItem label="radio输入" name="radio" value={formData.radio} key="radio" required>
@@ -121,7 +158,7 @@ export default function App() {
         </FormItem>
         <FormItem label="checkbox输入" name="checkbox" value={formData.checkbox} key="checkbox">
           <CheckBoxGroup
-            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            onChange={(val: any) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
             value={formData.checkbox}
           >
             <CheckBox label="多选" value={1} />
@@ -131,21 +168,66 @@ export default function App() {
           </CheckBoxGroup>
         </FormItem>
         <FormItem label="switch" name="switch" value={formData.switch} key="switch" required>
-          <Switch value={formData.switch} onChange={(val) => setFormData((data) => ({ ...data, switch: val }))} />
+          <Switch value={formData.switch} onChange={(val: any) => setFormData((data) => ({ ...data, switch: val }))} />
+        </FormItem>
+        <FormItem label="选择器" name="picker" value={formData.picker} required key="picker">
+          <TouchableWithoutFeedback onPress={() => setVisible(true)}>
+            <View
+              style={{
+                width: 240,
+                flex: 1,
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Button variant={"text"} onClick={() => setVisible(true)}>
+                日期/地点
+              </Button>
+              <Icon icon={ArrowRightCenterM} fill={themeColor.Fill5} size={16} />
+            </View>
+          </TouchableWithoutFeedback>
+          <Picker
+            columns={twoColumns}
+            value={formData.picker}
+            visible={visible}
+            onCancel={() => setVisible(false)}
+            onConfirm={handlePickerConfirm}
+            onChange={handlePickerChange}
+          />
+        </FormItem>
+        <FormItem
+          label="文件上传"
+          name="upload"
+          value={formData.upload}
+          required
+          key="upload"
+          layout={FormType.LAYOUT.VERTICAL}
+        >
+          <Uploader
+            value={formData.upload}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ upload: value } }))}
+            accept="image/*"
+            multiple={true}
+            isFormItem={true}
+          />
         </FormItem>
       </Form>
       <Text>垂直布局</Text>
       <Form data={formData} rules={formRules} onSubmit={handleSubmit} layout={FormType.LAYOUT.VERTICAL}>
-        <FormItem label="rate" name="rate" value={formData.rate} required key="rate">
-          <Rate value={formData.rate} onChange={(value) => setFormData((data) => ({ ...data, ...{ rate: value } }))} />
+        <FormItem label="rate 选填" name="rate" value={formData.rate} key="rate">
+          <Rate
+            value={formData.rate}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ rate: value } }))}
+          />
         </FormItem>
-        <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
+        <FormItem label="stepper 选填" name="stepper" value={formData.stepper} key="stepper">
           <Stepper
             value={formData.stepper}
-            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
-        <FormItem label="radio输入" name="radio" value={formData.radio} key="radio">
+        <FormItem label="radio 选填" name="radio" value={formData.radio} key="radio">
           <RadioGroup
             value={formData.radio}
             onChange={(value: string | number) => setFormData((data) => ({ ...data, ...{ radio: value as string } }))}
@@ -155,9 +237,9 @@ export default function App() {
             <Radio name="C">选项</Radio>
           </RadioGroup>
         </FormItem>
-        <FormItem label="checkbox输入" name="checkbox" value={formData.checkbox} key="checkbox">
+        <FormItem label="checkbox 选填" name="checkbox" value={formData.checkbox} key="checkbox">
           <CheckBoxGroup
-            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            onChange={(val: any) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
             value={formData.checkbox}
           >
             <CheckBox label="多选" value={1} />
@@ -171,12 +253,15 @@ export default function App() {
       <Text>居右布局</Text>
       <Form data={formData} rules={formRules} onSubmit={handleSubmit} align={FormType.ALIGN.RIGHT}>
         <FormItem label="rate" name="rate" value={formData.rate} required key="rate">
-          <Rate value={formData.rate} onChange={(value) => setFormData((data) => ({ ...data, ...{ rate: value } }))} />
+          <Rate
+            value={formData.rate}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ rate: value } }))}
+          />
         </FormItem>
         <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
           <Stepper
             value={formData.stepper}
-            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
         <FormItem label="radio输入" name="radio" value={formData.radio} key="radio">
@@ -191,7 +276,7 @@ export default function App() {
         </FormItem>
         <FormItem label="checkbox输入" name="checkbox" value={formData.checkbox} key="checkbox">
           <CheckBoxGroup
-            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            onChange={(val: any) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
             value={formData.checkbox}
           >
             <CheckBox label="多选" value={1} />
@@ -205,12 +290,15 @@ export default function App() {
       <Text>部分垂直布局</Text>
       <Form data={formData} rules={formRules} onSubmit={handleSubmit} showSubmit={false} ref={formRef}>
         <FormItem label="rate" name="rate" value={formData.rate} required key="rate" layout={FormType.LAYOUT.VERTICAL}>
-          <Rate value={formData.rate} onChange={(value) => setFormData((data) => ({ ...data, ...{ rate: value } }))} />
+          <Rate
+            value={formData.rate}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ rate: value } }))}
+          />
         </FormItem>
         <FormItem label="stepper" name="stepper" value={formData.stepper} required key="stepper">
           <Stepper
             value={formData.stepper}
-            onChange={(value) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
+            onChange={(value: any) => setFormData((data) => ({ ...data, ...{ stepper: value } }))}
           />
         </FormItem>
         <FormItem label="radio输入" name="radio" value={formData.radio} key="radio">
@@ -231,7 +319,7 @@ export default function App() {
           LabelComponent={<Text>自定义label</Text>}
         >
           <CheckBoxGroup
-            onChange={(val) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
+            onChange={(val: any) => setFormData((data) => ({ ...data, checkbox: val as number[] }))}
             value={formData.checkbox}
           >
             <CheckBox label="多选" value={1} />

package/src/components/Image/Image.tsx

@@ -60,12 +60,15 @@ const Image = ({
   const [imageStatus, setImageStatus] = useState(IMAGE_STATUS.LOADING);
   const [progress, setProgress] = useState(0);
 
+  const [loadedTime, setLoadedTime] = useState(0);
+  const [loadStartTime, setLoadStartTime] = useState(0);
+
   const formatSource = useMemo(() => {
     // @ts-ignore
-    if (_source) return { uri: formatUri({ uri: _source.uri, width }) } as ImageSourcePropTyp;
+    if (_source) return _source as ImageSourcePropTyp;
     // @ts-ignore
-    return { uri: formatUri({ uri: src, width }) } as ImageSourcePropType;
-  }, [src, _source, width]);
+    return { uri: src } as ImageSourcePropType;
+  }, [src, _source]);
 
   const aveColor = useAveColor({
     source: formatSource,
@@ -176,14 +179,15 @@ const Image = ({
       }
     }
   }, [viewable, pushApmData, abortApmCollection]);
+
   const onLoadEnd = () => {
     props?.onLoadEnd?.();
     if (abortApmCollection) return;
     const apmData = apmDataRef.current;
     // 进入视窗后加载成功/失败
-    if (apmData.intersectTime) {
-      pushApmData();
-    }
+    // if (apmData.intersectTime) {
+    pushApmData();
+    // }
   };
 
   const onProgress = (e: NativeSyntheticEvent<ImageProgressEventDataIOS>) => {
@@ -199,6 +203,7 @@ const Image = ({
   const onLoad = (e: NativeSyntheticEvent<ImageLoadEventData>) => {
     if (!abortApmCollection) {
       const now = Date.now();
+      setLoadedTime(now);
       const loadDuration = now - apmDataRef.current.loadedStartTime;
       apmDataRef.current.loadedTime = now;
       apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
@@ -208,8 +213,17 @@ const Image = ({
     setImageStatus(IMAGE_STATUS.LOADED);
   };
 
+  useEffect(() => {
+    const loadDuration = loadedTime - loadStartTime;
+    apmDataRef.current.loadDuration = loadDuration < 0 ? 0 : loadDuration;
+  }, [loadedTime, loadStartTime]);
+
   const onLoadStart = () => {
-    !abortApmCollection && (apmDataRef.current.loadedStartTime = Date.now());
+    if (!abortApmCollection) {
+      const now = Date.now();
+      apmDataRef.current.loadedStartTime = now;
+      setLoadStartTime(now);
+    }
   };
 
   const onError = (e: NativeSyntheticEvent<ImageErrorEventData>) => {
@@ -246,7 +260,7 @@ const Image = ({
               onLoadEnd={onLoadEnd}
               fadeDuration={fadeDuration}
               // @ts-ignore
-              onFirstDrawFinished={(e) => onFirstDrawFinished(e)}
+              onFirstDrawFinished={onFirstDrawFinished}
               style={{
                 width: width || style?.width,
                 height: height || style?.height,
@@ -269,7 +283,7 @@ const Image = ({
             onLoadEnd={onLoadEnd}
             fadeDuration={fadeDuration}
             // @ts-ignore
-            onFirstDrawFinished={(e) => onFirstDrawFinished(e)}
+            onFirstDrawFinished={onFirstDrawFinished}
             style={{
               width: width || style?.width,
               height: height || style?.height,

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

@@ -24,6 +24,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | abortApmCollection | 是否放弃上报图片加载性能数据      | boolean                              | false            |
 | apmBiz             | 客户端上报埋点参数                | ApmBiz                               |                  |
 | fadeDuration       | 控制图片加载时的动画持续事件      | number                               | 300              |
+| format             | 是否启动format                    | boolean                              | true             |
 
 ### Events
 

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

@@ -52,6 +52,7 @@ export interface RedsImage {
   apmBiz?: ApmBiz;
   onFirstDrawFinished?: (e: Event) => void;
   fadeDuration?: number;
+  format?: boolean;
 }
 
 export interface RedsImageEvent {}
@@ -63,6 +64,7 @@ export const ImageDefaultProps = {
   abortApmCollection: false,
   onFirstDrawFinished: () => {},
   fadeDuration: 300,
+  format: true,
 };
 
 export interface ImageTrackerProps {

package/src/components/Image/utils.ts

@@ -95,7 +95,6 @@ type UriWithVendorWidth = {
 
 export function formatUri(options: UriWithWidth | UriWithVendorWidth) {
   const { uri, enableWebP = true, quality = 80, keepQuery } = options;
-  console.log("formatUri uri", uri);
   try {
     const width = (options as UriWithWidth).width;
     const vendorWidth = (options as UriWithVendorWidth).vendorWidth;
@@ -125,7 +124,6 @@ export function formatUri(options: UriWithWidth | UriWithVendorWidth) {
     if (enableWebP) {
       href += "/format/webp";
     }
-    console.log("href", href);
     return href;
   } catch (e) {
     return uri;

package/src/components/ImagePreview/ImagePreview.tsx

@@ -3,7 +3,9 @@ import { Text, Image, Animated, View, TouchableOpacity, TouchableWithoutFeedback
 import Carousel from "../Carousel";
 import { RedsImagePreview, ImagePreviewDefaultProps } from "./interface";
 import styles from "./styles";
+import useMounted from "../../pvCount/useUnmountedProcess";
 const ImagePreview = (props: RedsImagePreview) => {
+  useMounted("Image");
   const [currentIndex, setCurrentIndex] = useState(props.initIndex || 0);
   const [_visible, setVisible] = useState(props.visible);
   const handleChange = (url: string, index: number) => {

package/src/components/LanguageProvider/LanguageProvider.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { RedsLanguageProvider, LanguageProviderDefaultProps } from "./interface/index";
 import { LanguageProviderContext } from "./hooks/LanguageContext";
-
+import useMounted from "../../pvCount/useUnmountedProcess";
 const LanguageProvider = (props: RedsLanguageProvider) => {
+  useMounted("LanguageProvider");
   const { children } = props;
   return (
     <LanguageProviderContext.Provider value={{ language: props.language!, config: props.config }}>

package/src/components/List/List.tsx

@@ -37,7 +37,7 @@ const List: React.FC<RedsList> = ({ headerText, footerText, type = "grouped", co
   }, [registeredChildren.current]);
 
   return (
-    <View style={[styles.list, containerStyle]}>
+    <View style={[styles.list, containerStyle, { marginHorizontal: type === "grouped" ? 16 : 0 }]}>
       {headerText && <Text style={type === "plain" ? styles.headerTextPlain : styles.headerText}>{headerText}</Text>}
       <ListContext.Provider value={{ registerChild, unregisterChild }}>
         <View style={type === "plain" ? styles.listContainerPlain : styles.listContainer}>{children}</View>

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

@@ -4,6 +4,7 @@ import { useListContext } from "./ListContext";
 import { useColorMode } from "../../ConfigProvider";
 import createStyles from "../styles";
 import useMounted from "../../../pvCount/useUnmountedProcess";
+import { Badge } from "../../Badge";
 
 export interface RedsListItem {
   title: string;
@@ -18,6 +19,8 @@ export interface RedsListItem {
   prefixStyle?: ViewStyle;
   children?: ReactNode;
   contentStyle?: ViewStyle;
+  badgeActionContent?: string;
+  badgeTitleContent?: string;
 }
 
 const ListItem: React.FC<RedsListItem> = ({
@@ -33,6 +36,8 @@ const ListItem: React.FC<RedsListItem> = ({
   prefixStyle = {},
   contentStyle = {},
   children,
+  badgeActionContent,
+  badgeTitleContent,
 }) => {
   useMounted("ListItem");
   const styles = createStyles();
@@ -67,9 +72,13 @@ const ListItem: React.FC<RedsListItem> = ({
           children
         ) : (
           <View style={[styles.content, contentStyle]}>
-            {prefix && <View style={[styles.prefix, prefixStyle]}>{prefix}</View>}
-            <View style={styles.contentBox}>
-              <View style={styles.contentContainer}>
+            {prefix && (
+              <View style={[styles.prefix, { height: listItemSizeToHeight[size] }, prefixStyle]}>{prefix}</View>
+            )}
+            <View style={[styles.contentBox, lineItem ? styles.hr : {}, { height: listItemSizeToHeight[size] }]}>
+              <View
+                style={[styles.contentContainer, { marginBottom: 12, marginTop: 12 }, prefix ? { height: 48 } : {}]}
+              >
                 <View style={styles.textContainer}>
                   <Text style={styles.title}>{title}</Text>
                   {size === "expand" && subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
@@ -80,6 +89,11 @@ const ListItem: React.FC<RedsListItem> = ({
                   ) : (
                     <View style={styles.tail}>
                       <Text style={[styles.tailText, actionTextStyle]}>{actionText}</Text>
+                      {badgeActionContent && (
+                        <Badge content={badgeActionContent} position="centerLeft" offset={[-15, 7]}>
+                          <View></View>
+                        </Badge>
+                      )}
                       {arrow && (
                         <View style={{ height: 16, width: 16 }}>
                           <Image
@@ -101,7 +115,6 @@ const ListItem: React.FC<RedsListItem> = ({
             </View>
           </View>
         )}
-        {lineItem && <View style={[styles.hr, { top: size === "regular" ? 12 : 20 }]}></View>}
       </View>
     </TouchableWithoutFeedback>
   );

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, ScrollView, StyleSheet, Image } from "react-native";
-import { List, Button, ListItem } from "@xhs/reds-rn-next";
+import { List, Button, ListItem, Switch, useThemeColor, Icon } from "@xhs/reds-rn-next";
+import { RowDoubleNew } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const styles = StyleSheet.create({
   container: {
@@ -8,7 +9,7 @@ const styles = StyleSheet.create({
     backgroundColor: "#F5F5F5",
     paddingVertical: 40,
     marginBottom: 40,
-    paddingHorizontal: 16,
+    // paddingHorizontal: 16,
   },
   titleBox: {
     marginLeft: 20,
@@ -26,13 +27,20 @@ const styles = StyleSheet.create({
     borderRadius: 24,
   },
   grayBox: {
-    width: 30,
-    height: 30,
+    width: 48,
+    height: 48,
     backgroundColor: "gray",
   },
+  center: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });
 
 export default function ListDemo() {
+  const themeColor = useThemeColor();
   return (
     <ScrollView style={styles.container}>
       <Text style={styles.titleBox}>基本使用</Text>
@@ -47,6 +55,39 @@ export default function ListDemo() {
         <ListItem title="标题" actionText="描述" />
       </List>
 
+      <List headerText="单行没有icon没有描述" type="plain">
+        <ListItem title="标题" />
+      </List>
+
+      <List type="plain">
+        <ListItem title="Prefix" prefix={<Icon icon={RowDoubleNew} size={24} fill={themeColor.Fill5} />} />
+      </List>
+
+      <List type="plain">
+        <ListItem title="标题" badgeActionContent={"内容"} arrow />
+      </List>
+      <List type="plain">
+        <ListItem
+          title="Prefix"
+          size="expand"
+          prefix={<Icon icon={RowDoubleNew} size={24} fill={themeColor.Fill5} />}
+          subtitle="这是一段很长的描述"
+        />
+      </List>
+      <List type="plain">
+        <ListItem
+          title="Prefix"
+          size="expand"
+          prefix={
+            <Image
+              style={styles.avatar}
+              source={{
+                uri: "https://picasso-static.xiaohongshu.com/fe-platform/81bb94fcff424f3ca02d620e7460d5a8315b0158.png",
+              }}
+            />
+          }
+        />
+      </List>
       <Text style={styles.titleBox}>类型</Text>
       <List headerText="Type: Plain" type="plain">
         <ListItem title="标题" actionText="描述" />
@@ -59,6 +100,10 @@ export default function ListDemo() {
         <ListItem title="标题" arrow />
       </List>
 
+      <List headerText="Badge">
+        <ListItem title="标题" badgeActionContent={"内容"} arrow />
+      </List>
+
       <Text style={styles.titleBox}>尺寸</Text>
       <List headerText="Size: Regular | Expand">
         <ListItem title="Size: Regular" actionText="描述" />
@@ -67,6 +112,14 @@ export default function ListDemo() {
 
       <Text style={styles.titleBox}>插槽</Text>
       <List headerText="Prefix 插槽">
+        <ListItem title="标题" badgeActionContent={"内容"} arrow />
+        <ListItem title="Normal" subtitle="这是一段很长的描述" size="expand" />
+        <ListItem
+          title="Prefix"
+          size="expand"
+          prefix={<Icon icon={RowDoubleNew} size={24} fill={themeColor.Fill5} />}
+          subtitle="这是一段很长的描述"
+        />
         <ListItem
           title="Prefix"
           size="expand"
@@ -104,6 +157,15 @@ export default function ListDemo() {
             </Button>
           }
         />
+        <ListItem
+          title="Action"
+          action={
+            <View style={styles.center}>
+              <Text style={{ color: themeColor.Description, marginRight: 8 }}>描述</Text>
+              <Switch isControl={false}></Switch>
+            </View>
+          }
+        />
         <ListItem
           title="Action"
           subtitle="slot"
@@ -147,7 +209,7 @@ export default function ListDemo() {
           subtitle="副标题"
           prefix={<View style={styles.grayBox} />}
         >
-          <View style={{ height: 100, backgroundColor: "lightgreen", width: "100%" }}></View>
+          <View style={{ height: 100, backgroundColor: "lightgreen", flex: 1 }}></View>
         </ListItem>
         <ListItem title="长长长标题" actionText="ACTION" arrow />
         <ListItem title="标题 2" actionText="描述" />

package/src/components/List/styles.ts

@@ -50,26 +50,28 @@ const createStyles = () => {
     listItem: {
       display: "flex",
       flexDirection: "column",
-      paddingVertical: 12,
       paddingLeft: 12,
     },
     expand: {},
     prefix: {
       marginRight: 12,
       marginLeft: 4,
+      paddingVertical: 12,
     },
     content: {
       display: "flex",
       flexDirection: "row",
-      alignItems: "center",
+      alignItems: "flex-start",
       justifyContent: "flex-start",
     },
     contentBox: {
       flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
     },
     contentContainer: {
       flexDirection: "row",
-      alignItems: "center",
+      // alignItems: "center",
       justifyContent: "space-between",
       width: "100%",
     },
@@ -85,7 +87,7 @@ const createStyles = () => {
     title: {
       fontSize: typography.B1FontSize,
       fontWeight: typography.B1FontWeight,
-      lineHeight: typography.B1LineHeight,
+      // lineHeight: typography.B1LineHeight,
       color: themeColor.Title,
     },
     subtitle: {
@@ -93,6 +95,7 @@ const createStyles = () => {
       color: themeColor.Description,
       lineHeight: typography.C2LineHeight,
       fontWeight: typography.C2FontWeight,
+      marginTop: 4,
     },
     tail: {
       marginRight: 16,
@@ -107,16 +110,18 @@ const createStyles = () => {
     },
 
     hr: {
-      borderTopWidth: 0.5,
-      borderTopColor: themeColor.Separator,
+      borderBottomWidth: 0.5,
       width: "100%",
-      alignSelf: "stretch",
-      position: "relative",
+      borderBottomColor: themeColor.Separator,
     },
     icon: {
       width: 16,
       height: 16,
     },
+    badge: {
+      height: "100%",
+      width: 1,
+    },
   });
   return styles;
 };

package/src/components/MiniSnackBar/MiniSnackBar.tsx

@@ -8,7 +8,7 @@ import { useLanguage } from "../LanguageProvider";
 const SnackBar: React.FC<RedsMiniSnackBar> = (
   { show, title, onClick = () => {}, prefixImage, suffixButton, style = {} } = { ...MiniSnackBarDefaultProps },
 ) => {
-  useMounted("SnackBar");
+  useMounted("MiniSnackBar");
   const translateY = useRef(new Animated.Value(0)).current;
   const opacity = useRef(new Animated.Value(0)).current;
   const height = useRef(0);