@mpxjs/webpack-plugin 2.10.17-unocss.1 → 2.10.18-beta.1

package/lib/runtime/components/ali/mpx-sticky-header.mpx

@@ -0,0 +1,212 @@
+<template>
+  <view class="mpx-sticky-header-container">
+    <view class="mpx-sticky-header" wx:ref="stickyHeader" wx:style="{{stickyHeaderStyle}}">
+      <slot></slot>
+    </view>
+    <view
+      class="mpx-sticky-header-placeholder"
+      id="{{stickyId}}"
+      wx:style="{{placeholderStyle}}"
+    ></view>
+  </view>
+</template>
+
+<script>
+  import mpx, { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    properties: {
+      offsetTop: {
+        type: Number,
+        value: 0
+      },
+      scrollViewId: {
+        type: String,
+        value: ''
+      },
+      stickyId: {
+        type: String,
+        value: ''
+      },
+      padding: Array,
+      enablePolling: {
+        type: Boolean,
+        value: false
+      },
+      pollingDuration: {
+        type: Number,
+        value: 300
+      }
+    },
+    data: {
+      isStickOnTop: false,
+      scrollOffsetTop: 0,
+      headerHeight: 0,
+      stickyHeader: '',
+      headerTop: 0,
+      lastIntersectionRatio: -1,
+      pollingTimer: null
+    },
+    computed: {
+      paddingStyle() {
+        if (!this.padding || !Array.isArray(this.padding)) {
+          return ''
+        }
+        const [top = 0, right = 0, bottom = 0, left = 0] = this.padding
+        return `padding: ${top}px ${right}px ${bottom}px ${left}px;`
+      },
+      stickyHeaderStyle() {
+        const baseStyle = this.isStickOnTop
+          ? `position: fixed;top: ${this.scrollOffsetTop + this.offsetTop}px;`
+          : ''
+        return baseStyle + this.paddingStyle
+      },
+      placeholderStyle() {
+        const position = this.isStickOnTop ? 'relative' : 'absolute'
+        return `position: ${position};height: ${this.headerHeight}px;`
+      }
+    },
+    ready() {
+      if (!this.scrollViewId) {
+        console.error('[mpx runtime error]: scroll-view-id is necessary property in ali environment')
+      }
+      if (!this.stickyId) {
+        console.error('[mpx runtime error]: sticky-id is necessary property in ali environment')
+      }
+      this.initStickyHeader()
+        // 启动轮询
+      if (this.enablePolling) {
+        this.startPolling()
+      }
+    },
+    methods: {
+      initStickyHeader() {
+        this.createSelectorQuery()
+          .select('.mpx-sticky-header')
+          .boundingClientRect()
+          .exec((rect = []) => {
+            this.headerHeight = rect[0]?.height || 0
+          })
+
+        mpx
+          .createSelectorQuery()
+          .select(`#${this.scrollViewId}`)
+          .boundingClientRect()
+          .exec((res) => {
+            if (!res) return
+            this.scrollOffsetTop = res[0]?.top || 0
+            this.stickyHeader = mpx.createIntersectionObserver({
+              thresholds: [0.1, 0.9]
+            })
+            this.initObserver()
+          })
+      },
+      initObserver() {
+        this.stickyHeader.relativeTo(`#${this.scrollViewId}`).observe(`#${this.stickyId}`, (res) => {
+          const { intersectionRatio, intersectionRect, relativeRect, boundingClientRect } = res
+          if (intersectionRatio < this.lastIntersectionRatio) {
+            // boundingClientRect.top < relativeRect.top fixed，否则默认布局
+            this.handleStickyStateChange(boundingClientRect.top < relativeRect.top)
+          } else if (intersectionRatio > this.lastIntersectionRatio) {
+            this.handleStickyStateChange(false)
+          }
+          this.lastIntersectionRatio = intersectionRatio
+        })
+      },
+      refresh() {
+        // 并行执行两个独立的查询
+        Promise.all([
+          // 查询1：组件内部元素
+          new Promise((resolve) => {
+            this.createSelectorQuery()
+              .select('.mpx-sticky-header')
+              .boundingClientRect()
+              .select('.mpx-sticky-header-placeholder')
+              .boundingClientRect()
+              .exec((results) => {
+                resolve(results)
+              })
+          }),
+          // 查询2：页面级scrollView
+          new Promise((resolve) => {
+            mpx.createSelectorQuery()
+              .select(`#${this.scrollViewId}`)
+              .boundingClientRect()
+              .select(`#${this.scrollViewId}`)
+              .scrollOffset()
+              .exec((results) => {
+                resolve(results)
+              })
+          })
+        ]).then(([componentResults, scrollResults]) => {
+          const [stickyHeaderRect, placeholderRect] = componentResults
+          const [scrollViewRect, scrollOffsetData] = scrollResults
+          
+          if (!stickyHeaderRect || !placeholderRect || !scrollViewRect || !scrollOffsetData) return
+
+          this.scrollOffsetTop = scrollViewRect.top || 0
+          this.headerHeight = stickyHeaderRect.height
+
+          // 模拟 offsetTop 计算：sticky placeholder具体顶部距离 - scrollView顶部 + scrollView滚动位置
+          // 必须用 placeholder 到顶部距离，用 sticky 如果刚好差值为 0， 区分不出是本身就在顶部还是 fixed 在顶部
+          this.headerTop = placeholderRect.top - this.scrollOffsetTop + scrollOffsetData.scrollTop
+          
+          this.handleStickyStateChange(scrollOffsetData.scrollTop > this.headerTop)
+        })
+      },
+      handleStickyStateChange(shouldStick) {
+        // 如果状态没有变化，直接返回
+        if (shouldStick === this.isStickOnTop) {
+          return
+        }
+        // 更新状态
+        this.isStickOnTop = shouldStick
+        // 触发事件
+        this.triggerEvent('stickontopchange', {
+          isStickOnTop: shouldStick,
+          id: this.stickyId
+        })
+      },
+       // 启动轮询
+      startPolling() {
+        if (this.pollingTimer) {
+          clearInterval(this.pollingTimer)
+        }
+        this.pollingTimer = setInterval(() => {
+          this.refresh()
+        }, this.pollingDuration)
+      },
+      // 停止轮询
+      stopPolling() {
+        if (this.pollingTimer) {
+          clearInterval(this.pollingTimer)
+          this.pollingTimer = null
+        }
+      }
+    },
+    detached() {
+      // 清理观察器
+      if (this.stickyHeader) {
+        this.stickyHeader.disconnect()
+      }
+       // 清理轮询定时器
+      if (this.pollingTimer) {
+        clearInterval(this.pollingTimer)
+        this.pollingTimer = null
+      }
+    }
+  })
+</script>
+<style lang="stylus" scoped>
+  .mpx-sticky-header-container
+    position relative
+  .mpx-sticky-header-placeholder
+    position absolute
+    left 0
+    right 0
+    top 0
+    pointer-events none
+  .mpx-sticky-header
+    width 100%
+    box-sizing border-box
+</style>

package/lib/runtime/components/ali/mpx-sticky-section.mpx

@@ -0,0 +1,17 @@
+<template>
+  <view class="mpx-sticky-section">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    
+  })
+</script>
+<style lang="stylus" scoped>
+  .mpx-sticky-section
+    position relative
+</style>

package/lib/runtime/components/react/dist/animationHooks/useAnimationAPIHooks.js

@@ -101,7 +101,6 @@ export default function useAnimationAPIHooks(props) {
                     // 动画起始值和终态值类型不一致报错提示一下
                     error(`[Mpx runtime error]: Value types of property ${key} must be consistent during the animation`);
                 }
-                // Todo 对齐wx
                 const animation = (toVal === 'auto' && !isNaN(+shareVal)) || (shareVal === 'auto' && !isNaN(+toVal)) ? toVal : getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? callback : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {

package/lib/runtime/components/react/dist/mpx-async-suspense.jsx

@@ -63,7 +63,8 @@ const DefaultFallback = ({ onReload }) => {
 };
 const DefaultLoading = () => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const FastImage = require('@d11/react-native-fast-image');
+    const FastImageModule = require('@d11/react-native-fast-image');
+    const FastImage = FastImageModule.default || FastImageModule;
     return (<View style={styles.container}>
       <FastImage style={styles.loadingImage} source={{
             uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif'

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -40,7 +40,7 @@
 import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
 import { TextInput } from 'react-native';
 import { warn } from '@mpxjs/utils';
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject } from './utils';
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { FormContext, KeyboardAvoidContext } from './context';
@@ -73,6 +73,8 @@ const Input = forwardRef((props, ref) => {
         return '';
     };
     const defaultValue = parseValue(value);
+    // 微信小程序的 input 永远是单行，textAlignVertical 固定为 auto
+    // multiline 为 true 时表示是 textarea 组件复用此逻辑
     const textAlignVertical = multiline ? 'top' : 'auto';
     const isAutoFocus = !!autoFocus || !!focus;
     const tmpValue = useRef(defaultValue);
@@ -280,6 +282,11 @@ const Input = forwardRef((props, ref) => {
             ? nodeRef.current?.focus()
             : nodeRef.current?.blur();
     }, [isAutoFocus]);
+    // 使用 multiline 来修复光标位置问题
+    // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
+    // 这个问题只在 Android 上出现
+    // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
+    const needMultilineFix = isAndroid && !multiline;
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
@@ -298,7 +305,7 @@ const Input = forwardRef((props, ref) => {
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: !!multiline,
+        multiline: multiline || needMultilineFix,
         onTouchStart,
         onTouchEnd,
         onFocus,
@@ -307,7 +314,7 @@ const Input = forwardRef((props, ref) => {
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
-    }, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
+    }, needMultilineFix ? { numberOfLines: 1 } : {}, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
         'type',
         'password',
         'placeholder-style',

package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx

@@ -14,6 +14,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
     // 因此增加状态标记 + cancelAnimation 来优化
     const isShow = useRef(false);
+    const keybaordHandleTimerRef = useRef(null);
     const animatedStyle = useAnimatedStyle(() => ({
         // translate/position top+ overflow hidden 在 android 上时因为键盘顶起让页面高度变小，同时元素位置上移
         // 此时最底部的区域是超出了页面高度的，hidden生效就被隐藏掉，因此需要 android 配置聚焦时禁用高度缩小
@@ -62,7 +63,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                 // 重置标记位
                 keyboardAvoid.current.readyToShow = false;
             }
-            if (!keyboardAvoid?.current || isShow.current) {
+            if (!keyboardAvoid?.current) {
                 return;
             }
             isShow.current = true;
@@ -102,13 +103,23 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             }
         }
         if (isIOS) {
-            subscriptions = [Keyboard.addListener('keyboardWillShow', keybaordAvoding), Keyboard.addListener('keyboardWillHide', resetKeyboard)];
+            subscriptions = [
+                Keyboard.addListener('keyboardWillShow', (evt) => {
+                    if (keybaordHandleTimerRef.current) {
+                        clearTimeout(keybaordHandleTimerRef.current);
+                    }
+                    // iphone 在input聚焦时长按滑动后会导致 show 事件先于 focus 事件发生，因此等一下，等 focus 先触发拿到 input，避免键盘出现但input没顶上去
+                    keybaordHandleTimerRef.current = setTimeout(() => keybaordAvoding(evt), 32);
+                }),
+                Keyboard.addListener('keyboardWillHide', resetKeyboard)
+            ];
         }
         else {
             subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)];
         }
         return () => {
             subscriptions.forEach(subscription => subscription.remove());
+            keybaordHandleTimerRef.current && clearTimeout(keybaordHandleTimerRef.current);
         };
     }, [keyboardAvoid]);
     return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>

package/lib/runtime/components/react/dist/mpx-swiper.jsx

@@ -126,9 +126,11 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const preAbsolutePos = useSharedValue(0);
     // 记录从onBegin 到 onTouchesUp 时移动的距离
     const moveTranstion = useSharedValue(0);
+    // 记录用户手滑动的方向
+    const moveDir = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
-    // 记录是否首次
+    // 记录是否首次，首次不能触发bindchange回调
     const isFirstRef = useRef(true);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
@@ -356,7 +358,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             resumeLoop
         };
     }, []);
-    function handleSwiperChange(current, pCurrent) {
+    function handleSwiperChange(current) {
         const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
         bindchange && bindchange(eventData);
     }
@@ -465,6 +467,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         }
     }, [circular, patchElmNum, displayMultipleItems]);
     const { gestureHandler } = useMemo(() => {
+        // 基于transdir + 当前offset计算索引
         function getTargetPosition(eventData) {
             'worklet';
             // 移动的距离
@@ -578,10 +581,8 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 }
             });
         }
-        // 当前的offset和index多对应的offset进行对比，判断是否超过一半
-        function computeHalf(eventData) {
+        function computeHalf() {
             'worklet';
-            const { transdir } = eventData;
             const currentOffset = Math.abs(offset.value);
             let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value;
             if (circularShared.value) {
@@ -590,35 +591,14 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 正常事件中拿到的translation值(正向滑动<0，倒着滑>0)
             const diffOffset = preOffset - currentOffset;
             const half = Math.abs(diffOffset) > step.value / 2;
-            const isTriggerUpdateHalf = (transdir < 0 && currentOffset < preOffset) || (transdir > 0 && currentOffset > preOffset);
-            return {
-                diffOffset,
-                half,
-                isTriggerUpdateHalf
-            };
-        }
-        function handleLongPress(eventData) {
-            'worklet';
-            const { diffOffset, half, isTriggerUpdateHalf } = computeHalf(eventData);
-            if (+diffOffset === 0) {
-                runOnJS(runOnJSCallback)('resumeLoop');
-            }
-            else if (isTriggerUpdateHalf) {
-                // 如果触发了onUpdate时的索引变更
-                handleEnd(eventData);
-            }
-            else if (half) {
-                handleEnd(eventData);
-            }
-            else {
-                handleBack(eventData);
-            }
+            return half;
         }
         function reachBoundary(eventData) {
             'worklet';
             // 1. 基于当前的offset和translation判断是否超过当前边界值
             const { translation } = eventData;
-            const boundaryStart = -patchElmNumShared.value * step.value;
+            // 与终点的逻辑对齐，都是超过补位元素对应的起点offset
+            const boundaryStart = 0;
             const boundaryEnd = -(childrenLength.value + patchElmNumShared.value) * step.value;
             const moveToOffset = offset.value + translation;
             let isBoundary = false;
@@ -635,7 +615,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 // 超过边界的距离
                 const exceedLength = Math.abs(boundaryStart) - Math.abs(moveToOffset);
                 // 计算对标正常元素所在的offset
-                resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value + (step.value - exceedLength);
+                resetOffset = (patchElmNumShared.value + childrenLength.value - 1) * step.value - exceedLength;
             }
             return {
                 isBoundary,
@@ -674,6 +654,14 @@ const SwiperWrapper = forwardRef((props, ref) => {
             }
             return finalOffset;
         }
+        // 设置手势移动的方向
+        function setMoveDir(curAbsoPos) {
+            'worklet';
+            const distance = curAbsoPos - preAbsolutePos.value;
+            if (distance) {
+                moveDir.value = curAbsoPos - preAbsolutePos.value;
+            }
+        }
         const gesturePan = Gesture.Pan()
             .onBegin((e) => {
             'worklet';
@@ -695,9 +683,9 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 transdir: moveDistance
             };
             // 1. 支持滑动中超出一半更新索引的能力：只更新索引并不会影响onFinalize依据当前offset计算的索引
-            const { half } = computeHalf(eventData);
-            if (childrenLength.value > 1 && half) {
-                const { selectedIndex } = getTargetPosition(eventData);
+            const offsetHalf = computeHalf();
+            if (childrenLength.value > 1 && offsetHalf) {
+                const { selectedIndex } = getTargetPosition({ transdir: moveDistance });
                 currentIndex.value = selectedIndex;
             }
             // 2. 非循环: 处理用户一直拖拽到临界点的场景,如果放到onFinalize无法阻止offset.value更新为越界的值
@@ -709,6 +697,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
                     const finalOffset = handleResistanceMove(eventData);
                     offset.value = finalOffset;
                 }
+                setMoveDir(e[strAbso]);
                 preAbsolutePos.value = e[strAbso];
                 return;
             }
@@ -716,6 +705,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             if (circularShared.value && childrenLength.value === 1) {
                 const finalOffset = handleResistanceMove(eventData);
                 offset.value = finalOffset;
+                setMoveDir(e[strAbso]);
                 preAbsolutePos.value = e[strAbso];
                 return;
             }
@@ -727,6 +717,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
             else {
                 offset.value = moveDistance + offset.value;
             }
+            setMoveDir(e[strAbso]);
             preAbsolutePos.value = e[strAbso];
         })
             .onFinalize((e) => {
@@ -735,10 +726,21 @@ const SwiperWrapper = forwardRef((props, ref) => {
                 return;
             touchfinish.value = true;
             // 触发过onUpdate正常情况下e[strAbso] - preAbsolutePos.value=0; 未触发过onUpdate的情况下e[strAbso] - preAbsolutePos.value 不为0
+            // 正常状态下基于onUpdate时的moveDir判断方向、未触发onUpdate的则基于onBegin的moveTranstion判断方向
             const moveDistance = e[strAbso] - preAbsolutePos.value;
+            // 默认兜底方向: 以onBegin为起点，因一些原因未触发onUpdate但是触发了位移
+            const defaultDir = e[strAbso] - moveTranstion.value;
+            // 实时方向：方向基于onUpdate时的方向，滑动的速度超过阈值时基于实时的滑动方向计算
+            const realtimeData = {
+                transdir: moveDir.value || defaultDir
+            };
+            // 起始方向：基于用户起始手势
+            const originData = {
+                transdir: defaultDir
+            };
             const eventData = {
                 translation: moveDistance,
-                transdir: moveDistance !== 0 ? moveDistance : e[strAbso] - moveTranstion.value
+                transdir: realtimeData.transdir
             };
             // 1. 只有一个元素：循环 和 非循环状态，都走回弹效果
             if (childrenLength.value === 1) {
@@ -752,21 +754,39 @@ const SwiperWrapper = forwardRef((props, ref) => {
             // 非循环支持最后元素可滑动能力后，向左快速移动未超过最大可移动范围一半，因为offset为正值，向左滑动handleBack，默认向上取整
             // 但是在offset大于0时，取0。[-100, 0](back取0), [0, 100](back取1)， 所以handleLongPress里的处理逻辑需要兼容支持，因此这里直接单独处理，不耦合下方公共的判断逻辑。
             if (!circularShared.value && !canMove(eventData)) {
-                if (eventData.transdir < 0) {
-                    handleBack(eventData);
+                if (realtimeData.transdir < 0) {
+                    handleBack(realtimeData);
                 }
                 else {
-                    handleEnd(eventData);
+                    handleEnd(realtimeData);
                 }
                 return;
             }
             // 3. 非循环状态可移动态、循环状态, 正常逻辑处理
             const velocity = e[strVelocity];
-            if (Math.abs(velocity) < longPressRatio) {
-                handleLongPress(eventData);
+            // 用于判断是否超过一半，基于索引判断是否超过一半不可行(1.滑动过程中索引会变更导致计算反向, 2.边界场景会更新offset也会导致基于索引+offset判断实效)
+            const tmp = offset.value % step.value > step.value / 2;
+            // 小于0手向左滑动
+            const offsetHalf = originData.transdir < 0 ? tmp : !tmp;
+            if (offsetHalf) {
+                if (Math.abs(velocity) > longPressRatio) {
+                    // 超过速度阈值，按照实时方向(快速来回滑动)
+                    handleEnd(realtimeData);
+                }
+                else {
+                    // 超过速度阈值，按照起始方向（慢速长按）
+                    handleEnd(originData);
+                }
             }
             else {
-                handleEnd(eventData);
+                if (Math.abs(velocity) > longPressRatio) {
+                    // 超过速度阈值，按照实时方向(快速来回滑动)
+                    handleEnd(realtimeData);
+                }
+                else {
+                    // 超过速度阈值，按照起始方向（慢速长按）
+                    handleBack(originData);
+                }
             }
         })
             .withRef(swiperGestureRef);

package/lib/runtime/components/react/dist/utils.jsx

@@ -487,7 +487,7 @@ export function useTransformStyle(styleObj = {}, { enableVar, transformRadiusPer
     // transform rpx to px
     transformBoxShadow(normalStyle);
     // transform 字符串格式转化数组格式(先转数组再处理css var)
-    transformTransform(styleObj);
+    transformTransform(normalStyle);
     return {
         hasVarDec,
         varContextRef,
@@ -637,9 +637,13 @@ export function getCurrentPage(pageId) {
     const pages = global.getCurrentPages();
     return pages.find((page) => isFunction(page.getPageId) && page.getPageId() === pageId);
 }
-export function renderImage(imageProps, enableFastImage = false) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const Component = enableFastImage ? require('@d11/react-native-fast-image') : Image;
+export function renderImage(imageProps, enableFastImage = true) {
+    let Component = Image;
+    if (enableFastImage) {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const fastImageModule = require('@d11/react-native-fast-image');
+        Component = fastImageModule.default || fastImageModule;
+    }
     return createElement(Component, imageProps);
 }
 export function pickStyle(styleObj = {}, pickedKeys, callback) {

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -82,7 +82,8 @@ const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
 
 const DefaultLoading = () => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const FastImage = require('@d11/react-native-fast-image')
+  const FastImageModule = require('@d11/react-native-fast-image')
+  const FastImage = FastImageModule.default || FastImageModule
   return (
     <View style={styles.container}>
       <FastImage