@ssgoi/react-native 7.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MeurSyphus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,77 @@
+# @ssgoi/react-native
+
+Experimental SSGOI screen transitions for React Native. `fade` and `slide` share the web route matcher, physics integrators, timeline simulation, and motion geometry. Reanimated plays the numerical timelines on the UI thread.
+
+This is a source preview of the first milestone in [#402](https://github.com/meursyphus/ssgoi/issues/402). Start with [`templates/expo`](../../templates/expo) from this checkout; this PR does not publish a package or bump versions.
+
+## Expo Router
+
+The example pins Expo SDK 56.0.21, Expo Router 56.2.20, React Native 0.85.3, React 19.2.3, Reanimated 4.3.1, and Worklets 0.8.3. Expo's standard navigator API is alpha; newer SDKs need separate validation. The Expo peer range is optional and broad so an unused integration does not force router upgrades.
+
+```tsx
+// app/_layout.tsx
+import { Ssgoi, type SsgoiConfig } from "@ssgoi/react-native";
+import { SsgoiRouteBoundary } from "@ssgoi/react-native/expo-router";
+import { slide } from "@ssgoi/react-native/view-transitions";
+
+const config = {
+  transitions: [{ from: "/posts", to: "/posts/*", transition: slide() }],
+} satisfies SsgoiConfig;
+
+export default function Layout() {
+  return (
+    <Ssgoi config={config}>
+      <SsgoiRouteBoundary />
+    </Ssgoi>
+  );
+}
+```
+
+Keep page files such as `app/posts/index.tsx` and `app/posts/[id].tsx`, and use `Link`, `router.push()`, `router.replace()`, and `router.back()` from Expo Router normally. The boundary discovers screens from files. It replaces the navigator in that layout; do not wrap an existing `<Stack>` or `<Slot>` inside it. Supply safe-area handling in your app.
+
+`Ssgoi` provides config and selects the native platform. `SsgoiRouteBoundary` has the same name as `@ssgoi/react/nextjs`, but owns an internal Expo navigator and supplies a boundary for each screen. Popped/replaced screens keep their actual React instance and route context until completion. Routes still in the stack remain mounted and retain input and scroll state.
+
+## Configuration
+
+- `transitions`: `on`/`except`, `from`/`to`, `ordered`, `priority`, and `bidirectional` have the same matching semantics as the web.
+- Functional rules receive `{ isMobile }`, based on the host width below 768 logical units.
+- `middleware(from, to)` rewrites matching paths without changing screen instance identity.
+- `fade({ physics })` fades out then in; `slide({ physics })` moves both screens together. Physics are computed in JS once and sent as numeric data to the UI runtime.
+- `<Ssgoi reducedMotion="system" | "always" | "never">` defaults to the system setting. Initial preference loading also respects reduced motion.
+- `onTransitionError(error)` reports failed animation preparation. The latest screen is revealed and outgoing resources are released even when preparation fails.
+
+Web `TransitionConfig`/`WebAnimation` objects cannot be passed to native config. Explicit `preserveScroll` restoration is rejected; mounted screens retain their native scroll state naturally. There is no automatic restoration for a removed/recreated screen yet.
+
+## Boundary options
+
+Basic usage needs no props. `initialRouteName` selects the initial file-discovered screen, and `style` styles the native host.
+
+`resolve({ pathname, route })` returns `{ id, key? }`, matching the naming used by the web boundary. It receives each screen's own route, including its params and instance key, rather than the currently focused global pathname. `id` is an absolute matching path. `routeKey` overrides the optional resolved key. Keys are scoped by native route instance: a constant `routeKey` never merges two pushed screens or keeps a popped screen alive after exit. Changing the resolved key recreates that route's boundary content; navigation animations follow changes in the active native route key.
+
+## Current scope
+
+The first integration targets one Expo stack on iOS/Android without native headers or modal presentation. It supports push, pop, replace, direct entry, rapid-navigation cleanup, reduced motion, accessibility/touch exclusion of outgoing screens, and cleanup on host resizing or app backgrounding. Preloaded routes are rendered when they become active. A bounded watchdog settles screens that cannot finish layout or playback.
+
+Interactive swipe, predictive-back progress, shared elements, nested-navigator coordination, explicit scroll restoration, Expo Web, and public pause/reverse/debug-host controls are follow-up work. The native header, gesture, and screen options of Expo's built-in Stack are not exposed by this boundary.
+
+## Validation
+
+The shared runtime uses `TransitionView<TTarget, TPayload>`, `Pose<TTarget>`,
+`Timeline<TTarget, TStyle>`, and `Animation<TTarget, TStyle>`. Targets are opaque
+to core. Web imports retain `HTMLElement` as their default; RN binds each
+transition view to a stable `NativeSurfaceHandle` with a real native View ref.
+Refs stay on the RN thread while numerical plans cross to the UI runtime.
+Native playback uses completion callbacks rather than pretending that the
+web's synchronous pose getter can read current UI-thread state.
+
+```sh
+pnpm --filter @ssgoi/core build
+pnpm --filter @ssgoi/react-native build
+pnpm --filter @ssgoi/react-native test:run
+SSGOI_TEST_PLATFORM=android pnpm --filter @ssgoi/react-native test:run
+node scripts/check-native-isolation.mjs
+pnpm --filter ssgoi-expo-template typecheck
+pnpm --filter ssgoi-expo-template exec expo export --platform ios --platform android
+```
+
+The integration tests use the real Expo Router with native module mocks and a controlled frame clock. They verify React lifetime and routing behavior, not native pixels, UI-thread performance, or physical back gestures. Device/simulator checks remain necessary before treating this preview as production-ready.

package/dist/expo-router.d.ts

@@ -0,0 +1,8 @@
+import { type BoundaryOptions } from "./navigator.js";
+export interface SsgoiRouteBoundaryProps extends BoundaryOptions {
+    initialRouteName?: string;
+}
+/** Place in app/_layout.tsx. Expo discovers page files; no manual Screen list is required. */
+export declare function SsgoiRouteBoundary(props: SsgoiRouteBoundaryProps): import("react/jsx-runtime").JSX.Element;
+export type { ExpoRouteLocation } from "./navigator.js";
+export type { RouteBoundaryState } from "./types.js";

package/dist/expo-router.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createStandardNavigator } from "standard-navigation";
+import { StackRouter, unstable_integrateWithRouter } from "expo-router";
+import { NativeNavigator, } from "./navigator.js";
+const navigator = createStandardNavigator(NativeNavigator);
+// Keep the alpha Expo API confined to this optional entry point.
+if (typeof unstable_integrateWithRouter !== "function") {
+    throw new Error("SSGOI: the expo-router entry requires Expo Router's standard navigator API (validated with 56.2.20).");
+}
+const ExpoBoundary = unstable_integrateWithRouter(navigator, StackRouter, { useOnlyUserDefinedScreens: false });
+/** Place in app/_layout.tsx. Expo discovers page files; no manual Screen list is required. */
+export function SsgoiRouteBoundary(props) {
+    return _jsx(ExpoBoundary, { ...props });
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Ssgoi } from "./ssgoi.js";
+export type { SsgoiProps } from "./ssgoi.js";
+export type * from "./types.js";

package/dist/index.js

@@ -0,0 +1 @@
+export { Ssgoi } from "./ssgoi.js";

package/dist/native-platform.d.ts

@@ -0,0 +1,6 @@
+import { type NavigationDirection, type PageMotionPlan } from "@ssgoi/core/runtime";
+import type { SsgoiConfig } from "./types.js";
+/** Selected internally by the native provider; the application never assembles drivers. */
+export declare const nativePlatform: {
+    prepare(config: SsgoiConfig, from: string, to: string, direction: NavigationDirection, width: number): PageMotionPlan | null;
+};

package/dist/native-platform.js

@@ -0,0 +1,22 @@
+import { createPageMotionPlan, resolveTransitionRule, } from "@ssgoi/core/runtime";
+/** Selected internally by the native provider; the application never assembles drivers. */
+export const nativePlatform = {
+    prepare(config, from, to, direction, width) {
+        const paths = config.middleware?.(from, to) ?? { from, to };
+        const rules = typeof config.transitions === "function"
+            ? config.transitions({ isMobile: width > 0 && width < 768 })
+            : (config.transitions ?? []);
+        if (rules.some((rule) => rule.preserveScroll !== undefined)) {
+            throw new Error("SSGOI: explicit preserveScroll restoration is not supported on React Native yet.");
+        }
+        const match = resolveTransitionRule(paths.from, paths.to, rules, direction);
+        if (!match)
+            return null;
+        const transition = match.transition;
+        if (transition?.platform !== "ssgoi-native" ||
+            (transition.kind !== "fade" && transition.kind !== "slide")) {
+            throw new Error("SSGOI: use fade/slide from @ssgoi/react-native/view-transitions in native config.");
+        }
+        return createPageMotionPlan(transition.kind, match.direction, transition.physics);
+    },
+};

package/dist/native-route-surface.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { type LayoutChangeEvent } from "react-native";
+import { type SharedValue } from "react-native-reanimated";
+import { type PageMotionPlan } from "@ssgoi/core/runtime";
+import type { PlaybackState } from "./playback.js";
+import type { NativeSurfaceHandle } from "./native-surface-handle.js";
+export interface NativeRouteSurfaceProps {
+    target: NativeSurfaceHandle;
+    children: ReactNode;
+    active: boolean;
+    side: "in" | "out" | null;
+    id: number;
+    width: number;
+    plan: PageMotionPlan | null;
+    playback: SharedValue<PlaybackState>;
+    onLayout: (event: LayoutChangeEvent) => void;
+}
+export declare function NativeRouteSurface({ target, children, active, side, id, width, plan, playback, onLayout, }: NativeRouteSurfaceProps): import("react/jsx-runtime").JSX.Element;

package/dist/native-route-surface.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle, } from "react-native-reanimated";
+import { interpolateFrame, pageMotionStyle, } from "@ssgoi/core/runtime";
+export function NativeRouteSurface({ target, children, active, side, id, width, plan, playback, onLayout, }) {
+    const animatedStyle = useAnimatedStyle(() => {
+        if (!side || !plan)
+            return { opacity: active ? 1 : 0, transform: [{ translateX: 0 }] };
+        const clock = playback.value;
+        // New screens get their starting pose even before the layout effect installs the clock.
+        const elapsed = clock.id === id ? clock.elapsed : 0;
+        const track = side === "in" ? plan.in : plan.out;
+        const progress = elapsed >= track.offset + track.duration
+            ? 1
+            : interpolateFrame(track.frames, Math.max(0, elapsed - track.offset))
+                .position;
+        const pose = pageMotionStyle(plan.kind, side, plan.direction, progress);
+        return {
+            opacity: Math.max(0, Math.min(1, pose.opacity)),
+            transform: [{ translateX: pose.x * width }],
+        };
+    }, [active, side, id, width, plan]);
+    const visible = active || (side !== null && plan !== null);
+    return (_jsx(Animated.View, { ref: target.ref, collapsable: false, onLayout: onLayout, pointerEvents: active ? "auto" : "none", accessibilityElementsHidden: !active, importantForAccessibility: active ? "auto" : "no-hide-descendants", style: [
+            StyleSheet.absoluteFill,
+            { display: visible ? "flex" : "none", zIndex: side === "in" ? 1 : 0 },
+            animatedStyle,
+        ], children: children }));
+}

package/dist/native-surface-handle.d.ts

@@ -0,0 +1,7 @@
+import type { RefObject } from "react";
+import type { View } from "react-native";
+/** Owned by React on the RN thread. Never serialize this ref into a UI worklet. */
+export interface NativeSurfaceHandle {
+    readonly key: string;
+    readonly ref: RefObject<View | null>;
+}

package/dist/native-surface-handle.js

@@ -0,0 +1 @@
+export {};

package/dist/navigator.d.ts

@@ -0,0 +1,33 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+import type { NavigatorArgs, NavigatorRoute } from "standard-navigation";
+import type { RouteBoundaryState } from "./types.js";
+export interface ExpoRouteLocation {
+    pathname: string;
+    route: Readonly<NavigatorRoute>;
+}
+export interface BoundaryOptions {
+    style?: StyleProp<ViewStyle>;
+    /** Evaluated against each screen's own route, including retained screens. */
+    resolve?: (location: ExpoRouteLocation) => RouteBoundaryState;
+    /** Scoped by the native route key; never merges distinct pushed screen instances. */
+    routeKey?: string | number;
+}
+export type NavigatorEvents = {
+    transitionStart: {
+        data: {
+            closing: boolean;
+        };
+        canPreventDefault: false;
+    };
+    transitionEnd: {
+        data: {
+            closing: boolean;
+        };
+        canPreventDefault: false;
+    };
+};
+export type ScreenOptions = Record<string, never>;
+type ContentProps = NavigatorArgs<ScreenOptions, NavigatorEvents> & BoundaryOptions;
+/** The Expo subpath supplies router descriptors; native rendering remains independent of Expo. */
+export declare function NativeNavigator({ state, descriptors, emitter, style, resolve, routeKey, }: ContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/navigator.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef, useCallback, useEffect, useId, useLayoutEffect, useMemo, useState, } from "react";
+import { AppState, View, useWindowDimensions, } from "react-native";
+import { normalizePath } from "@ssgoi/core/runtime";
+import { createPresence, reconcilePresence, settlePresence, } from "./presence.js";
+import { NativeRouteSurface } from "./native-route-surface.js";
+import { useNativePlayback } from "./playback.js";
+import { useSsgoi } from "./ssgoi.js";
+function screenFor(route, descriptor, namespace, options, target) {
+    const pathname = route.href?.startsWith("/")
+        ? normalizePath(route.href)
+        : null;
+    const resolved = pathname === null
+        ? null
+        : (options.resolve?.({ pathname, route }) ?? { id: pathname });
+    if (resolved &&
+        (typeof resolved.id !== "string" || !resolved.id.startsWith("/"))) {
+        throw new Error("SSGOI: resolve must return an absolute route id such as /posts/42.");
+    }
+    return {
+        key: route.key,
+        path: resolved?.id ?? null,
+        target: target ?? {
+            key: JSON.stringify([namespace, route.key]),
+            ref: createRef(),
+        },
+        value: {
+            descriptor,
+            boundaryKey: JSON.stringify([
+                namespace,
+                route.key,
+                options.routeKey ?? resolved?.key ?? route.key,
+            ]),
+        },
+    };
+}
+/** The Expo subpath supplies router descriptors; native rendering remains independent of Expo. */
+export function NativeNavigator({ state, descriptors, emitter, style, resolve, routeKey, }) {
+    const ssgoi = useSsgoi();
+    const namespace = useId();
+    const window = useWindowDimensions();
+    const [layout, setLayout] = useState({ width: 0, height: 0 });
+    const [readyKeys, setReadyKeys] = useState(() => new Set());
+    const activeKey = state.routes[state.index]?.key ?? null;
+    const [snapshot, setSnapshot] = useState(() => ({
+        navigation: null,
+        resolve,
+        routeKey,
+        presence: createPresence([], null),
+    }));
+    const targets = new Map(snapshot.presence.entries.map((screen) => [screen.key, screen.target]));
+    // Standard navigation appends preloaded routes after index. They are not active stack entries.
+    const routes = state.routes.slice(0, state.index + 1);
+    const screens = routes.map((route) => {
+        const descriptor = descriptors[route.key];
+        if (!descriptor)
+            throw new Error(`SSGOI: missing route descriptor for ${route.name}.`);
+        return screenFor(route, descriptor, namespace, { resolve, routeKey }, targets.get(route.key));
+    });
+    const liveScenes = new Map(screens.map((screen) => [screen.key, screen.value]));
+    let current = snapshot;
+    if (snapshot.navigation !== state ||
+        snapshot.resolve !== resolve ||
+        snapshot.routeKey !== routeKey) {
+        current = {
+            navigation: state,
+            resolve,
+            routeKey,
+            presence: reconcilePresence(snapshot.presence, screens, activeKey),
+        };
+        // Derive retained siblings before commit: effect cleanup would already be too late.
+        setSnapshot(current);
+    }
+    const presence = current.presence;
+    const transition = presence.transition;
+    const id = transition?.id ?? presence.generation;
+    const width = layout.width || window.width;
+    const prepared = useMemo(() => {
+        if (!transition?.from.path || !transition.to.path || ssgoi.reducedMotion)
+            return { plan: null, error: null };
+        try {
+            return {
+                plan: ssgoi.platform.prepare(ssgoi.config, transition.from.path, transition.to.path, transition.direction, width),
+                error: null,
+            };
+        }
+        catch (error) {
+            return {
+                plan: null,
+                error: error instanceof Error ? error : new Error(String(error)),
+            };
+        }
+    }, [transition, ssgoi.config, ssgoi.platform, ssgoi.reducedMotion, width]);
+    const finish = useCallback((generation) => {
+        setSnapshot((previous) => {
+            const next = settlePresence(previous.presence, generation);
+            return next === previous.presence
+                ? previous
+                : { ...previous, presence: next };
+        });
+    }, []);
+    const ready = layout.width > 0 &&
+        layout.height > 0 &&
+        !!transition &&
+        readyKeys.has(transition.to.key);
+    const playback = useNativePlayback(id, transition ? prepared.plan : null, ready, finish);
+    useLayoutEffect(() => {
+        if (!transition)
+            return;
+        if (!prepared.plan) {
+            finish(transition.id);
+            if (prepared.error)
+                ssgoi.onTransitionError?.(prepared.error);
+        }
+    }, [transition, prepared, finish, ssgoi.onTransitionError]);
+    useEffect(() => {
+        if (!transition)
+            return;
+        // Bounds preparation when a screen remains suspended or cannot be measured.
+        const timeout = setTimeout(() => finish(transition.id), 1500 + (prepared.plan?.duration ?? 0));
+        const subscription = AppState.addEventListener("change", (next) => {
+            if (next === "background" || next === "inactive")
+                finish(transition.id);
+        });
+        if (AppState.currentState === "background" ||
+            AppState.currentState === "inactive")
+            finish(transition.id);
+        return () => {
+            clearTimeout(timeout);
+            subscription.remove();
+        };
+    }, [transition, prepared.plan, finish]);
+    useEffect(() => {
+        if (!transition || !prepared.plan || !ready)
+            return;
+        const pair = [transition.from.key, transition.to.key];
+        for (const key of pair)
+            emitter.emit({
+                type: "transitionStart",
+                target: key,
+                data: { closing: key === transition.from.key },
+            });
+        return () => {
+            for (const key of pair)
+                emitter.emit({
+                    type: "transitionEnd",
+                    target: key,
+                    data: { closing: key === transition.from.key },
+                });
+        };
+    }, [transition, prepared.plan, ready, emitter]);
+    useEffect(() => {
+        const keys = new Set(presence.entries.map((s) => s.key));
+        setReadyKeys((previous) => [...previous].every((key) => keys.has(key))
+            ? previous
+            : new Set([...previous].filter((key) => keys.has(key))));
+    }, [presence.entries]);
+    const onLayout = (event) => {
+        const next = event.nativeEvent.layout;
+        if (layout.width > 0 &&
+            layout.height > 0 &&
+            (next.width !== layout.width || next.height !== layout.height))
+            finish(id);
+        if (next.width !== layout.width || next.height !== layout.height)
+            setLayout({ width: next.width, height: next.height });
+    };
+    return (_jsx(View, { style: [{ flex: 1, overflow: "hidden" }, style], onLayout: onLayout, children: presence.entries.map((entry) => {
+            // Live routes get updated options/context; a removed outgoing route keeps its last descriptor.
+            const scene = liveScenes.get(entry.key) ?? entry.value;
+            const side = transition?.from.key === entry.key
+                ? "out"
+                : transition?.to.key === entry.key
+                    ? "in"
+                    : null;
+            return (_jsx(NativeRouteSurface, { target: entry.target, active: entry.key === activeKey, side: side, id: id, width: width, plan: side ? prepared.plan : null, playback: playback, onLayout: (event) => {
+                    if (event.nativeEvent.layout.width > 0 &&
+                        event.nativeEvent.layout.height > 0) {
+                        setReadyKeys((previous) => previous.has(entry.key)
+                            ? previous
+                            : new Set([...previous, entry.key]));
+                    }
+                }, children: _jsx(SceneContent, { children: scene.descriptor.render() }, scene.boundaryKey) }, entry.key));
+        }) }));
+}
+function SceneContent({ children }) {
+    return children;
+}

package/dist/playback.d.ts

@@ -0,0 +1,9 @@
+import type { PageMotionPlan } from "@ssgoi/core/runtime";
+export type PlaybackState = {
+    id: number;
+    elapsed: number;
+    running: boolean;
+    plan: PageMotionPlan | null;
+};
+/** One UI clock owns both tracks, including fade's sequence. No per-frame RN callbacks. */
+export declare function useNativePlayback(id: number, plan: PageMotionPlan | null, ready: boolean, onComplete: (id: number) => void): import("react-native-reanimated").SharedValue<PlaybackState>;

package/dist/playback.js

@@ -0,0 +1,33 @@
+import { useLayoutEffect } from "react";
+import { useFrameCallback, useSharedValue } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+/** One UI clock owns both tracks, including fade's sequence. No per-frame RN callbacks. */
+export function useNativePlayback(id, plan, ready, onComplete) {
+    const playback = useSharedValue({
+        id,
+        plan: null,
+        elapsed: 0,
+        running: false,
+    });
+    useLayoutEffect(() => {
+        playback.value = { id, plan, elapsed: 0, running: ready && plan !== null };
+        return () => {
+            playback.value = { id, plan: null, elapsed: 0, running: false };
+        };
+    }, [id, plan, ready, playback]);
+    const clock = useFrameCallback((frame) => {
+        const current = playback.value;
+        if (!current.running || !current.plan)
+            return;
+        const elapsed = Math.min(current.plan.duration, current.elapsed + Math.min(frame.timeSincePreviousFrame ?? 0, 1000 / 30));
+        const finished = elapsed >= current.plan.duration;
+        playback.value = { ...current, elapsed, running: !finished };
+        if (finished)
+            scheduleOnRN(onComplete, current.id);
+    }, false);
+    useLayoutEffect(() => {
+        clock.setActive(ready && plan !== null);
+        return () => clock.setActive(false);
+    }, [clock, ready, plan]);
+    return playback;
+}

package/dist/presence.d.ts

@@ -0,0 +1,2 @@
+export { createPresence, reconcilePresence, settlePresence, } from "@ssgoi/core/runtime";
+export type Screen<T> = import("@ssgoi/core/runtime").TransitionView<import("./native-surface-handle.js").NativeSurfaceHandle, T>;

package/dist/presence.js

@@ -0,0 +1 @@
+export { createPresence, reconcilePresence, settlePresence, } from "@ssgoi/core/runtime";

package/dist/ssgoi.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { nativePlatform } from "./native-platform.js";
+import type { SsgoiConfig } from "./types.js";
+export interface SsgoiProps {
+    config: SsgoiConfig;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    reducedMotion?: "system" | "always" | "never";
+    /** Report failed preparation; the navigator still reveals the latest screen. */
+    onTransitionError?: (error: Error) => void;
+}
+type Context = {
+    config: SsgoiConfig;
+    platform: typeof nativePlatform;
+    reducedMotion: boolean;
+    onTransitionError?: (error: Error) => void;
+};
+export declare function Ssgoi({ config, children, style, reducedMotion, onTransitionError, }: SsgoiProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSsgoi(): Context;
+export {};

package/dist/ssgoi.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState, } from "react";
+import { AccessibilityInfo, View, } from "react-native";
+import { nativePlatform } from "./native-platform.js";
+const SsgoiContext = createContext(null);
+export function Ssgoi({ config, children, style, reducedMotion = "system", onTransitionError, }) {
+    // Respect reduced motion while the asynchronous system preference is loading.
+    const [systemReducedMotion, setSystemReducedMotion] = useState(true);
+    useEffect(() => {
+        if (reducedMotion !== "system")
+            return;
+        let disposed = false;
+        let changed = false;
+        const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", (value) => {
+            changed = true;
+            setSystemReducedMotion(value);
+        });
+        void AccessibilityInfo.isReduceMotionEnabled()
+            .then((value) => {
+            if (!disposed && !changed)
+                setSystemReducedMotion(value);
+        })
+            .catch(() => { });
+        return () => {
+            disposed = true;
+            subscription.remove();
+        };
+    }, [reducedMotion]);
+    const context = useMemo(() => ({
+        config,
+        platform: nativePlatform,
+        reducedMotion: reducedMotion === "always" ||
+            (reducedMotion === "system" && systemReducedMotion),
+        onTransitionError,
+    }), [config, reducedMotion, systemReducedMotion, onTransitionError]);
+    return (_jsx(SsgoiContext.Provider, { value: context, children: _jsx(View, { style: [{ flex: 1 }, style], children: children }) }));
+}
+export function useSsgoi() {
+    const context = useContext(SsgoiContext);
+    if (!context)
+        throw new Error("SSGOI: render SsgoiRouteBoundary inside <Ssgoi config={config}>.");
+    return context;
+}

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+import type { PhysicsOptions, RouteConfig, RouteRule, TransitionsResolverArgs } from "@ssgoi/core/runtime";
+/** Native presets carry data, so no DOM or JS callback crosses into the UI runtime. */
+export type NativeTransition = {
+    readonly platform: "ssgoi-native";
+    readonly kind: "fade" | "slide";
+    readonly physics?: PhysicsOptions;
+};
+/** Mounted native screens retain their own scroll; explicit restoration is not implemented yet. */
+export type SsgoiTransitionRule = RouteRule<NativeTransition> & {
+    preserveScroll?: never;
+};
+export type SsgoiConfig = Omit<RouteConfig<NativeTransition>, "transitions"> & {
+    transitions?: readonly SsgoiTransitionRule[] | ((args: TransitionsResolverArgs) => readonly SsgoiTransitionRule[]);
+};
+export type { PhysicsOptions, SpringConfig, InertiaConfig, NavigationDirection, } from "@ssgoi/core/runtime";
+export type RouteBoundaryState = {
+    id: string;
+    key?: string | number;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/view-transitions.d.ts

@@ -0,0 +1,9 @@
+import type { NativeTransition, PhysicsOptions } from "./types.js";
+export interface FadeOptions {
+    physics?: PhysicsOptions;
+}
+export interface SlideOptions {
+    physics?: PhysicsOptions;
+}
+export declare function fade({ physics }?: FadeOptions): NativeTransition;
+export declare function slide({ physics }?: SlideOptions): NativeTransition;

package/dist/view-transitions.js

@@ -0,0 +1,6 @@
+export function fade({ physics } = {}) {
+    return { platform: "ssgoi-native", kind: "fade", physics };
+}
+export function slide({ physics } = {}) {
+    return { platform: "ssgoi-native", kind: "slide", physics };
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@ssgoi/react-native",
+  "version": "7.1.0-beta.0",
+  "description": "React Native screen transitions for SSGOI with optional Expo Router integration",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./view-transitions": {
+      "types": "./dist/view-transitions.d.ts",
+      "default": "./dist/view-transitions.js"
+    },
+    "./expo-router": {
+      "types": "./dist/expo-router.d.ts",
+      "default": "./dist/expo-router.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "standard-navigation": "0.0.9",
+    "@ssgoi/core": "^7.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-native": ">=0.85.3 <0.86",
+    "react-native-reanimated": "~4.3.1",
+    "react-native-worklets": "0.8.3",
+    "expo-router": "*"
+  },
+  "peerDependenciesMeta": {
+    "expo-router": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "typescript": "~5.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-reanimated": "4.3.1",
+    "react-native-worklets": "0.8.3",
+    "expo": "56.0.21",
+    "expo-router": "56.2.20",
+    "jest": "^29.7.0",
+    "jest-expo": "56.0.5",
+    "@types/jest": "^29.5.14",
+    "react-test-renderer": "19.2.3",
+    "@testing-library/react-native": "^13.3.3",
+    "react-dom": "19.2.3",
+    "babel-preset-expo": "56.0.20",
+    "@react-native/jest-preset": "0.85.3"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meursyphus/ssgoi.git",
+    "directory": "packages/react-native"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test:run": "jest --runInBand",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}