@react-navigation/native-stack 7.1.3 → 7.1.5

package/src/views/NativeStackView.native.tsx

@@ -68,6 +68,8 @@ type SceneViewProps = {
   onSheetDetentChanged: ScreenProps['onSheetDetentChanged'];
 };
 
+const useNativeDriver = Platform.OS !== 'web';
+
 const SceneView = ({
   index,
   focused,
@@ -273,123 +275,125 @@ const SceneView = ({
   });
 
   return (
-    <ScreenStackItem
-      key={route.key}
-      screenId={route.key}
-      activityState={isPreloaded ? 0 : 2}
-      style={StyleSheet.absoluteFill}
-      accessibilityElementsHidden={!focused}
-      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
-      customAnimationOnSwipe={animationMatchesGesture}
-      fullScreenSwipeEnabled={fullScreenGestureEnabled}
-      fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
-      freezeOnBlur={freezeOnBlur}
-      gestureEnabled={
-        Platform.OS === 'android'
-          ? // This prop enables handling of system back gestures on Android
-            // Since we handle them in JS side, we disable this
-            false
-          : gestureEnabled
-      }
-      homeIndicatorHidden={autoHideHomeIndicator}
-      hideKeyboardOnSwipe={keyboardHandlingEnabled}
-      navigationBarColor={navigationBarColor}
-      navigationBarTranslucent={navigationBarTranslucent}
-      navigationBarHidden={navigationBarHidden}
-      replaceAnimation={animationTypeForReplace}
-      stackPresentation={presentation === 'card' ? 'push' : presentation}
-      stackAnimation={animation}
-      screenOrientation={orientation}
-      sheetAllowedDetents={sheetAllowedDetents}
-      sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
-      sheetGrabberVisible={sheetGrabberVisible}
-      sheetInitialDetentIndex={sheetInitialDetentIndex}
-      sheetCornerRadius={sheetCornerRadius}
-      sheetElevation={sheetElevation}
-      sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
-      statusBarAnimation={statusBarAnimation}
-      statusBarHidden={statusBarHidden}
-      statusBarStyle={statusBarStyle}
-      statusBarColor={statusBarBackgroundColor}
-      statusBarTranslucent={statusBarTranslucent}
-      swipeDirection={gestureDirectionOverride}
-      transitionDuration={animationDuration}
-      onWillAppear={onWillAppear}
-      onWillDisappear={onWillDisappear}
-      onAppear={onAppear}
-      onDisappear={onDisappear}
-      onDismissed={onDismissed}
-      onGestureCancel={onGestureCancel}
-      onSheetDetentChanged={onSheetDetentChanged}
-      gestureResponseDistance={gestureResponseDistance}
-      nativeBackButtonDismissalEnabled={false} // on Android
-      onHeaderBackButtonClicked={onHeaderBackButtonClicked}
-      preventNativeDismiss={isRemovePrevented} // on iOS
-      onNativeDismissCancelled={onNativeDismissCancelled}
-      // Unfortunately, because of the bug that exists on Fabric, where native event drivers
-      // for Animated objects are being created after the first notifications about the header height
-      // from the native side, `onHeaderHeightChange` event does not notify
-      // `animatedHeaderHeight` about initial values on appearing screens at the moment.
-      onHeaderHeightChange={Animated.event(
-        [
-          {
-            nativeEvent: {
-              headerHeight: rawAnimatedHeaderHeight,
-            },
-          },
-        ],
-        {
-          useNativeDriver: true,
-          listener: (e) => {
-            if (
-              Platform.OS === 'android' &&
-              (options.headerBackground != null || options.headerTransparent)
-            ) {
-              // FIXME: On Android, we get 0 if the header is translucent
-              // So we set a default height in that case
-              setHeaderHeight(ANDROID_DEFAULT_HEADER_HEIGHT + topInset);
-              return;
-            }
-
-            if (
-              e.nativeEvent &&
-              typeof e.nativeEvent === 'object' &&
-              'headerHeight' in e.nativeEvent &&
-              typeof e.nativeEvent.headerHeight === 'number'
-            ) {
-              const headerHeight =
-                e.nativeEvent.headerHeight + headerHeightCorrectionOffset;
-
-              // Only debounce if header has large title or search bar
-              // As it's the only case where the header height can change frequently
-              const doesHeaderAnimate =
-                Platform.OS === 'ios' &&
-                (options.headerLargeTitle || options.headerSearchBarOptions);
-
-              if (doesHeaderAnimate) {
-                setHeaderHeightDebounced(headerHeight);
-              } else {
-                setHeaderHeight(headerHeight);
-              }
+    <NavigationContext.Provider value={navigation}>
+      <NavigationRouteContext.Provider value={route}>
+        <ScreenStackItem
+          key={route.key}
+          screenId={route.key}
+          activityState={isPreloaded ? 0 : 2}
+          style={StyleSheet.absoluteFill}
+          accessibilityElementsHidden={!focused}
+          importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+          customAnimationOnSwipe={animationMatchesGesture}
+          fullScreenSwipeEnabled={fullScreenGestureEnabled}
+          fullScreenSwipeShadowEnabled={fullScreenGestureShadowEnabled}
+          freezeOnBlur={freezeOnBlur}
+          gestureEnabled={
+            Platform.OS === 'android'
+              ? // This prop enables handling of system back gestures on Android
+                // Since we handle them in JS side, we disable this
+                false
+              : gestureEnabled
+          }
+          homeIndicatorHidden={autoHideHomeIndicator}
+          hideKeyboardOnSwipe={keyboardHandlingEnabled}
+          navigationBarColor={navigationBarColor}
+          navigationBarTranslucent={navigationBarTranslucent}
+          navigationBarHidden={navigationBarHidden}
+          replaceAnimation={animationTypeForReplace}
+          stackPresentation={presentation === 'card' ? 'push' : presentation}
+          stackAnimation={animation}
+          screenOrientation={orientation}
+          sheetAllowedDetents={sheetAllowedDetents}
+          sheetLargestUndimmedDetentIndex={sheetLargestUndimmedDetentIndex}
+          sheetGrabberVisible={sheetGrabberVisible}
+          sheetInitialDetentIndex={sheetInitialDetentIndex}
+          sheetCornerRadius={sheetCornerRadius}
+          sheetElevation={sheetElevation}
+          sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
+          statusBarAnimation={statusBarAnimation}
+          statusBarHidden={statusBarHidden}
+          statusBarStyle={statusBarStyle}
+          statusBarColor={statusBarBackgroundColor}
+          statusBarTranslucent={statusBarTranslucent}
+          swipeDirection={gestureDirectionOverride}
+          transitionDuration={animationDuration}
+          onWillAppear={onWillAppear}
+          onWillDisappear={onWillDisappear}
+          onAppear={onAppear}
+          onDisappear={onDisappear}
+          onDismissed={onDismissed}
+          onGestureCancel={onGestureCancel}
+          onSheetDetentChanged={onSheetDetentChanged}
+          gestureResponseDistance={gestureResponseDistance}
+          nativeBackButtonDismissalEnabled={false} // on Android
+          onHeaderBackButtonClicked={onHeaderBackButtonClicked}
+          preventNativeDismiss={isRemovePrevented} // on iOS
+          onNativeDismissCancelled={onNativeDismissCancelled}
+          // Unfortunately, because of the bug that exists on Fabric, where native event drivers
+          // for Animated objects are being created after the first notifications about the header height
+          // from the native side, `onHeaderHeightChange` event does not notify
+          // `animatedHeaderHeight` about initial values on appearing screens at the moment.
+          onHeaderHeightChange={Animated.event(
+            [
+              {
+                nativeEvent: {
+                  headerHeight: rawAnimatedHeaderHeight,
+                },
+              },
+            ],
+            {
+              useNativeDriver,
+              listener: (e) => {
+                if (
+                  Platform.OS === 'android' &&
+                  (options.headerBackground != null ||
+                    options.headerTransparent)
+                ) {
+                  // FIXME: On Android, we get 0 if the header is translucent
+                  // So we set a default height in that case
+                  setHeaderHeight(ANDROID_DEFAULT_HEADER_HEIGHT + topInset);
+                  return;
+                }
+
+                if (
+                  e.nativeEvent &&
+                  typeof e.nativeEvent === 'object' &&
+                  'headerHeight' in e.nativeEvent &&
+                  typeof e.nativeEvent.headerHeight === 'number'
+                ) {
+                  const headerHeight =
+                    e.nativeEvent.headerHeight + headerHeightCorrectionOffset;
+
+                  // Only debounce if header has large title or search bar
+                  // As it's the only case where the header height can change frequently
+                  const doesHeaderAnimate =
+                    Platform.OS === 'ios' &&
+                    (options.headerLargeTitle ||
+                      options.headerSearchBarOptions);
+
+                  if (doesHeaderAnimate) {
+                    setHeaderHeightDebounced(headerHeight);
+                  } else {
+                    setHeaderHeight(headerHeight);
+                  }
+                }
+              },
             }
-          },
-        }
-      )}
-      contentStyle={[
-        presentation !== 'transparentModal' &&
-          presentation !== 'containedTransparentModal' && {
-            backgroundColor: colors.background,
-          },
-        contentStyle,
-      ]}
-      headerConfig={headerConfig}
-      unstable_sheetFooter={unstable_sheetFooter}
-      // When ts-expect-error is added, it affects all the props below it
-      // So we keep any props that need it at the end
-      // Otherwise invalid props may not be caught by TypeScript
-    >
-      <NavigationContext.Provider value={navigation}>
-        <NavigationRouteContext.Provider value={route}>
+          )}
+          contentStyle={[
+            presentation !== 'transparentModal' &&
+              presentation !== 'containedTransparentModal' && {
+                backgroundColor: colors.background,
+              },
+            contentStyle,
+          ]}
+          headerConfig={headerConfig}
+          unstable_sheetFooter={unstable_sheetFooter}
+          // When ts-expect-error is added, it affects all the props below it
+          // So we keep any props that need it at the end
+          // Otherwise invalid props may not be caught by TypeScript
+        >
           <AnimatedHeaderHeightContext.Provider value={animatedHeaderHeight}>
             <HeaderHeightContext.Provider
               value={
@@ -441,9 +445,9 @@ const SceneView = ({
               </HeaderShownContext.Provider>
             </HeaderHeightContext.Provider>
           </AnimatedHeaderHeightContext.Provider>
-        </NavigationRouteContext.Provider>
-      </NavigationContext.Provider>
-    </ScreenStackItem>
+        </ScreenStackItem>
+      </NavigationRouteContext.Provider>
+    </NavigationContext.Provider>
   );
 };
 

package/src/views/NativeStackView.tsx

@@ -135,10 +135,8 @@ export function NativeStackView({ state, descriptors, describe }: Props) {
                                       <Image
                                         source={headerBackImageSource}
                                         resizeMode="contain"
-                                        style={[
-                                          styles.backImage,
-                                          { tintColor },
-                                        ]}
+                                        tintColor={tintColor}
+                                        style={styles.backImage}
                                       />
                                     )
                                   : undefined