feat: add freezeOnBlur prop (#10834)

react-navigation · Sep 16, 2022 · e13b4d9 · e13b4d9
1 parent b8ea527
commit e13b4d9
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 12 deletions.
diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
@@ -244,6 +244,15 @@ export type BottomTabNavigationOptions = HeaderOptions & {
    * Defaults to `false`.
    */
   unmountOnBlur?: boolean;
+
+  /**
+   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
+   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
+   * Requires `react-native-screens` version >=3.16.0.
+   *
+   * Only supported on iOS and Android.
+   */
+  freezeOnBlur?: boolean;
 };
 
 export type BottomTabDescriptor = Descriptor<

diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -110,13 +110,17 @@ export default function BottomTabView(props: Props) {
           }
 
           const {
+            freezeOnBlur,
             header = ({ layout, options }: BottomTabHeaderProps) => (
               <Header
                 {...options}
                 layout={layout}
                 title={getHeaderTitle(options, route.name)}
               />
             ),
+            headerShown,
+            headerStatusBarHeight,
+            headerTransparent,
           } = descriptor.options;
 
           return (
@@ -125,17 +129,16 @@ export default function BottomTabView(props: Props) {
               style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
               visible={isFocused}
               enabled={detachInactiveScreens}
+              freezeOnBlur={freezeOnBlur}
             >
               <BottomTabBarHeightContext.Provider value={tabBarHeight}>
                 <Screen
                   focused={isFocused}
                   route={descriptor.route}
                   navigation={descriptor.navigation}
-                  headerShown={descriptor.options.headerShown}
-                  headerTransparent={descriptor.options.headerTransparent}
-                  headerStatusBarHeight={
-                    descriptor.options.headerStatusBarHeight
-                  }
+                  headerShown={headerShown}
+                  headerStatusBarHeight={headerStatusBarHeight}
+                  headerTransparent={headerTransparent}
                   header={header({
                     layout: dimensions,
                     route: descriptor.route,

diff --git a/packages/bottom-tabs/src/views/ScreenFallback.tsx b/packages/bottom-tabs/src/views/ScreenFallback.tsx
@@ -6,6 +6,7 @@ type Props = {
   visible: boolean;
   children: React.ReactNode;
   enabled: boolean;
+  freezeOnBlur?: boolean;
   style?: StyleProp<ViewStyle>;
 };
 

diff --git a/packages/drawer/src/types.tsx b/packages/drawer/src/types.tsx
@@ -211,6 +211,15 @@ export type DrawerNavigationOptions = HeaderOptions & {
    * Defaults to `false`.
    */
   unmountOnBlur?: boolean;
+
+  /**
+   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
+   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
+   * Requires `react-native-screens` version >=3.16.0.
+   *
+   * Only supported on iOS and Android.
+   */
+  freezeOnBlur?: boolean;
 };
 
 export type DrawerContentComponentProps = {

diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx
@@ -230,6 +230,7 @@ function DrawerViewBase({
           }
 
           const {
+            freezeOnBlur,
             header = ({ layout, options }: DrawerHeaderProps) => (
               <Header
                 {...options}
@@ -241,6 +242,9 @@ function DrawerViewBase({
                 }
               />
             ),
+            headerShown,
+            headerStatusBarHeight,
+            headerTransparent,
             sceneContainerStyle,
           } = descriptor.options;
 
@@ -250,14 +254,15 @@ function DrawerViewBase({
               style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
               visible={isFocused}
               enabled={detachInactiveScreens}
+              freezeOnBlur={freezeOnBlur}
             >
               <Screen
                 focused={isFocused}
                 route={descriptor.route}
                 navigation={descriptor.navigation}
-                headerShown={descriptor.options.headerShown}
-                headerTransparent={descriptor.options.headerTransparent}
-                headerStatusBarHeight={descriptor.options.headerStatusBarHeight}
+                headerShown={headerShown}
+                headerStatusBarHeight={headerStatusBarHeight}
+                headerTransparent={headerTransparent}
                 header={header({
                   layout: dimensions,
                   route: descriptor.route,

diff --git a/packages/drawer/src/views/ScreenFallback.tsx b/packages/drawer/src/views/ScreenFallback.tsx
@@ -6,6 +6,7 @@ type Props = {
   visible: boolean;
   children: React.ReactNode;
   enabled: boolean;
+  freezeOnBlur?: boolean;
   style?: StyleProp<ViewStyle>;
 };
 

diff --git a/packages/native-stack/src/types.tsx b/packages/native-stack/src/types.tsx
@@ -486,6 +486,14 @@ export type NativeStackNavigationOptions = {
    * Only supported on iOS and Android.
    */
   orientation?: ScreenProps['screenOrientation'];
+  /**
+   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
+   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
+   * Requires `react-native-screens` version >=3.16.0.
+   *
+   * Only supported on iOS and Android.
+   */
+  freezeOnBlur?: boolean;
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<

diff --git a/packages/native-stack/src/views/NativeStackView.native.tsx b/packages/native-stack/src/views/NativeStackView.native.tsx
@@ -123,7 +123,7 @@ type SceneViewProps = {
   onAppear: () => void;
   onDisappear: () => void;
   onDismissed: ScreenProps['onDismissed'];
-  onHeaderBackButtonClicked: () => void;
+  onHeaderBackButtonClicked: ScreenProps['onHeaderBackButtonClicked'];
   onNativeDismissCancelled: ScreenProps['onDismissed'];
 };
 
@@ -156,6 +156,7 @@ const SceneView = ({
     statusBarStyle,
     statusBarTranslucent,
     statusBarColor,
+    freezeOnBlur,
   } = options;
 
   let {
@@ -270,12 +271,13 @@ const SceneView = ({
       onDisappear={onDisappear}
       onDismissed={onDismissed}
       isNativeStack
-      // Props for enabling preventing removal in native-stack
       nativeBackButtonDismissalEnabled={false} // on Android
-      // @ts-expect-error prop not publicly exported from rn-screens
-      preventNativeDismiss={isRemovePrevented} // on iOS
       onHeaderBackButtonClicked={onHeaderBackButtonClicked}
+      // @ts-ignore props not exported from rn-screens
+      preventNativeDismiss={isRemovePrevented} // on iOS
       onNativeDismissCancelled={onNativeDismissCancelled}
+      // this prop is available since rn-screens 3.16
+      freezeOnBlur={freezeOnBlur}
     >
       <NavigationContext.Provider value={navigation}>
         <NavigationRouteContext.Provider value={route}>

diff --git a/packages/stack/src/types.tsx b/packages/stack/src/types.tsx
@@ -333,6 +333,14 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Defaults to `true`.
      */
     keyboardHandlingEnabled?: boolean;
+    /**
+     * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
+     * Defaults to `true` when `enableFreeze()` is run at the top of the application.
+     * Requires `react-native-screens` version >=3.16.0.
+     *
+     * Only supported on iOS and Android.
+     */
+    freezeOnBlur?: boolean;
   };
 
 export type StackNavigationConfig = {

diff --git a/packages/stack/src/views/Screens.tsx b/packages/stack/src/views/Screens.tsx
@@ -31,6 +31,7 @@ export const MaybeScreen = ({
   enabled: boolean;
   active: 0 | 1 | Animated.AnimatedInterpolation;
   children: React.ReactNode;
+  freezeOnBlur?: boolean;
 }) => {
   if (Screens != null) {
     return (

diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
@@ -604,6 +604,7 @@ export default class CardStack extends React.Component<Props, State> {
               headerTransparent,
               headerStyle,
               headerTintColor,
+              freezeOnBlur,
             } = scene.descriptor.options;
 
             const safeAreaInsetTop = insets.top;
@@ -656,6 +657,7 @@ export default class CardStack extends React.Component<Props, State> {
                 style={StyleSheet.absoluteFill}
                 enabled={detachInactiveScreens}
                 active={isScreenActive}
+                freezeOnBlur={freezeOnBlur}
                 pointerEvents="box-none"
               >
                 <CardContainer