@oxyhq/bloom 0.68.0 → 0.69.0

package/src/__tests__/useHaptics.test.tsx

@@ -1,58 +1,245 @@
 import React from 'react';
-import { Platform } from 'react-native';
+import * as ReactNative from 'react-native';
 import { act, renderHook } from '@testing-library/react-native';
-import { ImpactFeedbackStyle, impactAsync } from 'expo-haptics';
+import type * as ExpoHaptics from 'expo-haptics';
 
-import { BloomHapticsProvider, useHaptics } from '../hooks/useHaptics';
+import type { HapticsLike } from '../hooks/haptics-module';
 
-const originalOS = Platform.OS;
+/**
+ * THE OPTIONAL-PEER BOUNDARY for `expo-haptics`.
+ *
+ * What this suite can and cannot see is the whole point. The defect it was
+ * written against — the specifier passed to `require()` as a VARIABLE, which
+ * Metro rewrites into a thrower — is a STATIC property of the source, and jest
+ * is CommonJS with a real dynamic `require`, so it resolved the module happily
+ * and the old version of this file asserted `impactAsync` was called against
+ * code where it could never be called on a device. No runtime suite can
+ * distinguish the two shapes. `optional-peer-imports.test.ts` is the gate that
+ * can, and it is where the literal-specifier requirement is enforced.
+ *
+ * What IS testable here is everything the loader does once it has (or has not)
+ * got a module: the strength mapping, the platform clamps, and the degradation
+ * — inert, not a crash, and not silent.
+ *
+ * Every case that touches the loader goes through `jest.isolateModules` +
+ * `jest.doMock` because it caches its result and its warning flag in module
+ * state: without a fresh registry the first case to resolve expo-haptics would
+ * leave every later case asserting against a cache it can no longer influence.
+ */
 
-afterEach(() => {
-  Platform.OS = originalOS;
-  jest.clearAllMocks();
-});
+const HAPTICS = 'expo-haptics';
+const reactModule: unknown = jest.requireActual('react');
+
+/**
+ * Compile-time half of the contract: the real expo-haptics surface must remain
+ * assignable to Bloom's hand-written `HapticsLike`. The interface is written by
+ * hand so expo-haptics' types never reach Bloom's emitted `.d.ts` (a consumer
+ * that skips the optional peer must not inherit a TS7016 from Bloom), which
+ * leaves this as the only place a shape change in expo-haptics can be caught.
+ *
+ * It is enforced by `bun run typescript`, NOT by jest: ts-jest transpiles
+ * without typechecking here, so a drifted type is green under `bunx jest` and
+ * red under `tsc` (verified by mutation — renaming `impactAsync` to
+ * `impactFeedback` in `HapticsLike` produces `TS2322: Type 'true' is not
+ * assignable to type 'never'` on the line below).
+ */
+type RealHapticsIsCompatible = typeof ExpoHaptics extends HapticsLike ? true : never;
+const HAPTICS_TYPES_STILL_MATCH: RealHapticsIsCompatible = true;
+
+type Harness = {
+  useHaptics: typeof import('../hooks/useHaptics').useHaptics;
+  BloomHapticsProvider: typeof import('../hooks/useHaptics').BloomHapticsProvider;
+  impactAsync: jest.Mock;
+  styles: Record<'Light' | 'Medium' | 'Heavy', string>;
+};
+
+const STYLES = { Light: 'light', Medium: 'medium', Heavy: 'heavy' } as const;
+
+/**
+ * Load `useHaptics` against a given expo-haptics module factory. Passing a
+ * factory that THROWS is how the absent-peer case is expressed: that is exactly
+ * what the `catch` sees when Metro stubs an unresolved optional dependency.
+ */
+function loadWithHaptics(factory?: () => unknown): Harness {
+  const impactAsync = jest.fn(async () => {});
+  let harness: Harness | undefined;
+
+  jest.isolateModules(() => {
+    // NOT `{ virtual: true }`: expo-haptics is a real devDependency here (mapped
+    // to `__mocks__/expo-haptics.ts`), and a virtual mock is keyed by the bare
+    // name while the loader's `require` resolves through the same mapping — the
+    // mock would never be consulted and every case would run against the manual
+    // mock instead of the factory.
+    jest.doMock(
+      HAPTICS,
+      factory ?? (() => ({ ImpactFeedbackStyle: STYLES, impactAsync })),
+    );
+    // An isolated registry would otherwise build the hook against a SECOND copy
+    // of React, whose dispatcher is null under the outer renderer — every case
+    // would fail on `useContext` before reaching what it asserts. `react-native`
+    // is pinned for the same reason with a sharper edge: a second copy carries a
+    // second `Platform` object, so the `Platform.OS` each case sets would land
+    // on an instance the hook never reads — every platform case would then run
+    // on the default OS and pass or fail for the wrong reason.
+    jest.doMock('react', () => reactModule);
+    jest.doMock('react-native', () => ReactNative);
+
+    // A plain `require`, NOT `jest.requireActual`: the latter bypasses the mock
+    // registry for the whole dependency subtree, so the doMocks above would be
+    // ignored and the suite would silently exercise the real expo-haptics.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('../hooks/useHaptics') as typeof import('../hooks/useHaptics');
+
+    harness = {
+      useHaptics: mod.useHaptics,
+      BloomHapticsProvider: mod.BloomHapticsProvider,
+      impactAsync,
+      styles: STYLES,
+    };
+  });
+
+  if (!harness) throw new Error('module isolation did not run');
+  return harness;
+}
+
+const originalOS = ReactNative.Platform.OS;
 
 describe('useHaptics', () => {
+  let warn: jest.SpyInstance<void, Parameters<typeof console.warn>>;
+
+  beforeEach(() => {
+    // `__mocks__/setup.ts` already silences console.warn; this re-spies so the
+    // calls are recorded and stay scoped to one test.
+    warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    ReactNative.Platform.OS = originalOS;
+    warn.mockRestore();
+    jest.resetModules();
+    jest.dontMock(HAPTICS);
+    jest.clearAllMocks();
+  });
+
+  it('keeps its own types in step with the real expo-haptics surface', () => {
+    // The real assertion is the type annotation above, checked by `tsc`. This
+    // only keeps the constant referenced so it cannot be dropped as unused.
+    expect(HAPTICS_TYPES_STILL_MATCH).toBe(true);
+  });
+
   it('returns a callback', () => {
+    const { useHaptics } = loadWithHaptics();
     const { result } = renderHook(() => useHaptics());
     expect(typeof result.current).toBe('function');
   });
 
   it('fires the mapped impact style on iOS', () => {
-    Platform.OS = 'ios';
+    ReactNative.Platform.OS = 'ios';
+    const { useHaptics, impactAsync, styles } = loadWithHaptics();
     const { result } = renderHook(() => useHaptics());
     act(() => result.current('heavy'));
-    expect(impactAsync).toHaveBeenCalledWith(ImpactFeedbackStyle.Heavy);
+    // Asserted against the value the MODULE exposes, not a literal: the hook's
+    // contract is that it hands back what `ImpactFeedbackStyle` gave it.
+    expect(impactAsync).toHaveBeenCalledWith(styles.Heavy);
+    expect(warn).not.toHaveBeenCalled();
   });
 
   it('defaults to the light impact', () => {
-    Platform.OS = 'ios';
+    ReactNative.Platform.OS = 'ios';
+    const { useHaptics, impactAsync, styles } = loadWithHaptics();
     const { result } = renderHook(() => useHaptics());
     act(() => result.current());
-    expect(impactAsync).toHaveBeenCalledWith(ImpactFeedbackStyle.Light);
+    expect(impactAsync).toHaveBeenCalledWith(styles.Light);
   });
 
   it('clamps to the light impact on Android regardless of strength', () => {
-    Platform.OS = 'android';
+    ReactNative.Platform.OS = 'android';
+    const { useHaptics, impactAsync, styles } = loadWithHaptics();
     const { result } = renderHook(() => useHaptics());
     act(() => result.current('heavy'));
-    expect(impactAsync).toHaveBeenCalledWith(ImpactFeedbackStyle.Light);
+    expect(impactAsync).toHaveBeenCalledWith(styles.Light);
   });
 
   it('no-ops on web', () => {
-    Platform.OS = 'web';
+    ReactNative.Platform.OS = 'web';
+    const { useHaptics, impactAsync } = loadWithHaptics();
     const { result } = renderHook(() => useHaptics());
     act(() => result.current('medium'));
     expect(impactAsync).not.toHaveBeenCalled();
+    // Web is a deliberate no-op, not a missing peer — warning here would fire on
+    // every web app that renders a Bloom button.
+    expect(warn).not.toHaveBeenCalled();
   });
 
   it('no-ops when disabled via BloomHapticsProvider', () => {
-    Platform.OS = 'ios';
+    ReactNative.Platform.OS = 'ios';
+    const { useHaptics, BloomHapticsProvider, impactAsync } = loadWithHaptics();
     const wrapper = ({ children }: { children: React.ReactNode }) => (
       <BloomHapticsProvider enabled={false}>{children}</BloomHapticsProvider>
     );
     const { result } = renderHook(() => useHaptics(), { wrapper });
     act(() => result.current('medium'));
     expect(impactAsync).not.toHaveBeenCalled();
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('degrades to a no-op instead of throwing when the peer is absent', () => {
+    ReactNative.Platform.OS = 'ios';
+    const { useHaptics } = loadWithHaptics(() => {
+      throw new Error(`Cannot find module '${HAPTICS}'`);
+    });
+    const { result } = renderHook(() => useHaptics());
+    expect(() => act(() => result.current('heavy'))).not.toThrow();
+  });
+
+  it('names the missing package once, not once per call', () => {
+    ReactNative.Platform.OS = 'ios';
+    const { useHaptics } = loadWithHaptics(() => {
+      throw new Error(`Cannot find module '${HAPTICS}'`);
+    });
+    const { result } = renderHook(() => useHaptics());
+
+    act(() => result.current('heavy'));
+    act(() => result.current('light'));
+
+    expect(warn).toHaveBeenCalledTimes(1);
+    const [message] = warn.mock.calls[0] as [string];
+    // An actionable warning has to carry all three: what broke, which package,
+    // and how to fix it. A bare "haptics missing" sends the reader to Bloom.
+    expect(message).toContain(HAPTICS);
+    expect(message).toContain('inert');
+    expect(message).toContain('expo install');
+    // …and the underlying resolution error, so a shape/version failure is not
+    // reported as if the package were simply not installed.
+    expect(message).toContain('Cannot find module');
+  });
+
+  it('warns when the peer resolves but has no impactAsync', () => {
+    ReactNative.Platform.OS = 'ios';
+    const { useHaptics } = loadWithHaptics(() => ({ notificationAsync: jest.fn() }));
+    const { result } = renderHook(() => useHaptics());
+
+    act(() => result.current());
+
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect((warn.mock.calls[0] as [string])[0]).toContain('without an `impactAsync`');
+  });
+
+  it('stays silent in production', () => {
+    ReactNative.Platform.OS = 'ios';
+    const previous = process.env.NODE_ENV;
+    // Metro and Vite fold this branch away entirely; jest cannot, so the guard
+    // is asserted at runtime instead.
+    process.env.NODE_ENV = 'production';
+    try {
+      const { useHaptics } = loadWithHaptics(() => {
+        throw new Error(`Cannot find module '${HAPTICS}'`);
+      });
+      const { result } = renderHook(() => useHaptics());
+      act(() => result.current());
+      expect(warn).not.toHaveBeenCalled();
+    } finally {
+      process.env.NODE_ENV = previous;
+    }
   });
 });

package/src/animated-check/AnimatedCheck.tsx

@@ -1,5 +1,4 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
 import Animated, {
   Easing,
   useAnimatedProps,
@@ -7,13 +6,10 @@ import Animated, {
   withDelay,
   withTiming,
 } from 'react-native-reanimated';
+import Svg, { Circle, Path } from 'react-native-svg';
 
-import { getSvgModule } from '../avatar/svg-module';
 import { useTheme } from '../theme';
 
-/** The resolved `react-native-svg` module (non-null branch). */
-type SvgModule = NonNullable<ReturnType<typeof getSvgModule>>;
-
 /** Square viewBox the ring + check are drawn on. */
 const VIEW_BOX = 52;
 /** Ring radius within the viewBox. */
@@ -43,34 +39,20 @@ export interface AnimatedCheckProps {
 }
 
 // `Animated.createAnimatedComponent` must be called once per underlying
-// component (calling it per-render would remount and break the animation).
-// react-native-svg is a lazy/optional peer, so we build the animated wrappers
-// the first time it resolves and cache them at module scope.
-function buildAnimatedSvg(svg: SvgModule) {
-  return {
-    Circle: Animated.createAnimatedComponent(svg.Circle),
-    Path: Animated.createAnimatedComponent(svg.Path),
-  };
-}
-
-let animatedSvgCache: ReturnType<typeof buildAnimatedSvg> | null = null;
-
-function getAnimatedSvg(svg: SvgModule): ReturnType<typeof buildAnimatedSvg> {
-  if (!animatedSvgCache) animatedSvgCache = buildAnimatedSvg(svg);
-  return animatedSvgCache;
-}
+// component — calling it per render would remount the element and break the
+// animation — so the wrappers are built once at module scope.
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const AnimatedPath = Animated.createAnimatedComponent(Path);
 
-interface AnimatedCheckSvgProps {
-  size: number;
-  color: string;
-  svg: SvgModule;
-}
-
-/** The animated SVG implementation, rendered only when react-native-svg exists. */
-const AnimatedCheckSvg = forwardRef<AnimatedCheckRef, AnimatedCheckSvgProps>(
-  function AnimatedCheckSvg({ size, color, svg }, ref) {
-    const { default: Svg } = svg;
-    const { Circle, Path } = getAnimatedSvg(svg);
+/**
+ * A draw-on checkmark: a ring strokes on, then the check strokes in. Expose a
+ * ref and call `ref.current?.play()` to (re)play — e.g. on a successful submit.
+ * Ported from Bluesky's `AnimatedCheck`.
+ */
+export const AnimatedCheck = forwardRef<AnimatedCheckRef, AnimatedCheckProps>(
+  function AnimatedCheck({ size = 24, color }, ref) {
+    const theme = useTheme();
+    const resolvedColor = color ?? theme.colors.success;
 
     const circleProgress = useSharedValue(0);
     const checkProgress = useSharedValue(0);
@@ -104,20 +86,20 @@ const AnimatedCheckSvg = forwardRef<AnimatedCheckRef, AnimatedCheckSvgProps>(
 
     return (
       <Svg fill="none" viewBox={`0 0 ${VIEW_BOX} ${VIEW_BOX}`} width={size} height={size}>
-        <Circle
+        <AnimatedCircle
           animatedProps={circleAnimatedProps}
           cx={VIEW_BOX / 2}
           cy={VIEW_BOX / 2}
           r={CIRCLE_RADIUS}
           fill="none"
-          stroke={color}
+          stroke={resolvedColor}
           strokeWidth={STROKE_WIDTH}
           strokeDasharray={CIRCLE_LENGTH}
         />
-        <Path
+        <AnimatedPath
           animatedProps={checkAnimatedProps}
           d={CHECK_PATH}
-          stroke={color}
+          stroke={resolvedColor}
           strokeWidth={STROKE_WIDTH}
           strokeDasharray={CHECK_LENGTH}
         />
@@ -126,53 +108,4 @@ const AnimatedCheckSvg = forwardRef<AnimatedCheckRef, AnimatedCheckSvgProps>(
   },
 );
 
-interface StaticCheckProps {
-  size: number;
-  color: string;
-}
-
-/**
- * Static fallback rendered when react-native-svg is unavailable (e.g. a web
- * bundle that omits the optional peer). Draws a plain Unicode check so the
- * component still communicates "done"; `play()` is a no-op.
- */
-const StaticCheck = forwardRef<AnimatedCheckRef, StaticCheckProps>(
-  function StaticCheck({ size, color }, ref) {
-    useImperativeHandle(ref, () => ({ play: () => undefined }), []);
-    return (
-      <Text
-        accessibilityElementsHidden
-        style={[styles.staticCheck, { width: size, fontSize: size * 0.8, lineHeight: size, color }]}
-      >
-        {'✓'}
-      </Text>
-    );
-  },
-);
-
-/**
- * A draw-on checkmark: a ring strokes on, then the check strokes in. Expose a
- * ref and call `ref.current?.play()` to (re)play — e.g. on a successful submit.
- * Ported from Bluesky's `AnimatedCheck`.
- */
-export const AnimatedCheck = forwardRef<AnimatedCheckRef, AnimatedCheckProps>(
-  function AnimatedCheck({ size = 24, color }, ref) {
-    const theme = useTheme();
-    const resolvedColor = color ?? theme.colors.success;
-    const svg = useMemo(() => getSvgModule(), []);
-
-    if (!svg) {
-      return <StaticCheck ref={ref} size={size} color={resolvedColor} />;
-    }
-    return <AnimatedCheckSvg ref={ref} size={size} color={resolvedColor} svg={svg} />;
-  },
-);
-
 AnimatedCheck.displayName = 'AnimatedCheck';
-
-const styles = StyleSheet.create({
-  staticCheck: {
-    textAlign: 'center',
-    fontWeight: '700',
-  },
-});

package/src/avatar/Avatar.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useMemo, useRef, useState } from 'react';
 import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { TextStyle } from 'react-native';
+import Svg, { ClipPath, Defs, Image as SvgImage, Path } from 'react-native-svg';
 
 import { useTheme } from '../theme/use-theme';
 import { useImageResolver } from '../image-resolver/context';
@@ -8,7 +9,6 @@ import { Z_INDEX } from '../styles/z-index';
 import { useAvatarPlaceholder } from './placeholder-context';
 import { LiveBadge } from './LiveBadge';
 import { AvatarRing, getRingOuterSize } from './AvatarRing';
-import { getSvgModule } from './svg-module';
 import { SQUIRCLE_PATH } from './squircle-path';
 import type { AvatarProps, AvatarRingConfig } from './types';
 
@@ -62,16 +62,6 @@ function SquircleImage({
   onError: () => void;
 }) {
   const clipId = useMemo(() => `bloom-sqc${clipIdCounter++}`, []);
-  const svg = getSvgModule();
-  if (!svg) {
-    // Fallback to a circle if react-native-svg is not installed. The ring (if
-    // any) is drawn separately by AvatarRing, which also degrades to a circle.
-    return (
-      <CircleFallback size={size} fallbackColor={fallbackColor} icon={placeholderIcon} name={name} />
-    );
-  }
-
-  const { default: Svg, Defs, ClipPath, Path, Image: SvgImage } = svg;
 
   const href = uri ? { uri } : fallbackSource;
   if (!href) {

package/src/avatar/AvatarRing.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
+import Svg, { Circle, Defs, LinearGradient, Path, Stop } from 'react-native-svg';
 
 import { Z_INDEX } from '../styles/z-index';
-import { getSvgModule } from './svg-module';
 import { SQUIRCLE_PATH } from './squircle-path';
 import type { AvatarRingGradientDirection, AvatarShape } from './types';
 
@@ -56,10 +56,7 @@ function gradientCoords(direction: AvatarRingGradientDirection) {
  *
  * - Solid circle → a plain bordered `<View>` (no `react-native-svg` needed).
  * - Solid squircle → an SVG `<Path>` stroking the squircle outline.
- * - Gradient (either shape) → an SVG `<LinearGradient>` stroke; degrades to a
- *   solid ring of the first color when `react-native-svg` is unavailable (a
- *   squircle then degrades to a circle border, matching the avatar's own no-SVG
- *   circle fallback).
+ * - Gradient (either shape) → an SVG `<LinearGradient>` stroke.
  *
  * Internal to the avatar family — not exported from the package.
  */
@@ -79,19 +76,15 @@ const AvatarRingComponent: React.FC<AvatarRingProps> = ({
 
   const outer = getRingOuterSize(size, width, gap);
   // The ring's visible band is always the outermost `width` px inside the outer
-  // box; when it degrades to a circle border it is a full circle → radius
-  // `outer / 2`.
+  // box; drawn as a plain border it is a full circle → radius `outer / 2`.
   const ringRadius = outer / 2;
 
-  // `react-native-svg` is required for gradients (both shapes) and for the
-  // squircle outline. A solid circle ring is a plain border and never needs it.
+  // SVG is only needed for gradients (both shapes) and for the squircle
+  // outline. A solid circle ring is a plain bordered View — cheaper, and it
+  // keeps the common case off the SVG renderer entirely.
   const needsSvg = wantsGradient || shape === 'squircle';
-  const svg = needsSvg ? getSvgModule() : null;
 
-  // No SVG available (or a solid circle, which never needs SVG): draw a plain
-  // bordered View. A gradient degrades to its first color; a squircle degrades
-  // to a circle border.
-  if (!svg) {
+  if (!needsSvg) {
     return (
       <View
         pointerEvents="none"
@@ -110,7 +103,6 @@ const AvatarRingComponent: React.FC<AvatarRingProps> = ({
     );
   }
 
-  const { default: Svg, Defs, LinearGradient, Stop, Circle, Path } = svg;
   const stroke = wantsGradient ? `url(#${gradientId})` : solidColor;
   const coords = gradientCoords(gradientDirection);
   const gradientDefs = wantsGradient ? (

package/src/bottom-sheet/index.tsx

@@ -13,8 +13,14 @@ import {
 // Keyboard handling — only on native platforms. On web, keyboard events are
 // handled by the browser (and the web build resolves to `index.web.tsx`, which
 // never imports this module). `react-native-keyboard-controller` is an OPTIONAL
-// dependency: it is lazily `require`d below and everything no-ops when it is
-// absent (or on web).
+// dependency, loaded below through the shape Metro collects as an optional
+// dependency: a `require()` of a STRING LITERAL as a direct statement of a `try`
+// block — the real module when it is installed, `null` in the dependency map
+// when it is not, so the failure lands in the `catch` and everything no-ops.
+// The specifier used to be bound to a local `const` first, which also worked
+// (Metro evaluates the constant); the literal is simply the form the rule can be
+// checked as. See `connection-status/netinfo.ts` for the full rule, including
+// the specifier shape that does NOT work.
 const noopKeyboardHandler = (_handlers: Record<string, (e: { height: number }) => void>, _deps: unknown[]) => {};
 let useKeyboardHandler: (handlers: Record<string, (e: { height: number }) => void>, deps: unknown[]) => void = noopKeyboardHandler;
 
@@ -34,8 +40,7 @@ let KeyboardProvider: React.ComponentType<{ children: React.ReactNode }> = Passt
 
 if (Platform.OS !== 'web' && typeof require !== 'undefined') {
     try {
-        const moduleName = 'react-native-keyboard-controller';
-        const keyboardController = require(moduleName);
+        const keyboardController = require('react-native-keyboard-controller');
         useKeyboardHandler = keyboardController.useKeyboardHandler ?? noopKeyboardHandler;
         KeyboardProvider = keyboardController.KeyboardProvider ?? PassthroughKeyboardProvider;
     } catch {

package/src/connection-status/index.tsx

@@ -6,14 +6,16 @@
  * again in each app, and competes with the app's own chrome. The toast host is
  * already mounted, already themed, already stacks.
  *
- * NATIVE variant: `@react-native-community/netinfo` (an Expo-managed dependency
- * every Oxy app already ships) reports both link state and reachability. The
- * web fork uses `navigator.onLine` instead so Vite/SPA consumers need no extra
- * dependency at all.
+ * NATIVE variant: `@react-native-community/netinfo` reports both link state and
+ * reachability. It is an OPTIONAL peer loaded through `./netinfo` — see that
+ * file for why it is not a static import, and why an app that omits it gets an
+ * inert component rather than a broken bundle. The web fork uses
+ * `navigator.onLine` instead so Vite/SPA consumers need no extra dependency at
+ * all.
  */
 import { useEffect, useState } from 'react';
-import NetInfo from '@react-native-community/netinfo';
 
+import { loadNetInfo, warnNetInfoUnavailable } from './netinfo';
 import { useConnectionStatusToasts, type ConnectionStatusToastsProps } from './shared';
 
 export type { ConnectionStatusToastsProps } from './shared';
@@ -23,10 +25,18 @@ export function ConnectionStatusToasts(props: ConnectionStatusToastsProps = {}):
   const [isOnline, setIsOnline] = useState<boolean | null>(null);
 
   useEffect(() => {
+    const netInfo = loadNetInfo();
+    if (!netInfo) {
+      // `isOnline` stays `null`, which `useConnectionStatusToasts` already reads
+      // as "not determined yet", so the component is inert instead of broken.
+      warnNetInfoUnavailable();
+      return undefined;
+    }
+
     // `isInternetReachable` is null until the first probe resolves; treat that
     // as "connected as far as we know" so a captive-portal check never flashes
     // an outage on launch.
-    return NetInfo.addEventListener((state) => {
+    return netInfo.addEventListener((state) => {
       setIsOnline(Boolean(state.isConnected && state.isInternetReachable !== false));
     });
   }, []);