@react-native-gpui/screens 0.0.0-stage → 4.28.0-alpha.0

package/desktop/src/transition.rs

@@ -0,0 +1,193 @@
+//! The animation modes a stack accepts, and the poses each one corresponds to.
+//!
+//! Core owns the timing and the paint; this file is the module's own statement
+//! of what "slide from the right" and "fade" mean as movement between two
+//! poses, so core never learns a navigation name.
+use react_native_gpui::extensions::{Pose, Transition};
+use std::time::Duration;
+
+/// A stack animation, as `stackAnimation` names it.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum TransitionMode {
+    Fade,
+    SlideFromRight,
+    SlideFromLeft,
+}
+
+impl TransitionMode {
+    /// The mode the reverse of this one uses, so a pop plays the entry mirrored.
+    #[must_use]
+    pub fn reverse(self) -> Self {
+        match self {
+            Self::SlideFromRight => Self::SlideFromLeft,
+            Self::SlideFromLeft => Self::SlideFromRight,
+            Self::Fade => Self::Fade,
+        }
+    }
+
+    /// How long this mode runs.
+    pub fn duration(self) -> Duration {
+        match self {
+            Self::Fade => Duration::from_millis(150),
+            _ => Duration::from_millis(240),
+        }
+    }
+}
+
+/// The mode a `stackAnimation` string asks for. Unknown values fade, which is
+/// what the platform's own default is.
+pub fn transition_mode(animation: &str) -> Option<TransitionMode> {
+    match animation {
+        "none" => None,
+        "slide_from_right" | "simple_push" => Some(TransitionMode::SlideFromRight),
+        "slide_from_left" => Some(TransitionMode::SlideFromLeft),
+        "default" | "" | "fade" => Some(TransitionMode::Fade),
+        _ => Some(TransitionMode::Fade),
+    }
+}
+
+/// Whether entering or leaving.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum Role {
+    Enter,
+    Exit,
+}
+
+/// The poses a mode and role correspond to.
+///
+/// Entering slides from off-screen to rest; leaving slides from rest to
+/// off-screen; a fade keeps the node still while its opacity moves. The offset
+/// is a fraction of the node's own width, so `distance` is how far it travels.
+pub fn poses(mode: TransitionMode, role: Role, distance: f32) -> (Pose, Pose) {
+    let rest = Pose {
+        offset_x: 0.0,
+        opacity: 1.0,
+    };
+    let transparent = Pose {
+        offset_x: 0.0,
+        opacity: 0.0,
+    };
+    let off_screen = |sign: f32| Pose {
+        offset_x: sign * distance,
+        opacity: 1.0,
+    };
+    match (mode, role) {
+        (TransitionMode::Fade, Role::Enter) => (transparent, rest),
+        (TransitionMode::Fade, Role::Exit) => (rest, transparent),
+        (TransitionMode::SlideFromRight, Role::Enter) => (off_screen(1.0), rest),
+        (TransitionMode::SlideFromLeft, Role::Enter) => (off_screen(-1.0), rest),
+        (TransitionMode::SlideFromRight, Role::Exit) => (rest, off_screen(-1.0)),
+        (TransitionMode::SlideFromLeft, Role::Exit) => (rest, off_screen(1.0)),
+    }
+}
+
+/// The transition a mode and role describe.
+pub fn transition(mode: TransitionMode, role: Role, distance: f32) -> Transition {
+    let (from, to) = poses(mode, role, distance);
+    Transition {
+        from,
+        to,
+        duration: mode.duration(),
+    }
+}
+
+/// The card underneath a push parallaxes a short way rather than leaving.
+pub const PARALLAX_DISTANCE: f32 = 0.12;
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn maps_supported_animations_and_falls_back_to_fade() {
+        assert_eq!(transition_mode("none"), None);
+        assert_eq!(transition_mode("fade"), Some(TransitionMode::Fade));
+        assert_eq!(transition_mode("default"), Some(TransitionMode::Fade));
+        assert_eq!(transition_mode(""), Some(TransitionMode::Fade));
+        assert_eq!(
+            transition_mode("slide_from_right"),
+            Some(TransitionMode::SlideFromRight)
+        );
+        assert_eq!(
+            transition_mode("simple_push"),
+            Some(TransitionMode::SlideFromRight)
+        );
+        assert_eq!(
+            transition_mode("slide_from_left"),
+            Some(TransitionMode::SlideFromLeft)
+        );
+        assert_eq!(transition_mode("unsupported"), Some(TransitionMode::Fade));
+    }
+
+    #[test]
+    fn reversing_a_slide_swaps_its_direction() {
+        assert_eq!(
+            TransitionMode::SlideFromRight.reverse(),
+            TransitionMode::SlideFromLeft
+        );
+        assert_eq!(
+            TransitionMode::SlideFromLeft.reverse(),
+            TransitionMode::SlideFromRight
+        );
+        assert_eq!(TransitionMode::Fade.reverse(), TransitionMode::Fade);
+    }
+
+    #[test]
+    fn the_poses_reproduce_the_original_slide_and_fade_curves() {
+        for (mode, role, distance, expected) in [
+            (
+                TransitionMode::SlideFromRight,
+                Role::Enter,
+                1.0,
+                [1.0, 0.5, 0.0],
+            ),
+            (
+                TransitionMode::SlideFromLeft,
+                Role::Enter,
+                1.0,
+                [-1.0, -0.5, 0.0],
+            ),
+            (
+                TransitionMode::SlideFromRight,
+                Role::Exit,
+                1.0,
+                [0.0, -0.5, -1.0],
+            ),
+            (
+                TransitionMode::SlideFromLeft,
+                Role::Exit,
+                1.0,
+                [0.0, 0.5, 1.0],
+            ),
+            (
+                TransitionMode::SlideFromRight,
+                Role::Exit,
+                PARALLAX_DISTANCE,
+                [0.0, -0.06, -0.12],
+            ),
+        ] {
+            let transition = transition(mode, role, distance);
+            for (progress, expected_offset) in
+                [(0.0, expected[0]), (0.5, expected[1]), (1.0, expected[2])]
+            {
+                let pose = transition.pose_at(progress);
+                assert!(
+                    (pose.offset_x - expected_offset).abs() < 0.001,
+                    "{mode:?} {role:?} at {progress}: {} != {expected_offset}",
+                    pose.offset_x
+                );
+            }
+        }
+    }
+
+    #[test]
+    fn a_fade_moves_opacity_and_nothing_else() {
+        let transition = transition(TransitionMode::Fade, Role::Enter, 1.0);
+        for (progress, expected) in [(0.0, 0.0), (0.5, 0.5), (1.0, 1.0)] {
+            let pose = transition.pose_at(progress);
+            assert!((pose.opacity - expected).abs() < 0.001);
+            assert!(pose.offset_x.abs() < 0.001);
+        }
+        assert_eq!(transition.duration, Duration::from_millis(150));
+    }
+}

package/desktop/src/unsupported.rs

@@ -0,0 +1,39 @@
+//! Components react-native-screens ships that this platform does not implement.
+//!
+//! They are named here so the module can say so once, instead of core carrying a
+//! list of a library's components.
+/// Whether this component is one the platform cannot render.
+pub fn unsupported_component(name: &str) -> bool {
+    matches!(
+        name,
+        "RNSSearchBar"
+            | "RNSBottomTabs"
+            | "RNSBottomTabsScreen"
+            | "RNSScreenFooter"
+            | "RNSSplitView"
+            | "RNSSplitViewScreen"
+    ) || name.starts_with("RNSSplitView")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn identifies_the_components_the_platform_cannot_render() {
+        for name in [
+            "RNSSearchBar",
+            "RNSBottomTabs",
+            "RNSBottomTabsScreen",
+            "RNSScreenFooter",
+            "RNSSplitView",
+            "RNSSplitViewScreen",
+        ] {
+            assert!(unsupported_component(name), "{name} should be unsupported");
+        }
+        assert!(unsupported_component("RNSSplitViewSomethingElse"));
+        for name in ["RNSScreen", "RNSScreenStack", "View", "RNSScreenContainer"] {
+            assert!(!unsupported_component(name), "{name} should be supported");
+        }
+    }
+}

package/package.json

@@ -1,6 +1,33 @@
 {
   "name": "@react-native-gpui/screens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.28.0-alpha.0",
+  "description": "GPUI platform integration for react-native-screens",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/streetwriters/react-native-gpui.git",
+    "directory": "modules/screens"
+  },
+  "homepage": "https://streetwriters.github.io/react-native-gpui/",
+  "bugs": {
+    "url": "https://github.com/streetwriters/react-native-gpui/issues"
+  },
+  "files": [
+    "desktop",
+    "react-native.config.js",
+    "src",
+    "CHANGELOG.md",
+    "!**/*.test.js",
+    "!**/*.test.mjs",
+    "!**/*.test.ts",
+    "!**/*.test.cjs"
+  ],
+  "peerDependencies": {
+    "react-native": "0.87.x",
+    "react-native-screens": "4.28.x"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,36 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      desktop: {
+        cmake: 'desktop',
+        crate: 'rn-gpui-screens',
+        componentCodegenPackage: 'react-native-screens',
+        componentDescriptors: [
+          'RNSScreenComponentDescriptor',
+          'RNSScreenContainerComponentDescriptor',
+          'RNSScreenContentWrapperComponentDescriptor',
+          'RNSScreenNavigationContainerComponentDescriptor',
+          'RNSScreenStackComponentDescriptor',
+          'RNSScreenStackHeaderConfigComponentDescriptor',
+          'RNSScreenStackHeaderSubviewComponentDescriptor',
+          'RNSModalScreenComponentDescriptor',
+          'RNSFullWindowOverlayComponentDescriptor',
+        ],
+        componentHeaders: [
+          'react/renderer/components/rnscreens/ComponentDescriptors.h',
+          'react/renderer/components/rnscreens/RNSScreenComponentDescriptor.h',
+          'react/renderer/components/rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h',
+          'react/renderer/components/rnscreens/RNSScreenStackHeaderSubviewComponentDescriptor.h',
+          'react/renderer/components/rnscreens/RNSModalScreenComponentDescriptor.h',
+          'react/renderer/components/rnscreens/RNSFullWindowOverlayComponentDescriptor.h',
+        ],
+        // Metro: replace these files of installed packages for gpui.
+        sourceOverrides: {
+          'react-native-screens/src/core.ts': './src/core.desktop.ts',
+          'react-native-screens/src/components/FullWindowOverlay.tsx':
+            './src/FullWindowOverlay.desktop.tsx',
+        },
+      },
+    },
+  },
+};

package/src/FullWindowOverlay.desktop.tsx

@@ -0,0 +1,19 @@
+import React, { type PropsWithChildren } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import FullWindowOverlayNativeComponent from 'react-native-screens/src/fabric/FullWindowOverlayNativeComponent';
+import type { NativeProps } from 'react-native-screens/src/fabric/FullWindowOverlayNativeComponent';
+
+export default function FullWindowOverlay({
+  children,
+  ...props
+}: PropsWithChildren<NativeProps>) {
+  const { width, height } = useWindowDimensions();
+  return (
+    <FullWindowOverlayNativeComponent
+      {...props}
+      style={[StyleSheet.absoluteFill, { width, height }, props.style]}
+    >
+      {children}
+    </FullWindowOverlayNativeComponent>
+  );
+}

package/src/core.desktop.ts

@@ -0,0 +1,28 @@
+import './customDirectEventTypes.desktop';
+
+// GPUI always ships the native screens implementation.
+export const isNativePlatformSupported = true;
+
+let ENABLE_SCREENS = isNativePlatformSupported;
+
+export function enableScreens(shouldEnableScreens = true) {
+  ENABLE_SCREENS = shouldEnableScreens;
+}
+
+let ENABLE_FREEZE = false;
+
+export function enableFreeze(shouldEnableReactFreeze = true) {
+  if (!isNativePlatformSupported) {
+    return;
+  }
+
+  ENABLE_FREEZE = shouldEnableReactFreeze;
+}
+
+export function screensEnabled() {
+  return ENABLE_SCREENS;
+}
+
+export function freezeEnabled() {
+  return ENABLE_FREEZE;
+}

package/src/customDirectEventTypes.desktop.ts

@@ -0,0 +1,16 @@
+// The native stack header dispatches this upstream screen event to notify
+// React Navigation that the user requested a native back action.
+import { customDirectEventTypes } from 'react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry';
+
+customDirectEventTypes.topHeaderBackButtonClicked = {
+  registrationName: 'onHeaderBackButtonClicked',
+};
+
+customDirectEventTypes.topWillAppear = { registrationName: 'onWillAppear' };
+customDirectEventTypes.topWillDisappear = {
+  registrationName: 'onWillDisappear',
+};
+customDirectEventTypes.topAppear = { registrationName: 'onAppear' };
+customDirectEventTypes.topDisappear = { registrationName: 'onDisappear' };
+
+export { customDirectEventTypes };