react-native-screens 5.0.0-alpha.2 → 5.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-screens",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.4",
   "description": "Native navigation primitives for your React Native app.",
   "scripts": {
     "submodules": "git submodule update --init --recursive && (cd react-navigation && yarn && yarn build && cd ../)",
@@ -16,7 +16,8 @@
     "format-android-cpp": "find android/src/main/cpp -iname \"*.h\" -o -iname \"*.cpp\" | xargs clang-format -i",
     "format": "yarn format-js && yarn format-android && yarn format-ios && yarn format-common && yarn format-cpp && yarn format-android-cpp",
     "lint-js": "eslint --ext '.js,.ts,.tsx' --fix src",
-    "lint-android": "./android/gradlew -p android spotlessCheck -q",
+    "lint-android": "yarn check-android-layers && ./android/gradlew -p android spotlessCheck -q",
+    "check-android-layers": "node ./scripts/check-android-layers.js",
     "lint": "yarn lint-js && yarn lint-android",
     "release": "yarn prepare && npm login && release-it",
     "prepare": "bob build && husky install"
@@ -43,11 +44,13 @@
     "android/src/fabric/",
     "android/src/versioned/",
     "android/build.gradle",
+    "android/consumer-rules.pro",
     "android/CMakeLists.txt",
     "ios/",
     "cpp/",
     "windows/",
     "RNScreens.podspec",
+    "Package.swift",
     "react-native.config.js",
     "README.md",
     "!**/__tests__",
@@ -81,11 +84,11 @@
     "@react-native-community/cli": "20.2.0",
     "@react-native-community/cli-platform-android": "20.2.0",
     "@react-native-community/cli-platform-ios": "20.2.0",
-    "@react-native/babel-preset": "0.87.0-rc.3",
-    "@react-native/eslint-config": "0.87.0-rc.3",
-    "@react-native/jest-preset": "0.87.0-rc.3",
-    "@react-native/metro-config": "0.87.0-rc.3",
-    "@react-native/typescript-config": "0.87.0-rc.3",
+    "@react-native/babel-preset": "0.87.0",
+    "@react-native/eslint-config": "0.87.0",
+    "@react-native/jest-preset": "0.87.0",
+    "@react-native/metro-config": "0.87.0",
+    "@react-native/typescript-config": "0.87.0",
     "@react-navigation/native": "^5.8.0",
     "@react-navigation/stack": "^5.10.0",
     "@types/jest": "^29.5.13",
@@ -108,7 +111,7 @@
     "prettier": "^2.8.8",
     "react": "19.2.3",
     "react-dom": "^19.1.0",
-    "react-native": "0.87.0-rc.3",
+    "react-native": "0.87.0",
     "react-native-builder-bob": "^0.23.2",
     "react-native-gesture-handler": "^3.0.1",
     "react-native-reanimated": "^3.19.0",

package/react-native.config.js

@@ -1,4 +1,7 @@
 module.exports = {
+  spm: {
+    name: 'RNScreens',
+  },
   dependency: {
     platforms: {
       android: {

package/src/components/modals/form-sheet/FormSheet.types.ts

@@ -183,7 +183,7 @@ export interface FormSheetProps {
    *
    * This event is fired when the sheet was dismissed via the `isOpen` prop changing to `false`.
    *
-   * @platform ios
+   * @platform android, ios
    */
   onDismiss?: FormSheetEventHandler<EmptyEventPayload> | undefined;
 

package/src/components/stack/header/StackHeaderConfig.android.tsx

@@ -1,20 +1,11 @@
-import React, {
-  ComponentRef,
-  forwardRef,
-  Ref,
-  useImperativeHandle,
-  useRef,
-} from 'react';
+import React, { ComponentRef, useImperativeHandle, useRef } from 'react';
 import {
-  Image,
   type NativeSyntheticEvent,
   processColor,
   StyleSheet,
+  type TextStyle,
 } from 'react-native';
-import type {
-  StackHeaderConfigProps,
-  StackHeaderConfigRef,
-} from './StackHeaderConfig.types';
+import type { StackHeaderConfigProps } from './StackHeaderConfig.types';
 import StackHeaderConfigAndroidNativeComponent, {
   Commands as StackHeaderConfigAndroidNativeCommands,
 } from '../../../fabric/stack/StackHeaderConfigAndroidNativeComponent';
@@ -43,13 +34,10 @@ import { parseAndroidIconToNativeProps } from '../../shared';
 /**
  * EXPERIMENTAL API, MIGHT CHANGE W/O ANY NOTICE
  */
-function StackHeaderConfig(
-  props: StackHeaderConfigProps,
-  forwardedRef: Ref<StackHeaderConfigRef>,
-) {
+function StackHeaderConfig(props: StackHeaderConfigProps) {
   // ios props are safely dropped
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { android, ios, ...baseProps } = props;
+  const { ref: forwardedRef, android, ios, ...baseProps } = props;
 
   const ref = useHeaderConfigRef(forwardedRef);
 
@@ -59,6 +47,7 @@ function StackHeaderConfig(
     centerSubview,
     trailingSubview,
     backButtonIcon,
+    overflowIcon,
     scrollFlagScroll,
     scrollFlagEnterAlways,
     scrollFlagEnterAlwaysCollapsed,
@@ -66,9 +55,27 @@ function StackHeaderConfig(
     scrollFlagSnap,
     toolbarMenu,
     toolbarMenuGroupDividerEnabled,
+    titleFontWeight,
+    subtitleFontWeight,
+    expandedTitleFontWeight,
+    collapsedTitleFontWeight,
+    expandedSubtitleFontWeight,
+    collapsedSubtitleFontWeight,
     ...filteredAndroidProps
   } = android ?? {};
 
+  // Native expects font weight as a string; RN allows numeric weights too.
+  const fontWeightProps = {
+    titleFontWeight: fontWeightToNative(titleFontWeight),
+    subtitleFontWeight: fontWeightToNative(subtitleFontWeight),
+    expandedTitleFontWeight: fontWeightToNative(expandedTitleFontWeight),
+    collapsedTitleFontWeight: fontWeightToNative(collapsedTitleFontWeight),
+    expandedSubtitleFontWeight: fontWeightToNative(expandedSubtitleFontWeight),
+    collapsedSubtitleFontWeight: fontWeightToNative(
+      collapsedSubtitleFontWeight,
+    ),
+  };
+
   const parsedToolbarMenu = parseToolbarMenuToNativeProps(toolbarMenu);
   const handleToolbarMenuItemPress = (
     event: NativeSyntheticEvent<StackHeaderToolbarMenuItemPressEventAndroid>,
@@ -91,6 +98,7 @@ function StackHeaderConfig(
   };
 
   const backButtonIconProps = parseBackButtonIconToNativeProps(backButtonIcon);
+  const overflowIconProps = parseOverflowIconToNativeProps(overflowIcon);
   const scrollFlagProps = resolveScrollFlags(filteredAndroidProps.type, {
     scrollFlagScroll,
     scrollFlagEnterAlways,
@@ -110,7 +118,9 @@ function StackHeaderConfig(
       onToolbarMenuGroupSelectionChange={handleToolbarMenuGroupSelectionChange}
       {...baseProps}
       {...filteredAndroidProps}
+      {...fontWeightProps}
       {...backButtonIconProps}
+      {...overflowIconProps}
       {...scrollFlagProps}>
       {/*
         Please note that the order of the subviews MUST match
@@ -142,35 +152,38 @@ function StackHeaderConfig(
   );
 }
 
+function fontWeightToNative(
+  fontWeight: TextStyle['fontWeight'],
+): string | undefined {
+  return fontWeight == null ? undefined : String(fontWeight);
+}
+
 function parseBackButtonIconToNativeProps(
   icon: StackHeaderConfigPropsAndroid['backButtonIcon'],
 ): Pick<
   StackHeaderConfigAndroidNativeComponentProps,
   'backButtonImageIconResource' | 'backButtonDrawableIconResourceName'
 > {
-  if (!icon) {
-    return {};
-  }
+  const parsed = parseAndroidIconToNativeProps(icon);
 
-  if (icon.type === 'imageSource') {
-    const resolved = Image.resolveAssetSource(icon.imageSource);
-    if (!resolved) {
-      console.error(
-        '[RNScreens] failed to resolve an asset for back button icon',
-      );
-    }
-    return {
-      backButtonImageIconResource: resolved || undefined,
-    };
-  } else if (icon.type === 'drawableResource') {
-    return {
-      backButtonDrawableIconResourceName: icon.name,
-    };
-  } else {
-    throw new Error(
-      '[RNScreens] Incorrect icon format for Android. You must provide `imageSource` or `drawableResource`.',
-    );
-  }
+  return {
+    backButtonImageIconResource: parsed.imageIconResource,
+    backButtonDrawableIconResourceName: parsed.drawableIconResourceName,
+  };
+}
+
+function parseOverflowIconToNativeProps(
+  icon: StackHeaderConfigPropsAndroid['overflowIcon'],
+): Pick<
+  StackHeaderConfigAndroidNativeComponentProps,
+  'overflowIconImageIconResource' | 'overflowIconDrawableIconResourceName'
+> {
+  const parsed = parseAndroidIconToNativeProps(icon);
+
+  return {
+    overflowIconImageIconResource: parsed.imageIconResource,
+    overflowIconDrawableIconResourceName: parsed.drawableIconResourceName,
+  };
 }
 
 type ScrollFlagFields = {
@@ -227,7 +240,7 @@ function resolveScrollFlags(
   };
 }
 
-function useHeaderConfigRef(forwardedRef: Ref<StackHeaderConfigRef>) {
+function useHeaderConfigRef(forwardedRef: StackHeaderConfigProps['ref']) {
   const ref =
     useRef<ComponentRef<typeof StackHeaderConfigAndroidNativeComponent>>(null);
 
@@ -589,6 +602,4 @@ function parseToolbarMenuElementOptionsToNativeProps(
   return nativeOptions;
 }
 
-export default forwardRef<StackHeaderConfigRef, StackHeaderConfigProps>(
-  StackHeaderConfig,
-);
+export default StackHeaderConfig;