refactor: remove babel-plugin-module-resolver

INSTALL.md

@@ -1,12 +1,12 @@
 # Installation & Setup
 
-Version >= 12 requires React Native 0.73 / Expo 50 or newer. Use version 11 if you're on older version of RN / Expo.
+Version >= 12 requires React Native 0.73 / Expo 50 or newer (because of `unstable_enablePackageExports`). Use version 11 if you're on older version of RN / Expo.
 
 Version >= 11 requires React Native 0.71 / Expo 48 or newer. Use version 10 if you're on older version of RN / Expo.
 
-0. In your `tsconfig.json`, make sure you have [`"moduleResolution": "nodenext"`](https://www.typescriptlang.org/tsconfig#moduleResolution) set. This is required for TS to see the typings exported via [package.json `exports`](https://reactnative.dev/blog/2023/06/21/package-exports-support).
+0. In your `tsconfig.json`, make sure you have [`"moduleResolution": "NodeNext"`](https://www.typescriptlang.org/tsconfig#moduleResolution) set. This is required for TS to see the typings exported via [package.json `exports`](https://reactnative.dev/blog/2023/06/21/package-exports-support).
 
-1. add [`unstable_enablePackageExports`](https://metrobundler.dev/docs/configuration/#unstable_enablepackageexports-experimental)) to your metro config (in `metro.config.js`). This field will default to `true` in a future version of RN so you can remove it and not worry about it later. This allows us to do some bundle size savings.
+1. add [`unstable_enablePackageExports`](https://metrobundler.dev/docs/configuration/#unstable_enablepackageexports-experimental) to your metro config (in `metro.config.js`). This field will default to `true` in a future version of RN so don't need to worry about it. This allows us to do some bundle size savings.
 
 ```js
 // if you use Expo:
@@ -28,7 +28,7 @@ module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 
 3. Wrap your root component in a `HeaderButtons` Provider and pass the `stackType` prop (`'native' | 'js'`), as seen in [example's App.tsx](https://github.com/vonovak/react-navigation-header-buttons/blob/master/example/src/App.tsx).
 
-There are 3 providers to choose from - you'll get an actionable warning if you don't use the right one. They are:
+There are 3 providers to choose from. You'll get an actionable warning if you don't use the right one. They are:
 
 - `HeaderButtonsProvider` - the recommended one, which assumes you will use `overflowMenuPressHandlerDropdownMenu` on Android but not iOS (because that's the default behavior that the library ships with). Internally, this translates to `HeaderButtonsProviderDropdownMenu` on Android and `HeaderButtonsProviderPlain` on iOS.
 - `HeaderButtonsProviderPlain` - use it if you're not planning to use `overflowMenuPressHandlerDropdownMenu` at all. It will shave a few kB off your bundle and Hermes won't have to parse some code that would not run in the end.

README.md

@@ -109,7 +109,7 @@ See [Installation & Setup](INSTALL.md)
 
 Is a wrapper over all the visible header buttons (those can be text-buttons, icon-button, or any custom react elements).
 
-You should provide the `HeaderButtonComponent` prop that encapsulates how all buttons rendered in children will look. Typically, you'll want to provide a component that wraps [`HeaderButton`](#headerbutton) as seen in the example. However, you're free to use your own component (see `HeaderButton.tsx` for reference).
+You should provide the `HeaderButtonComponent` prop that encapsulates how all buttons rendered in children will look. Typically, you'll want to provide a component that wraps [`HeaderButton`](#headerbutton) as seen in the example above. However, you're free to use your own component (see `HeaderButton.tsx` for reference).
 
 In particular, it allows setting `IconComponent`, `size` and `color` in one place so that you don't need to repeat it for each icon-button - but you can override those for each `Item` if you like.
 
@@ -140,9 +140,9 @@ Renders text, or icon inside a [PlatformPressable](https://reactnavigation.org/d
 `Item` also accepts other props that you'll typically not need to pass because `HeaderButtonComponent` already knows them (eg. `iconSize`) or because they are pulled from the React Navigation's theme object (`color`).
 
 | additional props and type                                | description                                                                             | note |
-| -------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---- |
+| -------------------------------------------------------- |-----------------------------------------------------------------------------------------| ---- |
 | IconComponent?: ComponentType                            | component to use for the icons, for example from `react-native-vector-icons`            |      |
-| iconSize?: number                                        | iconSize                                                                                |      |
+| iconSize?: number                                        | icon size                                                                               |      |
 | color?: string                                           | color of icons and buttons                                                              |      |
 | renderButton?: (params: VisibleButtonProps) => ReactNode | renders the body of the button (text or icon), defaults to `defaultRenderVisibleButton` |      |
 
@@ -151,14 +151,16 @@ Renders text, or icon inside a [PlatformPressable](https://reactnavigation.org/d
 Defines the behavior for overflow button (if there is one). You can render `OverflowMenu` only by itself too, you do not need to wrap it in `HeaderButtons`.
 The most important prop is `onPress` which defines what kind of overflow menu we should show.
 
+If `OverflowMenu` contains no valid child elements, nothing will be rendered at all. (No `OverflowIcon`, no wrapper.)
+
 The package exports common handlers you can use, but you can provide your own too (via the `onPress` prop):
 
 | exported handler                       | description                                                                                                                                                                                                                                                                                                                                                 |
 | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `defaultOnOverflowMenuPress`           | The default. Uses `overflowMenuPressHandlerActionSheet` on iOS, and `overflowMenuPressHandlerDropdownMenu` otherwise.                                                                                                                                                                                                                                       |
 | `overflowMenuPressHandlerActionSheet`  | This is iOS-only: it displays overflow items in an `ActionSheetIOS`                                                                                                                                                                                                                                                                                         |
 | `overflowMenuPressHandlerPopupMenu`    | This is Android-only: it displays overflow items using `UIManager.showPopupMenu`                                                                                                                                                                                                                                                                            |
 | `overflowMenuPressHandlerDropdownMenu` | Can be used on iOS, Android and Web. Displays overflow items in a material popup adapted from [react-native-paper](https://callstack.github.io/react-native-paper/docs/components/Menu), credit for an amazing job goes to them. This `Menu` is bundled in this library (no dependency on `react-native-paper`) but only `require`d if you actually use it. |
-| `defaultOnOverflowMenuPress`           | The default. Uses `overflowMenuPressHandlerActionSheet` on iOS, and `overflowMenuPressHandlerDropdownMenu` otherwise.                                                                                                                                                                                                                                       |
 
 You can also use the [react-native-menu](https://github.com/react-native-menu/menu) to show the overflow menu, as seen in the example app.
 
@@ -177,7 +179,7 @@ You can also use the [react-native-menu](https://github.com/react-native-menu/me
 | other props                                  | props passed to the nested `PlatformPressable`              | pass eg. `pressColor` to control ripple color on Android                                                                |
 
 > [!NOTE]
-> There are important limitations on what can be passed as children to `OverflowMenu`. Please read below:
+> There are important limitations on what can be passed as children to `OverflowMenu`:
 
 Children passed to `OverflowMenu` should be
 
@@ -191,7 +193,6 @@ This limitation may look weird, but it should not really bother you in any way:
 The limitation exists because we need to be able to transform declarative React elements into imperative calls (`ActionSheetIOS.showActionSheetWithOptions` / `UIManager.showPopupMenu`).
 If this is a problem for you for some reason, please raise an issue, and we'll see what can be done about it.
 
-If `OverflowMenu` contains no valid child elements, nothing will be rendered at all. (No `OverflowIcon`, no wrapper.)
 
 <details><summary>examples</summary>
 <p>

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['module:@react-native/babel-preset'],
 };

example/.gitignore

@@ -69,3 +69,7 @@ yarn-error.log
 .metro-health-check*
 
 # @end expo-cli
+
+# generated by tests
+requires-android.txt
+requires-ios.txt

example/babel.config.js

@@ -1,22 +1,11 @@
-const path = require('path');
-const pak = require('../package.json');
-
-module.exports = function (api) {
-  api.cache(true);
-
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
-          },
-        },
-      ],
-    ],
-  };
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
 };
+
+// module.exports = function (api) {
+//   api.cache(true);
+//
+//   return {
+//     presets: ['babel-preset-expo'],
+//   };
+// };

example/metro.config.js

@@ -22,6 +22,7 @@ const config = {
   // So we block them at the root, and alias them to the versions in example's node_modules
   resolver: {
     ...defaultConfig.resolver,
+    unstable_enablePackageExports: true,
 
     blockList: exclusionList(
       modules.map(
@@ -30,10 +31,15 @@ const config = {
       )
     ),
 
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
+    extraNodeModules: modules.reduce(
+      (acc, name) => {
+        acc[name] = path.join(__dirname, 'node_modules', name);
+        return acc;
+      },
+      {
+        [pak.name]: root,
+      }
+    ),
   },
 };
 module.exports = config;

example/package.json

@@ -17,7 +17,7 @@
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "@react-navigation/stack": "^6.3.16",
-    "expo": "~50.0.15",
+    "expo": "~50.0.17",
     "expo-splash-screen": "~0.26.4",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
@@ -28,11 +28,13 @@
     "react-native-screens": "~3.29.0",
     "react-native-web": "~0.19.6"
   },
+  "resolutions": {
+    "@types/react": "18.2.79"
+  },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@expo/webpack-config": "~19.0.1",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^4.1.0"
+    "babel-loader": "^8.1.0"
   },
   "private": true
 }

example/src/App.tsx

@@ -4,7 +4,6 @@ import { HeaderButtonsProvider } from 'react-navigation-header-buttons/HeaderBut
 // just for custom overflow menu onPress action
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
 import { StatusBar } from 'expo-status-bar';
 import { ThemeContext, ThemeProvider } from './ThemeProvider';
 import { screens } from './NavTypes';
@@ -64,7 +63,6 @@ const ThemedApp = () => {
   return (
     <NavigationContainer theme={theme}>
       <StatusBar style="light" backgroundColor="darkgreen" />
-
       <ActionSheetProvider>
         <HeaderButtonsProvider stackType={stackType}>
           <TabbedApp />