@amazon-devices/react-native-screens 3.0.9000000000 → 3.0.9000000003

package/src/components/ScreenStackHeaderConfig.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-import React from 'react';
-import {
-  HeaderSubviewTypes,
-  ScreenStackHeaderConfigProps,
-  SearchBarProps,
-} from '../types';
-import {
-  Image,
-  ImageProps,
-  Platform,
-  StyleSheet,
-  View,
-  ViewProps,
-} from 'react-native';
-
-// Native components
-import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
-import ScreenStackHeaderSubviewNativeComponent from '../fabric/ScreenStackHeaderSubviewNativeComponent';
-
-export const ScreenStackHeaderSubview: React.ComponentType<
-  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
-> = ScreenStackHeaderSubviewNativeComponent as any;
-
-export const ScreenStackHeaderConfig = React.forwardRef<
-  View,
-  ScreenStackHeaderConfigProps
->((props, ref) => (
-  <ScreenStackHeaderConfigNativeComponent
-    {...props}
-    ref={ref}
-    style={styles.headerConfig}
-    pointerEvents="box-none"
-  />
-));
-
-ScreenStackHeaderConfig.displayName = 'ScreenStackHeaderConfig';
-
-export const ScreenStackHeaderBackButtonImage = (
-  props: ImageProps,
-): JSX.Element => (
-  <ScreenStackHeaderSubview type="back" style={styles.headerSubview}>
-    <Image resizeMode="center" fadeDuration={0} {...props} />
-  </ScreenStackHeaderSubview>
-);
-
-export const ScreenStackHeaderRightView = (
-  props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => {
-  const { style, ...rest } = props;
-
-  return (
-    <ScreenStackHeaderSubview
-      {...rest}
-      type="right"
-      style={[styles.headerSubview, style]}
-    />
-  );
-};
-
-export const ScreenStackHeaderLeftView = (
-  props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => {
-  const { style, ...rest } = props;
-
-  return (
-    <ScreenStackHeaderSubview
-      {...rest}
-      type="left"
-      style={[styles.headerSubview, style]}
-    />
-  );
-};
-
-export const ScreenStackHeaderCenterView = (
-  props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => {
-  const { style, ...rest } = props;
-
-  return (
-    <ScreenStackHeaderSubview
-      {...rest}
-      type="center"
-      style={[styles.headerSubviewCenter, style]}
-    />
-  );
-};
-
-export const ScreenStackHeaderSearchBarView = (
-  props: React.PropsWithChildren<SearchBarProps>,
-): JSX.Element => (
-  <ScreenStackHeaderSubview
-    {...props}
-    type="searchBar"
-    style={styles.headerSubview}
-  />
-);
-
-const styles = StyleSheet.create({
-  headerSubview: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  headerSubviewCenter: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 1,
-  },
-  headerConfig: {
-    position: 'absolute',
-    top: '-100%',
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    // We only want to center align the subviews on iOS.
-    // See https://github.com/software-mansion/react-native-screens/pull/2456
-    alignItems: Platform.OS === 'ios' ? 'center' : undefined,
-  },
-});

package/src/components/ScreenStackHeaderConfig.web.tsx

@@ -1,39 +0,0 @@
-import { Image, ImageProps, View, ViewProps } from 'react-native';
-import React from 'react';
-import {
-  HeaderSubviewTypes,
-  ScreenStackHeaderConfigProps,
-  SearchBarProps,
-} from '../types';
-
-export const ScreenStackHeaderBackButtonImage = (
-  props: ImageProps,
-): JSX.Element => (
-  <View>
-    <Image resizeMode="center" fadeDuration={0} {...props} />
-  </View>
-);
-
-export const ScreenStackHeaderRightView = (
-  props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderLeftView = (
-  props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderCenterView = (
-  props: React.PropsWithChildren<ViewProps>,
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderSearchBarView = (
-  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>,
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderConfig = (
-  props: React.PropsWithChildren<ScreenStackHeaderConfigProps>,
-): JSX.Element => <View {...props} />;
-
-export const ScreenStackHeaderSubview: React.ComponentType<
-  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
-> = View;

package/src/components/ScreenStackItem.tsx

@@ -1,174 +0,0 @@
-import * as React from 'react';
-import {
-  Platform,
-  type StyleProp,
-  StyleSheet,
-  type ViewStyle,
-  View,
-} from 'react-native';
-import warnOnce from 'warn-once';
-
-import DebugContainer from './DebugContainer';
-import { ScreenProps, ScreenStackHeaderConfigProps } from '../types';
-import { ScreenStackHeaderConfig } from './ScreenStackHeaderConfig';
-import Screen from './Screen';
-import ScreenStack from './ScreenStack';
-import { RNSScreensRefContext } from '../contexts';
-import { FooterComponent } from './ScreenFooter';
-
-type Props = Omit<
-  ScreenProps,
-  'enabled' | 'isNativeStack' | 'hasLargeHeader'
-> & {
-  screenId: string;
-  headerConfig?: ScreenStackHeaderConfigProps;
-  contentStyle?: StyleProp<ViewStyle>;
-};
-
-function ScreenStackItem(
-  {
-    children,
-    headerConfig,
-    activityState,
-    shouldFreeze,
-    stackPresentation,
-    contentStyle,
-    style,
-    screenId,
-    // eslint-disable-next-line camelcase
-    unstable_sheetFooter,
-    ...rest
-  }: Props,
-  ref: React.ForwardedRef<View>,
-) {
-  const currentScreenRef = React.useRef<View | null>(null);
-  const screenRefs = React.useContext(RNSScreensRefContext);
-
-  React.useImperativeHandle(ref, () => currentScreenRef.current!);
-
-  const isHeaderInModal =
-    // amznmod_react - return false for Modal on kepler because native component is not implemented yet
-    // @ts-ignore
-    Platform.OS === 'android' || Platform.OS === 'kepler'
-      ? false
-      : stackPresentation !== 'push' && headerConfig?.hidden === false;
-
-  const headerHiddenPreviousRef = React.useRef(headerConfig?.hidden);
-
-  React.useEffect(() => {
-    warnOnce(
-      Platform.OS !== 'android' &&
-        stackPresentation !== 'push' &&
-        headerHiddenPreviousRef.current !== headerConfig?.hidden,
-      `Dynamically changing header's visibility in modals will result in remounting the screen and losing all local state.`,
-    );
-
-    headerHiddenPreviousRef.current = headerConfig?.hidden;
-  }, [headerConfig?.hidden, stackPresentation]);
-
-  const content = (
-    <>
-      <DebugContainer
-        style={[
-          stackPresentation === 'formSheet'
-            ? Platform.OS === 'ios'
-              ? styles.absolute
-              : null
-            : styles.container,
-          contentStyle,
-        ]}
-        stackPresentation={stackPresentation ?? 'push'}>
-        {children}
-      </DebugContainer>
-      {/**
-       * `HeaderConfig` needs to be the direct child of `Screen` without any intermediate `View`
-       * We don't render it conditionally based on visibility to make it possible to dynamically render a custom `header`
-       * Otherwise dynamically rendering a custom `header` leaves the native header visible
-       *
-       * https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig
-       *
-       * HeaderConfig must not be first child of a Screen.
-       * See https://github.com/software-mansion/react-native-screens/pull/1825
-       * for detailed explanation.
-       */}
-      <ScreenStackHeaderConfig {...headerConfig} />
-      {/* eslint-disable-next-line camelcase */}
-      {stackPresentation === 'formSheet' && unstable_sheetFooter && (
-        <FooterComponent>{unstable_sheetFooter()}</FooterComponent>
-      )}
-    </>
-  );
-
-  // We take backgroundColor from contentStyle and apply it on Screen.
-  // This allows to workaround one issue with truncated
-  // content with formSheet presentation.
-  let internalScreenStyle;
-
-  if (stackPresentation === 'formSheet' && contentStyle) {
-    const flattenContentStyles = StyleSheet.flatten(contentStyle);
-    internalScreenStyle = {
-      backgroundColor: flattenContentStyles?.backgroundColor,
-    };
-  }
-
-  return (
-    <Screen
-      ref={node => {
-        currentScreenRef.current = node;
-
-        if (screenRefs === null) {
-          console.warn(
-            'Looks like RNSScreensRefContext is missing. Make sure the ScreenStack component is wrapped in it',
-          );
-          return;
-        }
-
-        const currentRefs = screenRefs.current;
-
-        if (node === null) {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-          delete currentRefs[screenId];
-        } else {
-          currentRefs[screenId] = { current: node };
-        }
-      }}
-      enabled
-      isNativeStack
-      activityState={activityState}
-      shouldFreeze={shouldFreeze}
-      stackPresentation={stackPresentation}
-      hasLargeHeader={headerConfig?.largeTitle ?? false}
-      style={[style, internalScreenStyle]}
-      {...rest}>
-      {isHeaderInModal ? (
-        <ScreenStack style={styles.container}>
-          <Screen
-            enabled
-            isNativeStack
-            activityState={activityState}
-            shouldFreeze={shouldFreeze}
-            hasLargeHeader={headerConfig?.largeTitle ?? false}
-            style={StyleSheet.absoluteFill}>
-            {content}
-          </Screen>
-        </ScreenStack>
-      ) : (
-        content
-      )}
-    </Screen>
-  );
-}
-
-export default React.forwardRef(ScreenStackItem);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    start: 0,
-    end: 0,
-  },
-});

package/src/components/SearchBar.tsx

@@ -1,102 +0,0 @@
-'use client';
-
-import React from 'react';
-import { SearchBarCommands, SearchBarProps } from '../types';
-import { isSearchBarAvailableForCurrentPlatform } from '../utils';
-import { View } from 'react-native';
-
-// Native components
-import SearchBarNativeComponent, {
-  Commands as SearchBarNativeCommands,
-  NativeProps as SearchBarNativeProps,
-  SearchBarEvent,
-  SearchButtonPressedEvent,
-  ChangeTextEvent,
-} from '../fabric/SearchBarNativeComponent';
-import { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
-
-const NativeSearchBar: React.ComponentType<
-  SearchBarNativeProps & { ref?: React.RefObject<SearchBarCommands> }
-> &
-  typeof NativeSearchBarCommands =
-  SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeProps> &
-    SearchBarCommandsType;
-const NativeSearchBarCommands: SearchBarCommandsType =
-  SearchBarNativeCommands as SearchBarCommandsType;
-
-type NativeSearchBarRef = React.ElementRef<typeof NativeSearchBar>;
-
-type SearchBarCommandsType = {
-  blur: (viewRef: NativeSearchBarRef) => void;
-  focus: (viewRef: NativeSearchBarRef) => void;
-  clearText: (viewRef: NativeSearchBarRef) => void;
-  toggleCancelButton: (viewRef: NativeSearchBarRef, flag: boolean) => void;
-  setText: (viewRef: NativeSearchBarRef, text: string) => void;
-  cancelSearch: (viewRef: NativeSearchBarRef) => void;
-};
-
-function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
-  const searchBarRef = React.useRef<SearchBarCommands | null>(null);
-
-  React.useImperativeHandle(ref, () => ({
-    blur: () => {
-      _callMethodWithRef(ref => NativeSearchBarCommands.blur(ref));
-    },
-    focus: () => {
-      _callMethodWithRef(ref => NativeSearchBarCommands.focus(ref));
-    },
-    toggleCancelButton: (flag: boolean) => {
-      _callMethodWithRef(ref =>
-        NativeSearchBarCommands.toggleCancelButton(ref, flag),
-      );
-    },
-    clearText: () => {
-      _callMethodWithRef(ref => NativeSearchBarCommands.clearText(ref));
-    },
-    setText: (text: string) => {
-      _callMethodWithRef(ref => NativeSearchBarCommands.setText(ref, text));
-    },
-    cancelSearch: () => {
-      _callMethodWithRef(ref => NativeSearchBarCommands.cancelSearch(ref));
-    },
-  }));
-
-  const _callMethodWithRef = React.useCallback(
-    (method: (ref: SearchBarCommands) => void) => {
-      const ref = searchBarRef.current;
-      if (ref) {
-        method(ref);
-      } else {
-        console.warn(
-          'Reference to native search bar component has not been updated yet',
-        );
-      }
-    },
-    [searchBarRef],
-  );
-
-  if (!isSearchBarAvailableForCurrentPlatform) {
-    console.warn(
-      'Importing SearchBar is only valid on iOS and Android devices.',
-    );
-    return View as unknown as React.ReactNode;
-  }
-
-  return (
-    <NativeSearchBar
-      ref={searchBarRef}
-      {...props}
-      onSearchFocus={props.onFocus as DirectEventHandler<SearchBarEvent>}
-      onSearchBlur={props.onBlur as DirectEventHandler<SearchBarEvent>}
-      onSearchButtonPress={
-        props.onSearchButtonPress as DirectEventHandler<SearchButtonPressedEvent>
-      }
-      onCancelButtonPress={
-        props.onCancelButtonPress as DirectEventHandler<SearchBarEvent>
-      }
-      onChangeText={props.onChangeText as DirectEventHandler<ChangeTextEvent>}
-    />
-  );
-}
-
-export default React.forwardRef<SearchBarCommands, SearchBarProps>(SearchBar);

package/src/components/SearchBar.web.tsx

@@ -1,5 +0,0 @@
-import { View } from 'react-native';
-
-const SearchBar = View;
-
-export default SearchBar;

package/src/components/helpers/DelayedFreeze.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Freeze } from 'react-freeze';
-
-interface FreezeWrapperProps {
-  freeze: boolean;
-  children: React.ReactNode;
-}
-
-// This component allows one more render before freezing the screen.
-// Allows activityState to reach the native side and useIsFocused to work correctly.
-function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
-  // flag used for determining whether freeze should be enabled
-  const [freezeState, setFreezeState] = React.useState(false);
-
-  React.useEffect(() => {
-    const id = setImmediate(() => {
-      setFreezeState(freeze);
-    });
-    return () => {
-      clearImmediate(id);
-    };
-  }, [freeze]);
-
-  return <Freeze freeze={freeze ? freezeState : false}>{children}</Freeze>;
-}
-
-export default DelayedFreeze;

package/src/components/helpers/usePrevious.tsx

@@ -1,11 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export function usePrevious<T>(state: T): T | undefined {
-  const ref = useRef<T>();
-
-  useEffect(() => {
-    ref.current = state;
-  });
-
-  return ref.current;
-}

package/src/contexts.tsx

@@ -1,9 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { GestureProviderProps, ScreensRefsHolder } from './types';
-
-export const GHContext = React.createContext(
-  (props: PropsWithChildren<GestureProviderProps>) => <>{props.children}</>,
-);
-
-export const RNSScreensRefContext =
-  React.createContext<React.MutableRefObject<ScreensRefsHolder> | null>(null);

package/src/core.ts

@@ -1,45 +0,0 @@
-'use client';
-
-import { Platform, UIManager } from 'react-native';
-
-export const isNativePlatformSupported =
-  Platform.OS === 'ios' ||
-  Platform.OS === 'android' ||
-  Platform.OS === 'windows'||
-  // amznmod_react - add Kepler support
-  // @ts-ignore
-  Platform.OS === 'kepler';
-
-let ENABLE_SCREENS = isNativePlatformSupported;
-
-export function enableScreens(shouldEnableScreens = true) {
-  ENABLE_SCREENS = shouldEnableScreens;
-
-  if (!isNativePlatformSupported) {
-    return;
-  }
-
-  if (ENABLE_SCREENS && !UIManager.getViewManagerConfig('RNSScreen')) {
-    console.error(
-      `Screen native module hasn't been linked. Please check the react-native-screens README for more details`,
-    );
-  }
-}
-
-let ENABLE_FREEZE = false;
-
-export function enableFreeze(shouldEnableReactFreeze = true) {
-  if (!isNativePlatformSupported) {
-    return;
-  }
-
-  ENABLE_FREEZE = shouldEnableReactFreeze;
-}
-
-export function screensEnabled() {
-  return ENABLE_SCREENS;
-}
-
-export function freezeEnabled() {
-  return ENABLE_FREEZE;
-}

package/src/fabric/FullWindowOverlayNativeComponent.ts

@@ -1,23 +0,0 @@
-'use client';
-/*
- * Portions of this file are copyright (c) 2025 Amazon.com, Inc. or its affiliates.  All rights reserved.
- *
- * PORTIONS OF THIS FILE ARE AMAZON PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
- *
- * Amazon modifications are indicated by [amznmod_* comments].
- */
-
-/*
- * Changelog:
- * Set up react-native-screens package to build for Kepler
- */
-
-
-// amznmod_react - register component on Kepler
-// @ts-ignore
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps } from 'react-native';
-
-interface NativeProps extends ViewProps {}
-
-export default codegenNativeComponent<NativeProps>('RNSFullWindowOverlay', {});

package/src/fabric/ModalScreenNativeComponent.ts

@@ -1,115 +0,0 @@
-'use client';
-
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps, ColorValue } from 'react-native';
-import type {
-  DirectEventHandler,
-  WithDefault,
-  Int32,
-  Float,
-  Double,
-} from 'react-native/Libraries/Types/CodegenTypes';
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-type ScreenEvent = Readonly<{}>;
-
-type ScreenDismissedEvent = Readonly<{
-  dismissCount: Int32;
-}>;
-
-type TransitionProgressEvent = Readonly<{
-  progress: Double;
-  closing: Int32;
-  goingForward: Int32;
-}>;
-
-type HeaderHeightChangeEvent = Readonly<{
-  headerHeight: Double;
-}>;
-
-type SheetDetentChangedEvent = Readonly<{
-  index: Int32;
-  isStable: boolean;
-}>;
-
-type GestureResponseDistanceType = Readonly<{
-  start: Float;
-  end: Float;
-  top: Float;
-  bottom: Float;
-}>;
-
-type StackPresentation =
-  | 'push'
-  | 'modal'
-  | 'transparentModal'
-  | 'fullScreenModal'
-  | 'formSheet'
-  | 'containedModal'
-  | 'containedTransparentModal';
-
-type StackAnimation =
-  | 'default'
-  | 'flip'
-  | 'simple_push'
-  | 'none'
-  | 'fade'
-  | 'slide_from_right'
-  | 'slide_from_left'
-  | 'slide_from_bottom'
-  | 'fade_from_bottom'
-  | 'ios_from_right'
-  | 'ios_from_left';
-
-type SwipeDirection = 'vertical' | 'horizontal';
-
-type ReplaceAnimation = 'pop' | 'push';
-
-export interface NativeProps extends ViewProps {
-  onAppear?: DirectEventHandler<ScreenEvent>;
-  onDisappear?: DirectEventHandler<ScreenEvent>;
-  onDismissed?: DirectEventHandler<ScreenDismissedEvent>;
-  onNativeDismissCancelled?: DirectEventHandler<ScreenDismissedEvent>;
-  onWillAppear?: DirectEventHandler<ScreenEvent>;
-  onWillDisappear?: DirectEventHandler<ScreenEvent>;
-  onHeaderHeightChange?: DirectEventHandler<HeaderHeightChangeEvent>;
-  onTransitionProgress?: DirectEventHandler<TransitionProgressEvent>;
-  onGestureCancel?: DirectEventHandler<ScreenEvent>;
-  onHeaderBackButtonClicked?: DirectEventHandler<ScreenEvent>;
-  onSheetDetentChanged?: DirectEventHandler<SheetDetentChangedEvent>;
-  sheetAllowedDetents?: number[];
-  sheetLargestUndimmedDetent?: WithDefault<Int32, -1>;
-  sheetGrabberVisible?: WithDefault<boolean, false>;
-  sheetCornerRadius?: WithDefault<Float, -1.0>;
-  sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
-  sheetInitialDetent?: WithDefault<Int32, 0>;
-  sheetElevation?: WithDefault<Int32, 24>;
-  customAnimationOnSwipe?: boolean;
-  fullScreenSwipeEnabled?: boolean;
-  fullScreenSwipeShadowEnabled?: WithDefault<boolean, true>;
-  homeIndicatorHidden?: boolean;
-  preventNativeDismiss?: boolean;
-  gestureEnabled?: WithDefault<boolean, true>;
-  statusBarColor?: ColorValue;
-  statusBarHidden?: boolean;
-  screenOrientation?: string;
-  statusBarAnimation?: string;
-  statusBarStyle?: string;
-  statusBarTranslucent?: boolean;
-  gestureResponseDistance?: GestureResponseDistanceType;
-  stackPresentation?: WithDefault<StackPresentation, 'push'>;
-  stackAnimation?: WithDefault<StackAnimation, 'default'>;
-  transitionDuration?: WithDefault<Int32, 500>;
-  replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
-  swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
-  hideKeyboardOnSwipe?: boolean;
-  activityState?: WithDefault<Float, -1.0>;
-  navigationBarColor?: ColorValue;
-  navigationBarTranslucent?: boolean;
-  navigationBarHidden?: boolean;
-  nativeBackButtonDismissalEnabled?: boolean;
-}
-
-export default codegenNativeComponent<NativeProps>('RNSModalScreen', {
-  interfaceOnly: true,
-});

package/src/fabric/NativeScreensModule.ts

@@ -1,8 +0,0 @@
-'use client';
-
-import type { TurboModule } from 'react-native';
-import { TurboModuleRegistry } from 'react-native';
-
-export interface Spec extends TurboModule {}
-
-export default TurboModuleRegistry.get<Spec>('RNSModule');

package/src/fabric/NativeScreensModule.web.ts

@@ -1 +0,0 @@
-export default {};