create-react-native-starter-kit 0.0.0-stage → 1.0.1

package/template/src/components/shared/offline/OfflineState.tsx

@@ -0,0 +1,229 @@
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import Haptics from '@mhpdev/react-native-haptics';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import CustomButton from '@/components/shared/CustomButton';
+import CustomText from '@/components/shared/text/CustomText';
+import { useNetwork } from '@/context/NetworkContext';
+import { useAppTheme } from '@/context/ThemeContext';
+import { ErrorToast } from '@/services/toast';
+import { ColorType, spacing } from '@/theme';
+import { normalize } from '@/utils/normalize';
+import BrokenWifiAnimation, {
+  BREAK_TOTAL_MS,
+} from './wifi-icon-animation/BrokenWifiAnimation';
+import { useWifiIconAnimationActive } from './wifi-icon-animation/useWifiIconAnimationActive';
+import type { OfflineStateProps } from './types';
+
+const ENTER_DURATION = 450;
+const NUDGE_DURATION = 1100;
+const NUDGE_REST = 1900;
+const SHAKE_STEP = 55;
+
+const OfflineState = ({
+  title,
+  message,
+  showRetry = true,
+}: OfflineStateProps) => {
+  const { t } = useTranslation();
+  const { color } = useAppTheme();
+  const styles = useMemo(() => makeStyles(color), [color]);
+  const { refresh } = useNetwork();
+  const [checking, setChecking] = useState(false);
+  const enter = useSharedValue(0);
+  const nudge = useSharedValue(0);
+  const shake = useSharedValue(0);
+  const animationsActive = useWifiIconAnimationActive();
+
+  useEffect(() => {
+    enter.value = withTiming(1, {
+      duration: ENTER_DURATION,
+      easing: Easing.bezier(0.22, 1, 0.36, 1),
+    });
+  }, [enter]);
+
+  useEffect(() => {
+    if (!animationsActive) {
+      // Assigning a plain value cancels the running loop.
+      nudge.value = 0;
+      return;
+    }
+    // Starts once the wifi has broken, then repeats as a gentle reminder.
+    nudge.value = withDelay(
+      BREAK_TOTAL_MS,
+      withRepeat(
+        withSequence(
+          withTiming(1, {
+            duration: NUDGE_DURATION,
+            easing: Easing.bezier(0.22, 1, 0.36, 1),
+          }),
+          withTiming(0, { duration: 0 }),
+          withDelay(NUDGE_REST, withTiming(0, { duration: 0 })),
+        ),
+        -1,
+        false,
+      ),
+    );
+  }, [animationsActive, nudge]);
+
+  const enterStyle = useAnimatedStyle(() => ({
+    opacity: enter.value,
+    transform: [{ translateY: 16 * (1 - enter.value) }],
+  }));
+
+  // Bump up then settle during the first part of each nudge.
+  const retryStyle = useAnimatedStyle(() => {
+    const n = nudge.value;
+    const bump = n < 0.35 ? n / 0.35 : Math.max(0, 1 - (n - 0.35) / 0.35);
+    return {
+      transform: [{ translateX: shake.value }, { scale: 1 + 0.05 * bump }],
+    };
+  });
+
+  const haloStyle = useAnimatedStyle(() => {
+    const n = nudge.value;
+    return {
+      opacity: n > 0 ? 0.35 * (1 - n) : 0,
+      transform: [{ scaleX: 1 + 0.12 * n }, { scaleY: 1 + 0.45 * n }],
+    };
+  });
+
+  const shakeRetry = useCallback(() => {
+    shake.value = withSequence(
+      withTiming(-8, { duration: SHAKE_STEP }),
+      withTiming(8, { duration: SHAKE_STEP }),
+      withTiming(-6, { duration: SHAKE_STEP }),
+      withTiming(6, { duration: SHAKE_STEP }),
+      withTiming(0, { duration: SHAKE_STEP }),
+    );
+    Haptics.notification('error');
+  }, [shake]);
+
+  const handleRetry = useCallback(async () => {
+    setChecking(true);
+    try {
+      const online = await refresh();
+      if (!online) {
+        shakeRetry();
+        ErrorToast({
+          title: t('network.unavailableTitle'),
+          message: t('network.unavailableMessage'),
+        });
+      }
+    } finally {
+      setChecking(false);
+    }
+  }, [refresh, shakeRetry, t]);
+
+  return (
+    <View style={styles.container} accessibilityRole="summary">
+      <Animated.View style={[styles.content, enterStyle]}>
+        <View style={styles.illustration}>
+          <View style={styles.glow} />
+          <BrokenWifiAnimation size={ICON_SIZE} active={animationsActive} />
+        </View>
+
+        <CustomText
+          variant="title"
+          weight="700"
+          textColor={color.text_heading}
+          textAlign="center"
+          style={styles.title}
+        >
+          {title ?? t('network.unavailableTitle')}
+        </CustomText>
+
+        <CustomText
+          variant="label"
+          weight="400"
+          textColor={color.text_body}
+          textAlign="center"
+          style={styles.message}
+        >
+          {message ?? t('network.unavailableBody')}
+        </CustomText>
+
+        {showRetry ? (
+          <Animated.View style={retryStyle}>
+            <Animated.View
+              pointerEvents="none"
+              style={[styles.retryHalo, haloStyle]}
+            />
+            <CustomButton
+              title={t('common.retry')}
+              onPress={handleRetry}
+              loading={checking}
+              borderRadius={999}
+              containerStyle={styles.retryButton}
+              textStyle={styles.retryText}
+            />
+          </Animated.View>
+        ) : null}
+      </Animated.View>
+    </View>
+  );
+};
+
+const ICON_SIZE = normalize(120);
+const GLOW_SIZE = normalize(150);
+
+const makeStyles = (color: ColorType) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: spacing.xl,
+      paddingBottom: normalize(80),
+      backgroundColor: color.background_primary,
+    },
+    content: {
+      alignItems: 'center',
+    },
+    illustration: {
+      width: GLOW_SIZE,
+      height: GLOW_SIZE,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: spacing.md,
+    },
+    glow: {
+      position: 'absolute',
+      width: GLOW_SIZE,
+      height: GLOW_SIZE,
+      borderRadius: GLOW_SIZE / 2,
+      backgroundColor: color.primary_wash,
+    },
+    title: {
+      marginBottom: spacing.sm,
+    },
+    message: {
+      maxWidth: normalize(280),
+      lineHeight: normalize(21),
+      marginBottom: spacing.lg,
+    },
+    retryHalo: {
+      ...StyleSheet.absoluteFill,
+      borderRadius: 999,
+      backgroundColor: color.primary,
+    },
+    retryButton: {
+      minWidth: normalize(180),
+      minHeight: normalize(48),
+    },
+    /** The shared `button` variant uses lineHeight === fontSize, which clips descenders. */
+    retryText: {
+      lineHeight: normalize(20),
+    },
+  });
+
+export default memo(OfflineState);

package/template/src/components/shared/offline/index.ts

@@ -0,0 +1,6 @@
+export { default as OfflineQueryBoundary } from './OfflineQueryBoundary';
+export { default as OfflineState } from './OfflineState';
+export type {
+  OfflineQueryBoundaryProps,
+  OfflineStateProps,
+} from './types';

package/template/src/components/shared/offline/types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export type OfflineStateProps = {
+  title?: string;
+  message?: string;
+  showRetry?: boolean;
+};
+
+export type OfflineQueryBoundaryProps = {
+  /** True when the screen already has data to show (fresh or cached). */
+  hasData: boolean;
+  /** Shown while there is no data and the device is online (e.g. a shimmer). */
+  loading?: ReactNode;
+  children: ReactNode;
+};

package/template/src/components/shared/offline/wifi-icon-animation/BrokenWifiAnimation.tsx

@@ -0,0 +1,116 @@
+import React, { memo, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { G, Path } from 'react-native-svg';
+import { useAppTheme } from '@/context/ThemeContext';
+import { PIECES, SHADOW_OFFSET, SOLID_PIECES, VIEWBOX } from './geometry';
+import WifiPiece from './WifiPiece';
+
+const HOLD_WHOLE = 700;
+const BREAK_DURATION = 650;
+export const BREAK_TOTAL_MS = HOLD_WHOLE + BREAK_DURATION;
+
+/** Pause between shiver bursts once the icon is broken. */
+const SHIVER_REST = 1800;
+const SHIVER_STEP = 70;
+
+type Props = {
+  size: number;
+  /** Pauses the looping shiver (e.g. app in background or screen unfocused). */
+  active?: boolean;
+};
+
+const BrokenWifiAnimation = ({ size, active = true }: Props) => {
+  const { color } = useAppTheme();
+  const progress = useSharedValue(0);
+  const shiver = useSharedValue(0);
+  const scale = size / VIEWBOX;
+
+  useEffect(() => {
+    progress.value = withDelay(
+      HOLD_WHOLE,
+      withTiming(1, {
+        duration: BREAK_DURATION,
+        easing: Easing.bezier(0.16, 1, 0.3, 1),
+      }),
+    );
+  }, [progress]);
+
+  useEffect(() => {
+    if (!active) {
+      // Assigning a plain value cancels the running loop.
+      shiver.value = 0;
+      return;
+    }
+    shiver.value = withDelay(
+      BREAK_TOTAL_MS,
+      withRepeat(
+        withSequence(
+          withDelay(SHIVER_REST, withTiming(1, { duration: SHIVER_STEP })),
+          withTiming(-1, { duration: SHIVER_STEP * 1.5 }),
+          withTiming(0.7, { duration: SHIVER_STEP * 1.5 }),
+          withTiming(-0.4, { duration: SHIVER_STEP * 1.5 }),
+          withTiming(0, { duration: SHIVER_STEP }),
+        ),
+        -1,
+        false,
+      ),
+    );
+  }, [active, shiver]);
+
+  // Before the break, one static SVG draws the whole icon (all shadows under all faces,
+  // so no seams); the individual pieces take over the moment it starts breaking.
+  const wholeStyle = useAnimatedStyle(() => ({
+    opacity: progress.value > 0 ? 0 : 1,
+  }));
+  const piecesStyle = useAnimatedStyle(() => ({
+    opacity: progress.value > 0 ? 1 : 0,
+  }));
+
+  return (
+    <View style={{ width: size, height: size }} accessibilityElementsHidden>
+      <Animated.View
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, wholeStyle]}
+      >
+        <Svg width={size} height={size} viewBox={`0 0 ${VIEWBOX} ${VIEWBOX}`}>
+          <G transform={`translate(0 ${SHADOW_OFFSET})`}>
+            {SOLID_PIECES.map((piece, index) => (
+              <Path key={index} d={piece.d} fill={color.primary_deep} />
+            ))}
+          </G>
+          {SOLID_PIECES.map((piece, index) => (
+            <Path key={index} d={piece.d} fill={color.primary} />
+          ))}
+        </Svg>
+      </Animated.View>
+
+      <Animated.View
+        pointerEvents="none"
+        style={[StyleSheet.absoluteFill, piecesStyle]}
+      >
+        {PIECES.map((piece, index) => (
+          <WifiPiece
+            key={index}
+            piece={piece}
+            scale={scale}
+            fill={piece.isShard ? color.primary_accent : color.primary}
+            shade={color.primary_deep}
+            progress={progress}
+            shiver={shiver}
+          />
+        ))}
+      </Animated.View>
+    </View>
+  );
+};
+
+export default memo(BrokenWifiAnimation);

package/template/src/components/shared/offline/wifi-icon-animation/WifiPiece.tsx

@@ -0,0 +1,80 @@
+import React, { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  type SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import Svg, { G, Path } from 'react-native-svg';
+import { type PieceDef, SHADOW_OFFSET } from './geometry';
+
+/** Max shiver offset (viewBox units) and rotation (deg) for the most displaced pieces. */
+const SHIVER_SHIFT = 1.4;
+const SHIVER_ROTATE = 2.5;
+
+type Props = {
+  piece: PieceDef;
+  scale: number;
+  fill: string;
+  shade: string;
+  progress: SharedValue<number>;
+  shiver: SharedValue<number>;
+};
+
+const WifiPiece = ({ piece, scale, fill, shade, progress, shiver }: Props) => {
+  const { d, box, origin, dx, dy, rot, strength, isShard } = piece;
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const b = progress.value;
+    const s = shiver.value * strength * b;
+    return {
+      opacity: isShard ? b : 1,
+      transform: [
+        { translateX: (dx * b + s * SHIVER_SHIFT) * scale },
+        { translateY: (dy * b - s * SHIVER_SHIFT * 0.5) * scale },
+        { rotate: `${rot * b + s * SHIVER_ROTATE}deg` },
+      ],
+    };
+  });
+
+  return (
+    <Animated.View
+      pointerEvents="none"
+      renderToHardwareTextureAndroid
+      shouldRasterizeIOS
+      style={[
+        styles.piece,
+        {
+          left: box.x * scale,
+          top: box.y * scale,
+          width: box.w * scale,
+          height: box.h * scale,
+          transformOrigin: [
+            (origin[0] - box.x) * scale,
+            (origin[1] - box.y) * scale,
+            0,
+          ],
+        },
+        animatedStyle,
+      ]}
+    >
+      <Svg
+        width={box.w * scale}
+        height={box.h * scale}
+        viewBox={`${box.x} ${box.y} ${box.w} ${box.h}`}
+      >
+        <G transform={`translate(0 ${SHADOW_OFFSET})`}>
+          <Path d={d} fill={shade} />
+        </G>
+        <Path d={d} fill={fill} />
+      </Svg>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  piece: {
+    position: 'absolute',
+  },
+});
+
+export default memo(WifiPiece);

package/template/src/components/shared/offline/wifi-icon-animation/geometry.ts

@@ -0,0 +1,163 @@
+/** All geometry is in a 100×100 viewBox and scaled to the rendered size. */
+export const VIEWBOX = 100;
+export const SHADOW_OFFSET = 2.5;
+
+const CX = 50;
+const CY = 80;
+const SPAN = 45;
+const BOX_PADDING = 1;
+
+type Point = [number, number];
+type Edge = [number, number];
+export type Box = { x: number; y: number; w: number; h: number };
+
+export type PieceDef = {
+  d: string;
+  box: Box;
+  origin: Point;
+  dx: number;
+  dy: number;
+  rot: number;
+  /** Shiver amount, signed so neighbours move in opposite directions. */
+  strength: number;
+  isShard?: boolean;
+};
+
+const polar = (r: number, deg: number): Point => {
+  const rad = (deg * Math.PI) / 180;
+  return [CX + r * Math.sin(rad), CY - r * Math.cos(rad)];
+};
+
+const arcPoints = (r: number, from: number, to: number): Point[] => {
+  const steps = Math.max(2, Math.ceil(Math.abs(to - from) / 5));
+  return Array.from({ length: steps + 1 }, (_, i) =>
+    polar(r, from + ((to - from) * i) / steps),
+  );
+};
+
+/** Tight bounds (plus shadow) so each piece rasterises only its own area, not the full canvas. */
+const boundsOf = (points: Point[]): Box => {
+  const xs = points.map(p => p[0]);
+  const ys = points.map(p => p[1]);
+  const x = Math.min(...xs) - BOX_PADDING;
+  const y = Math.min(...ys) - BOX_PADDING;
+  return {
+    x,
+    y,
+    w: Math.max(...xs) + BOX_PADDING - x,
+    h: Math.max(...ys) + BOX_PADDING + SHADOW_OFFSET - y,
+  };
+};
+
+/** Thick arc segment; separate inner/outer angles give the cut edges a jagged slant. */
+const band = (r1: number, r2: number, outer: Edge, inner: Edge) => {
+  const [ox1, oy1] = polar(r2, outer[0]);
+  const [ox2, oy2] = polar(r2, outer[1]);
+  const [ix2, iy2] = polar(r1, inner[1]);
+  const [ix1, iy1] = polar(r1, inner[0]);
+  return {
+    d: `M${ox1} ${oy1} A${r2} ${r2} 0 0 1 ${ox2} ${oy2} L${ix2} ${iy2} A${r1} ${r1} 0 0 0 ${ix1} ${iy1} Z`,
+    box: boundsOf([
+      ...arcPoints(r2, outer[0], outer[1]),
+      ...arcPoints(r1, inner[0], inner[1]),
+    ]),
+  };
+};
+
+const shard = ([x, y]: Point, s: number) => {
+  const points: Point[] = [
+    [x, y - s],
+    [x + s, y + s * 0.6],
+    [x - s * 0.8, y + s * 0.4],
+  ];
+  return {
+    d: `M${points[0][0]} ${points[0][1]} L${points[1][0]} ${points[1][1]} L${points[2][0]} ${points[2][1]} Z`,
+    box: boundsOf(points),
+  };
+};
+
+const BANDS: { r1: number; r2: number }[] = [
+  { r1: 16, r2: 28 },
+  { r1: 36, r2: 48 },
+  { r1: 56, r2: 68 },
+];
+
+const CUT_ONE = { outer: -6, inner: 2 };
+const CUT_TWO = { outer: 22, inner: 14 };
+
+type RawPiece = Omit<PieceDef, 'strength'>;
+
+const RAW_PIECES: RawPiece[] = [
+  {
+    d: `M${CX - 8} ${CY} a8 8 0 1 0 16 0 a8 8 0 1 0 -16 0`,
+    box: boundsOf([
+      [CX - 8, CY - 8],
+      [CX + 8, CY + 8],
+    ]),
+    origin: [CX, CY],
+    dx: 0,
+    dy: 2,
+    rot: 0,
+  },
+  ...BANDS.flatMap(({ r1, r2 }, index): RawPiece[] => {
+    const midR = (r1 + r2) / 2;
+    const reach = index + 1;
+    return [
+      {
+        ...band(r1, r2, [-SPAN, CUT_ONE.outer], [-SPAN, CUT_ONE.inner]),
+        origin: polar(midR, -25),
+        dx: -1,
+        dy: 1,
+        rot: -3,
+      },
+      {
+        ...band(
+          r1,
+          r2,
+          [CUT_ONE.outer, CUT_TWO.outer],
+          [CUT_ONE.inner, CUT_TWO.inner],
+        ),
+        origin: polar(midR, 8),
+        dx: 1.5 + reach * 1.5,
+        dy: -2 - reach * 1.5,
+        rot: 6 + reach * 3,
+      },
+      {
+        ...band(r1, r2, [CUT_TWO.outer, SPAN], [CUT_TWO.inner, SPAN]),
+        origin: polar(midR, 33),
+        dx: 4 + reach * 2.5,
+        dy: -1 - reach * 2.5,
+        rot: 12 + reach * 5,
+      },
+    ];
+  }),
+  ...(
+    [
+      [[58, 18], 3.5, 8, -16, 120],
+      [[74, 24], 3, 16, -10, -140],
+      [[66, 38], 3.5, 14, -6, 160],
+      [[55, 44], 2.5, 6, -14, -100],
+      [[64, 56], 3, 12, -4, 110],
+      [[80, 12], 2.5, 14, -16, 180],
+      [[52, 28], 2.5, 4, -18, -160],
+    ] as [Point, number, number, number, number][]
+  ).map(
+    ([origin, s, dx, dy, rot]): RawPiece => ({
+      ...shard(origin, s),
+      origin,
+      dx,
+      dy,
+      rot,
+      isShard: true,
+    }),
+  ),
+];
+
+// Pieces that flew further shiver more; the anchored left halves barely move.
+export const PIECES: PieceDef[] = RAW_PIECES.map((piece, index) => ({
+  ...piece,
+  strength:
+    Math.min(1, Math.hypot(piece.dx, piece.dy) / 10) * (index % 2 ? -1 : 1),
+}));
+
+export const SOLID_PIECES = PIECES.filter(piece => !piece.isShard);

package/template/src/components/shared/offline/wifi-icon-animation/useWifiIconAnimationActive.ts

@@ -0,0 +1,37 @@
+import { useContext, useEffect, useState } from 'react';
+import { AppState } from 'react-native';
+import { NavigationContext } from '@react-navigation/native';
+
+/**
+ * False while the app is backgrounded or the hosting screen is unfocused (e.g. another
+ * tab), so looping animations can stop instead of burning frames off-screen.
+ * Reads the navigation context directly so it also works outside a navigator.
+ */
+export const useWifiIconAnimationActive = () => {
+  const navigation = useContext(NavigationContext);
+  const [focused, setFocused] = useState(() => navigation?.isFocused() ?? true);
+  const [foreground, setForeground] = useState(
+    AppState.currentState !== 'background',
+  );
+
+  useEffect(() => {
+    if (!navigation) {
+      return;
+    }
+    const offFocus = navigation.addListener('focus', () => setFocused(true));
+    const offBlur = navigation.addListener('blur', () => setFocused(false));
+    return () => {
+      offFocus();
+      offBlur();
+    };
+  }, [navigation]);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', state =>
+      setForeground(state === 'active'),
+    );
+    return () => subscription.remove();
+  }, []);
+
+  return focused && foreground;
+};