react-native-screens 4.0.0-beta.15 → 4.0.0-beta.17

package/src/native-stack/views/NativeStackView.tsx

@@ -1,14 +1,19 @@
 /* eslint-disable camelcase */
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, ViewProps } from 'react-native';
+import {
+  Animated,
+  Platform,
+  StyleSheet,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 // @ts-ignore Getting private component
 // eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
 import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 import warnOnce from 'warn-once';
-import { StackPresentationTypes, GestureDetectorBridge } from '../../types';
+import { StackPresentationTypes, ScreensRefsHolder } from '../../types';
 import ScreenStack from '../../components/ScreenStack';
 import ScreenContentWrapper from '../../components/ScreenContentWrapper';
-import { GHContext } from '../contexts/GHContext';
 import { ScreenContext } from '../../components/Screen';
 import {
   ParamListBase,
@@ -27,8 +32,6 @@ import {
   NativeStackDescriptorMap,
   NativeStackNavigationHelpers,
   NativeStackNavigationOptions,
-  NativeStackNavigatorProps,
-  ScreensRefsHolder,
 } from '../types';
 import HeaderConfig from './HeaderConfig';
 import SafeAreaProviderCompat from '../utils/SafeAreaProviderCompat';
@@ -69,18 +72,16 @@ const MaybeNestedStack = ({
   route,
   stackPresentation,
   children,
+  internalScreenStyle,
 }: {
   options: NativeStackNavigationOptions;
   route: Route<string>;
   stackPresentation: StackPresentationTypes;
   children: React.ReactNode;
+  internalScreenStyle?: Pick<ViewStyle, 'backgroundColor'>;
 }) => {
   const { colors } = useTheme();
-  const {
-    headerShown = true,
-    contentStyle,
-    unstable_screenStyle = null,
-  } = options;
+  const { headerShown = true, contentStyle } = options;
 
   const Screen = React.useContext(ScreenContext);
 
@@ -150,7 +151,7 @@ const MaybeNestedStack = ({
           enabled
           isNativeStack
           hasLargeHeader={hasLargeHeader}
-          style={[StyleSheet.absoluteFill, unstable_screenStyle]}>
+          style={[StyleSheet.absoluteFill, internalScreenStyle]}>
           <HeaderHeightContext.Provider value={headerHeight}>
             <HeaderConfig {...options} route={route} />
             {content}
@@ -182,7 +183,7 @@ const RouteView = ({
   index: number;
   navigation: NativeStackNavigationHelpers;
   stateKey: string;
-  screensRefs: ScreensRefsHolder;
+  screensRefs: React.MutableRefObject<ScreensRefsHolder>;
 }) => {
   const { options, render: renderScene } = descriptors[route.key];
 
@@ -213,6 +214,7 @@ const RouteView = ({
     transitionDuration,
     freezeOnBlur,
     unstable_sheetFooter = null,
+    contentStyle,
   } = options;
 
   let {
@@ -222,14 +224,19 @@ const RouteView = ({
     gestureResponseDistance,
     stackAnimation,
     stackPresentation = 'push',
-    unstable_screenStyle = null,
   } = options;
 
-  // We only want to allow backgroundColor for now
-  unstable_screenStyle =
-    stackPresentation === 'formSheet' && unstable_screenStyle
-      ? { backgroundColor: unstable_screenStyle.backgroundColor }
-      : null;
+  // We take backgroundColor from contentStyle and apply it on Screen.
+  // This allows to workaround one issue with truncated
+  // content with formSheet presentation.
+  let internalScreenStyle;
+
+  if (stackPresentation === 'formSheet' && contentStyle) {
+    const flattenContentStyles = StyleSheet.flatten(contentStyle);
+    internalScreenStyle = {
+      backgroundColor: flattenContentStyles?.backgroundColor,
+    };
+  }
 
   if (sheetAllowedDetents === 'fitToContents') {
     sheetAllowedDetents = [-1];
@@ -313,7 +320,7 @@ const RouteView = ({
       enabled
       isNativeStack
       hasLargeHeader={hasLargeHeader}
-      style={[StyleSheet.absoluteFill, unstable_screenStyle]}
+      style={[StyleSheet.absoluteFill, internalScreenStyle]}
       sheetAllowedDetents={sheetAllowedDetents}
       sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
       sheetGrabberVisible={sheetGrabberVisible}
@@ -431,7 +438,8 @@ const RouteView = ({
           <MaybeNestedStack
             options={options}
             route={route}
-            stackPresentation={stackPresentation}>
+            stackPresentation={stackPresentation}
+            internalScreenStyle={internalScreenStyle}>
             {renderScene()}
           </MaybeNestedStack>
           {/* HeaderConfig must not be first child of a Screen.
@@ -467,53 +475,29 @@ function NativeStackViewInner({
   const currentRouteKey = routes[state.index].key;
   const { goBackGesture, transitionAnimation, screenEdgeGesture } =
     descriptors[currentRouteKey].options;
-  const gestureDetectorBridge = React.useRef<GestureDetectorBridge>({
-    stackUseEffectCallback: _stackRef => {
-      // this method will be override in GestureDetector
-    },
-  });
-  type RefHolder = Record<
-    string,
-    React.MutableRefObject<React.Ref<NativeStackNavigatorProps>>
-  >;
-  const screensRefs = React.useRef<RefHolder>({});
-  const ScreenGestureDetector = React.useContext(GHContext);
 
-  React.useEffect(() => {
-    if (
-      ScreenGestureDetector.name !== 'GHWrapper' &&
-      goBackGesture !== undefined
-    ) {
-      console.warn(
-        'Cannot detect GestureDetectorProvider in a screen that uses `goBackGesture`. Make sure your navigator is wrapped in GestureDetectorProvider.',
-      );
-    }
-  }, [ScreenGestureDetector.name, goBackGesture]);
+  const screensRefs = React.useRef<ScreensRefsHolder>({});
 
   return (
-    <ScreenGestureDetector
-      gestureDetectorBridge={gestureDetectorBridge}
+    <ScreenStack
+      style={styles.container}
       goBackGesture={goBackGesture}
       transitionAnimation={transitionAnimation}
       screenEdgeGesture={screenEdgeGesture ?? false}
       screensRefs={screensRefs}
-      currentRouteKey={currentRouteKey}>
-      <ScreenStack
-        style={styles.container}
-        gestureDetectorBridge={gestureDetectorBridge}>
-        {routes.map((route, index) => (
-          <RouteView
-            key={route.key}
-            descriptors={descriptors}
-            route={route}
-            index={index}
-            navigation={navigation}
-            stateKey={key}
-            screensRefs={screensRefs}
-          />
-        ))}
-      </ScreenStack>
-    </ScreenGestureDetector>
+      currentScreenId={currentRouteKey}>
+      {routes.map((route, index) => (
+        <RouteView
+          key={route.key}
+          descriptors={descriptors}
+          route={route}
+          index={index}
+          navigation={navigation}
+          stateKey={key}
+          screensRefs={screensRefs}
+        />
+      ))}
+    </ScreenStack>
   );
 }
 

package/src/types.tsx

@@ -7,7 +7,6 @@ import {
   TargetedEvent,
   TextInputFocusEventData,
   ColorValue,
-  ViewStyle,
 } from 'react-native';
 import { NativeStackNavigatorProps } from './native-stack/types';
 
@@ -281,13 +280,6 @@ export interface ScreenProps extends ViewProps {
    * - "landscape_right" – landscape-right orientation is permitted
    */
   screenOrientation?: ScreenOrientationTypes;
-  /**
-   * Allows to set background color for the `Screen` component itself.
-   * This might come handy when using `formSheet` stack presentation, when the content view is clipped.
-   *
-   * We plan to get rid of this prop once the workaround is no longer needed.
-   */
-  unstable_screenStyle?: Pick<ViewStyle, 'backgroundColor'>;
   /**
    * Describes heights where a sheet can rest.
    * Works only when `presentation` is set to `formSheet`.
@@ -495,13 +487,12 @@ export interface GestureDetectorBridge {
   ) => void;
 }
 
-export interface ScreenStackProps extends ViewProps {
+export interface ScreenStackProps extends ViewProps, GestureProps {
   children?: React.ReactNode;
   /**
    * A callback that gets called when the current screen finishes its transition.
    */
   onFinishTransitioning?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
-  gestureDetectorBridge?: React.MutableRefObject<GestureDetectorBridge>;
   ref?: React.MutableRefObject<React.Ref<View>>;
 }
 
@@ -807,3 +798,68 @@ export interface SearchBarProps {
    */
   shouldShowHintSearchIcon?: boolean;
 }
+
+/**
+ * Custom Screen Transition
+ */
+
+/**
+ * copy from GestureHandler to avoid strong dependency
+ */
+export type PanGestureHandlerEventPayload = {
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+  translationX: number;
+  translationY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+/**
+ * copy from Reanimated to avoid strong dependency
+ */
+export type GoBackGesture =
+  | 'swipeRight'
+  | 'swipeLeft'
+  | 'swipeUp'
+  | 'swipeDown'
+  | 'verticalSwipe'
+  | 'horizontalSwipe'
+  | 'twoDimensionalSwipe';
+
+export interface MeasuredDimensions {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  pageX: number;
+  pageY: number;
+}
+
+export type AnimatedScreenTransition = {
+  topScreenStyle: (
+    event: PanGestureHandlerEventPayload,
+    screenSize: MeasuredDimensions,
+  ) => Record<string, unknown>;
+  belowTopScreenStyle: (
+    event: PanGestureHandlerEventPayload,
+    screenSize: MeasuredDimensions,
+  ) => Record<string, unknown>;
+};
+
+export type ScreensRefsHolder = Record<string, React.RefObject<View>>;
+
+export interface GestureProps {
+  screensRefs?: React.MutableRefObject<ScreensRefsHolder>;
+  currentScreenId?: string;
+  goBackGesture?: GoBackGesture;
+  transitionAnimation?: AnimatedScreenTransition;
+  screenEdgeGesture?: boolean;
+}
+
+export interface GestureProviderProps extends GestureProps {
+  children?: React.ReactNode;
+  gestureDetectorBridge: React.MutableRefObject<GestureDetectorBridge>;
+}