react-native-screens 3.20.0 → 3.21.1

package/src/createNativeStackNavigator.tsx

@@ -1,594 +0,0 @@
-import React from 'react';
-import {
-  Platform,
-  StyleSheet,
-  Animated,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-import {
-  ScreenContext,
-  ScreenStack,
-  ScreenStackHeaderBackButtonImage,
-  ScreenStackHeaderCenterView,
-  ScreenStackHeaderConfig,
-  ScreenStackHeaderConfigProps,
-  ScreenStackHeaderLeftView,
-  ScreenStackHeaderRightView,
-  ScreenStackHeaderSearchBarView,
-  SearchBar,
-  StackPresentationTypes,
-} from 'react-native-screens';
-import {
-  createNavigator,
-  SceneView,
-  StackActions,
-  StackRouter,
-  NavigationRouteConfigMap,
-  CreateNavigatorConfig,
-  NavigationStackRouterConfig,
-  NavigationParams,
-  NavigationRoute,
-  NavigationDescriptor,
-  NavigationState,
-  NavigationNavigator,
-  NavigationAction,
-  NavigationProp,
-  NavigationScreenProp,
-} from 'react-navigation';
-import { NativeStackNavigationOptions as NativeStackNavigationOptionsV5 } from './native-stack/types';
-import { HeaderBackButton } from 'react-navigation-stack';
-import {
-  StackNavigationHelpers,
-  StackNavigationProp,
-  Layout,
-} from 'react-navigation-stack/src/vendor/types';
-
-const REMOVE_ACTION = 'NativeStackNavigator/REMOVE';
-
-const isAndroid = Platform.OS === 'android';
-
-let didWarn = isAndroid;
-
-function renderComponentOrThunk(componentOrThunk: unknown, props: unknown) {
-  if (typeof componentOrThunk === 'function') {
-    return componentOrThunk(props);
-  }
-  return componentOrThunk;
-}
-
-type NativeStackRemoveNavigationAction = {
-  type: typeof REMOVE_ACTION;
-  immediate: boolean;
-  dismissCount: number;
-  key?: string;
-};
-
-export type NativeStackNavigationProp = StackNavigationProp;
-
-export type NativeStackNavigationOptions = StackNavigatorOptions &
-  NativeStackNavigationOptionsV5 &
-  BackButtonProps & {
-    onWillAppear?: () => void;
-    onAppear?: () => void;
-    onWillDisappear?: () => void;
-    onDisappear?: () => void;
-    // these props differ from the ones used in v5 `native-stack`, and we would like to keep the API consistent between versions
-    /** Use `headerHideShadow` to be consistent with v5 `native-stack` */
-    hideShadow?: boolean;
-    /** Use `headerLargeTitle` to be consistent with v5 `native-stack` */
-    largeTitle?: boolean;
-    /** Use `headerLargeTitleHideShadow` to be consistent with v5 `native-stack` */
-    largeTitleHideShadow?: boolean;
-    /** Use `headerTranslucent` to be consistent with v5 `native-stack` */
-    translucent?: boolean;
-  };
-
-// these are adopted from `stack` navigator
-type StackNavigatorOptions = {
-  /** This is an option from `stackNavigator` and it hides the header when set to `null`. Use `headerShown` instead to be consistent with v5 `native-stack`. */
-  header?: React.ComponentType<Record<string, unknown>> | null;
-  /** This is an option from `stackNavigator` and it controls the stack presentation along with `mode` prop. Use `stackPresentation` instead to be consistent with v5 `native-stack` */
-  cardTransparent?: boolean;
-  /** This is an option from `stackNavigator` and it sets stack animation to none when `false` passed. Use `stackAnimation: 'none'` instead to be consistent with v5 `native-stack` */
-  animationEnabled?: boolean;
-  cardStyle?: StyleProp<ViewStyle>;
-};
-
-// these are the props used for rendering back button taken from `react-navigation-stack`
-type BackButtonProps = {
-  headerBackImage?: (props: { tintColor: string }) => React.ReactNode;
-  headerPressColorAndroid?: string;
-  headerTintColor?: string;
-  backButtonTitle?: string;
-  truncatedBackButtonTitle?: string;
-  backTitleVisible?: boolean;
-  headerBackTitleStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
-  layoutPreset?: Layout;
-};
-
-type NativeStackDescriptor = NavigationDescriptor<
-  NavigationParams,
-  NativeStackNavigationOptions
->;
-
-type NativeStackDescriptorMap = {
-  [key: string]: NativeStackDescriptor;
-};
-
-// these are the props used for rendering back button taken from `react-navigation-stack`
-type NativeStackNavigationConfig = {
-  /** This is an option from `stackNavigator` and controls the stack presentation along with `cardTransparent` prop. Use `stackPresentation` instead to be consistent with v5 `native-stack` */
-  mode?: 'modal' | 'containedModal';
-  /** This is an option from `stackNavigator` and makes the header hide when set to `none`. Use `headerShown` instead to be consistent with v5 `native-stack` */
-  headerMode?: 'none';
-  /** This is an option from `stackNavigator` and controls the stack presentation along with `mode` prop. Use `stackPresentation` instead to be consistent with v5 `native-stack` */
-  transparentCard?: boolean;
-};
-
-function removeScene(
-  route: NavigationRoute<NavigationParams>,
-  dismissCount: number,
-  navigation: StackNavigationHelpers
-) {
-  navigation.dispatch({
-    // @ts-ignore special navigation action for native stack
-    type: REMOVE_ACTION,
-    immediate: true,
-    key: route.key,
-    dismissCount,
-  });
-}
-
-function onAppear(
-  route: NavigationRoute<NavigationParams>,
-  descriptor: NativeStackDescriptor,
-  navigation: StackNavigationHelpers
-) {
-  descriptor.options?.onAppear?.();
-  navigation.dispatch(
-    StackActions.completeTransition({
-      toChildKey: route.key,
-      key: navigation.state.key,
-    })
-  );
-}
-
-function onFinishTransitioning(navigation: StackNavigationHelpers) {
-  const { routes } = navigation.state;
-  const lastRoute = routes?.length && routes[routes.length - 1];
-
-  if (lastRoute) {
-    navigation.dispatch(
-      StackActions.completeTransition({
-        toChildKey: lastRoute.key,
-        key: navigation.state.key,
-      })
-    );
-  }
-}
-
-function renderHeaderConfig(
-  index: number,
-  route: NavigationRoute<NavigationParams>,
-  descriptor: NativeStackDescriptor,
-  navigationConfig: NativeStackNavigationConfig
-) {
-  const { options } = descriptor;
-  const { headerMode } = navigationConfig;
-
-  const {
-    backButtonInCustomView,
-    direction,
-    disableBackButtonMenu,
-    headerBackTitle,
-    headerBackTitleStyle,
-    headerBackTitleVisible,
-    headerHideBackButton,
-    headerHideShadow,
-    headerLargeStyle,
-    headerLargeTitle,
-    headerLargeTitleHideShadow,
-    headerLargeTitleStyle,
-    headerShown,
-    headerStyle,
-    headerTintColor,
-    headerTitleStyle,
-    headerTopInsetEnabled = true,
-    headerTranslucent,
-    hideShadow,
-    largeTitle,
-    largeTitleHideShadow,
-    title,
-    translucent,
-  } = options;
-
-  const scene = {
-    index,
-    key: route.key,
-    route,
-    descriptor,
-  };
-
-  const headerOptions: ScreenStackHeaderConfigProps = {
-    backButtonInCustomView,
-    backTitle: headerBackTitleVisible === false ? '' : headerBackTitle,
-    backTitleFontFamily: headerBackTitleStyle?.fontFamily,
-    backTitleFontSize: headerBackTitleStyle?.fontSize,
-    color: headerTintColor,
-    direction,
-    disableBackButtonMenu,
-    topInsetEnabled: headerTopInsetEnabled,
-    hideBackButton: headerHideBackButton,
-    hideShadow: headerHideShadow || hideShadow,
-    largeTitle: headerLargeTitle || largeTitle,
-    largeTitleBackgroundColor:
-      headerLargeStyle?.backgroundColor ||
-      // @ts-ignore old implementation, will not be present in TS API, but can be used here
-      headerLargeTitleStyle?.backgroundColor,
-    largeTitleColor: headerLargeTitleStyle?.color,
-    largeTitleFontFamily: headerLargeTitleStyle?.fontFamily,
-    largeTitleFontSize: headerLargeTitleStyle?.fontSize,
-    largeTitleFontWeight: headerLargeTitleStyle?.fontWeight,
-    largeTitleHideShadow: largeTitleHideShadow || headerLargeTitleHideShadow,
-    title,
-    titleColor: headerTitleStyle?.color || headerTintColor,
-    titleFontFamily: headerTitleStyle?.fontFamily,
-    titleFontSize: headerTitleStyle?.fontSize,
-    titleFontWeight: headerTitleStyle?.fontWeight,
-    translucent: headerTranslucent || translucent || false,
-  };
-
-  const hasHeader =
-    headerShown !== false && headerMode !== 'none' && options.header !== null;
-  if (!hasHeader) {
-    return <ScreenStackHeaderConfig {...headerOptions} hidden />;
-  }
-
-  if (headerStyle !== undefined) {
-    headerOptions.backgroundColor = headerStyle.backgroundColor;
-    headerOptions.blurEffect = headerStyle.blurEffect;
-  }
-
-  const children = [];
-
-  if (options.backButtonImage) {
-    children.push(
-      <ScreenStackHeaderBackButtonImage
-        key="backImage"
-        source={options.backButtonImage}
-      />
-    );
-  }
-
-  if (Platform.OS === 'ios' && options.searchBar) {
-    children.push(
-      <ScreenStackHeaderSearchBarView>
-        <SearchBar {...options.searchBar} />
-      </ScreenStackHeaderSearchBarView>
-    );
-  }
-
-  if (options.headerLeft !== undefined) {
-    children.push(
-      <ScreenStackHeaderLeftView key="left">
-        {renderComponentOrThunk(options.headerLeft, { scene })}
-      </ScreenStackHeaderLeftView>
-    );
-  } else if (options.headerBackImage !== undefined) {
-    const goBack = () => {
-      // Go back on next tick because button ripple effect needs to happen on Android
-      requestAnimationFrame(() => {
-        descriptor.navigation.goBack(descriptor.key);
-      });
-    };
-
-    children.push(
-      <ScreenStackHeaderLeftView key="left">
-        <HeaderBackButton
-          onPress={goBack}
-          pressColorAndroid={options.headerPressColorAndroid}
-          tintColor={options.headerTintColor}
-          backImage={options.headerBackImage}
-          label={options.backButtonTitle}
-          truncatedLabel={options.truncatedBackButtonTitle}
-          labelVisible={options.backTitleVisible}
-          labelStyle={options.headerBackTitleStyle}
-          titleLayout={options.layoutPreset}
-          // @ts-ignore old props kept for very old version of `react-navigation-stack`
-          title={options.backButtonTitle}
-          truncatedTitle={options.truncatedBackButtonTitle}
-          backTitleVisible={options.backTitleVisible}
-          titleStyle={options.headerBackTitleStyle}
-          layoutPreset={options.layoutPreset}
-          scene={scene}
-        />
-      </ScreenStackHeaderLeftView>
-    );
-  }
-
-  if (options.headerTitle) {
-    if (title === undefined && typeof options.headerTitle === 'string') {
-      headerOptions.title = options.headerTitle;
-    } else {
-      children.push(
-        <ScreenStackHeaderCenterView key="center">
-          {renderComponentOrThunk(options.headerTitle, { scene })}
-        </ScreenStackHeaderCenterView>
-      );
-    }
-  }
-
-  if (options.headerRight) {
-    children.push(
-      <ScreenStackHeaderRightView key="right">
-        {renderComponentOrThunk(options.headerRight, { scene })}
-      </ScreenStackHeaderRightView>
-    );
-  }
-
-  if (children.length > 0) {
-    headerOptions.children = children;
-  }
-
-  return <ScreenStackHeaderConfig {...headerOptions} />;
-}
-
-const MaybeNestedStack = ({
-  isHeaderInModal,
-  screenProps,
-  route,
-  navigation,
-  SceneComponent,
-  index,
-  descriptor,
-  navigationConfig,
-}: {
-  isHeaderInModal: boolean;
-  screenProps: unknown;
-  route: NavigationRoute<NavigationParams>;
-  navigation: NavigationScreenProp<
-    NavigationRoute<NavigationParams>,
-    NavigationParams
-  >;
-  SceneComponent: React.ComponentType<Record<string, unknown>>;
-  index: number;
-  descriptor: NativeStackDescriptor;
-  navigationConfig: NativeStackNavigationConfig;
-}) => {
-  const Screen = React.useContext(ScreenContext);
-
-  if (isHeaderInModal) {
-    return (
-      <ScreenStack style={styles.scenes}>
-        <Screen style={StyleSheet.absoluteFill} enabled isNativeStack>
-          {renderHeaderConfig(index, route, descriptor, navigationConfig)}
-          <SceneView
-            screenProps={screenProps}
-            navigation={navigation}
-            component={SceneComponent}
-          />
-        </Screen>
-      </ScreenStack>
-    );
-  }
-  return (
-    <SceneView
-      screenProps={screenProps}
-      navigation={navigation}
-      component={SceneComponent}
-    />
-  );
-};
-
-type StackViewProps = {
-  navigation: StackNavigationHelpers;
-  descriptors: NativeStackDescriptorMap;
-  navigationConfig: NativeStackNavigationConfig;
-  screenProps: unknown;
-};
-
-function StackView({
-  navigation,
-  descriptors,
-  navigationConfig,
-  screenProps,
-}: StackViewProps) {
-  const { routes } = navigation.state;
-  const Screen = React.useContext(ScreenContext);
-  return (
-    <ScreenStack
-      style={styles.scenes}
-      onFinishTransitioning={() => onFinishTransitioning(navigation)}
-    >
-      {routes.map((route, index) => {
-        const descriptor = descriptors[route.key];
-        const { getComponent, options } = descriptor;
-        const routeNavigationProp = descriptor.navigation;
-        const { mode, transparentCard } = navigationConfig;
-        const SceneComponent = getComponent();
-
-        let stackPresentation: StackPresentationTypes = 'push';
-
-        if (options.stackPresentation) {
-          stackPresentation = options.stackPresentation;
-        } else {
-          // this shouldn't be used because we have a prop for that
-          if (mode === 'modal' || mode === 'containedModal') {
-            stackPresentation = mode;
-            if (transparentCard || options.cardTransparent) {
-              stackPresentation =
-                mode === 'containedModal'
-                  ? 'containedTransparentModal'
-                  : 'transparentModal';
-            }
-          }
-        }
-        let stackAnimation = options.stackAnimation;
-        if (options.animationEnabled === false) {
-          stackAnimation = 'none';
-        }
-
-        const hasHeader =
-          options.headerShown !== false &&
-          navigationConfig?.headerMode !== 'none' &&
-          options.header !== null;
-
-        if (
-          !didWarn &&
-          stackPresentation !== 'push' &&
-          options.headerShown !== undefined
-        ) {
-          didWarn = true;
-          console.warn(
-            'Be aware that changing the visibility of header in modal on iOS will result in resetting the state of the screen.'
-          );
-        }
-
-        const isHeaderInModal = isAndroid
-          ? false
-          : stackPresentation !== 'push' &&
-            hasHeader &&
-            options.headerShown === true;
-        const isHeaderInPush = isAndroid
-          ? hasHeader
-          : stackPresentation === 'push' && hasHeader;
-
-        return (
-          <Screen
-            key={`screen_${route.key}`}
-            enabled
-            isNativeStack
-            style={[StyleSheet.absoluteFill, options.cardStyle]}
-            stackAnimation={stackAnimation}
-            customAnimationOnSwipe={options.customAnimationOnSwipe}
-            stackPresentation={stackPresentation}
-            replaceAnimation={
-              options.replaceAnimation === undefined
-                ? 'pop'
-                : options.replaceAnimation
-            }
-            pointerEvents={
-              index === navigation.state.routes.length - 1 ? 'auto' : 'none'
-            }
-            gestureEnabled={
-              Platform.OS === 'android'
-                ? false
-                : options.gestureEnabled === undefined
-                ? true
-                : options.gestureEnabled
-            }
-            nativeBackButtonDismissalEnabled={
-              options.nativeBackButtonDismissalEnabled
-            }
-            fullScreenSwipeEnabled={options.fullScreenSwipeEnabled}
-            screenOrientation={options.screenOrientation}
-            statusBarAnimation={options.statusBarAnimation}
-            statusBarColor={options.statusBarColor}
-            statusBarHidden={options.statusBarHidden}
-            statusBarStyle={options.statusBarStyle}
-            statusBarTranslucent={options.statusBarTranslucent}
-            onAppear={() => onAppear(route, descriptor, routeNavigationProp)}
-            onWillAppear={() => options?.onWillAppear?.()}
-            onWillDisappear={() => options?.onWillDisappear?.()}
-            onDisappear={() => options?.onDisappear?.()}
-            onHeaderBackButtonClicked={() =>
-              removeScene(route, 1, routeNavigationProp)
-            }
-            onDismissed={(e) =>
-              removeScene(
-                route,
-                e.nativeEvent.dismissCount,
-                routeNavigationProp
-              )
-            }
-          >
-            {isHeaderInPush &&
-              renderHeaderConfig(index, route, descriptor, navigationConfig)}
-            <MaybeNestedStack
-              isHeaderInModal={isHeaderInModal}
-              screenProps={screenProps}
-              route={route}
-              navigation={routeNavigationProp}
-              SceneComponent={SceneComponent}
-              index={index}
-              descriptor={descriptor}
-              navigationConfig={navigationConfig}
-            />
-          </Screen>
-        );
-      })}
-    </ScreenStack>
-  );
-}
-
-const styles = StyleSheet.create({
-  scenes: { flex: 1 },
-});
-
-function createStackNavigator(
-  routeConfigMap: NavigationRouteConfigMap<
-    NativeStackNavigationOptions,
-    StackNavigationProp
-  >,
-  stackConfig: CreateNavigatorConfig<
-    NativeStackNavigationConfig,
-    NavigationStackRouterConfig,
-    NativeStackNavigationOptions,
-    StackNavigationProp
-  > = {}
-): NavigationNavigator<
-  Record<string, unknown>,
-  NavigationProp<NavigationState>
-> {
-  const router = StackRouter(routeConfigMap, stackConfig);
-
-  // below we override getStateForAction method in order to add handling for
-  // a custom native stack navigation action. The action REMOVE that we want to
-  // add works in a similar way to POP, but it does not remove all the routes
-  // that sit on top of the removed route. For example if we have three routes
-  // [a,b,c] and call POP on b, then both b and c will go away. In case we
-  // call REMOVE on b, only b will be removed from the stack and the resulting
-  // state will be [a, c]
-  const superGetStateForAction = router.getStateForAction;
-  router.getStateForAction = (
-    action: NavigationAction | NativeStackRemoveNavigationAction,
-    state
-  ) => {
-    if (action.type === REMOVE_ACTION) {
-      const { key, immediate, dismissCount } = action;
-      let backRouteIndex = state.index;
-      if (key) {
-        const backRoute = state.routes.find(
-          (route: NavigationRoute<NavigationParams>) => route.key === key
-        );
-        backRouteIndex = state.routes.indexOf(backRoute);
-      }
-
-      if (backRouteIndex > 0) {
-        const newRoutes = [...state.routes];
-        if (dismissCount > 1) {
-          // when dismissing with iOS 14 native header back button, we can pop more than 1 screen at a time
-          // and the `backRouteIndex` is the index of the previous screen. Since we are starting already
-          // on the previous screen, we add 1 to start.
-          newRoutes.splice(backRouteIndex - dismissCount + 1, dismissCount);
-        } else {
-          newRoutes.splice(backRouteIndex, 1);
-        }
-
-        return {
-          ...state,
-          routes: newRoutes,
-          index: newRoutes.length - 1,
-          isTransitioning: immediate !== true,
-        };
-      }
-    }
-    return superGetStateForAction(action as NavigationAction, state);
-  };
-  // Create a navigator with StackView as the view
-  return createNavigator(StackView, router, stackConfig);
-}
-
-export default createStackNavigator;

package/src/fabric/FullWindowOverlayNativeComponent.js

@@ -1,19 +0,0 @@
-/**
- * @flow strict-local
- * @format
- */
-/* eslint-disable */
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-|}>;
-
-type ComponentType = HostComponent<NativeProps>;
-
-export default (codegenNativeComponent<NativeProps>(
-  'RNSFullWindowOverlay',
-  {}
-): ComponentType);

package/src/fabric/ScreenContainerNativeComponent.js

@@ -1,19 +0,0 @@
-/**
- * @flow strict-local
- * @format
- */
-/* eslint-disable */
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-|}>;
-
-type ComponentType = HostComponent<NativeProps>;
-
-export default (codegenNativeComponent<NativeProps>(
-  'RNSScreenContainer',
-  {}
-): ComponentType);