Dingdong_app/components/ScrollPage.js

import React from "react";
import { ScrollView, RefreshControl } from "react-native";
import { useFocusEffect } from "@react-navigation/native";
import { useTheme } from "@ui-kitten/components";
import { useModel } from "flooks";
import NavHeaderBar from "./NavHeaderBar";
import { initState, refreashReducer } from "../Redux/RefreashRedux";

export default function scrollPage(props) {
    const {
        style,
        enabledFresh,
        refreshEvent,
        statusType,
		navHeaderBarTitle,
		children,
    } = props;
    const [state, dispatch] = React.useReducer(refreashReducer, initState);
    const { refreshing } = state;
    const theme = useTheme();
    const { changeBackground } = useModel("barModel");
    function onRefresh() {
        dispatch({
            type: "startRefresh",
        });
        if (refreshEvent) {
            refreshEvent()
                .then(() => {
                    dispatch({
                        type: "refreshFinish",
                    });
                })
                .catch(() => {
                    dispatch({
                        type: "refreshError",
                    });
                });
        } else {
            setTimeout(() => {
                dispatch({
                    type: "refreshFinish",
                });
            }, 1000);
        }
    }
    useFocusEffect(
        React.useCallback(() => {
            if (enabledFresh && refreshEvent) {
                onRefresh();
            }

            if (statusType === "primary") {
                changeBackground(theme["color-primary-500"]);
            }
        }, [])
    );



    return (
      <>
        {navHeaderBarTitle != null && (
        <NavHeaderBar title={navHeaderBarTitle} />
            )}
        <ScrollView
          refreshControl={(
            <RefreshControl
              refreshing={refreshing}
              onRefresh={onRefresh}
              enabled={enabledFresh || false}
            />
                  )}
          style={style}
          contentContainerStyle={{ flexGrow: 1 }}
        >
          {children}
        </ScrollView>
      </>
    );
}