react-native-screens 3.35.0-rc.0 → 4.0.0-beta.0

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

@@ -1,5 +1,6 @@
+/* eslint-disable camelcase */
 import * as React from 'react';
-import { Animated, Platform, StyleSheet, View, ViewProps } from 'react-native';
+import { Animated, Platform, StyleSheet, ViewProps } 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';
@@ -10,6 +11,7 @@ import {
   ScreenContext,
   GHContext,
   GestureDetectorBridge,
+  ScreenContentWrapper,
 } from 'react-native-screens';
 import {
   ParamListBase,
@@ -37,24 +39,29 @@ import getDefaultHeaderHeight from '../utils/getDefaultHeaderHeight';
 import getStatusBarHeight from '../utils/getStatusBarHeight';
 import HeaderHeightContext from '../utils/HeaderHeightContext';
 import AnimatedHeaderHeightContext from '../utils/AnimatedHeaderHeightContext';
+import FooterComponent from './FooterComponent';
 
 const isAndroid = Platform.OS === 'android';
 
-let Container = View;
+let Container = ScreenContentWrapper;
 
 if (__DEV__) {
   const DebugContainer = (
     props: ViewProps & { stackPresentation: StackPresentationTypes },
   ) => {
     const { stackPresentation, ...rest } = props;
-    if (Platform.OS === 'ios' && stackPresentation !== 'push') {
+    if (
+      Platform.OS === 'ios' &&
+      stackPresentation !== 'push' &&
+      stackPresentation !== 'formSheet'
+    ) {
       return (
         <AppContainer>
-          <View {...rest} />
+          <ScreenContentWrapper {...rest} />
         </AppContainer>
       );
     }
-    return <View {...rest} />;
+    return <ScreenContentWrapper {...rest} />;
   };
   // @ts-ignore Wrong props
   Container = DebugContainer;
@@ -72,7 +79,11 @@ const MaybeNestedStack = ({
   children: React.ReactNode;
 }) => {
   const { colors } = useTheme();
-  const { headerShown = true, contentStyle } = options;
+  const {
+    headerShown = true,
+    contentStyle,
+    unstable_screenStyle = null,
+  } = options;
 
   const Screen = React.useContext(ScreenContext);
 
@@ -96,7 +107,11 @@ const MaybeNestedStack = ({
   const content = (
     <Container
       style={[
-        styles.container,
+        stackPresentation === 'formSheet'
+          ? Platform.OS === 'ios'
+            ? styles.absoluteFillNoBottom
+            : null
+          : styles.container,
         stackPresentation !== 'transparentModal' &&
           stackPresentation !== 'containedTransparentModal' && {
             backgroundColor: colors.background,
@@ -138,7 +153,7 @@ const MaybeNestedStack = ({
           enabled
           isNativeStack
           hasLargeHeader={hasLargeHeader}
-          style={StyleSheet.absoluteFill}>
+          style={[StyleSheet.absoluteFill, unstable_screenStyle]}>
           <HeaderHeightContext.Provider value={headerHeight}>
             <HeaderConfig {...options} route={route} />
             {content}
@@ -173,17 +188,19 @@ const RouteView = ({
   screensRefs: ScreensRefsHolder;
 }) => {
   const { options, render: renderScene } = descriptors[route.key];
+
   const {
     fullScreenSwipeShadowEnabled = false,
     gestureEnabled,
     headerShown,
     hideKeyboardOnSwipe,
     homeIndicatorHidden,
-    sheetAllowedDetents = 'large',
-    sheetLargestUndimmedDetent = 'all',
+    sheetLargestUndimmedDetent = -1,
     sheetGrabberVisible = false,
     sheetCornerRadius = -1.0,
+    sheetElevation = 24,
     sheetExpandsWhenScrolledToEdge = true,
+    sheetInitialDetent = 0,
     nativeBackButtonDismissalEnabled = false,
     navigationBarColor,
     navigationBarTranslucent,
@@ -198,16 +215,28 @@ const RouteView = ({
     swipeDirection = 'horizontal',
     transitionDuration,
     freezeOnBlur,
+    unstable_footerComponent = null,
   } = options;
 
   let {
+    sheetAllowedDetents = [1.0],
     customAnimationOnSwipe,
     fullScreenSwipeEnabled,
     gestureResponseDistance,
     stackAnimation,
     stackPresentation = 'push',
+    unstable_screenStyle = null,
   } = options;
 
+  // We only want to allow backgroundColor for now
+  unstable_screenStyle = unstable_screenStyle
+    ? { backgroundColor: unstable_screenStyle.backgroundColor }
+    : null;
+
+  if (sheetAllowedDetents === 'fitToContents') {
+    sheetAllowedDetents = [-1];
+  }
+
   if (swipeDirection === 'vertical') {
     // for `vertical` direction to work, we need to set `fullScreenSwipeEnabled` to `true`
     // so the screen can be dismissed from any point on screen.
@@ -286,11 +315,13 @@ const RouteView = ({
       enabled
       isNativeStack
       hasLargeHeader={hasLargeHeader}
-      style={StyleSheet.absoluteFill}
+      style={[StyleSheet.absoluteFill, unstable_screenStyle]}
       sheetAllowedDetents={sheetAllowedDetents}
       sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
       sheetGrabberVisible={sheetGrabberVisible}
+      sheetInitialDetent={sheetInitialDetent}
       sheetCornerRadius={sheetCornerRadius}
+      sheetElevation={sheetElevation}
       sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
       customAnimationOnSwipe={customAnimationOnSwipe}
       freezeOnBlur={freezeOnBlur}
@@ -323,6 +354,7 @@ const RouteView = ({
         });
       }}
       onWillAppear={() => {
+        console.log(`onWillAppear/transitionStart route: ${route.key}`);
         navigation.emit({
           type: 'transitionStart',
           data: { closing: false },
@@ -330,6 +362,7 @@ const RouteView = ({
         });
       }}
       onWillDisappear={() => {
+        console.log(`onWillDisappear/transitionStart route: ${route.key}`);
         navigation.emit({
           type: 'transitionStart',
           data: { closing: true },
@@ -337,10 +370,12 @@ const RouteView = ({
         });
       }}
       onAppear={() => {
+        console.log(`onAppear/appear route: ${route.key}`);
         navigation.emit({
           type: 'appear',
           target: route.key,
         });
+        console.log(`onAppear/transitionEnd route: ${route.key}`);
         navigation.emit({
           type: 'transitionEnd',
           data: { closing: false },
@@ -348,6 +383,7 @@ const RouteView = ({
         });
       }}
       onDisappear={() => {
+        console.log(`onDisappear/transitionEnd route: ${route.key}`);
         navigation.emit({
           type: 'transitionEnd',
           data: { closing: true },
@@ -367,6 +403,7 @@ const RouteView = ({
         }
       }}
       onDismissed={e => {
+        console.log(`onDismissed/dismiss route: ${route.key}`);
         navigation.emit({
           type: 'dismiss',
           target: route.key,
@@ -381,6 +418,16 @@ const RouteView = ({
           target: stateKey,
         });
       }}
+      onSheetDetentChanged={e => {
+        navigation.emit({
+          type: 'sheetDetentChange',
+          target: route.key,
+          data: {
+            index: e.nativeEvent.index,
+            isStable: e.nativeEvent.isStable,
+          },
+        });
+      }}
       onGestureCancel={() => {
         navigation.emit({
           type: 'gestureCancel',
@@ -403,6 +450,9 @@ const RouteView = ({
             route={route}
             headerShown={isHeaderInPush}
           />
+          {unstable_footerComponent && (
+            <FooterComponent>{unstable_footerComponent}</FooterComponent>
+          )}
         </HeaderHeightContext.Provider>
       </AnimatedHeaderHeightContext.Provider>
     </Screen>
@@ -487,4 +537,17 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  absoluteFill: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  absoluteFillNoBottom: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
 });

package/src/types.tsx

@@ -7,6 +7,7 @@ import {
   TargetedEvent,
   TextInputFocusEventData,
   ColorValue,
+  ViewStyle,
 } from 'react-native';
 import { NativeStackNavigatorProps } from './native-stack/types';
 
@@ -95,13 +96,13 @@ export type GestureResponseDistanceType = {
   bottom?: number;
 };
 
-export type SheetDetentTypes = 'medium' | 'large' | 'all';
 export type SearchBarPlacement = 'automatic' | 'inline' | 'stacked';
 
 export interface ScreenProps extends ViewProps {
   active?: 0 | 1 | Animated.AnimatedInterpolation<number>;
   activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation<number>;
   children?: React.ReactNode;
+  unstable_footer?: React.ReactNode;
   /**
    * Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`.
    *
@@ -231,6 +232,12 @@ export interface ScreenProps extends ViewProps {
   onNativeDismissCancelled?: (
     e: NativeSyntheticEvent<{ dismissCount: number }>,
   ) => void;
+  /**
+   * A callback that gets called when the current screen is in `formSheet` presentation and its detent has changed.
+   */
+  onSheetDetentChanged?: (
+    e: NativeSyntheticEvent<{ index: number; isStable: boolean }>,
+  ) => void;
   /**
    * An internal callback called every frame during the transition of screens of `native-stack`, used to feed transition context.
    */
@@ -273,20 +280,36 @@ 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 `stackPresentation` is set to `formSheet`.
-   * Defaults to `large`.
    *
-   * Available values:
+   * Heights should be described as fraction (a number from `[0, 1]` interval) of screen height / maximum detent height.
+   * There is also possibility to specify `[-1]` literal array with single element, which intets to set the sheet height
+   * to the height of its contents.
    *
-   * - `large` - only large detent level will be allowed
-   * - `medium` - only medium detent level will be allowed
-   * - `all` - all detent levels will be allowed
+   * Please note that the array **must** be sorted in ascending order.
    *
-   * @platform ios
+   * Defaults to `[1.0]` literal.
    */
-  sheetAllowedDetents?: SheetDetentTypes;
+  sheetAllowedDetents?: number[];
+  /**
+   * Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.
+   *
+   * Not dynamic - changing it after the component is rendered won't have an effect.
+   *
+   * Defaults to `24`.
+   *
+   * @platform Android
+   */
+  sheetElevation?: number;
   /**
    * Whether the sheet should expand to larger detent when scrolling.
    * Works only when `stackPresentation` is set to `formSheet`.
@@ -318,17 +341,19 @@ export interface ScreenProps extends ViewProps {
    * The largest sheet detent for which a view underneath won't be dimmed.
    * Works only when `stackPresentation` is set to `formSheet`.
    *
-   * If this prop is set to:
-   *
-   * - `large` - the view underneath won't be dimmed at any detent level
-   * - `medium` - the view underneath will be dimmed only when detent level is `large`
-   * - `all` - the view underneath will be dimmed for any detent level
+   * This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which
+   * there won't be a dimming view beneath the sheet.
    *
-   * Defaults to `all`.
+   * Defaults to `-1`, indicating that the dimming view should be always present.
+   */
+  sheetLargestUndimmedDetent?: number;
+  /**
+   * Index of the detent the sheet should expand to after being opened.
+   * Works only when `stackPresentation` is set to `formSheet`.
    *
-   * @platform ios
+   * Defaults to `0` - which represents first detent in the detents array.
    */
-  sheetLargestUndimmedDetent?: SheetDetentTypes;
+  sheetInitialDetent?: number;
   /**
    * How the screen should appear/disappear when pushed or popped at the top of the stack.
    * The following values are currently supported: