react-native-screens 3.29.0 → 3.30.1

package/src/components/ScreenStackHeaderConfig.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  HeaderSubviewTypes,
+  ScreenStackHeaderConfigProps,
+  SearchBarProps,
+} from 'react-native-screens';
+import { Image, ImageProps, StyleSheet, ViewProps } from 'react-native';
+
+// Native components
+import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
+import ScreenStackHeaderSubviewNativeComponent from '../fabric/ScreenStackHeaderSubviewNativeComponent';
+
+export const ScreenStackHeaderConfig: React.ComponentType<ScreenStackHeaderConfigProps> =
+  ScreenStackHeaderConfigNativeComponent as any;
+export const ScreenStackHeaderSubview: React.ComponentType<
+  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
+> = ScreenStackHeaderSubviewNativeComponent as any;
+
+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 => (
+  <ScreenStackHeaderSubview
+    {...props}
+    type="right"
+    style={styles.headerSubview}
+  />
+);
+
+export const ScreenStackHeaderLeftView = (
+  props: React.PropsWithChildren<ViewProps>
+): JSX.Element => (
+  <ScreenStackHeaderSubview
+    {...props}
+    type="left"
+    style={styles.headerSubview}
+  />
+);
+
+export const ScreenStackHeaderCenterView = (
+  props: React.PropsWithChildren<ViewProps>
+): JSX.Element => (
+  <ScreenStackHeaderSubview
+    {...props}
+    type="center"
+    style={styles.headerSubview}
+  />
+);
+
+export const ScreenStackHeaderSearchBarView = (
+  props: React.PropsWithChildren<SearchBarProps>
+): JSX.Element => (
+  <ScreenStackHeaderSubview
+    {...props}
+    type="searchBar"
+    style={styles.headerSubview}
+  />
+);
+
+const styles = StyleSheet.create({
+  headerSubview: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/ScreenStackHeaderConfig.web.tsx

@@ -0,0 +1,39 @@
+import { Image, ImageProps, View, ViewProps } from 'react-native';
+import React from 'react';
+import {
+  HeaderSubviewTypes,
+  ScreenStackHeaderConfigProps,
+  SearchBarProps,
+} from 'react-native-screens';
+
+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/SearchBar.tsx

@@ -0,0 +1,91 @@
+import React, { ReactNode } from 'react';
+import {
+  isSearchBarAvailableForCurrentPlatform,
+  SearchBarCommands,
+  SearchBarProps,
+} from 'react-native-screens';
+import { View } from 'react-native';
+
+// Native components
+import SearchBarNativeComponent, {
+  Commands as SearchBarNativeCommands,
+} from '../fabric/SearchBarNativeComponent';
+
+export const NativeSearchBar: React.ComponentType<SearchBarProps> &
+  typeof NativeSearchBarCommands = SearchBarNativeComponent as any;
+export const NativeSearchBarCommands: SearchBarCommandsType =
+  SearchBarNativeCommands as any;
+
+type SearchBarCommandsType = {
+  blur: (viewRef: React.ElementRef<typeof NativeSearchBar>) => void;
+  focus: (viewRef: React.ElementRef<typeof NativeSearchBar>) => void;
+  clearText: (viewRef: React.ElementRef<typeof NativeSearchBar>) => void;
+  toggleCancelButton: (
+    viewRef: React.ElementRef<typeof NativeSearchBar>,
+    flag: boolean
+  ) => void;
+  setText: (
+    viewRef: React.ElementRef<typeof NativeSearchBar>,
+    text: string
+  ) => void;
+  cancelSearch: (viewRef: React.ElementRef<typeof NativeSearchBar>) => void;
+};
+
+class SearchBar extends React.Component<SearchBarProps> {
+  nativeSearchBarRef: React.RefObject<SearchBarCommands>;
+
+  constructor(props: SearchBarProps) {
+    super(props);
+    this.nativeSearchBarRef = React.createRef();
+  }
+
+  _callMethodWithRef(method: (ref: SearchBarCommands) => void) {
+    const ref = this.nativeSearchBarRef.current;
+    if (ref) {
+      method(ref);
+    } else {
+      console.warn(
+        'Reference to native search bar component has not been updated yet'
+      );
+    }
+  }
+
+  blur() {
+    this._callMethodWithRef(ref => NativeSearchBarCommands.blur(ref));
+  }
+
+  focus() {
+    this._callMethodWithRef(ref => NativeSearchBarCommands.focus(ref));
+  }
+
+  toggleCancelButton(flag: boolean) {
+    this._callMethodWithRef(ref =>
+      NativeSearchBarCommands.toggleCancelButton(ref, flag)
+    );
+  }
+
+  clearText() {
+    this._callMethodWithRef(ref => NativeSearchBarCommands.clearText(ref));
+  }
+
+  setText(text: string) {
+    this._callMethodWithRef(ref => NativeSearchBarCommands.setText(ref, text));
+  }
+
+  cancelSearch() {
+    this._callMethodWithRef(ref => NativeSearchBarCommands.cancelSearch(ref));
+  }
+
+  render() {
+    if (!isSearchBarAvailableForCurrentPlatform) {
+      console.warn(
+        'Importing SearchBar is only valid on iOS and Android devices.'
+      );
+      return View as any as ReactNode;
+    }
+
+    return <NativeSearchBar {...this.props} ref={this.nativeSearchBarRef} />;
+  }
+}
+
+export default SearchBar;

package/src/components/SearchBar.web.tsx

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+
+export const NativeSearchBar = View;
+export const NativeSearchBarCommands = View;
+
+export default View;

package/src/components/helpers/DelayedFreeze.tsx

@@ -0,0 +1,27 @@
+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/core.ts

@@ -0,0 +1,43 @@
+import { Platform, UIManager } from 'react-native';
+
+// const that tells if the library should use new implementation, will be undefined for older versions
+export const shouldUseActivityState = true;
+
+export const isNativePlatformSupported =
+  Platform.OS === 'ios' ||
+  Platform.OS === 'android' ||
+  Platform.OS === 'windows';
+
+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/ModalScreenNativeComponent.ts

@@ -0,0 +1,104 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, ColorValue } from 'react-native';
+import type {
+  BubblingEventHandler,
+  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 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';
+
+type SwipeDirection = 'vertical' | 'horizontal';
+
+type ReplaceAnimation = 'pop' | 'push';
+
+type SheetDetentTypes = 'large' | 'medium' | 'all';
+
+export interface NativeProps extends ViewProps {
+  onAppear?: BubblingEventHandler<ScreenEvent>;
+  onDisappear?: BubblingEventHandler<ScreenEvent>;
+  onDismissed?: BubblingEventHandler<ScreenDismissedEvent>;
+  onNativeDismissCancelled?: BubblingEventHandler<ScreenDismissedEvent>;
+  onWillAppear?: BubblingEventHandler<ScreenEvent>;
+  onWillDisappear?: BubblingEventHandler<ScreenEvent>;
+  onHeaderHeightChange?: BubblingEventHandler<HeaderHeightChangeEvent>;
+  onTransitionProgress?: BubblingEventHandler<TransitionProgressEvent>;
+  onGestureCancel?: BubblingEventHandler<ScreenEvent>;
+  onHeaderBackButtonClicked?: BubblingEventHandler<ScreenEvent>;
+  sheetAllowedDetents?: WithDefault<SheetDetentTypes, 'large'>;
+  sheetLargestUndimmedDetent?: WithDefault<SheetDetentTypes, 'all'>;
+  sheetGrabberVisible?: WithDefault<boolean, false>;
+  sheetCornerRadius?: WithDefault<Float, -1.0>;
+  sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
+  customAnimationOnSwipe?: boolean;
+  fullScreenSwipeEnabled?: boolean;
+  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, 350>;
+  replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
+  swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
+  hideKeyboardOnSwipe?: boolean;
+  activityState?: WithDefault<Float, -1.0>;
+  navigationBarColor?: ColorValue;
+  navigationBarHidden?: boolean;
+  nativeBackButtonDismissalEnabled?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSModalScreen', {
+  interfaceOnly: true,
+});

package/src/fabric/NativeScreensModule.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/ban-types */
+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

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

package/src/fabric/ScreenNativeComponent.ts

@@ -69,6 +69,7 @@ export interface NativeProps extends ViewProps {
   onHeaderHeightChange?: BubblingEventHandler<HeaderHeightChangeEvent>;
   onTransitionProgress?: BubblingEventHandler<TransitionProgressEvent>;
   onGestureCancel?: BubblingEventHandler<ScreenEvent>;
+  onHeaderBackButtonClicked?: BubblingEventHandler<ScreenEvent>;
   sheetAllowedDetents?: WithDefault<SheetDetentTypes, 'large'>;
   sheetLargestUndimmedDetent?: WithDefault<SheetDetentTypes, 'all'>;
   sheetGrabberVisible?: WithDefault<boolean, false>;
@@ -96,7 +97,6 @@ export interface NativeProps extends ViewProps {
   navigationBarColor?: ColorValue;
   navigationBarHidden?: boolean;
   nativeBackButtonDismissalEnabled?: boolean;
-  onHeaderBackButtonClicked?: BubblingEventHandler<ScreenEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSScreen', {

package/src/fabric/SearchBarNativeComponent.ts

@@ -61,6 +61,7 @@ interface NativeCommands {
     flag: boolean
   ) => void;
   setText: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
+  cancelSearch: (viewRef: React.ElementRef<ComponentType>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
@@ -70,6 +71,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     'clearText',
     'toggleCancelButton',
     'setText',
+    'cancelSearch',
   ],
 });
 

package/src/gesture-handler/GestureDetectorProvider.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { GHContext } from 'react-native-screens';
+import ScreenGestureDetector from './ScreenGestureDetector';
+import type { GestureProviderProps } from '../native-stack/types';
+
+function GHWrapper(props: GestureProviderProps) {
+  return <ScreenGestureDetector {...props} />;
+}
+
+export default function GestureDetectorProvider(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <GHContext.Provider value={GHWrapper}>{props.children}</GHContext.Provider>
+  );
+}

package/src/gesture-handler/RNScreensTurboModule.ts

@@ -0,0 +1,13 @@
+type RNScreensTurboModuleType = {
+  startTransition: (stackTag: number) => {
+    topScreenTag: number;
+    belowTopScreenTag: number;
+    canStartTransition: boolean;
+  };
+  updateTransition: (stackTag: number, progress: number) => void;
+  finishTransition: (stackTag: number, isCanceled: boolean) => void;
+  disableSwipeBackForTopScreen: (stackTag: number) => void;
+};
+
+export const RNScreensTurboModule: RNScreensTurboModuleType = (global as any)
+  .RNScreensTurboModule;