react-native-screens 3.10.1 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "3.10.1",
+  "version": "3.12.0",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "check-types": "tsc --noEmit",
@@ -8,7 +8,7 @@
     "test:unit": "jest --passWithNoTests",
     "format-js": "prettier --write --list-different './{src,Example}/**/*.{js,ts,tsx}'",
     "format-android": "node ./scripts/format-android.js",
-    "format-ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.cpp | xargs clang-format -i",
+    "format-ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
     "format": "yarn format-js && yarn format-android && yarn format-ios",
     "lint-js": "eslint --ext '.js,.ts,.tsx' --fix src",
     "lint-android": "./android/gradlew -p android spotlessCheck -q",
@@ -23,13 +23,17 @@
   "types": "lib/typescript/index",
   "files": [
     "src/",
+    "common/",
     "lib/",
     "native-stack/",
     "createNativeStackNavigator/",
     "reanimated/",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
+    "android/src/main/jni/",
     "android/src/main/res",
+    "android/src/fabric/",
+    "android/src/paper/",
     "android/build.gradle",
     "ios/",
     "windows/",
@@ -54,6 +58,7 @@
   "homepage": "https://github.com/software-mansion/react-native-screens#readme",
   "dependencies": {
     "react-freeze": "^1.0.0",
+    "react-native-gradle-plugin": "^0.0.3",
     "warn-once": "^0.1.0"
   },
   "peerDependencies": {
@@ -126,5 +131,14 @@
   "eslintIgnore": [
     "node_modules/",
     "lib/"
-  ]
+  ],
+  "codegenConfig": {
+    "libraries": [
+      {
+        "name": "rnscreens",
+        "type": "components",
+        "jsSrcsDir": "./src/fabric"
+      }
+    ]
+  }
 }

package/reanimated/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/reanimated/index",
+  "module": "../lib/module/reanimated/index",
+  "react-native": "../src/reanimated/index",
+  "types": "../lib/typescript/reanimated/index"
+}

package/src/fabric/Screen.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import ScreenNativeComponent from './ScreenNativeComponent';
+import { StyleSheet } from 'react-native';
+
+export default function Screen(props) {
+  return (
+    <ScreenNativeComponent
+      {...props}
+      style={[props.style, StyleSheet.absoluteFill]}
+    />
+  );
+}

package/src/fabric/ScreenNativeComponent.js

@@ -0,0 +1,64 @@
+/**
+ * @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';
+import type { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {
+  BubblingEventHandler,
+  WithDefault,
+  Int32,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type ScreenEvent = $ReadOnly<{||}>;
+
+type ScreenDismissedEvent = $ReadOnly<{|
+  dismissCount: Int32,
+|}>;
+
+type StackPresentation = 'push' | 'modal' | 'transparentModal';
+type StackAnimation =
+  | 'default'
+  | 'flip'
+  | 'simple_push'
+  | 'none'
+  | 'fade'
+  | 'slide_from_right'
+  | 'slide_from_left'
+  | 'slide_from_bottom'
+  | 'fade_from_bottom';
+
+type ReplaceAnimation = 'pop' | 'push';
+
+export type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  onAppear?: ?BubblingEventHandler<ScreenEvent>,
+  onDisappear?: ?BubblingEventHandler<ScreenEvent>,
+  onDismissed?: ?BubblingEventHandler<ScreenDismissedEvent>,
+  onWillAppear?: ?BubblingEventHandler<ScreenEvent>,
+  onWillDisappear?: ?BubblingEventHandler<ScreenEvent>,
+  // TODO: implement this props on iOS
+  stackPresentation?: WithDefault<StackPresentation, 'push'>,
+  stackAnimation?: WithDefault<StackAnimation, 'default'>,
+  gestureEnabled?: WithDefault<boolean, true>,
+  replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>,
+  screenOrientation?: string,
+  statusBarAnimation?: string,
+  statusBarColor?: ColorValue,
+  statusBarStyle?: string,
+  statusBarTranslucent?: boolean,
+  statusBarHidden?: boolean,
+  navigationBarColor?: ColorValue,
+  navigationBarHidden?: boolean,
+  nativeBackButtonDismissalEnabled?: boolean,
+  activityState?: WithDefault<Int32, -1>,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>('RNSScreen', {
+  interfaceOnly: true,
+}): ComponentType);

package/src/fabric/ScreenStack.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import ScreenStackNativeComponent from './ScreenStackNativeComponent';
+
+export default function ScreenStack(props) {
+  return (
+    <ScreenStackNativeComponent {...props} style={[{ flex: 1 }, props.style]} />
+  );
+}

package/src/fabric/ScreenStackHeaderConfigNativeComponent.js

@@ -0,0 +1,54 @@
+/**
+ * @flow strict-local
+ * @format
+ */
+/* eslint-disable */
+import * as React from 'react';
+
+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';
+import type { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type DirectionType = 'rtl' | 'ltr';
+
+export type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  backgroundColor?: ColorValue,
+  backTitle?: string,
+  backTitleFontFamily?: string,
+  backTitleFontSize?: Int32,
+  color?: ColorValue,
+  direction?: WithDefault<DirectionType, 'ltr'>,
+  hidden?: boolean,
+  hideShadow?: boolean,
+  largeTitle?: boolean,
+  largeTitleFontFamily?: string,
+  largeTitleFontSize?: Int32,
+  largeTitleFontWeight?: string,
+  largeTitleBackgroundColor?: ColorValue,
+  largeTitleHideShadow?: boolean,
+  largeTitleColor?: ColorValue,
+  translucent?: boolean,
+  title?: string,
+  titleFontFamily?: string,
+  titleFontSize?: Int32,
+  titleFontWeight?: string,
+  titleColor?: ColorValue,
+  disableBackButtonMenu?: boolean,
+  hideBackButton?: boolean,
+  // TODO: implement this props on iOS
+  topInsetEnabled?: boolean,
+  backButtonInCustomView?: boolean,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'RNSScreenStackHeaderConfig',
+  {}
+): ComponentType);

package/src/fabric/ScreenStackHeaderSubview.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import NativeScreenStackHeaderSubview from './ScreenStackHeaderSubviewNativeComponent';
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  headerSubview: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default function ScreenStackHeaderSubview(props) {
+  return (
+    <NativeScreenStackHeaderSubview {...props} style={styles.headerSubview} />
+  );
+}

package/src/fabric/ScreenStackHeaderSubviewNativeComponent.js

@@ -0,0 +1,31 @@
+/**
+ * @flow strict-local
+ * @format
+ */
+/* eslint-disable */
+import * as React from 'react';
+
+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';
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+
+export type HeaderSubviewTypes =
+  | 'back'
+  | 'right'
+  | 'left'
+  | 'title'
+  | 'center'
+  | 'searchBar';
+
+export type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+  type?: WithDefault<HeaderSubviewTypes, 'left'>,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'RNSScreenStackHeaderSubview',
+  {}
+): ComponentType);

package/src/fabric/ScreenStackNativeComponent.js

@@ -0,0 +1,19 @@
+/**
+ * @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>(
+  'RNSScreenStack',
+  {}
+): ComponentType);

package/src/fabric/index.js

@@ -0,0 +1,11 @@
+import Screen from './Screen';
+import ScreenStackHeaderSubview from './ScreenStackHeaderSubview';
+import ScreenStackHeaderConfig from './ScreenStackHeaderConfigNativeComponent';
+import ScreenStack from './ScreenStack';
+
+export {
+  Screen,
+  ScreenStackHeaderSubview,
+  ScreenStackHeaderConfig,
+  ScreenStack,
+};

package/src/index.native.tsx

@@ -44,6 +44,11 @@ const isPlatformSupported =
 
 let ENABLE_SCREENS = isPlatformSupported;
 
+// @ts-expect-error nativeFabricUIManager is not yet included in the RN types
+const ENABLE_FABRIC = !!global?.nativeFabricUIManager;
+
+const FabricComponents = ENABLE_FABRIC ? require('./fabric') : {};
+
 function enableScreens(shouldEnableScreens = true): void {
   ENABLE_SCREENS = isPlatformSupported && shouldEnableScreens;
   if (ENABLE_SCREENS && !UIManager.getViewManagerConfig('RNSScreen')) {
@@ -92,7 +97,9 @@ let NativeFullWindowOverlay: React.ComponentType<View>;
 const ScreensNativeModules = {
   get NativeScreen() {
     NativeScreenValue =
-      NativeScreenValue || requireNativeComponent('RNSScreen');
+      NativeScreenValue ||
+      FabricComponents.Screen ||
+      requireNativeComponent('RNSScreen');
     return NativeScreenValue;
   },
 
@@ -114,13 +121,16 @@ const ScreensNativeModules = {
 
   get NativeScreenStack() {
     NativeScreenStack =
-      NativeScreenStack || requireNativeComponent('RNSScreenStack');
+      NativeScreenStack ||
+      FabricComponents.ScreenStack ||
+      requireNativeComponent('RNSScreenStack');
     return NativeScreenStack;
   },
 
   get NativeScreenStackHeaderConfig() {
     NativeScreenStackHeaderConfig =
       NativeScreenStackHeaderConfig ||
+      FabricComponents.ScreenStackHeaderConfig ||
       requireNativeComponent('RNSScreenStackHeaderConfig');
     return NativeScreenStackHeaderConfig;
   },
@@ -128,6 +138,7 @@ const ScreensNativeModules = {
   get NativeScreenStackHeaderSubview() {
     NativeScreenStackHeaderSubview =
       NativeScreenStackHeaderSubview ||
+      FabricComponents.ScreenStackHeaderSubview ||
       requireNativeComponent('RNSScreenStackHeaderSubview');
     return NativeScreenStackHeaderSubview;
   },
@@ -222,9 +233,15 @@ class Screen extends React.Component<ScreenProps> {
     const { enabled = ENABLE_SCREENS, ...rest } = this.props;
 
     if (enabled && isPlatformSupported) {
-      AnimatedNativeScreen =
-        AnimatedNativeScreen ||
-        Animated.createAnimatedComponent(ScreensNativeModules.NativeScreen);
+      if (!AnimatedNativeScreen) {
+        if (ENABLE_FABRIC) {
+          AnimatedNativeScreen = ScreensNativeModules.NativeScreen;
+        } else {
+          AnimatedNativeScreen = Animated.createAnimatedComponent(
+            ScreensNativeModules.NativeScreen
+          ) as React.ComponentType<ScreenProps>;
+        }
+      }
 
       let {
         // Filter out active prop in this case because it is unused and
@@ -247,6 +264,18 @@ class Screen extends React.Component<ScreenProps> {
 
       const processedColor = processColor(statusBarColor);
 
+      const handleRef = (ref: ViewConfig) => {
+        if (!ENABLE_FABRIC) {
+          if (ref?.viewConfig?.validAttributes?.style) {
+            ref.viewConfig.validAttributes.style = {
+              ...ref.viewConfig.validAttributes.style,
+              display: false,
+            };
+          }
+          this.setRef(ref);
+        }
+      };
+
       return (
         <MaybeFreeze freeze={activityState === 0}>
           <AnimatedNativeScreen
@@ -255,15 +284,7 @@ class Screen extends React.Component<ScreenProps> {
             activityState={activityState}
             // This prevents showing blank screen when navigating between multiple screens with freezing
             // https://github.com/software-mansion/react-native-screens/pull/1208
-            ref={(ref: ViewConfig) => {
-              if (ref?.viewConfig?.validAttributes?.style) {
-                ref.viewConfig.validAttributes.style = {
-                  ...ref.viewConfig.validAttributes.style,
-                  display: false,
-                };
-              }
-              this.setRef(ref);
-            }}
+            ref={handleRef}
             onTransitionProgress={
               !isNativeStack
                 ? undefined

package/src/native-stack/types.tsx

@@ -243,6 +243,12 @@ export type NativeStackNavigationOptions = {
    * Boolean indicating whether the navigation bar is translucent.
    */
   headerTranslucent?: boolean;
+  /**
+   * Whether the home indicator should be hidden on this screen. Defaults to `false`.
+   *
+   * @platform ios
+   */
+  homeIndicatorHidden?: boolean;
   /**
    * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
    * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.
@@ -251,6 +257,18 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   nativeBackButtonDismissalEnabled?: boolean;
+  /**
+   * Sets the navigation bar color. Defaults to initial status bar color.
+   *
+   * @platform android
+   */
+  navigationBarColor?: string;
+  /**
+   * Sets the visibility of the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarHidden?: boolean;
   /**
    * How should the screen replacing another screen animate. Defaults to `pop`.
    * The following values are currently supported:
@@ -325,10 +343,26 @@ export type NativeStackNavigationOptions = {
    * @platform android
    */
   statusBarTranslucent?: boolean;
+  /**
+   * Sets the direction in which you should swipe to dismiss the screen.
+   * When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
+   * The following values are supported:
+   * - `vertical` – dismiss screen vertically
+   * - `horizontal` – dismiss screen horizontally (default)
+   * @platform ios
+   */
+  swipeDirection?: ScreenProps['swipeDirection'];
   /**
    * String that can be displayed in the header as a fallback for `headerTitle`.
    */
   title?: string;
+  /**
+   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+   * The duration of `default` and `flip` transitions isn't customizable.
+   *
+   * @platform ios
+   */
+  transitionDuration?: number;
 };
 
 export type NativeStackNavigatorProps = DefaultNavigatorOptions<

package/src/native-stack/views/NativeStackView.tsx

@@ -149,22 +149,46 @@ const RouteView = ({
 }) => {
   const { options, render: renderScene } = descriptors[route.key];
   const {
-    customAnimationOnSwipe,
-    fullScreenSwipeEnabled,
     gestureEnabled,
     headerShown,
+    homeIndicatorHidden,
     nativeBackButtonDismissalEnabled = false,
+    navigationBarColor,
+    navigationBarHidden,
     replaceAnimation = 'pop',
     screenOrientation,
-    stackAnimation,
     statusBarAnimation,
     statusBarColor,
     statusBarHidden,
     statusBarStyle,
     statusBarTranslucent,
+    swipeDirection = 'horizontal',
+    transitionDuration,
+  } = options;
+
+  let {
+    customAnimationOnSwipe,
+    fullScreenSwipeEnabled,
+    stackAnimation,
+    stackPresentation = 'push',
   } = options;
 
-  let { stackPresentation = 'push' } = options;
+  if (swipeDirection === 'vertical') {
+    // for `vertical` direction to work, we need to set `fullScreenSwipeEnabled` to `true`
+    // so the screen can be dismissed from any point on screen.
+    // `customAnimationOnSwipe` needs to be set to `true` so the `stackAnimation` set by user can be used,
+    // otherwise `simple_push` will be used.
+    // Also, the default animation for this direction seems to be `slide_from_bottom`.
+    if (fullScreenSwipeEnabled === undefined) {
+      fullScreenSwipeEnabled = true;
+    }
+    if (customAnimationOnSwipe === undefined) {
+      customAnimationOnSwipe = true;
+    }
+    if (stackAnimation === undefined) {
+      stackAnimation = 'slide_from_bottom';
+    }
+  }
 
   if (index === 0) {
     // first screen should always be treated as `push`, it resolves problems with no header animation
@@ -194,8 +218,11 @@ const RouteView = ({
       style={StyleSheet.absoluteFill}
       customAnimationOnSwipe={customAnimationOnSwipe}
       fullScreenSwipeEnabled={fullScreenSwipeEnabled}
+      homeIndicatorHidden={homeIndicatorHidden}
       gestureEnabled={isAndroid ? false : gestureEnabled}
       nativeBackButtonDismissalEnabled={nativeBackButtonDismissalEnabled}
+      navigationBarColor={navigationBarColor}
+      navigationBarHidden={navigationBarHidden}
       replaceAnimation={replaceAnimation}
       screenOrientation={screenOrientation}
       stackAnimation={stackAnimation}
@@ -205,6 +232,8 @@ const RouteView = ({
       statusBarHidden={statusBarHidden}
       statusBarStyle={statusBarStyle}
       statusBarTranslucent={statusBarTranslucent}
+      swipeDirection={swipeDirection}
+      transitionDuration={transitionDuration}
       onHeaderBackButtonClicked={() => {
         navigation.dispatch({
           ...StackActions.pop(),

package/src/types.tsx

@@ -47,6 +47,7 @@ export type BlurEffectTypes =
   | 'systemThickMaterialDark'
   | 'systemChromeMaterialDark';
 export type ScreenReplaceTypes = 'push' | 'pop';
+export type SwipeDirectionTypes = 'vertical' | 'horizontal';
 export type ScreenOrientationTypes =
   | 'default'
   | 'all'
@@ -101,6 +102,12 @@ export interface ScreenProps extends ViewProps {
    * @platform ios
    */
   gestureEnabled?: boolean;
+  /**
+   * Whether the home indicator should be hidden on this screen. Defaults to `false`.
+   *
+   * @platform ios
+   */
+  homeIndicatorHidden?: boolean;
   /**
    * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
    * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.
@@ -109,6 +116,18 @@ export interface ScreenProps extends ViewProps {
    * @platform android
    */
   nativeBackButtonDismissalEnabled?: boolean;
+  /**
+   * Sets the navigation bar color. Defaults to initial status bar color.
+   *
+   * @platform android
+   */
+  navigationBarColor?: string;
+  /**
+   * Sets the visibility of the navigation bar. Defaults to `false`.
+   *
+   * @platform android
+   */
+  navigationBarHidden?: boolean;
   /**
    * A callback that gets called when the current screen appears.
    */
@@ -214,6 +233,23 @@ export interface ScreenProps extends ViewProps {
    * @platform android
    */
   statusBarTranslucent?: boolean;
+  /**
+   * Sets the direction in which you should swipe to dismiss the screen.
+   * When using `vertical` option, options `fullScreenSwipeEnabled: true`, `customAnimationOnSwipe: true` and `stackAnimation: 'slide_from_bottom'` are set by default.
+   * The following values are supported:
+   * - `vertical` – dismiss screen vertically
+   * - `horizontal` – dismiss screen horizontally (default)
+   *
+   * @platform ios
+   */
+  swipeDirection?: SwipeDirectionTypes;
+  /**
+   * Changes the duration (in milliseconds) of `slide_from_bottom`, `fade_from_bottom`, `fade` and `simple_push` transitions on iOS. Defaults to `350`.
+   * The duration of `default` and `flip` transitions isn't customizable.
+   *
+   * @platform ios
+   */
+  transitionDuration?: number;
 }
 
 export interface ScreenContainerProps extends ViewProps {
@@ -441,17 +477,17 @@ export interface SearchBarProps {
   onChangeText?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 
   /**
-   * A callback that gets called when search bar has received focus
+   * A callback that gets called when search bar is closed
+   *
+   * @platform android
    */
   onClose?: () => void;
   /**
-   * A callback that gets called when search bar is opened
-   *
-   * @platform android
+   * A callback that gets called when search bar has received focus
    */
   onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
   /**
-   * A callback that gets called when search bar is closed
+   * A callback that gets called when search bar is opened
    *
    * @platform android
    */
@@ -470,4 +506,23 @@ export interface SearchBarProps {
    * The search field text color
    */
   textColor?: string;
+  /**
+   * The search hint text color
+   *
+   * @plaform android
+   */
+  hintTextColor?: string;
+  /**
+   * The search and close icon color shown in the header
+   *
+   * @plaform android
+   */
+  headerIconColor?: string;
+  /**
+   * Show the search hint icon when search bar is focused
+   *
+   * @plaform android
+   * @default true
+   */
+  shouldShowHintSearchIcon?: boolean;
 }