create-du-app 0.1.2 → 0.1.4

package/templates/mobile/rn/src/core/components/ui/text-area/text-area.tsx

@@ -0,0 +1,90 @@
+import { Font, fontSize, Radius, Spacing } from '@src/core/utils';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import React, { useState } from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+import FieldFrame from '../field/field-frame';
+import { FIELD_BORDER_WIDTH, resolveFieldBorderColor } from '../field/field.shared';
+import { TextAreaProps } from './text-area.type';
+
+/**
+ * Design-system multiline text area (Life-Master-Design "Textarea input field").
+ *
+ * Shares the field frame + border-state logic with {@link TextField}.
+ * States: default / focus / filled / error / disabled.
+ *
+ * @example
+ * <TextArea label="Description" placeholder="Text" value={v} onChangeText={setV} />
+ */
+const TextArea = (props: TextAreaProps) => {
+  const {
+    label,
+    message,
+    error = false,
+    disabled = false,
+    minHeight = 140,
+    maxHeight = 240,
+    containerStyle,
+    inputStyle,
+    onFocus,
+    onBlur,
+    ...inputProps
+  } = props;
+
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  const [focused, setFocused] = useState(false);
+  const borderColor = resolveFieldBorderColor(colors, { focused, error, disabled });
+
+  return (
+    <FieldFrame label={label} message={message} error={error} disabled={disabled} style={containerStyle}>
+      <TextInput
+        {...inputProps}
+        multiline
+        editable={!disabled}
+        textAlignVertical="top"
+        placeholderTextColor={colors.fg_neutral_faded}
+        onFocus={(e) => {
+          setFocused(true);
+          onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setFocused(false);
+          onBlur?.(e);
+        }}
+        scrollEnabled
+        style={[
+          styles.box,
+          {
+            minHeight,
+            maxHeight,
+            borderColor,
+            backgroundColor: disabled ? colors.bg_disable : colors.bg_input,
+          },
+          disabled && styles.inputDisabled,
+          inputStyle,
+        ]}
+      />
+    </FieldFrame>
+  );
+};
+
+export default TextArea;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    box: {
+      alignSelf: 'stretch',
+      borderRadius: Radius.radius_lg, // 12
+      borderWidth: FIELD_BORDER_WIDTH, // 1
+      paddingHorizontal: Spacing.spacing_md, // 12
+      paddingVertical: Spacing.spacing_m_nudge, // 10
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(16),
+      lineHeight: 24,
+      color: c.fg_neutral_normal,
+    },
+    inputDisabled: {
+      color: c.fg_neutral_faded,
+    },
+  });

package/templates/mobile/rn/src/core/components/ui/text-area/text-area.type.ts

@@ -0,0 +1,20 @@
+import { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+
+export type TextAreaProps = Omit<TextInputProps, 'style' | 'editable' | 'multiline'> & {
+  /** Top label / description. */
+  label?: string;
+  /** Bottom helper / error message. */
+  message?: string;
+  /** Error (validation) visual + red message. */
+  error?: boolean;
+  /** Disable input. */
+  disabled?: boolean;
+  /** Minimum height of the box. @default 140 */
+  minHeight?: number;
+  /** Maximum height; beyond this the field scrolls instead of growing. @default 240 */
+  maxHeight?: number;
+  /** Override the outer container style. */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Override the text input style. */
+  inputStyle?: StyleProp<TextStyle>;
+};

package/templates/mobile/rn/src/core/components/ui/text-field/index.ts

@@ -0,0 +1,2 @@
+export { default as TextField } from './text-field';
+export * from './text-field.type';

package/templates/mobile/rn/src/core/components/ui/text-field/text-field.tsx

@@ -0,0 +1,116 @@
+import { Font, fontSize, horizontalScale, Radius, Spacing } from '@src/core/utils';
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import React, { useState } from 'react';
+import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
+import FieldFrame from '../field/field-frame';
+import { FIELD_BORDER_WIDTH, resolveFieldBorderColor } from '../field/field.shared';
+import { TextFieldProps } from './text-field.type';
+
+/**
+ * Design-system text input (Life-Master-Design "Input field").
+ *
+ * Label + input box + optional trailing icon + helper/error message.
+ * States: default / focus / filled / error / disabled (hover = native).
+ *
+ * @example
+ * <TextField label="Email" placeholder="you@mail.com" value={v} onChangeText={setV} />
+ * <TextField label="Code" error message="Invalid code" IconTrailing={IconAdd} />
+ */
+const TextField = (props: TextFieldProps) => {
+  const {
+    label,
+    message,
+    error = false,
+    disabled = false,
+    IconTrailing,
+    onTrailingPress,
+    containerStyle,
+    inputStyle,
+    onFocus,
+    onBlur,
+    ...inputProps
+  } = props;
+
+  const { colors } = useTheme();
+  const styles = useThemedStyles(makeStyles);
+
+  const [focused, setFocused] = useState(false);
+  const borderColor = resolveFieldBorderColor(colors, { focused, error, disabled });
+
+  return (
+    <FieldFrame label={label} message={message} error={error} disabled={disabled} style={containerStyle}>
+      <View
+        style={[
+          styles.box,
+          { borderColor, backgroundColor: disabled ? colors.bg_disable : colors.bg_input },
+        ]}
+      >
+        <TextInput
+          {...inputProps}
+          editable={!disabled}
+          placeholderTextColor={colors.fg_neutral_faded}
+          onFocus={(e) => {
+            setFocused(true);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setFocused(false);
+            onBlur?.(e);
+          }}
+          style={[styles.input, disabled && styles.inputDisabled, inputStyle]}
+        />
+
+        {IconTrailing ? (
+          <TouchableOpacity
+            disabled={disabled || !onTrailingPress}
+            onPress={onTrailingPress}
+            style={styles.trailing}
+          >
+            <IconTrailing
+              width={horizontalScale(16)}
+              height={horizontalScale(16)}
+              color={disabled ? colors.fg_neutral_faded : colors.fg_neutral_normal}
+            />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </FieldFrame>
+  );
+};
+
+export default TextField;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    box: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      borderRadius: Radius.radius_lg, // 12
+      borderWidth: FIELD_BORDER_WIDTH, // 1
+      overflow: 'hidden',
+    },
+    input: {
+      flex: 1,
+      paddingHorizontal: Spacing.spacing_md, // 12
+      paddingVertical: Spacing.spacing_m_nudge, // 10
+      fontFamily: Font.dmSansRegular,
+      fontSize: fontSize(16),
+      color: c.fg_neutral_normal,
+      // No fixed lineHeight on a single-line input — it offsets the glyph
+      // vertically on iOS. Let the line box center the text naturally.
+      includeFontPadding: false, // Android: drop extra top/bottom font padding
+      textAlignVertical: 'center', // Android vertical centering
+    },
+    inputDisabled: {
+      color: c.fg_neutral_faded,
+    },
+    trailing: {
+      alignSelf: 'stretch',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: Spacing.spacing_md, // 12
+      borderLeftWidth: FIELD_BORDER_WIDTH,
+      borderLeftColor: c.bd_neutral_faded,
+    },
+  });

package/templates/mobile/rn/src/core/components/ui/text-field/text-field.type.ts

@@ -0,0 +1,21 @@
+import { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+
+export type TextFieldProps = Omit<TextInputProps, 'style' | 'editable'> & {
+  /** Top label. */
+  label?: string;
+  /** Bottom helper / error message. */
+  message?: string;
+  /** Error (validation) visual + red message. */
+  error?: boolean;
+  /** Disable input. */
+  disabled?: boolean;
+  /** Trailing icon (SVG), shown after a divider. */
+  IconTrailing?: React.FC<SvgProps>;
+  /** Press handler for the trailing icon. */
+  onTrailingPress?: () => void;
+  /** Override the outer container style. */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Override the text input style. */
+  inputStyle?: StyleProp<TextStyle>;
+};

package/templates/mobile/rn/src/core/components/ui/toggle/index.ts

@@ -0,0 +1,2 @@
+export { default as Toggle } from './toggle';
+export * from './toggle.type';

package/templates/mobile/rn/src/core/components/ui/toggle/toggle.tsx

@@ -0,0 +1,110 @@
+import { ThemeColors, useTheme, useThemedStyles } from '@src/core/theme';
+import { horizontalScale, Stroke } from '@src/core/utils';
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import { ToggleProps, ToggleSize } from './toggle.type';
+
+/** Track + thumb dimensions per size (from Figma). */
+const SIZE_TOKENS: Record<
+  ToggleSize,
+  { width: number; height: number; thumb: number; padding: number }
+> = {
+  sm: { width: horizontalScale(48), height: horizontalScale(24), thumb: horizontalScale(18), padding: horizontalScale(3) },
+  lg: { width: horizontalScale(60), height: horizontalScale(32), thumb: horizontalScale(26), padding: horizontalScale(3) },
+};
+
+/**
+ * Design-system Toggle / Switch (Life-Master-Design).
+ *
+ * Sizes: `sm` (48×24) | `lg` (60×32). States: on / off / disabled.
+ * Animated thumb. Controlled via `value` / `onValueChange`.
+ *
+ * @example
+ * <Toggle value={enabled} onValueChange={setEnabled} />
+ * <Toggle value={enabled} onValueChange={setEnabled} size="lg" disabled />
+ */
+const Toggle = (props: ToggleProps) => {
+  const { value = false, onValueChange, size = 'sm', disabled = false, style, accessibilityLabel } = props;
+  const styles = useThemedStyles(makeStyles);
+  const { colors } = useTheme();
+  const tokens = SIZE_TOKENS[size];
+  const travel = tokens.width - tokens.thumb - tokens.padding * 2;
+
+  const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(anim, {
+      toValue: value ? 1 : 0,
+      duration: 160,
+      useNativeDriver: false,
+    }).start();
+  }, [value, anim]);
+
+  const trackColor = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.bg_elevation_level_2_normal, colors.bg_primary_normal], // #292929 -> #6927da
+  });
+  const translateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, travel] });
+
+  const thumbColor = value ? colors.fg_primary_on_background : colors.fg_neutral_normal;
+
+  return (
+    <TouchableWithoutFeedback
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled }}
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={() => onValueChange?.(!value)}
+    >
+      <Animated.View
+        style={[
+          styles.track,
+          {
+            width: tokens.width,
+            height: tokens.height,
+            borderRadius: tokens.height / 2,
+            padding: tokens.padding,
+            backgroundColor: disabled ? colors.bg_elevation_level_2_normal : trackColor,
+            borderWidth: value && !disabled ? 0 : Stroke.stroke_xs,
+            borderColor: colors.bd_neutral_faded,
+          },
+          disabled && styles.disabled,
+          style,
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.thumb,
+            {
+              width: tokens.thumb,
+              height: tokens.thumb,
+              borderRadius: tokens.thumb / 2,
+              backgroundColor: disabled ? colors.fg_neutral_faded : thumbColor,
+              transform: [{ translateX }],
+            },
+          ]}
+        />
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default Toggle;
+
+const makeStyles = (c: ThemeColors) =>
+  StyleSheet.create({
+    track: {
+      justifyContent: 'center',
+    },
+    thumb: {
+      // skeuomorphic drop shadow (shadow-xs)
+      shadowColor: c.shadow_skeumorphic_inner,
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 1,
+      shadowRadius: 2,
+      elevation: 1,
+    },
+    disabled: {
+      opacity: 0.6,
+    },
+  });

package/templates/mobile/rn/src/core/components/ui/toggle/toggle.type.ts

@@ -0,0 +1,19 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+/** Size token — `sm` = 48×24, `lg` = 60×32. */
+export type ToggleSize = 'sm' | 'lg';
+
+export interface ToggleProps {
+  /** Controlled on/off value. */
+  value?: boolean;
+  /** Fired with the next value when pressed. */
+  onValueChange?: (value: boolean) => void;
+  /** Size token. @default 'sm' */
+  size?: ToggleSize;
+  /** Disable interaction + faded visual. */
+  disabled?: boolean;
+  /** Override container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label. */
+  accessibilityLabel?: string;
+}

package/templates/mobile/rn/src/core/constants/external-urls.constant.ts

@@ -0,0 +1,5 @@
+/**
+ * The canonical ExternalUrls now lives in `@repo/shared` so every app shares
+ * one source of truth. Re-exported here to keep existing imports working.
+ */
+export { ExternalUrls } from '@repo/shared';

package/templates/mobile/rn/src/core/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './type.constant';
+export * from './external-urls.constant';

package/templates/mobile/rn/src/core/constants/type.constant.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+
+export type ReactChildren = ReactElement | ReactElement[] | null;

package/templates/mobile/rn/src/core/context/index.ts

@@ -0,0 +1 @@
+export * from './shared-transition-context';

package/templates/mobile/rn/src/core/context/shared-transition-context.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+interface CardLayout {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  imageUri: string;
+}
+
+interface SharedTransitionContextType {
+  cardLayout: CardLayout | null;
+  setCardLayout: (layout: CardLayout | null) => void;
+}
+
+const SharedTransitionContext = createContext<SharedTransitionContextType>({
+  cardLayout: null,
+  setCardLayout: () => {},
+});
+
+export const SharedTransitionProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [cardLayout, setCardLayout] = useState<CardLayout | null>(null);
+
+  const handleSetCardLayout = useCallback((layout: CardLayout | null) => {
+    setCardLayout(layout);
+  }, []);
+
+  return (
+    <SharedTransitionContext.Provider value={{ cardLayout, setCardLayout: handleSetCardLayout }}>
+      {children}
+    </SharedTransitionContext.Provider>
+  );
+};
+
+export const useSharedTransition = () => useContext(SharedTransitionContext);

package/templates/mobile/rn/src/core/hook/index.ts

@@ -0,0 +1,8 @@
+export * from './useAppNavigation';
+export * from './useDebounce';
+export * from './useTimeout';
+export * from './useBottomInset';
+export * from './useNetworkStatus';
+export * from './useActiveRouteName';
+export * from './useEndReached';
+export * from './useManualRefetch';

package/templates/mobile/rn/src/core/hook/useActiveRouteName.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import type { NavigationState, PartialState } from '@react-navigation/native';
+import { navigationRef } from '@src/core/utils';
+
+type AnyState = NavigationState | PartialState<NavigationState> | undefined;
+
+/**
+ * Walks a navigation state to the deepest focused route and returns its name.
+ * More reliable across nested tab + stack navigators than reading only the
+ * top-level route, and resilient to `getCurrentRoute()` returning an
+ * intermediate (tab) route rather than the leaf screen.
+ */
+const focusedRouteName = (state: AnyState): string | undefined => {
+    if (!state || !state.routes.length) return undefined;
+    const index = state.index ?? state.routes.length - 1;
+    const route = state.routes[index];
+    // Recurse into nested navigators until we reach a leaf route.
+    return focusedRouteName(route.state as AnyState) ?? route.name;
+};
+
+/**
+ * The name of the currently focused leaf route, tracked reactively off the
+ * shared {@link navigationRef}. Returns `undefined` until the navigation
+ * container is ready. Lets components outside the navigator (e.g. the global
+ * offline banner) react to where the user is without prop-drilling.
+ */
+export const useActiveRouteName = (): string | undefined => {
+    const [routeName, setRouteName] = useState<string | undefined>(undefined);
+
+    useEffect(() => {
+        let unsubscribe: (() => void) | undefined;
+        let retry: ReturnType<typeof setInterval> | undefined;
+
+        const attach = (): boolean => {
+            const ref = navigationRef.current;
+            if (!ref || !ref.isReady()) return false;
+
+            const sync = () =>
+                setRouteName(focusedRouteName(ref.getRootState() as AnyState));
+
+            // Seed once the container is ready, then keep in sync on every
+            // navigation state change (including bottom-tab switches).
+            sync();
+            unsubscribe = ref.addListener('state', sync);
+            return true;
+        };
+
+        // The banner mounts alongside the navigator, so the container ref may
+        // not be ready on the first effect run — poll briefly until it is.
+        if (!attach()) {
+            retry = setInterval(() => {
+                if (attach() && retry) clearInterval(retry);
+            }, 100);
+        }
+
+        return () => {
+            if (retry) clearInterval(retry);
+            unsubscribe?.();
+        };
+    }, []);
+
+    return routeName;
+};

package/templates/mobile/rn/src/core/hook/useAppNavigation.tsx

@@ -0,0 +1,7 @@
+import type { NavigationProp } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import { NavigatorParamList } from '@src/app/navigation/app-route-type';
+
+export const useAppNavigation = () => {
+  return useNavigation<NavigationProp<NavigatorParamList>>();
+};

package/templates/mobile/rn/src/core/hook/useBottomInset.tsx

@@ -0,0 +1,26 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { isIOS } from '../utils'
+
+/**
+ * Raw OS safe-area bottom inset (with a +12 nudge on Android, which lacks a
+ * home-indicator gap). The floating tab bar uses this for its own bottom
+ * padding; screens should prefer {@link useScreenBottomInset} so their content
+ * also clears the bar.
+ */
+export const useBottomInset = (): number => {
+    const insets = useSafeAreaInsets()
+    return isIOS ? insets.bottom : insets.bottom + 12
+}
+
+// Height of the floating tab pill (icon + label + padding) above the safe-area
+// inset — the space scroll content must reserve to clear the bar.
+const TAB_BAR_CLEARANCE = 96
+
+/**
+ * Bottom padding a scrollable screen needs so its last rows clear the floating
+ * tab bar. Use directly as the list's `contentContainerStyle.paddingBottom`.
+ */
+export const useScreenBottomInset = (): number => {
+    const bottom = useBottomInset()
+    return bottom + TAB_BAR_CLEARANCE
+}

package/templates/mobile/rn/src/core/hook/useDebounce.tsx

@@ -0,0 +1,16 @@
+import { DependencyList, useEffect } from 'react';
+import useTimeout from './useTimeout';
+
+export default function useDebounce(
+  callback: () => void,
+  delay: number,
+  dependencies: DependencyList
+) {
+  const { reset, clear } = useTimeout(callback, delay);
+
+  useEffect(() => {
+    reset();
+    return clear;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+}

package/templates/mobile/rn/src/core/hook/useEndReached.tsx

@@ -0,0 +1,46 @@
+import { useCallback, useRef } from 'react';
+
+/**
+ * Guards a FlatList's `onEndReached` so it only fires AFTER the user has actually
+ * scrolled — not on mount.
+ *
+ * A short list whose content doesn't fill the viewport makes FlatList fire
+ * `onEndReached` immediately on layout, which would auto-load page 2 the moment
+ * the screen opens. Gating on the first real scroll defers load-more until
+ * there's genuine scroll intent.
+ *
+ * The flag is armed by `onScrollBeginDrag` (the user touches and drags the list)
+ * as well as `onMomentumScrollBegin`. Arming on the drag is what makes load-more
+ * reliable: a SLOW scroll to the bottom produces no momentum phase, so gating on
+ * momentum alone (LIFEMASTER-396) swallowed `onEndReached` — the user had to
+ * scroll up and flick back down to trigger the next page. The drag fires on the
+ * very first touch-move, momentum or not.
+ *
+ * Spread the returned props onto the FlatList:
+ * ```tsx
+ * const endReached = useEndReached(loadMore);
+ * <FlatList onEndReached={endReached.onEndReached}
+ *           onScrollBeginDrag={endReached.onScrollBeginDrag}
+ *           onMomentumScrollBegin={endReached.onMomentumScrollBegin}
+ *           onEndReachedThreshold={0.4} />
+ * ```
+ */
+export const useEndReached = (loadMore: () => void) => {
+  // Becomes true on the first real scroll (drag or momentum), so the initial
+  // layout's onEndReached (fired before any scroll) is ignored.
+  const hasScrolled = useRef(false);
+
+  const arm = useCallback(() => {
+    hasScrolled.current = true;
+  }, []);
+
+  const onEndReached = useCallback(() => {
+    if (hasScrolled.current) loadMore();
+  }, [loadMore]);
+
+  return {
+    onEndReached,
+    onScrollBeginDrag: arm,
+    onMomentumScrollBegin: arm,
+  };
+};

package/templates/mobile/rn/src/core/hook/useManualRefetch.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseManualRefetchResult {
+  /**
+   * True only while a *user-initiated* refetch (pull-to-refresh / retry) is in
+   * flight. Automatic background refetches (focus, reconnect, stale refresh)
+   * never flip this, so they fetch silently without driving the spinner.
+   */
+  isRefreshing: boolean;
+  /** Run all the wrapped refetches together and gate the spinner on them. */
+  refetch: () => void;
+}
+
+/**
+ * Gates a pull-to-refresh spinner on *manual* refetches only.
+ *
+ * React Query's `isFetching` is true for every background refetch — screen
+ * focus, reconnect, stale revalidation — so wiring `RefreshControl.refreshing`
+ * to it makes the spinner flash on auto-refetches the user never asked for.
+ * This hook instead exposes a `refetch` that flips an internal flag, so the
+ * spinner shows only while that user-driven call is in flight.
+ *
+ * Pass more than one query's `refetch` (e.g. a detail + its list) and they run
+ * together via `Promise.all`; the flag clears once all settle.
+ *
+ * The flag clear is guarded against a post-unmount `setState` (the user can
+ * leave the screen mid-pull before the request settles).
+ */
+export const useManualRefetch = (
+  ...refetchFns: Array<() => Promise<unknown>>
+): UseManualRefetchResult => {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  // Snapshot the latest refetch fns so `refetch` stays referentially stable
+  // (RefreshControl/onRefresh don't need a new identity each render) while
+  // still calling the current query instances.
+  const fnsRef = useRef(refetchFns);
+  fnsRef.current = refetchFns;
+
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  const refetch = useCallback(() => {
+    setIsRefreshing(true);
+    Promise.all(fnsRef.current.map((fn) => fn())).finally(() => {
+      if (mountedRef.current) setIsRefreshing(false);
+    });
+  }, []);
+
+  return { isRefreshing, refetch };
+};