react-native-refresh-list2 1.0.0

package/src/RefreshControl/RefreshScrollView.tsx

@@ -0,0 +1,359 @@
+// RefreshFlatList.tsx
+
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Dimensions, Platform, type ScrollViewProps } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, {
+    runOnJS,
+    interpolate,
+    useAnimatedScrollHandler,
+    withTiming,
+    useAnimatedProps,
+    useAnimatedStyle,
+    useSharedValue,
+    useDerivedValue,
+    withSequence,
+    withDelay,
+    Easing,
+    useAnimatedReaction, type SharedValue,
+} from 'react-native-reanimated';
+import { RefreshContainerContext, RefreshStatus } from './type';
+import RefreshContainer from './RefreshContainer';
+// 假设您不需要单独的 BottomContainer 组件，而是将加载更多内容放在 ListFooterComponent 中
+
+// ------------------- 常量定义 -------------------
+const { height } = Dimensions.get('window');
+
+const MAX_SCROLL_VELOCITY_Y = 20;
+const MIN_SCROLL_VELOCITY_Y = 0.5;
+const DEFAULT_TRIGGLE_HEIGHT = 100;
+const RESET_TIMING_EASING = Easing.bezier(0.33, 1, 0.68, 1);
+const MAX_BOUNCE_DISTANCE = 100
+
+// ------------------- Props 定义 -------------------
+interface RefreshFlatListProps extends ScrollViewProps {
+    refreshing: boolean;
+    refreshComponent: () => React.ReactNode;
+    onRefresh: () => void;
+    onScroll?: (event: any) => void;
+    handleOnLoadMore?: () => void;
+    triggleHeight?: number;
+    canOffset?: boolean;
+    bounces?: boolean;
+    offsetY?: number
+    children: React.ReactNode;
+    scrollViewParentTransitionY?: SharedValue<number>;
+    scrollParentRef?: any,
+}
+
+const RefreshScrollList = (props: RefreshFlatListProps) => {
+    const {
+        refreshing,
+        onRefresh,
+        refreshComponent,
+        triggleHeight = DEFAULT_TRIGGLE_HEIGHT,
+        canOffset = true,
+        bounces = true,
+        onScroll: onScrollHandler,
+        children,
+        offsetY = 0,
+        scrollViewParentTransitionY,
+        scrollParentRef,
+        ...restProps
+    } = props;
+
+    // ------------------- Shared Values 和 Refs -------------------
+    const panRef = useRef<any>(null);
+    const internalScrollRef = useRef<any>(null);
+    const scrollRef = scrollParentRef || internalScrollRef;
+
+    // @ts-ignore
+    const nativeRef: any = useRef();
+    const nativeGesture = Gesture.Native().withRef(nativeRef);
+    const internalScrollViewParentTransitionY = useSharedValue(0);
+    const scrollViewTransitionY = scrollViewParentTransitionY || internalScrollViewParentTransitionY;
+    const refreshTransitionY = useSharedValue(0);
+    const offset = useSharedValue(0);
+    const scrollBounse = useSharedValue(false);
+    const refreshStatus = useSharedValue<RefreshStatus>(RefreshStatus.Idle);
+    const scrollViewTotalHeight = useSharedValue(0);
+    const scrollBeginTop = useSharedValue(0)
+
+    // ------------------- Derived Values -------------------
+    const direction = useDerivedValue(() => {
+        return refreshTransitionY.value > 0 ? 1 : -1;
+    }, [refreshTransitionY]);
+
+    const canRefresh = useDerivedValue(() => {
+        const marginTop = scrollViewTransitionY.value;
+        // 核心：判断是否触顶 (下拉) 或触底 (上拉/加载更多)
+        return marginTop < 1
+    });
+
+    useAnimatedReaction(
+        () => refreshStatus.value,
+        () => {
+        }
+    );
+
+    // ------------------- Refreshing Side Effect -------------------
+    useEffect(() => {
+        if (refreshing) {
+            if (direction.value === 1) {
+                refreshStatus.value = RefreshStatus.Holding;
+                // 刷新中保持指示器在触发高度
+                refreshTransitionY.value = withTiming(triggleHeight * direction.value);
+            } else if (refreshStatus.value === RefreshStatus.Idle) {
+                // scrollRef.current?.scrollTo({
+                //     y: 0,
+                //     animated: false,
+                // });
+                refreshStatus.value = RefreshStatus.Holding;
+                refreshTransitionY.value = withTiming(triggleHeight);
+            }
+        } else if (refreshStatus.value !== RefreshStatus.Idle) {
+            if (direction.value === 1) {
+                // 下拉刷新完成，收起指示器
+                refreshStatus.value = RefreshStatus.Done;
+                refreshTransitionY.value = withDelay(
+                    500,
+                    withTiming(
+                        0,
+                        {
+                            easing: RESET_TIMING_EASING,
+                        },
+                        () => {
+                            refreshStatus.value = RefreshStatus.Idle;
+                        }
+                    )
+                );
+            }
+        }
+    }, [refreshing, direction.value, refreshStatus, refreshTransitionY, triggleHeight]);
+
+    const handleOnRefresh = useCallback(() => {
+        if (refreshing) return;
+        onRefresh && onRefresh();
+    }, [refreshing, onRefresh]);
+
+    // ------------------- Scroll Handler -------------------
+    const onScroll = useAnimatedScrollHandler<{
+        scrollBeginTime: number;
+        scrollBeginY: number;
+    }>({
+        onBeginDrag: (event, context) => {
+            context.scrollBeginTime = new Date().valueOf();
+            context.scrollBeginY = event.contentOffset.y;
+        },
+        onScroll: (event, context) => {
+            onScrollHandler && runOnJS(onScrollHandler)({
+                nativeEvent: event,
+            });
+            const { scrollBeginY, scrollBeginTime } = context;
+            scrollViewTransitionY.value = event.contentOffset.y;
+            // 滚动边界反弹动画逻辑
+            const marginTop = scrollViewTransitionY.value;
+
+            if (marginTop === 0 && !scrollBounse.value) {
+
+                const bounceDirection = marginTop === 0 ? 1 : -1;
+                const endTime = new Date().valueOf();
+                const velocityY = Math.min(
+                    Math.abs(
+                        (scrollViewTransitionY.value - scrollBeginY) /
+                        (endTime - scrollBeginTime)
+                    ),
+                    MAX_SCROLL_VELOCITY_Y
+                );
+                if (!bounces || velocityY < MIN_SCROLL_VELOCITY_Y) return;
+
+                const ratio = (Math.PI / 2 / MAX_SCROLL_VELOCITY_Y) * velocityY;
+                const bounceDistance = (height / 4) * Math.sin(ratio);
+                const duration = 100 + 100 * Math.sin(ratio * 2);
+
+                scrollBounse.value = true;
+                refreshTransitionY.value = withSequence(
+                    withTiming(bounceDistance * bounceDirection, { duration }),
+                    withTiming(
+                        0,
+                        {
+                            duration,
+                            easing: RESET_TIMING_EASING,
+                        },
+                        () => {
+                            scrollBounse.value = false;
+                        }
+                    )
+                );
+            }
+        }
+    });
+
+
+    const scrollToTopJS = useCallback(() => {
+        // 检查 ref 是否存在
+        if (scrollRef.current) {
+            (scrollRef.current as any).scrollTo({
+                y: 0,
+                animated: false,
+            });
+        }
+    }, [scrollRef]);
+
+    // ------------------- Pan Gesture -------------------
+    const panGesture = Gesture.Pan()
+        .withRef(panRef)
+        .activeOffsetY(10)
+        .simultaneousWithExternalGesture(nativeRef)
+        // 移除 activeOffsetY 或设置为极小值，让优先级完全由 requireExternalGestureToFail 决定
+        // 关键：与原生滚动同时进行，以便在触顶时接管
+        .onBegin(() => {
+            offset.value = refreshTransitionY.value;
+            scrollBeginTop.value = scrollViewTransitionY.value;
+        })
+        .onUpdate(({ translationY }) => {
+            const shouldAllowModify = canRefresh.value || (refreshStatus.value !== RefreshStatus.Idle && (translationY - scrollBeginTop.value) >= 0);
+            if (!shouldAllowModify) {
+                refreshTransitionY.value = 0;
+                // 如果不在触顶区域且未处于刷新状态，则不修改位移
+                return;
+            }
+
+            if (Platform.OS !== 'ios') runOnJS(scrollToTopJS)()
+
+            let nextY =
+                offset.value +
+                interpolate(
+                    (translationY - scrollBeginTop.value),
+                    [0, height],
+                    [0, height / 2],
+                    // 确保超过 height 时不会失控，但这里通常不需要
+                );
+
+            refreshTransitionY.value = Math.min(nextY, MAX_BOUNCE_DISTANCE);
+
+            if (!refreshing) {
+                if (Math.abs(refreshTransitionY.value) >= triggleHeight) {
+                    refreshStatus.value = RefreshStatus.Reached;
+                } else {
+                    refreshStatus.value = RefreshStatus.Pulling;
+                }
+            }
+        })
+        .onEnd(() => {
+            if (refreshing) {
+                if (refreshTransitionY.value >= triggleHeight * direction.value) {
+                    refreshTransitionY.value = withTiming(
+                        triggleHeight * direction.value
+                    );
+                } else {
+                    ``
+                    refreshTransitionY.value = withTiming(0);
+                }
+                return;
+            }
+            if (Math.abs(refreshTransitionY.value) >= triggleHeight) {
+                if (refreshTransitionY.value > 0) {
+                    runOnJS(handleOnRefresh)();
+                }
+            } else {
+                refreshTransitionY.value = withTiming(
+                    0,
+                    {
+                        easing: RESET_TIMING_EASING,
+                    },
+                    () => {
+                        refreshStatus.value = RefreshStatus.Idle;
+                    }
+                );
+            }
+
+        })
+
+    // ------------------- Animated Styles and Props -------------------
+    const animatedStyle = useAnimatedStyle(() => {
+        // 🌟 核心修复：这个 style 将应用于外部 Animated.View，实现整个列表的平移
+        return {
+            transform: [
+                {
+                    translateY: canOffset ? refreshTransitionY.value : 0,
+                },
+            ],
+        };
+    });
+
+    const animatedScrollEnabled = useDerivedValue(() => {
+        if (Platform.OS === 'ios') return true
+        return refreshTransitionY.value <= 0;
+    }, [refreshTransitionY]);
+
+    const animatedProps = useAnimatedProps(() => {
+        const top = -refreshTransitionY.value;
+        return {
+            scrollEnabled: animatedScrollEnabled.value,
+            scrollIndicatorInsets: {
+                top: top - 1,
+                left: 0,
+                bottom: 0,
+                right: 0,
+            }
+        };
+    });
+
+    const derivedTransitionY = useDerivedValue(() => {
+        return refreshTransitionY.value + offsetY;
+    }, [offsetY]); // 依赖 offsetY，如果 offsetY 变化，重新计算
+
+    // ------------------- JSX 渲染 -------------------
+    return (
+        <GestureHandlerRootView style={{
+            flex: 1
+        }}>
+            <RefreshContainerContext.Provider
+                value={{
+                    transitionY: refreshTransitionY,
+                    scrollBounse,
+                    triggleHeight,
+                    refreshing,
+                    refreshStatus,
+                    direction,
+                    canRefresh,
+                }}
+            >
+                <GestureDetector gesture={panGesture}>
+                    {/* 🌟 核心修复：使用 Animated.View 包裹 FlatList 并应用 animatedStyle */}
+                    <GestureDetector gesture={nativeGesture}>
+                        {/* @ts-ignore */}
+                        <Animated.ScrollView
+                            ref={scrollRef}
+                            bounces={false}
+                            overScrollMode={'never'}
+                            scrollEventThrottle={16}
+                            onScroll={onScroll}
+                            animatedProps={animatedProps}
+                            // 移除 style={animatedStyle}
+                            onContentSizeChange={(_: number, h: number) => {
+                                scrollViewTotalHeight.value = h;
+                            }}
+                            {...restProps}
+                            style={[{ flex: 1 }, animatedStyle]}  // 合并样式
+                        >
+                            {children}
+                        </Animated.ScrollView>
+                    </GestureDetector>
+                </GestureDetector>
+                {/* RefreshContainer 必须在列表之上，使用绝对定位 */}
+                <RefreshContainer
+                    offsetTop={offsetY}
+                    refreshStatus={refreshStatus}
+                    transitionY={derivedTransitionY}
+                    triggleHeight={triggleHeight + (offsetY)}
+                >
+                    {refreshComponent && refreshComponent()}
+                </RefreshContainer>
+            </RefreshContainerContext.Provider>
+        </GestureHandlerRootView>
+    );
+};
+
+export default RefreshScrollList;

package/src/RefreshControl/index.tsx

@@ -0,0 +1,5 @@
+import NormalControl from './NormalControl';
+import RefreshScrollView from './RefreshScrollView';
+import RefreshFlatList from './RefreshFlatList';
+
+export { RefreshScrollView, NormalControl, RefreshFlatList };

package/src/RefreshControl/type.ts

@@ -0,0 +1,74 @@
+import { createContext, useContext } from 'react';
+import { type SharedValue, type DerivedValue } from 'react-native-reanimated';
+
+interface SkeletonContextProps {
+  /**
+   * Refresh Container transitionY
+   */
+  transitionY: SharedValue<number>;
+  /**
+   * ScrollView scroll to the top with velocity. It can continue scroll a little, scrollBounse is a marker to mark the progress
+   * If True, scrollView is bounceing, and refresh animation will not triggle
+   */
+  scrollBounse: SharedValue<boolean>;
+  /**
+   * Only transitionY bigger than triggleHeight, refresh animation will triggle
+   */
+  triggleHeight: number;
+  /**
+   * current RefreshContainer is refreshing
+   */
+  refreshing: boolean;
+  /**
+   * RefreshStatus by transitionY
+   * When transitionY.value reach some point, it will change
+   */
+  refreshStatus: SharedValue<RefreshStatus>;
+  /**
+   * ScrollView pulling direction
+   * 1: down
+   * -1: up
+   *  */
+  direction: DerivedValue<1 | -1>;
+  /**
+   * inside scrollView wheather reach boundary
+   */
+  canRefresh: DerivedValue<boolean>;
+}
+
+export const RefreshContainerContext = createContext<SkeletonContextProps>(
+  {} as SkeletonContextProps
+);
+export const useRefreshScroll = () => useContext(RefreshContainerContext);
+
+/**
+ * Once Refresh LifeCycle:
+ * Idle -> Pulling -> Idle: Not reach triggleHeight, fail to refresh
+ * Idle -> Pulling -> Reached -> Holding -> Done -> Idle: A compelete refresh
+ */
+export enum RefreshStatus {
+  /**
+   * Refresh normal status
+   */
+  Idle,
+  /**
+   * Refresh is pulling down, and not reach triggleHeight
+   */
+  Pulling,
+  /**
+   * Refresh is pulling down continue, and reached triggleHeight
+   */
+  Reached,
+  /**
+   * Refresh is Refreshing
+   */
+  Holding,
+  /**
+   * Refresh is done
+   */
+  Done,
+  /**
+   * ScrollView Auto Load More
+   */
+  AutoLoad,
+}

package/src/icon/CommentIcon.tsx

@@ -0,0 +1,29 @@
+import Svg, {Defs, ClipPath, Rect, G, Path} from "react-native-svg";
+/* SVGR has dropped some elements not supported by react-native-svg: style */
+const SVGComponent = (props: any) => (
+    <Svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        width={14}
+        height={14}
+        viewBox="0 0 14 14"
+        {...props}
+    >
+        <Defs>
+            <ClipPath id="a">
+                <Rect
+                    width={14}
+                    height={14}
+                    transform="translate(126.35 43.8)"
+                />
+            </ClipPath>
+        </Defs>
+        <G className="b" transform="translate(-126.35 -43.8)">
+            <Path
+                d="M42.26.643H33.389a1.949,1.949,0,0,0-1.948,1.948V8.929a1.948,1.948,0,0,0,1.948,1.947h2.1a.139.139,0,0,1,.106.046l1.168,1.17a1.532,1.532,0,0,0,1.058.423,1.464,1.464,0,0,0,1.039-.425l1.167-1.167a.137.137,0,0,1,.107-.047h2.1A1.991,1.991,0,0,0,44.2,8.929V2.591A1.95,1.95,0,0,0,42.26.643M37.507,11.325,36.34,10.159a1.176,1.176,0,0,0-.877-.376h-2.1a.856.856,0,0,1-.854-.854V2.591a.856.856,0,0,1,.854-.854H42.24a.856.856,0,0,1,.854.854V8.929a.856.856,0,0,1-.854.854H40.09a1.271,1.271,0,0,0-.874.374l-1.167,1.168a.373.373,0,0,1-.527.016l-.015-.016"
+                transform="translate(95.559 44.357)"
+            />
+        </G>
+    </Svg>
+);
+export default SVGComponent;

package/src/icon/Icon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { Library } from './library';
+
+interface IconProps {
+  name: keyof typeof Library;
+  size?: number;
+  color?: string;
+}
+
+const Icon: React.FC<IconProps> = (props) => {
+  const { name, size = 20, color = 'black' } = props;
+
+  return (
+    <Svg
+      testID="MAUI-ICON-ID"
+      width={size}
+      height={size}
+      viewBox="0 0 1024 1024"
+    >
+      <Path d={Library[name]} fill={color} />
+    </Svg>
+  );
+};
+
+export default Icon;

package/src/icon/MoreIcon.tsx

@@ -0,0 +1,38 @@
+import Svg, {Defs, ClipPath, Rect, G, Path} from "react-native-svg";
+/* SVGR has dropped some elements not supported by react-native-svg: style */
+const SVGComponent = (props: any) => (
+    <Svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        width={16}
+        height={16}
+        viewBox="0 0 16 16"
+        {...props}
+    >
+        <Defs>
+            <ClipPath id="a">
+                <Rect
+                    width={16}
+                    height={16}
+                    transform="translate(314 477)"
+                />
+            </ClipPath>
+        </Defs>
+        <G className="b" transform="translate(-314 -477)">
+            <G transform="translate(225.396 64.866)">
+                <Path
+                    d="M746.662,419.69a1.556,1.556,0,1,0,1.556-1.556A1.556,1.556,0,0,0,746.662,419.69Z"
+                    transform="translate(-646.169)"
+                />
+                <Path
+                    d="M89.6,419.69a1.556,1.556,0,1,0,1.556-1.556A1.556,1.556,0,0,0,89.6,419.69Z"
+                />
+                <Path
+                    d="M418.133,419.69a1.556,1.556,0,1,0,1.556-1.556A1.555,1.555,0,0,0,418.133,419.69Z"
+                    transform="translate(-323.084)"
+                />
+            </G>
+        </G>
+    </Svg>
+);
+export default SVGComponent;

package/src/icon/Praise.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+
+interface CartIconProps {
+  width?: number;
+  height?: number;
+  fill?: string;
+}
+
+const CartIcon: React.FC<CartIconProps> = ({ width = 14, height = 14, fill = '#666' }) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none">
+      <Path
+        d="M11.666 4.347H8.061V4.17l.137-1.064a3.2 3.2 0 00-.276-1.868 2.055 2.055 0 00-1.596-1.246l-.2-.034a1.4 1.4 0 00-1.263.176 1.348 1.348 0 00-.177.185l-.024.117a1.38 1.38 0 00-.276.427.342.342 0 00-.073.5 1.345 1.345 0 00-.1.244.608.608 0 00-.036.249V2.861A2.419 2.419 0 011.881 5.446H1.023a1.012 1.012 0 00-.745.318A1.027 1.027 0 000 6.537l.275 5.218A1.072 1.072 0 001.33 12.774h8.961a1.216 1.216 0 001.226-1.049l1.2-5.977a1.261 1.261 0 00-1.054-1.4zM5.408 1.356a.328.328 0 01.322-.256.32.32 0 01.061 0l.2.034a1.017 1.017 0 01.773.606 1.964 1.964 0 01.2 1.254l-.13 1.069v.172A1.243 1.243 0 008.061 5.461h3.462a.209.209 0 01.119.177l-1.2 5.944c0 .052-.088.113-.146.113H3.449L3.075 6.312A3.557 3.557 0 005.408 2.827zM2.371 11.342v.034a.3.3 0 01-.318.319H1.538a.346.346 0 01-.319-.32L1.082 6.81A.319.319 0 011.4 6.492h.344a.375.375 0 01.318.319z"
+        fill={fill}
+      />
+    </Svg>
+  );
+};
+
+export default CartIcon;

package/src/icon/SearchIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Svg, Circle, Line } from 'react-native-svg';
+
+interface SearchIconProps {
+  width?: number;
+  height?: number;
+  fill?: string;
+}
+
+const SearchIcon: React.FC<SearchIconProps> = ({ width = 20, height = 20, fill = '#111' }) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 20 20" fill="none">
+      {/* 圆环 */}
+      <Circle
+        cx={9.5}
+        cy={9.5}
+        r={6}
+        stroke={fill}
+        strokeWidth={1.5}
+        fill="none"
+      />
+      {/* 手柄 */}
+      <Line
+        x1={13.74}
+        y1={13.74}
+        x2={16.85}
+        y2={16.85}
+        stroke={fill}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+};
+
+export default SearchIcon;

package/src/icon/index.tsx

@@ -0,0 +1,3 @@
+import Icon from './Icon';
+
+export { Icon };

package/src/icon/library.ts

@@ -0,0 +1,30 @@
+// svg from https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=19238
+export const Library = {
+  'arrow-left':
+    'M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z',
+  'arrow-right':
+    'M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z',
+  'arrow-up':
+    'M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z',
+  'arrow-down':
+    'M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z',
+  'plus':
+    'M544 213.333333v266.666667H810.666667v64H544V810.666667h-64V544H213.333333v-64h266.666667V213.333333z',
+  'minus': 'M810.666667 480v64H213.333333v-64z',
+  'code':
+    'M541.141333 268.864l61.717334 16.938667-132.394667 482.474666-61.717333-16.938666 132.394666-482.474667zM329.002667 298.666667l44.885333 45.610666-175.36 172.586667 175.04 167.573333-44.266667 46.229334L106.666667 517.504 329.002667 298.666667z m355.882666 0l222.336 218.837333L684.586667 730.666667l-44.266667-46.229334 175.018667-167.573333L640 344.277333 684.885333 298.666667z',
+  'check':
+    'M235.946667 472.938667l-45.226667 45.312 210.090667 209.514666 432.362666-427.690666-45.013333-45.482667-387.157333 382.976z',
+  'sorting':
+    'M438.634667 192v644.202667l-0.810667 5.781333c-1.152 7.210667-2.304 8.704-8.64 17.002667l-7.168 3.925333c-15.914667 8.490667-18.282667 7.168-38.4-3.925333L149.333333 624.533333l45.269334-45.226666 180.032 180.138666V192h64z m216.96 10.005333l231.04 231.146667-45.269334 45.248L661.333333 298.261333V865.706667h-64V226.133333a34.133333 34.133333 0 0 1 58.282667-24.128z',
+  'favorites':
+    'M484.267 272.021l6.634 6.72c5.974 5.974 13.014 12.843 21.099 20.63l9.195-8.918c7.253-7.04 13.44-13.184 18.56-18.432a193.28 193.28 0 0 1 277.44 0c75.904 77.526 76.629 202.795 2.133 281.195L512 853.333 204.672 553.237c-74.475-78.421-73.77-203.69 2.133-281.216a193.28 193.28 0 0 1 277.44 0z m293.162 232.15c46.272-53.76 44.182-136.15-5.973-187.371a129.28 129.28 0 0 0-185.984 0l-15.125 15.104a1687.253 1687.253 0 0 1-4.395 4.31L512 388.18l-49.28-47.445-13.227-12.928-10.965-11.008a129.28 129.28 0 0 0-186.005 0c-51.456 52.565-52.31 137.963-2.198 191.573L512 763.883l261.675-255.531 3.754-4.181z',
+  'favorites-fill':
+    'M484.266667 272.021333l6.634666 6.72c5.973333 5.973333 13.013333 12.842667 21.098667 20.629334l9.194667-8.917334c7.253333-7.04 13.44-13.184 18.56-18.432a193.28 193.28 0 0 1 277.44 0c75.904 77.525333 76.629333 202.794667 2.133333 281.194667L512 853.333333 204.672 553.237333c-74.474667-78.421333-73.770667-203.690667 2.133333-281.216a193.28 193.28 0 0 1 277.44 0z',
+  'search':
+    'M469.333 192c153.174 0 277.334 124.16 277.334 277.333 0 68.054-24.534 130.411-65.216 178.688L846.336 818.24l-48.341 49.877L630.4 695.125a276.053 276.053 0 0 1-161.067 51.542C316.16 746.667 192 622.507 192 469.333S316.16 192 469.333 192z m0 64C351.51 256 256 351.51 256 469.333s95.51 213.334 213.333 213.334 213.334-95.51 213.334-213.334S587.157 256 469.333 256z',
+  'arrow-line-up':
+    'M478.3 927.5V175.2L259 394.5c-10.7 10.7-28.1 10.7-38.7 0l-6.5-6.5c-10.7-10.7-10.7-28.1 0-38.7L481.6 81.4c4.5-9.2 13.4-16 23.9-17.6 7.1-1.5 14.7-0.1 21 4 4 2.4 7.5 5.6 10.1 9.4l0.5 0.5c2.6 2.6 4.6 5.6 5.9 8.8l266.7 266.7c10.7 10.7 10.7 28.1 0 38.7l-6.5 6.5c-10.7 10.7-28.1 10.7-38.7 0l-222.3-222v751.1c0 17.6-14.4 32-32 32-17.5 0-31.9-14.4-31.9-32z',
+  'arrow-line-down':
+    'M478.3 95.2v752.3L259 628.2c-10.7-10.7-28.1-10.7-38.7 0l-6.5 6.5c-10.7 10.7-10.7 28.1 0 38.7l267.9 267.9c4.5 9.2 13.4 16 23.9 17.6 7.1 1.5 14.7 0.1 21-4 4-2.4 7.5-5.6 10.1-9.4l0.5-0.5c2.6-2.6 4.6-5.6 5.9-8.8l266.7-266.7c10.7-10.7 10.7-28.1 0-38.7l-6.5-6.5c-10.7-10.7-28.1-10.7-38.7 0l-222.4 222V95.2c0-17.6-14.4-32-32-32-17.5 0-31.9 14.4-31.9 32z',
+};

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './RefreshControl';