@xhsreds/reds-rn-next 0.11.1-web202512221520 → 0.11.2

package/src/components/Alert/Alert.tsx

@@ -10,86 +10,15 @@ import {
   GestureResponderEvent,
   Animated,
   TouchableOpacity,
-  ViewStyle,
 } from "react-native";
 import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 import { RedsAlert, AlertDefaultProps } from "./interface";
 import { Button } from "../Button";
-import PortalHost from "../SlimAlert/PortalHost";
+import { Divider } from "../Divider";
+import { Portal } from "../Portal";
 import { style } from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { useLanguage } from "../LanguageProvider";
-// const AlertView: React.FC<RedsAlert> = (props) => {
-//   const finalProps = { ...AlertDefaultProps, ...props };
-//   const {
-//     show,
-//     title,
-//     message,
-//     confirmText,
-//     cancelText,
-//     onConfirm,
-//     onCancel,
-//     onOpen,
-//     onClose,
-//     align,
-//     // showScrollOverlay,
-//     footerLayout,
-//     showConfirmButton,
-//     showCancelButton,
-//     mask,
-//     footerType,
-//     header,
-//     footer,
-//     children,
-//     onMask,
-//     confirmBtnStyle,
-//   } = finalProps;
-//   const themeColor = useThemeColor("Alert");
-//   const cancelKey = useLanguage("componentKey", "cancelKey");
-//   const confirmKey = useLanguage("componentKey", "confirmKey");
-//   const styles = style(props);
-//   // const [hasScrollToBottom, setHasScrollToBottom] = useState(true);
-//   const fadeAnim = useRef(new Animated.Value(0)).current;
-
-//   useEffect(() => {
-//     if (show && onOpen) onOpen();
-//     if (!show && onClose) onClose();
-//   }, [show]);
-
-//   const handleConfirm = (e: GestureResponderEvent) => {
-//     if (onConfirm) onConfirm(e);
-//   };
-
-//   const handleCancel = (e: GestureResponderEvent) => {
-//     if (onCancel) onCancel(e);
-//   };
-//   return show ? (
-//     <>
-//       <Animated.View
-//         style={[
-//           styles.centeredView,
-//           {
-//             transform: [
-//               {
-//                 scale: fadeAnim.interpolate({
-//                   inputRange: [0, 1],
-//                   outputRange: [1, 1],
-//                 }),
-//               },
-//             ],
-//           },
-//         ]}
-//       >
-//         {mask && (
-//           <TouchableOpacity onPress={() => { console.log('onMask xxxx')}} activeOpacity={1}>
-//             <View style={styles.modalOverlay} />
-//           </TouchableOpacity>
-//         )}
-
-//       </Animated.View>
-//     </>
-//   ) : null;
-// };
 
 const Alert: React.FC<RedsAlert> = (props) => {
   const finalProps = { ...AlertDefaultProps, ...props };
@@ -117,6 +46,7 @@ const Alert: React.FC<RedsAlert> = (props) => {
     confirmBtnStyle,
     cancelBtnStyle,
     confirmBtnTextStyle,
+    cancelBtnTextStyle,
     hostName,
     onMask,
   } = finalProps;
@@ -142,9 +72,10 @@ const Alert: React.FC<RedsAlert> = (props) => {
     if (onCancel) onCancel(e);
   };
   useMounted("Alert");
+
   return show ? (
-    <PortalHost hostName={props.hostName}>
-      <View style={[styles.centeredView, { position: props.hostName ? "absolute" : "fixed" } as ViewStyle]}>
+    <Portal hostName={hostName}>
+      <View style={styles.centeredView}>
         {mask && (
           <TouchableWithoutFeedback onPress={onMask}>
             <View style={styles.modalOverlay} />
@@ -164,7 +95,7 @@ const Alert: React.FC<RedsAlert> = (props) => {
             },
           ]}
         >
-          <View style={[styles.alertContainer, { top: props.offset?.y || 0, left: props.offset?.x || 0 }]}>
+          <View style={[styles.alertContainer, props.style, { top: props.offset?.y || 0, left: props.offset?.x || 0 }]}>
             {header}
             <View style={[styles.alertContent, props.contentStyle]}>
               <Text style={styles.title}>{title}</Text>
@@ -180,9 +111,6 @@ const Alert: React.FC<RedsAlert> = (props) => {
               ) : (
                 children
               )}
-              {/* {showScrollOverlay && hasScrollToBottom && canScroll ? (
-                <Image source={{ uri: scrollViewMask.default }} style={styles.scrollOverlay} />
-              ) : null} */}
             </View>
             {footer ? (
               footer
@@ -191,7 +119,7 @@ const Alert: React.FC<RedsAlert> = (props) => {
                 style={[
                   styles.footer,
                   footerLayout === "vertical" ? styles.footerVertical : styles.footerHorizontal,
-                  footerType === "text" && styles.footerText,
+                  // footerType === "text" && styles.footerText,
                   props.footerStyle,
                 ]}
               >
@@ -200,12 +128,12 @@ const Alert: React.FC<RedsAlert> = (props) => {
                     variant={footerType === "text" ? "text" : "outline"}
                     onClick={handleCancel}
                     style={{
-                      ...(footerLayout === "vertical" ? styles.verCancelButton : styles.cancelButton),
+                      ...styles.cancelButton,
                       ...cancelBtnStyle,
                     }}
                     size={footerType === "text" ? (footerLayout === "vertical" ? "medium" : "large") : "medium"}
                     {...(props.cancelBtnProps || {})}
-                    textStyle={styles.cancelText}
+                    textStyle={[styles.cancelText, cancelBtnTextStyle]}
                   >
                     {cancelText || cancelKey}
                   </Button>
@@ -214,10 +142,10 @@ const Alert: React.FC<RedsAlert> = (props) => {
                   showCancelButton &&
                   (footerLayout === "vertical" ? (
                     // @ts-ignore
-                    <View direction={"horizontal"} style={styles.horizontalLine} />
+                    <View style={styles.horizontalLine} />
                   ) : (
                     // @ts-ignore
-                    <View direction={"vertical"} style={styles.verticalLine} />
+                    <View style={styles.verticalLine} />
                   ))}
                 {showConfirmButton && (
                   <Button
@@ -225,11 +153,10 @@ const Alert: React.FC<RedsAlert> = (props) => {
                     variant={footerType === "text" ? "text" : "fill"}
                     onClick={handleConfirm}
                     style={{
-                      ...(footerType === "text" ? styles.button : styles.confirmButton),
-                      ...(footerLayout === "vertical" ? styles.verButton : styles.confirmButton),
+                      ...styles.confirmButton,
                       ...confirmBtnStyle,
                     }}
-                    textStyle={confirmBtnTextStyle}
+                    textStyle={[styles.confirmButtonText, confirmBtnTextStyle]}
                     size={footerType === "text" ? (footerLayout === "vertical" ? "medium" : "large") : "medium"}
                     {...(props.confirmBtnProps || {})}
                   >
@@ -241,7 +168,7 @@ const Alert: React.FC<RedsAlert> = (props) => {
           </View>
         </Animated.View>
       </View>
-    </PortalHost>
+    </Portal>
   ) : null;
 };
 

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

@@ -169,7 +169,7 @@ export default function App() {
               type="primary"
               variant="outline"
             >
-              不显示取消按钮的alert
+              横向布局不显示取消按钮的alert
             </Button>
           </View>
 

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

@@ -33,8 +33,10 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | offset              | alert在父容器的位置offset              | AlertOffset                                  | `{"x":0,"y":0}` |
 | hostName            | alert对应PortalProvider hostName       | string                                       | root            |
 | confirmBtnTextStyle | confirmBtnTextStyle                    | TextStyle                                    | `{}`            |
+| cancelBtnTextStyle  | cancelBtnTextStyle                     | TextStyle                                    | `{}`            |
 | confirmBtnProps     | confirmBtnProps                        | any                                          | `{}`            |
 | cancelBtnProps      | cancelBtnProps                         | any                                          | `{}`            |
+| style               | style                                  | any                                          | `{}`            |
 
 ### Events
 

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

@@ -32,8 +32,10 @@ export interface RedsAlert {
   offset?: AlertOffset;
   hostName?: string;
   confirmBtnTextStyle?: TextStyle;
+  cancelBtnTextStyle?: TextStyle;
   confirmBtnProps?: any;
   cancelBtnProps?: any;
+  style?: any;
 }
 
 export interface RedsAlertEvent {}
@@ -52,6 +54,8 @@ export const AlertDefaultProps = {
   offset: { x: 0, y: 0 },
   hostName: "root",
   confirmBtnTextStyle: {},
+  cancelBtnTextStyle: {},
   confirmBtnProps: {},
   cancelBtnProps: {},
+  style: {},
 };

package/src/components/Alert/styles.ts

@@ -6,6 +6,7 @@ import { RedsAlert } from "./interface";
 export const style = (props: RedsAlert) => {
   const themeColor = useThemeColor("Button");
   const typography = useThemeTypography("Button");
+
   const styles = StyleSheet.create({
     modalOverlay: {
       position: "absolute",
@@ -61,87 +62,51 @@ export const style = (props: RedsAlert) => {
     messageLeft: {
       textAlign: "left",
     },
-    scrollOverlay: {
-      width: "100%",
-      position: "absolute",
-      left: 20,
-      right: 0,
-      bottom: 20,
-      height: 40,
-    },
     footer: {
       width: "100%",
-      height: 48,
       flexDirection: "row",
       justifyContent: "space-between",
       paddingTop: 0,
     },
-    footerText: {
-      borderTopWidth: 0.5,
-      borderTopColor: themeColor.Fill2,
-      paddingBottom: props.footerLayout === "vertical" ? 0 : 6,
-      paddingTop: props.footerLayout === "vertical" ? 0 : 6,
-      paddingHorizontal: props.footerLayout === "vertical" ? 0 : 12,
-    },
     footerHorizontal: {
       flexDirection: "row",
+      paddingBottom: props.footerType === "text" ? 0 : 20,
       paddingHorizontal: 20,
-      paddingVertical: 20,
+      gap: 12,
     },
     footerVertical: {
       flexDirection: "column-reverse",
       alignItems: "center",
-      height: 100,
       paddingHorizontal: 20,
-    },
-    cancelButton: {
-      flex: 1,
-      width: 109,
-      margin: 0,
-      paddingHorizontal: 0,
-      height: 36,
-    },
-    button: {
-      flex: 1,
-      width: 109,
-      margin: 0,
-      paddingHorizontal: 0,
-      height: 36,
+      height:
+        props.showCancelButton && props.showConfirmButton ? (props.cancelBtnProps.variant === "text" ? 82 : 100) : 56,
     },
     dividerBox: {
       marginTop: 5,
     },
-    confirmButton: {
+    cancelButton: {
       flex: 1,
-      margin: 0,
-      marginLeft: 10,
-      width: 109,
-      height: 36,
-      paddingHorizontal: 20,
+      height: props.cancelBtnProps.variant === "text" ? 34 : props.footerType === "text" ? 52 : 36,
+      alignItems: props.cancelBtnProps.variant === "text" ? "flex-start" : "center",
+      paddingTop: props.cancelBtnProps.variant === "text" ? 12 : 0,
     },
-    verButton: {
-      flex: 0,
+    confirmButton: {
+      flex: 1,
       width: "100%",
-      margin: 0,
-      marginLeft: props.footerLayout === "vertical" ? 0 : 10,
-      marginTop: props.footerType === "text" ? 7 : props.footerLayout === "vertical" ? 7 : 10,
-      marginBottom: props.footerLayout === "vertical" ? 7 : 0,
-      height: 36,
-      paddingHorizontal: 20,
+      height: props.footerType === "text" ? 52 : 36,
     },
-    verCancelButton: {
-      flex: 0,
-      width: "100%",
-      margin: 0,
-      marginLeft: props.footerLayout === "vertical" ? 0 : 10,
-      marginTop: props.footerType === "text" ? 7 : props.footerLayout === "vertical" ? 7 : 10,
-      marginBottom: props.footerLayout === "vertical" ? 7 : 0,
-      height: 36,
-      paddingHorizontal: 20,
+    confirmButtonText: {
+      fontSize: props.footerType === "text" ? typography.T2FontSize : typography.T3FontSize,
     },
     cancelText: {
       color: themeColor.Description,
-      fontSize: 12,
+      fontSize:
+        props.cancelBtnProps.variant === "text"
+          ? 12
+          : props.footerType === "text"
+            ? typography.T2FontSize
+            : typography.T3FontSize,
+      fontWeight: typography.C2FontWeight,
     },
     horizontalLine: {
       width: "100%",

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

@@ -1,4 +1,3 @@
-import { Platform } from "react-native";
 export enum DatePickerMode {
   YearMonthDay = "yearmonthday",
   YearMonth = "yearmonth",

package/src/components/Image/index.ts

@@ -3,6 +3,6 @@ import Image from "./Image";
 import Image69 from "./Image69";
 import * as ImageType from "./interface";
 
-const ImageComponent = Platform.constants?.reactNativeVersion?.minor === 72 || Platform.OS === "web" ? Image : Image69;
+const ImageComponent = Platform.constants?.reactNativeVersion?.minor === 72 ? Image : Image69;
 export default ImageComponent;
 export { ImageComponent as Image, ImageType, Image69 };

package/src/components/Image/queryCacheBatcher.ts

@@ -5,7 +5,7 @@ declare const global: any;
 type Resolver = (value: boolean) => void;
 
 // Runtime switch: set global.REDS_IMAGE_QUERYCACHE_BATCHING_ENABLED = false to disable batching
-let enabled: boolean = global?.REDS_IMAGE_QUERYCACHE_BATCHING_ENABLED !== false;
+let enabled: boolean = false;
 let FLUSH_MS = 50;
 
 const pending = new Map<string, Resolver[]>();

package/src/components/NoticeBar/NoticeBar.tsx

@@ -1,30 +1,10 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import {
-  View,
-  TouchableWithoutFeedback,
-  Text,
-  Image,
-  Animated,
-  Easing,
-  LayoutChangeEvent,
-  Platform,
-  TextStyle,
-} from "react-native";
+import { View, TouchableWithoutFeedback, Text, Image, Animated, Easing } from "react-native";
 import { RedsNoticeBar, NoticeBarDefaultProps, NoticeBarType, NoticeBarActionType } from "./interface/index";
 import getStyles from "./styles";
 import { useThemeColor } from "../ConfigProvider";
 import { useLanguage } from "../LanguageProvider";
 import useMounted from "../../pvCount/useUnmountedProcess";
-
-const AnimatedTextStyle =
-  Platform.OS === "web"
-    ? {
-        textOverflow: "initial",
-        overflow: "initial",
-        maxWidth: "auto",
-      }
-    : {};
-
 const NoticeBar = (props: RedsNoticeBar) => {
   useMounted("NoticeBar");
   const [_visible, setVisible] = useState(true);
@@ -72,7 +52,7 @@ const NoticeBar = (props: RedsNoticeBar) => {
   const scrollDistance = useMemo(() => Math.max(textWidth - containerWidth, 0), [textWidth, containerWidth]);
 
   useEffect(() => {
-    if (props.type === NoticeBarType.SCROLLABLE && textWidth > 0 && scrollDistance > 0) {
+    if (props.type === NoticeBarType.SCROLLABLE && textWidth > 0) {
       const startScrolling = () => {
         scrollX.setValue(0);
         Animated.timing(scrollX, {
@@ -104,10 +84,6 @@ const NoticeBar = (props: RedsNoticeBar) => {
     setVisible(!!props.visible);
   }, [props.visible]);
 
-  const handleAnimatedTextLayout = (e: LayoutChangeEvent) => {
-    setTextWidth(e.nativeEvent.layout.width);
-  };
-
   return _visible ? (
     <View
       style={[
@@ -124,11 +100,11 @@ const NoticeBar = (props: RedsNoticeBar) => {
         onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
       >
         {props.type === NoticeBarType.SCROLLABLE ? (
-          <View style={{ minHeight: 18, overflow: Platform.OS === "web" ? "hidden" : "scroll", flexDirection: "row" }}>
+          <View style={{ minHeight: 18, overflow: "scroll", flexDirection: "row" }}>
             <Animated.Text
               numberOfLines={1}
-              style={[{ transform: [{ translateX: scrollX }] }, AnimatedTextStyle as TextStyle]}
-              onLayout={handleAnimatedTextLayout}
+              style={[{ transform: [{ translateX: scrollX }] }]}
+              onLayout={(e) => setTextWidth(e.nativeEvent.layout.width)}
             >
               <Text style={styles.text}>{props.content}</Text>
               <Text style={styles.text}>{"         "}</Text>

package/src/components/NoticeBar/styles.ts

@@ -41,6 +41,7 @@ export default (themeColor: any) => {
       color: themeColor.Title,
       fontSize: typography.B2LooseFontSize,
       fontWeight: typography.B2LooseFontWeight,
+      lineHeight: typography.B2LooseLineHeight,
     },
     linkText: {
       color: themeColor.LinkAccent,

package/src/components/PickerView/PickerView.tsx

@@ -47,7 +47,7 @@ const PickerView = (props: RedsPickerView) => {
             <ProgressIndicator type="default" />
           </View>
         ) : (
-          <View style={[styles.wheelWrapper, { backgroundColor: themeColor.Bg2, overflow: "scroll" }]}>
+          <View style={[styles.wheelWrapper, { backgroundColor: themeColor.Bg2 }]}>
             {columns.map((column, colIndex) => (
               <Wheel
                 key={colIndex}

package/src/components/PickerView/Wheel.tsx

@@ -1,13 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
-import {
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  ScrollView,
-  View,
-  Text,
-  TouchableNativeFeedback,
-  Platform,
-} from "react-native";
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView, View, Text, TouchableNativeFeedback } from "react-native";
 import { useThemeColor } from "../ConfigProvider";
 import { typography } from "@xhs/reds-token-next";
 import { RedsWheel, Column } from "./interface/index";
@@ -151,12 +143,7 @@ const Wheel = (props: RedsWheel) => {
    */
   const renderItems = () => {
     return column.map((item, index) => (
-      <TouchableNativeFeedback
-        onPress={() => handleClick(index)}
-        key={item.value}
-        // @ts-expect-error
-        style={Platform.OS === "web" ? { border: "none", alignSelf: "inherit" } : {}}
-      >
+      <TouchableNativeFeedback onPress={() => handleClick(index)} key={item.value}>
         <View
           style={[styles.wheel, { height: itemHeight, backgroundColor: themeColor.Bg2 }]}
           key={item.value}
@@ -170,25 +157,9 @@ const Wheel = (props: RedsWheel) => {
     ));
   };
 
-  useEffect(() => {
-    if (Platform.OS !== "web") {
-      return;
-    }
-    const handleScrollEnd = (e: any) => {
-      const selectIndex = Math.round(e.target.scrollTop / itemHeight);
-      setIndex(selectIndex);
-    };
-    // @ts-expect-error
-    scrollerRef.current?.addEventListener("scrollend", handleScrollEnd);
-    return () => {
-      // @ts-expect-error
-      scrollerRef.current?.removeEventListener("scrollend", handleScrollEnd);
-    };
-  }, [scrollerRef.current, itemHeight]);
-
   return (
     <ScrollView
-      style={{ flex: 1, height: "100%" }}
+      style={{ flex: 1 }}
       nestedScrollEnabled
       horizontal={false}
       ref={(el: any) => (scrollerRef.current = el)}

package/src/components/Popover/Popover.tsx

@@ -1,15 +1,5 @@
 import React, { useState, useMemo, isValidElement, useEffect, useRef } from "react";
-import {
-  Text,
-  View,
-  TouchableWithoutFeedback,
-  GestureResponderEvent,
-  Animated,
-  Image,
-  Dimensions,
-  Platform,
-  LayoutChangeEvent,
-} from "react-native";
+import { Text, View, TouchableWithoutFeedback, GestureResponderEvent, Animated, Image, Dimensions } from "react-native";
 import { RedsPopover } from "./interface/index";
 import { ModalWrapper } from "./component";
 import { darkColor, lightColor, typography } from "@xhs/reds-token-next";
@@ -43,8 +33,6 @@ export default ({
   const needModal = useMemo(() => opacity !== 0, [opacity]);
 
   const [_visible, setVisible] = useState(false);
-  const [floatStyles, setFloatStyles] = useState({});
-  const [arrowStyles, setArrowStyles] = useState({});
 
   const progress = useRef(new Animated.Value(0)).current;
 
@@ -57,15 +45,21 @@ export default ({
     height: 0,
   });
 
-  const handleFloatingLayout = (e: LayoutChangeEvent) => {
-    const floatingLayout = e.nativeEvent.layout;
+  const [floatingLayout, setFloatingLayout] = useState({
+    x: defaultValue,
+    y: defaultValue,
+    width: 0,
+    height: 0,
+  });
+
+  const floatStyles = useMemo(() => {
     const start = ["top-start", "bottom-start"].includes(placement);
     const mid = ["top", "bottom"].includes(placement);
     const end = ["top-end", "bottom-end"].includes(placement);
     const diffX = floatingLayout.width - layout.width;
     // @ts-expect-error
     const isHarmony = Platform.OS === "harmony";
-    const floatStyles = layout.height
+    return layout.height
       ? {
           position: "absolute",
           top:
@@ -77,7 +71,16 @@ export default ({
             (isHarmony ? Dimensions.get("screen").width : 0),
         }
       : {};
-    const arrowStyles = layout.height
+  }, [placement, layout, floatingLayout]);
+
+  const arrowStyles = useMemo(() => {
+    const start = ["top-start", "bottom-start"].includes(placement);
+    const mid = ["top", "bottom"].includes(placement);
+    const end = ["top-end", "bottom-end"].includes(placement);
+    const diffX = floatingLayout.width - layout.width;
+    // @ts-expect-error
+    const isHarmony = Platform.OS === "harmony";
+    return layout.height
       ? {
           transform: [{ rotate: placement.includes("top") ? `0deg` : `180deg` }],
           position: "absolute",
@@ -98,9 +101,7 @@ export default ({
             (isHarmony ? Dimensions.get("screen").width : 0),
         }
       : {};
-    setFloatStyles(floatStyles);
-    setArrowStyles(arrowStyles);
-  };
+  }, [placement, layout, floatingLayout, offset]);
 
   useEffect(() => {
     let timer: any;
@@ -211,9 +212,6 @@ export default ({
               }}
               onPressOut={(e) => {
                 trigger === "touch" && onMaskChange(e, false);
-                if (Platform.OS === "web" && trigger === "click") {
-                  onMaskChange(e, true);
-                }
               }}
             >
               <View
@@ -242,7 +240,10 @@ export default ({
             <>
               <Animated.View
                 collapsable={false}
-                onLayout={handleFloatingLayout}
+                onLayout={(e) => {
+                  setFloatingLayout(e.nativeEvent.layout);
+                }}
+                // @ts-expect-error
                 style={{
                   backgroundColor: popoverStyle.backgroundColor,
                   paddingHorizontal: 12,
@@ -278,6 +279,7 @@ export default ({
               </Animated.View>
               <Image
                 source={{ uri: angle }}
+                // @ts-expect-error
                 style={{
                   width: 14,
                   height: 6,

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -79,7 +79,6 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
 
   const LottieView = React.useMemo(() => {
     const lottieSource = getLottieSource(type as TLottieSourceType)[strokeColor || colorMode || "light"];
-    // TODO: lottie-react-native 不能使用 progress，需要单独适配 web
     if (type === "progress") {
       let progress = 0;
       if (percent > 100) {
@@ -90,7 +89,9 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
       return (
         <>
           {showPercent && <Text style={[styles.percentText, textStyle]}>{formatText(percent)}</Text>}
-          <Lottie style={{ flex: 1 }} progress={progress} source={props.lottieSource || lottieSource} />
+          {Platform.OS !== "web" && (
+            <Lottie style={{ flex: 1 }} progress={progress} source={props.lottieSource || lottieSource} />
+          )}
           <></>
         </>
       );
@@ -98,12 +99,19 @@ const ProgressIndicator = (props: RedsProgressIndicator) => {
     if (colorMode === "light") {
       return (
         <>
-          <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />
+          {Platform.OS !== "web" && (
+            <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />
+          )}
           <></>
         </>
       );
     }
-    return <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />;
+    return (
+      Platform.OS !== "web" && (
+        <Lottie style={{ flex: 1 }} useNativeLooping autoPlay loop source={props.lottieSource || lottieSource} />
+      )
+    );
+    // return <></>;
   }, [type, colorMode, percent, strokeColor]);
 
   return (