@react-navigation/native-stack 6.2.0

package/src/views/HeaderConfig.tsx

@@ -0,0 +1,234 @@
+import { HeaderTitle } from '@react-navigation/elements';
+import { Route, useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import {
+  I18nManager,
+  Platform,
+  StyleSheet,
+  TextStyle,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  ScreenStackHeaderBackButtonImage,
+  ScreenStackHeaderCenterView,
+  ScreenStackHeaderConfig,
+  ScreenStackHeaderLeftView,
+  ScreenStackHeaderRightView,
+  ScreenStackHeaderSearchBarView,
+  SearchBar,
+} from 'react-native-screens';
+
+import type { NativeStackNavigationOptions } from '../types';
+import { processFonts } from './FontProcessor';
+
+type Props = NativeStackNavigationOptions & {
+  route: Route<string>;
+  canGoBack: boolean;
+};
+
+export default function HeaderConfig({
+  headerBackImageSource,
+  headerBackButtonMenuEnabled,
+  headerBackTitle,
+  headerBackTitleStyle,
+  headerBackTitleVisible = true,
+  headerBackVisible,
+  headerShadowVisible,
+  headerLargeStyle,
+  headerLargeTitle,
+  headerLargeTitleShadowVisible,
+  headerLargeTitleStyle,
+  headerLeft,
+  headerRight,
+  headerShown,
+  headerStyle,
+  headerBlurEffect,
+  headerTintColor,
+  headerTitle,
+  headerTitleAlign,
+  headerTitleStyle,
+  headerTransparent,
+  headerSearchBarOptions,
+  route,
+  title,
+  canGoBack,
+}: Props): JSX.Element {
+  const insets = useSafeAreaInsets();
+  const { colors } = useTheme();
+  const tintColor =
+    headerTintColor ?? Platform.OS === 'ios' ? colors.primary : colors.text;
+
+  const headerBackTitleStyleFlattened =
+    StyleSheet.flatten(headerBackTitleStyle) || {};
+  const headerLargeTitleStyleFlattened =
+    StyleSheet.flatten(headerLargeTitleStyle) || {};
+  const headerTitleStyleFlattened = StyleSheet.flatten(headerTitleStyle) || {};
+  const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
+  const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
+
+  const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] =
+    processFonts([
+      headerBackTitleStyleFlattened.fontFamily,
+      headerLargeTitleStyleFlattened.fontFamily,
+      headerTitleStyleFlattened.fontFamily,
+    ]);
+
+  const titleText = title !== undefined ? title : route.name;
+  const titleColor =
+    headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text;
+  const titleFontSize = headerTitleStyleFlattened.fontSize;
+  const titleFontWeight = headerTitleStyleFlattened.fontWeight;
+
+  const headerTitleStyleSupported: TextStyle = { color: titleColor };
+
+  if (headerTitleStyleFlattened.fontFamily != null) {
+    headerTitleStyleSupported.fontFamily = headerTitleStyleFlattened.fontFamily;
+  }
+
+  if (titleFontSize != null) {
+    headerTitleStyleSupported.fontSize = titleFontSize;
+  }
+
+  if (titleFontWeight != null) {
+    headerTitleStyleSupported.fontWeight = titleFontWeight;
+  }
+
+  const headerLeftElement = headerLeft?.({
+    tintColor,
+    label: headerBackTitle,
+    canGoBack,
+  });
+  const headerRightElement = headerRight?.({ tintColor });
+  const headerTitleElement =
+    typeof headerTitle === 'function'
+      ? headerTitle({ tintColor, children: titleText })
+      : null;
+
+  if (
+    Platform.OS === 'ios' &&
+    headerSearchBarOptions != null &&
+    SearchBar == null
+  ) {
+    throw new Error(
+      `The current version of 'react-native-screens' doesn't support SearchBar in the header. Please update to the latest version to use this option.`
+    );
+  }
+
+  /**
+   * We need to set this in if:
+   * - Back button should stay visible when `headerLeft` is specified
+   * - If `headerTitle` for Android is specified, so we only need to remove the title and keep the back button
+   */
+  const backButtonInCustomView = headerBackVisible
+    ? headerLeftElement != null
+    : Platform.OS === 'android' && headerTitleElement != null;
+
+  return (
+    <ScreenStackHeaderConfig
+      backButtonInCustomView={backButtonInCustomView}
+      backgroundColor={
+        headerStyleFlattened.backgroundColor ??
+        (headerTransparent ? 'transparent' : colors.card)
+      }
+      backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
+      backTitleFontFamily={backTitleFontFamily}
+      backTitleFontSize={headerBackTitleStyleFlattened.fontSize}
+      blurEffect={headerBlurEffect}
+      color={tintColor}
+      direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
+      disableBackButtonMenu={headerBackButtonMenuEnabled === false}
+      hidden={headerShown === false}
+      hideBackButton={headerBackVisible === false}
+      hideShadow={headerShadowVisible === false}
+      largeTitle={headerLargeTitle}
+      largeTitleBackgroundColor={headerLargeStyleFlattened.backgroundColor}
+      largeTitleColor={headerLargeTitleStyleFlattened.color}
+      largeTitleFontFamily={largeTitleFontFamily}
+      largeTitleFontSize={headerLargeTitleStyleFlattened.fontSize}
+      largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
+      largeTitleHideShadow={headerLargeTitleShadowVisible === false}
+      title={typeof headerTitle === 'string' ? headerTitle : titleText}
+      titleColor={titleColor}
+      titleFontFamily={titleFontFamily}
+      titleFontSize={titleFontSize}
+      titleFontWeight={titleFontWeight}
+      topInsetEnabled={insets.top !== 0}
+      translucent={
+        // This defaults to `true`, so we can't pass `undefined`
+        headerTransparent === true
+      }
+    >
+      {Platform.OS === 'ios' ? (
+        <>
+          {headerLeftElement != null ? (
+            <ScreenStackHeaderLeftView>
+              {headerLeftElement}
+            </ScreenStackHeaderLeftView>
+          ) : null}
+          {headerTitleElement != null ? (
+            <ScreenStackHeaderCenterView>
+              {headerTitleElement}
+            </ScreenStackHeaderCenterView>
+          ) : null}
+        </>
+      ) : (
+        <>
+          {headerLeftElement != null || typeof headerTitle === 'function' ? (
+            <ScreenStackHeaderLeftView>
+              <View style={styles.row}>
+                {headerLeftElement}
+                {headerTitleAlign !== 'center' ? (
+                  typeof headerTitle === 'function' ? (
+                    headerTitleElement
+                  ) : (
+                    <HeaderTitle
+                      tintColor={tintColor}
+                      style={headerTitleStyleSupported}
+                    >
+                      {titleText}
+                    </HeaderTitle>
+                  )
+                ) : null}
+              </View>
+            </ScreenStackHeaderLeftView>
+          ) : null}
+          {headerTitleAlign === 'center' ? (
+            <ScreenStackHeaderCenterView>
+              {typeof headerTitle === 'function' ? (
+                headerTitleElement
+              ) : (
+                <HeaderTitle
+                  tintColor={tintColor}
+                  style={headerTitleStyleSupported}
+                >
+                  {titleText}
+                </HeaderTitle>
+              )}
+            </ScreenStackHeaderCenterView>
+          ) : null}
+        </>
+      )}
+      {headerBackImageSource !== undefined ? (
+        <ScreenStackHeaderBackButtonImage source={headerBackImageSource} />
+      ) : null}
+      {headerRightElement != null ? (
+        <ScreenStackHeaderRightView>
+          {headerRightElement}
+        </ScreenStackHeaderRightView>
+      ) : null}
+      {Platform.OS === 'ios' && headerSearchBarOptions != null ? (
+        <ScreenStackHeaderSearchBarView>
+          <SearchBar {...headerSearchBarOptions} />
+        </ScreenStackHeaderSearchBarView>
+      ) : null}
+    </ScreenStackHeaderConfig>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/views/NativeStackView.native.tsx

@@ -0,0 +1,331 @@
+import {
+  getDefaultHeaderHeight,
+  getHeaderTitle,
+  HeaderHeightContext,
+  HeaderShownContext,
+  SafeAreaProviderCompat,
+} from '@react-navigation/elements';
+import {
+  ParamListBase,
+  Route,
+  StackActions,
+  StackNavigationState,
+  useTheme,
+} from '@react-navigation/native';
+import * as React from 'react';
+import { Platform, PlatformIOSStatic, StyleSheet } from 'react-native';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import {
+  Screen,
+  ScreenStack,
+  StackPresentationTypes,
+} from 'react-native-screens';
+import warnOnce from 'warn-once';
+
+import type {
+  NativeStackDescriptor,
+  NativeStackDescriptorMap,
+  NativeStackNavigationHelpers,
+  NativeStackNavigationOptions,
+} from '../types';
+import DebugContainer from './DebugContainer';
+import HeaderConfig from './HeaderConfig';
+
+const isAndroid = Platform.OS === 'android';
+
+const MaybeNestedStack = ({
+  options,
+  route,
+  presentation,
+  children,
+}: {
+  options: NativeStackNavigationOptions;
+  route: Route<string>;
+  presentation: Exclude<StackPresentationTypes, 'push'> | 'card';
+  children: React.ReactNode;
+}) => {
+  const { colors } = useTheme();
+  const { header, headerShown = true, contentStyle } = options;
+
+  const isHeaderInModal = isAndroid
+    ? false
+    : presentation !== 'card' && headerShown === true && header === undefined;
+
+  const headerShownPreviousRef = React.useRef(headerShown);
+
+  React.useEffect(() => {
+    warnOnce(
+      !isAndroid &&
+        presentation !== 'card' &&
+        headerShownPreviousRef.current !== headerShown,
+      `Dynamically changing 'headerShown' in modals will result in remounting the screen and losing all local state. See options for the screen '${route.name}'.`
+    );
+
+    headerShownPreviousRef.current = headerShown;
+  }, [headerShown, presentation, route.name]);
+
+  const content = (
+    <DebugContainer
+      style={[
+        styles.container,
+        presentation !== 'transparentModal' &&
+          presentation !== 'containedTransparentModal' && {
+            backgroundColor: colors.background,
+          },
+        contentStyle,
+      ]}
+      stackPresentation={presentation === 'card' ? 'push' : presentation}
+    >
+      {children}
+    </DebugContainer>
+  );
+
+  const insets = useSafeAreaInsets();
+  const dimensions = useSafeAreaFrame();
+  // landscape is meaningful only for iPhone
+  const isLandscape =
+    dimensions.width > dimensions.height &&
+    !(Platform as PlatformIOSStatic).isPad &&
+    !(Platform as PlatformIOSStatic).isTVOS;
+  // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
+  const isFullScreenModal =
+    presentation !== 'modal' && presentation !== 'formSheet';
+  const topInset = isFullScreenModal && !isLandscape ? insets.top : 0;
+  const headerHeight = getDefaultHeaderHeight(
+    dimensions,
+    !isFullScreenModal,
+    topInset
+  );
+
+  if (isHeaderInModal) {
+    return (
+      <ScreenStack style={styles.container}>
+        <Screen enabled style={StyleSheet.absoluteFill}>
+          <HeaderShownContext.Provider value>
+            <HeaderHeightContext.Provider value={headerHeight}>
+              <HeaderConfig {...options} route={route} canGoBack />
+              {content}
+            </HeaderHeightContext.Provider>
+          </HeaderShownContext.Provider>
+        </Screen>
+      </ScreenStack>
+    );
+  }
+
+  return content;
+};
+
+type SceneViewProps = {
+  index: number;
+  descriptor: NativeStackDescriptor;
+  previousDescriptor?: NativeStackDescriptor;
+  onWillDisappear: () => void;
+  onAppear: () => void;
+  onDisappear: () => void;
+  onDismissed: () => void;
+};
+
+const SceneView = ({
+  descriptor,
+  previousDescriptor,
+  index,
+  onWillDisappear,
+  onAppear,
+  onDisappear,
+  onDismissed,
+}: SceneViewProps) => {
+  const { route, navigation, options, render } = descriptor;
+  const {
+    gestureEnabled,
+    header,
+    headerShown,
+    animationTypeForReplace = 'pop',
+    animation,
+    orientation,
+    statusBarAnimation,
+    statusBarHidden,
+    statusBarStyle,
+  } = options;
+
+  let { presentation = 'card' } = options;
+
+  if (index === 0) {
+    // first screen should always be treated as `card`, it resolves problems with no header animation
+    // for navigator with first screen as `modal` and the next as `card`
+    presentation = 'card';
+  }
+
+  const isHeaderInPush = isAndroid
+    ? headerShown
+    : presentation === 'card' && headerShown !== false;
+
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const insets = useSafeAreaInsets();
+  const parentHeaderHeight = React.useContext(HeaderHeightContext);
+  const headerHeight = getDefaultHeaderHeight(
+    useSafeAreaFrame(),
+    false,
+    insets.top
+  );
+
+  return (
+    <Screen
+      key={route.key}
+      enabled
+      style={StyleSheet.absoluteFill}
+      gestureEnabled={
+        isAndroid
+          ? // This prop enables handling of system back gestures on Android
+            // Since we handle them in JS side, we disable this
+            false
+          : gestureEnabled
+      }
+      replaceAnimation={animationTypeForReplace}
+      stackPresentation={presentation === 'card' ? 'push' : presentation}
+      stackAnimation={animation}
+      screenOrientation={orientation}
+      statusBarAnimation={statusBarAnimation}
+      statusBarHidden={statusBarHidden}
+      statusBarStyle={statusBarStyle}
+      onWillDisappear={onWillDisappear}
+      onAppear={onAppear}
+      onDisappear={onDisappear}
+      onDismissed={onDismissed}
+    >
+      <HeaderShownContext.Provider
+        value={isParentHeaderShown || isHeaderInPush !== false}
+      >
+        <HeaderHeightContext.Provider
+          value={
+            isHeaderInPush !== false ? headerHeight : parentHeaderHeight ?? 0
+          }
+        >
+          {header !== undefined && headerShown !== false ? (
+            // TODO: expose custom header height
+            header({
+              back: previousDescriptor
+                ? {
+                    title: getHeaderTitle(
+                      previousDescriptor.options,
+                      previousDescriptor.route.name
+                    ),
+                  }
+                : undefined,
+              options,
+              route,
+              navigation,
+            })
+          ) : (
+            <HeaderConfig
+              {...options}
+              route={route}
+              headerShown={isHeaderInPush}
+              canGoBack={index !== 0}
+            />
+          )}
+          <MaybeNestedStack
+            options={options}
+            route={route}
+            presentation={presentation}
+          >
+            {render()}
+          </MaybeNestedStack>
+        </HeaderHeightContext.Provider>
+      </HeaderShownContext.Provider>
+    </Screen>
+  );
+};
+
+type Props = {
+  state: StackNavigationState<ParamListBase>;
+  navigation: NativeStackNavigationHelpers;
+  descriptors: NativeStackDescriptorMap;
+};
+
+function NativeStackViewInner({ state, navigation, descriptors }: Props) {
+  const [nextDismissedKey, setNextDismissedKey] =
+    React.useState<string | null>(null);
+
+  const dismissedRouteName = nextDismissedKey
+    ? state.routes.find((route) => route.key === nextDismissedKey)?.name
+    : null;
+
+  React.useEffect(() => {
+    if (dismissedRouteName) {
+      const message =
+        `The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
+        `This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
+        `Consider using 'gestureEnabled: false' to prevent back gesture and use a custom back button with 'headerLeft' option to override the native behavior.`;
+
+      console.error(message);
+    }
+  }, [dismissedRouteName]);
+
+  return (
+    <ScreenStack style={styles.container}>
+      {state.routes.map((route, index) => {
+        const descriptor = descriptors[route.key];
+        const previousKey = state.routes[index - 1]?.key;
+        const previousDescriptor = previousKey
+          ? descriptors[previousKey]
+          : undefined;
+
+        return (
+          <SceneView
+            key={route.key}
+            index={index}
+            descriptor={descriptor}
+            previousDescriptor={previousDescriptor}
+            onWillDisappear={() => {
+              navigation.emit({
+                type: 'transitionStart',
+                data: { closing: true },
+                target: route.key,
+              });
+            }}
+            onAppear={() => {
+              navigation.emit({
+                type: 'transitionEnd',
+                data: { closing: false },
+                target: route.key,
+              });
+            }}
+            onDisappear={() => {
+              navigation.emit({
+                type: 'transitionEnd',
+                data: { closing: true },
+                target: route.key,
+              });
+            }}
+            onDismissed={() => {
+              navigation.dispatch({
+                ...StackActions.pop(),
+                source: route.key,
+                target: state.key,
+              });
+
+              setNextDismissedKey(route.key);
+            }}
+          />
+        );
+      })}
+    </ScreenStack>
+  );
+}
+
+export default function NativeStackView(props: Props) {
+  return (
+    <SafeAreaProviderCompat>
+      <NativeStackViewInner {...props} />
+    </SafeAreaProviderCompat>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});