react-native-screens 3.28.0 → 3.30.0

package/src/components/Screen.tsx

@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import React from 'react';
+import { Animated, View, Platform } from 'react-native';
+
+import TransitionProgressContext from '../TransitionProgressContext';
+import DelayedFreeze from './helpers/DelayedFreeze';
+import { ScreenProps } from 'react-native-screens';
+
+import {
+  freezeEnabled,
+  isNativePlatformSupported,
+  screensEnabled,
+} from '../core';
+
+// Native components
+import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
+import ModalScreenNativeComponent from '../fabric/ModalScreenNativeComponent';
+
+export const NativeScreen: React.ComponentType<ScreenProps> =
+  ScreenNativeComponent as any;
+const AnimatedNativeScreen = Animated.createAnimatedComponent(NativeScreen);
+const AnimatedNativeModalScreen = Animated.createAnimatedComponent(
+  ModalScreenNativeComponent as React.ComponentType<ScreenProps>
+);
+
+// Incomplete type, all accessible properties available at:
+// react-native/Libraries/Components/View/ReactNativeViewViewConfig.js
+interface ViewConfig extends View {
+  viewConfig: {
+    validAttributes: {
+      style: {
+        display: boolean;
+      };
+    };
+  };
+  _viewConfig: {
+    validAttributes: {
+      style: {
+        display: boolean;
+      };
+    };
+  };
+}
+
+export class InnerScreen extends React.Component<ScreenProps> {
+  private ref: React.ElementRef<typeof View> | null = null;
+  private closing = new Animated.Value(0);
+  private progress = new Animated.Value(0);
+  private goingForward = new Animated.Value(0);
+
+  setNativeProps(props: ScreenProps): void {
+    this.ref?.setNativeProps(props);
+  }
+
+  setRef = (ref: React.ElementRef<typeof View> | null): void => {
+    this.ref = ref;
+    this.props.onComponentRef?.(ref);
+  };
+
+  render() {
+    const {
+      enabled = screensEnabled(),
+      freezeOnBlur = freezeEnabled(),
+      ...rest
+    } = this.props;
+
+    // To maintain default behavior of formSheet stack presentation style and to have reasonable
+    // defaults for new medium-detent iOS API we need to set defaults here
+    const {
+      sheetAllowedDetents = 'large',
+      sheetLargestUndimmedDetent = 'all',
+      sheetGrabberVisible = false,
+      sheetCornerRadius = -1.0,
+      sheetExpandsWhenScrolledToEdge = true,
+      stackPresentation,
+    } = rest;
+
+    if (enabled && isNativePlatformSupported) {
+      // Due to how Yoga resolves layout, we need to have different components for modal nad non-modal screens
+      const AnimatedScreen =
+        Platform.OS === 'android' ||
+        stackPresentation === 'push' ||
+        stackPresentation === 'containedModal' ||
+        stackPresentation === 'containedTransparentModal'
+          ? AnimatedNativeScreen
+          : AnimatedNativeModalScreen;
+
+      let {
+        // Filter out active prop in this case because it is unused and
+        // can cause problems depending on react-native version:
+        // https://github.com/react-navigation/react-navigation/issues/4886
+        active,
+        activityState,
+        children,
+        isNativeStack,
+        gestureResponseDistance,
+        onGestureCancel,
+        ...props
+      } = rest;
+
+      if (active !== undefined && activityState === undefined) {
+        console.warn(
+          'It appears that you are using old version of react-navigation library. Please update @react-navigation/bottom-tabs, @react-navigation/stack and @react-navigation/drawer to version 5.10.0 or above to take full advantage of new functionality added to react-native-screens'
+        );
+        activityState = active !== 0 ? 2 : 0; // in the new version, we need one of the screens to have value of 2 after the transition
+      }
+
+      const handleRef = (ref: ViewConfig) => {
+        if (ref?.viewConfig?.validAttributes?.style) {
+          ref.viewConfig.validAttributes.style = {
+            ...ref.viewConfig.validAttributes.style,
+            display: false,
+          };
+          this.setRef(ref);
+        } else if (ref?._viewConfig?.validAttributes?.style) {
+          ref._viewConfig.validAttributes.style = {
+            ...ref._viewConfig.validAttributes.style,
+            display: false,
+          };
+          this.setRef(ref);
+        }
+      };
+
+      return (
+        <DelayedFreeze freeze={freezeOnBlur && activityState === 0}>
+          <AnimatedScreen
+            {...props}
+            activityState={activityState}
+            sheetAllowedDetents={sheetAllowedDetents}
+            sheetLargestUndimmedDetent={sheetLargestUndimmedDetent}
+            sheetGrabberVisible={sheetGrabberVisible}
+            sheetCornerRadius={sheetCornerRadius}
+            sheetExpandsWhenScrolledToEdge={sheetExpandsWhenScrolledToEdge}
+            gestureResponseDistance={{
+              start: gestureResponseDistance?.start ?? -1,
+              end: gestureResponseDistance?.end ?? -1,
+              top: gestureResponseDistance?.top ?? -1,
+              bottom: gestureResponseDistance?.bottom ?? -1,
+            }}
+            // This prevents showing blank screen when navigating between multiple screens with freezing
+            // https://github.com/software-mansion/react-native-screens/pull/1208
+            ref={handleRef}
+            onTransitionProgress={
+              !isNativeStack
+                ? undefined
+                : Animated.event(
+                    [
+                      {
+                        nativeEvent: {
+                          progress: this.progress,
+                          closing: this.closing,
+                          goingForward: this.goingForward,
+                        },
+                      },
+                    ],
+                    { useNativeDriver: true }
+                  )
+            }
+            onGestureCancel={
+              onGestureCancel ??
+              (() => {
+                // for internal use
+              })
+            }>
+            {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
+              children
+            ) : (
+              <TransitionProgressContext.Provider
+                value={{
+                  progress: this.progress,
+                  closing: this.closing,
+                  goingForward: this.goingForward,
+                }}>
+                {children}
+              </TransitionProgressContext.Provider>
+            )}
+          </AnimatedScreen>
+        </DelayedFreeze>
+      );
+    } else {
+      // same reason as above
+      let {
+        active,
+        activityState,
+        style,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        onComponentRef,
+        ...props
+      } = rest;
+
+      if (active !== undefined && activityState === undefined) {
+        activityState = active !== 0 ? 2 : 0;
+      }
+      return (
+        <Animated.View
+          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
+          ref={this.setRef}
+          {...props}
+        />
+      );
+    }
+  }
+}
+
+// context to be used when the user wants to use enhanced implementation
+// e.g. to use `useReanimatedTransitionProgress` (see `reanimated` folder in repo)
+export const ScreenContext = React.createContext(InnerScreen);
+
+class Screen extends React.Component<ScreenProps> {
+  static contextType = ScreenContext;
+
+  render() {
+    const ScreenWrapper = (this.context || InnerScreen) as React.ElementType;
+    return <ScreenWrapper {...this.props} />;
+  }
+}
+
+export default Screen;

package/src/components/Screen.web.tsx

@@ -0,0 +1,43 @@
+import { ScreenProps } from 'react-native-screens';
+import { Animated, View } from 'react-native';
+import React from 'react';
+
+import { screensEnabled } from '../core';
+
+export const InnerScreen = View;
+
+// We're using class component here because of the error from reanimated:
+// createAnimatedComponent` does not support stateless functional components; use a class component instead.
+export class NativeScreen extends React.Component<ScreenProps> {
+  render(): JSX.Element {
+    let {
+      active,
+      activityState,
+      style,
+      enabled = screensEnabled(),
+      ...rest
+    } = this.props;
+
+    if (enabled) {
+      if (active !== undefined && activityState === undefined) {
+        activityState = active !== 0 ? 2 : 0; // change taken from index.native.tsx
+      }
+      return (
+        <View
+          // @ts-expect-error: hidden exists on web, but not in React Native
+          hidden={activityState === 0}
+          style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
+          {...rest}
+        />
+      );
+    }
+
+    return <View {...rest} />;
+  }
+}
+
+const Screen = Animated.createAnimatedComponent(NativeScreen);
+
+export const ScreenContext = React.createContext(Screen);
+
+export default Screen;

package/src/components/ScreenContainer.tsx

@@ -0,0 +1,33 @@
+import { Platform, View } from 'react-native';
+import React from 'react';
+import { ScreenContainerProps } from 'react-native-screens';
+import { isNativePlatformSupported, screensEnabled } from '../core';
+
+// Native components
+import ScreenContainerNativeComponent from '../fabric/ScreenContainerNativeComponent';
+import ScreenNavigationContainerNativeComponent from '../fabric/ScreenNavigationContainerNativeComponent';
+
+export const NativeScreenContainer: React.ComponentType<ScreenContainerProps> =
+  Platform.OS !== 'web' ? (ScreenContainerNativeComponent as any) : View;
+export const NativeScreenNavigationContainer: React.ComponentType<ScreenContainerProps> =
+  Platform.OS !== 'web'
+    ? (ScreenNavigationContainerNativeComponent as any)
+    : View;
+
+function ScreenContainer(props: ScreenContainerProps) {
+  const { enabled = screensEnabled(), hasTwoStates, ...rest } = props;
+
+  if (enabled && isNativePlatformSupported) {
+    if (hasTwoStates) {
+      const ScreenNavigationContainer =
+        Platform.OS === 'ios'
+          ? NativeScreenNavigationContainer
+          : NativeScreenContainer;
+      return <ScreenNavigationContainer {...rest} />;
+    }
+    return <NativeScreenContainer {...rest} />;
+  }
+  return <View {...rest} />;
+}
+
+export default ScreenContainer;

package/src/components/ScreenContainer.web.tsx

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

package/src/components/ScreenStack.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ScreenStackProps, freezeEnabled } from 'react-native-screens';
+import DelayedFreeze from './helpers/DelayedFreeze';
+
+// Native components
+import ScreenStackNativeComponent from '../fabric/ScreenStackNativeComponent';
+const NativeScreenStack: React.ComponentType<ScreenStackProps> =
+  ScreenStackNativeComponent as any;
+
+function ScreenStack(props: ScreenStackProps) {
+  const { children, gestureDetectorBridge, ...rest } = props;
+  const ref = React.useRef(null);
+  const size = React.Children.count(children);
+  // freezes all screens except the top one
+  const childrenWithFreeze = React.Children.map(children, (child, index) => {
+    // @ts-expect-error it's either SceneView in v6 or RouteView in v5
+    const { props, key } = child;
+    const descriptor = props?.descriptor ?? props?.descriptors?.[key];
+    const isFreezeEnabled =
+      descriptor?.options?.freezeOnBlur ?? freezeEnabled();
+
+    return (
+      <DelayedFreeze freeze={isFreezeEnabled && size - index > 1}>
+        {child}
+      </DelayedFreeze>
+    );
+  });
+
+  React.useEffect(() => {
+    if (gestureDetectorBridge) {
+      gestureDetectorBridge.current.stackUseEffectCallback(ref);
+    }
+  });
+  return (
+    <NativeScreenStack {...rest} ref={ref}>
+      {childrenWithFreeze}
+    </NativeScreenStack>
+  );
+}
+
+export default ScreenStack;

package/src/components/ScreenStack.web.tsx

@@ -0,0 +1,3 @@
+import { View } from 'react-native';
+
+export default View;

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;
+}