react-native-refresh-list2 1.0.0

package/package.json

@@ -0,0 +1,168 @@
+{
+  "name": "react-native-refresh-list2",
+  "version": "1.0.0",
+  "description": "reactnative 下拉刷新统一android/ios 样式ios样式",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-refresh-flatlist-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/1176506184/react-native-refresh-flatlist.git"
+  },
+  "author": "tangfeifan <1050069968@qq.com> (https://github.com/1176506184/react-native-refresh-flatlist)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/1176506184/react-native-refresh-flatlist/issues"
+  },
+  "homepage": "https://github.com/1176506184/react-native-refresh-flatlist#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.1.0",
+    "react-native-svg": "^15.15.3",
+    "react-native-worklets": "0.7",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "^4.1.0",
+    "react-native-svg": "*",
+    "react-native-worklets": "0.7"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "turbo-module",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.2"
+  },
+  "resolutions": {
+    "semver": "7.6.3"
+  }
+}

package/src/Loading/Loading.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ActivityIndicator } from 'react-native';
+
+export interface LoadingProps {
+  color?: string;
+  size?: 'small' | 'large';
+  animating?: boolean;
+}
+
+const Loading: React.FC<LoadingProps> = (props) => {
+  const { color, size, animating = true } = props;
+  return <ActivityIndicator {...{ color, size, animating }} />;
+};
+
+export default Loading;

package/src/Loading/index.tsx

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

package/src/RefreshControl/BottomContainer.tsx

@@ -0,0 +1,112 @@
+/**
+ * Refresh Control Implement
+ * Every Control can get props from useRefresh()
+ */
+import React, {useState} from 'react';
+import {View, Text, StyleSheet} from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    useAnimatedReaction,
+    runOnJS,
+    withTiming,
+    useSharedValue,
+} from 'react-native-reanimated';
+import {RefreshStatus, useRefreshScroll} from './type';
+import {Icon} from '../icon';
+import {Loading} from '../Loading';
+
+
+interface NormalControlProps {
+    textConfig?: {
+        normal: string;
+        release: string;
+        refresing: string;
+        done: string;
+    };
+    position: 'top' | 'bottom';
+}
+
+const NormalControl: React.FC<NormalControlProps> = (props) => {
+    const {
+        textConfig = {
+            normal: '下拉刷新',
+            release: '释放以刷新',
+            refresing: '努力刷新中',
+            done: '刷新成功',
+        },
+        position,
+    } = props;
+    const {transitionY, triggleHeight, refreshStatus} = useRefreshScroll();
+    const [refreshText, setRefreshText] = useState(textConfig.normal);
+    const [loading, setLoading] = useState(false);
+    const degree = useSharedValue(0);
+
+    const setRefreshTextByStatus = (text: string) => {
+        setRefreshText(text);
+    };
+
+    useAnimatedReaction(
+        () => refreshStatus.value,
+        (value) => {
+            if (value === RefreshStatus.Idle) {
+                runOnJS(setRefreshTextByStatus)(textConfig.normal);
+            }
+            if (value === RefreshStatus.Pulling) {
+                runOnJS(setRefreshTextByStatus)(textConfig.normal);
+            }
+            if (value === RefreshStatus.Reached) {
+                runOnJS(setRefreshTextByStatus)(textConfig.release);
+            }
+            if (value === RefreshStatus.Holding) {
+                runOnJS(setRefreshTextByStatus)(textConfig.refresing);
+                runOnJS(setLoading)(true);
+            }
+            if (value === RefreshStatus.Done) {
+                runOnJS(setRefreshTextByStatus)(textConfig.done);
+                runOnJS(setLoading)(false);
+            }
+        }
+    );
+
+    const arrowStyle = useAnimatedStyle(() => {
+        degree.value = withTiming(transitionY.value >= triggleHeight ? 180 : 0, {
+            duration: 200,
+        });
+
+        return {
+            transform: [
+                {
+                    rotateZ: `${degree.value}deg`,
+                },
+            ],
+        };
+    });
+
+    return (
+        <View style={styles.container}>
+            {loading ? (
+                <Loading/>
+            ) : (
+                <Animated.View style={arrowStyle}>
+                    <Icon
+                        name={position === 'top' ? 'arrow-line-down' : 'arrow-line-up'}
+                        size={18}
+                        color={'grey'}
+                    />
+                </Animated.View>
+            )}
+            <Text style={styles.textStyle}>{refreshText}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+    },
+    textStyle: {
+        marginHorizontal: 10,
+    },
+});
+
+export default NormalControl;

package/src/RefreshControl/NormalControl.tsx

@@ -0,0 +1,118 @@
+/**
+ * Refresh Control Implement
+ * Every Control can get props from useRefresh()
+ */
+import React, { useState } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    useAnimatedReaction,
+    runOnJS,
+    withTiming,
+    useSharedValue,
+} from 'react-native-reanimated';
+import { RefreshStatus, useRefreshScroll } from './type';
+import { Icon } from '../icon';
+import { Loading } from '../Loading';
+
+interface NormalControlProps {
+    textConfig?: {
+        normal: string;
+        release: string;
+        refresing: string;
+        done: string;
+    };
+    position: 'top' | 'bottom';
+    textStyle?: any;
+    iconColor?: string;
+    arrowColor?: string;
+}
+
+const NormalControl: React.FC<NormalControlProps> = (props) => {
+    const {
+        textConfig = {
+            normal: '下拉刷新',
+            release: '释放以刷新',
+            refresing: '努力刷新中',
+            done: '刷新成功',
+        },
+        position,
+    } = props;
+    const { transitionY, triggleHeight, refreshStatus } = useRefreshScroll();
+    const [refreshText, setRefreshText] = useState(textConfig.normal);
+    const [loading, setLoading] = useState(false);
+    const degree = useSharedValue(0);
+    const iconColor = props.iconColor || '#7A6FFA';
+    const arrowColor = props.arrowColor || 'grey';
+
+    const setRefreshTextByStatus = (text: string) => {
+        setRefreshText(text);
+    };
+
+    useAnimatedReaction(
+        () => refreshStatus.value,
+        (value) => {
+            if (value === RefreshStatus.Idle) {
+                runOnJS(setRefreshTextByStatus)(textConfig.normal);
+            }
+            if (value === RefreshStatus.Pulling) {
+                runOnJS(setRefreshTextByStatus)(textConfig.normal);
+            }
+            if (value === RefreshStatus.Reached) {
+                runOnJS(setRefreshTextByStatus)(textConfig.release);
+            }
+            if (value === RefreshStatus.Holding) {
+                runOnJS(setRefreshTextByStatus)(textConfig.refresing);
+                runOnJS(setLoading)(true);
+            }
+            if (value === RefreshStatus.Done) {
+                console.log('done');
+                runOnJS(setRefreshTextByStatus)(textConfig.done);
+                runOnJS(setLoading)(false);
+            }
+        }
+    );
+
+    const arrowStyle = useAnimatedStyle(() => {
+        degree.value = withTiming(transitionY.value >= triggleHeight ? 180 : 0, {
+            duration: 200,
+        });
+
+        return {
+            transform: [
+                {
+                    rotateZ: `${degree.value}deg`,
+                },
+            ],
+        };
+    });
+
+    return (
+        <View style={styles.container}>
+            {loading ? (
+                <Loading color={iconColor} />
+            ) : (
+                <Animated.View style={arrowStyle}>
+                    <Icon
+                        name={position === 'top' ? 'arrow-line-down' : 'arrow-line-up'}
+                        size={18}
+                        color={arrowColor}
+                    />
+                </Animated.View>
+            )}
+            <Text style={[styles.textStyle, props.textStyle]}>{refreshText}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center'
+    },
+    textStyle: {
+        marginHorizontal: 10,
+    },
+});
+
+export default NormalControl;

package/src/RefreshControl/RefreshContainer.tsx

@@ -0,0 +1,74 @@
+import React, { createContext, useContext } from 'react';
+import { StyleSheet, Dimensions } from 'react-native';
+import Animated, {
+    interpolate,
+    useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { RefreshStatus } from './type';
+
+const { width } = Dimensions.get('window');
+
+interface RefreshContainerContextProps extends RefreshContainerProps {
+}
+
+export const RefreshContainerContext =
+    createContext<RefreshContainerContextProps>(
+        {} as RefreshContainerContextProps
+    );
+export const useRefresh = () => useContext(RefreshContainerContext);
+
+interface RefreshContainerProps {
+    transitionY: SharedValue<number>;
+    triggleHeight: number; // 当下拉距离超过该值，触发下拉刷新方法
+    refreshStatus: SharedValue<RefreshStatus>;
+    children: React.ReactNode;
+    offsetTop?: number;
+}
+
+const RefreshContainer: React.FC<RefreshContainerProps> = (props) => {
+    const { children, transitionY, triggleHeight, refreshStatus } = props;
+
+    const animatedStyle = useAnimatedStyle(() => {
+        if (transitionY.value <= (0 + (props.offsetTop || 0))) {
+            return {
+                opacity: 0,
+                height: 0
+            };
+        }
+        return {
+            height: transitionY.value,
+            opacity: interpolate(
+                transitionY.value,
+                [0, triggleHeight / 3, triggleHeight],
+                [0, 0, 1]
+            ),
+        };
+    });
+
+    return (
+        <RefreshContainerContext.Provider
+            // @ts-ignore
+            value={{
+                transitionY,
+                triggleHeight,
+                refreshStatus,
+            }}
+        >
+            <Animated.View style={[styles.container, animatedStyle]}>
+                {children}
+            </Animated.View>
+        </RefreshContainerContext.Provider>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width,
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+    },
+});
+
+export default RefreshContainer;

package/src/RefreshControl/RefreshContext.tsx

@@ -0,0 +1,30 @@
+import React, {createContext, useContext, useState} from 'react';
+
+// 定义上下文类型
+interface RefreshContextType {
+    isRefreshing: boolean;
+    setIsRefreshing: (value: boolean) => void;
+}
+
+// 创建上下文
+const RefreshContext = createContext<RefreshContextType | undefined>(undefined);
+
+// 提供上下文的 Provider 组件
+export const RefreshProvider: React.FC = ({children}: any) => {
+    const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
+
+    return (
+        <RefreshContext.Provider value={{isRefreshing, setIsRefreshing}}>
+            {children}
+        </RefreshContext.Provider>
+    );
+};
+
+// 自定义 Hook 用于消费上下文
+export const useRefresh = (): RefreshContextType => {
+    const context = useContext(RefreshContext);
+    if (!context) {
+        throw new Error('useRefresh must be used within a RefreshProvider');
+    }
+    return context;
+};