Skip to content

Commit 4f08758

Browse files
vonovakvonovak
committed
refactor: remove babel-plugin-module-resolver
1 parent 22edb52 commit 4f08758

22 files changed

+3783
-4122
lines changed

‎INSTALL.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# Installation & Setup
22

3-
Version >= 12 requires React Native 0.73 / Expo 50 or newer. Use version 11 if you're on older version of RN / Expo.
3+
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.
44

55
Version >= 11 requires React Native 0.71 / Expo 48 or newer. Use version 10 if you're on older version of RN / Expo.
66

7-
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).
7+
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).
88

9-
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.
9+
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.
1010

1111
```js
1212
// if you use Expo:
@@ -28,7 +28,7 @@ module.exports = mergeConfig(getDefaultConfig(__dirname), config);
2828

2929
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).
3030

31-
There are 3 providers to choose from - you'll get an actionable warning if you don't use the right one. They are:
31+
There are 3 providers to choose from. You'll get an actionable warning if you don't use the right one. They are:
3232

3333
- `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.
3434
- `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

+7-6
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ See [Installation & Setup](INSTALL.md)
109109

110110
Is a wrapper over all the visible header buttons (those can be text-buttons, icon-button, or any custom react elements).
111111

112-
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).
112+
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).
113113

114114
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.
115115

@@ -140,9 +140,9 @@ Renders text, or icon inside a [PlatformPressable](https://reactnavigation.org/d
140140
`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`).
141141

142142
| additional props and type | description | note |
143-
| -------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---- |
143+
| -------------------------------------------------------- |-----------------------------------------------------------------------------------------| ---- |
144144
| IconComponent?: ComponentType | component to use for the icons, for example from `react-native-vector-icons` | |
145-
| iconSize?: number | iconSize | |
145+
| iconSize?: number | icon size | |
146146
| color?: string | color of icons and buttons | |
147147
| renderButton?: (params: VisibleButtonProps) => ReactNode | renders the body of the button (text or icon), defaults to `defaultRenderVisibleButton` | |
148148

@@ -151,14 +151,16 @@ Renders text, or icon inside a [PlatformPressable](https://reactnavigation.org/d
151151
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`.
152152
The most important prop is `onPress` which defines what kind of overflow menu we should show.
153153

154+
If `OverflowMenu` contains no valid child elements, nothing will be rendered at all. (No `OverflowIcon`, no wrapper.)
155+
154156
The package exports common handlers you can use, but you can provide your own too (via the `onPress` prop):
155157

156158
| exported handler | description |
157159
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
160+
| `defaultOnOverflowMenuPress` | The default. Uses `overflowMenuPressHandlerActionSheet` on iOS, and `overflowMenuPressHandlerDropdownMenu` otherwise. |
158161
| `overflowMenuPressHandlerActionSheet` | This is iOS-only: it displays overflow items in an `ActionSheetIOS` |
159162
| `overflowMenuPressHandlerPopupMenu` | This is Android-only: it displays overflow items using `UIManager.showPopupMenu` |
160163
| `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. |
161-
| `defaultOnOverflowMenuPress` | The default. Uses `overflowMenuPressHandlerActionSheet` on iOS, and `overflowMenuPressHandlerDropdownMenu` otherwise. |
162164

163165
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.
164166

@@ -177,7 +179,7 @@ You can also use the [react-native-menu](https://github.com/react-native-menu/me
177179
| other props | props passed to the nested `PlatformPressable` | pass eg. `pressColor` to control ripple color on Android |
178180

179181
> [!NOTE]
180-
> There are important limitations on what can be passed as children to `OverflowMenu`. Please read below:
182+
> There are important limitations on what can be passed as children to `OverflowMenu`:
181183
182184
Children passed to `OverflowMenu` should be
183185

@@ -191,7 +193,6 @@ This limitation may look weird, but it should not really bother you in any way:
191193
The limitation exists because we need to be able to transform declarative React elements into imperative calls (`ActionSheetIOS.showActionSheetWithOptions` / `UIManager.showPopupMenu`).
192194
If this is a problem for you for some reason, please raise an issue, and we'll see what can be done about it.
193195

194-
If `OverflowMenu` contains no valid child elements, nothing will be rendered at all. (No `OverflowIcon`, no wrapper.)
195196

196197
<details><summary>examples</summary>
197198
<p>

‎babel.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
presets: ['module:metro-react-native-babel-preset'],
2+
presets: ['module:@react-native/babel-preset'],
33
};

‎example/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,7 @@ yarn-error.log
6969
.metro-health-check*
7070

7171
# @end expo-cli
72+
73+
# generated by tests
74+
requires-android.txt
75+
requires-ios.txt

‎example/babel.config.js

+10-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
1-
const path = require('path');
2-
const pak = require('../package.json');
3-
4-
module.exports = function (api) {
5-
api.cache(true);
6-
7-
return {
8-
presets: ['babel-preset-expo'],
9-
plugins: [
10-
[
11-
'module-resolver',
12-
{
13-
extensions: ['.tsx', '.ts', '.js', '.json'],
14-
alias: {
15-
// For development, we want to alias the library to the source
16-
[pak.name]: path.join(__dirname, '..', pak.source),
17-
},
18-
},
19-
],
20-
],
21-
};
1+
module.exports = {
2+
presets: ['module:@react-native/babel-preset'],
223
};
4+
5+
// module.exports = function (api) {
6+
// api.cache(true);
7+
//
8+
// return {
9+
// presets: ['babel-preset-expo'],
10+
// };
11+
// };

‎example/metro.config.js

+10-4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const config = {
2222
// So we block them at the root, and alias them to the versions in example's node_modules
2323
resolver: {
2424
...defaultConfig.resolver,
25+
unstable_enablePackageExports: true,
2526

2627
blockList: exclusionList(
2728
modules.map(
@@ -30,10 +31,15 @@ const config = {
3031
)
3132
),
3233

33-
extraNodeModules: modules.reduce((acc, name) => {
34-
acc[name] = path.join(__dirname, 'node_modules', name);
35-
return acc;
36-
}, {}),
34+
extraNodeModules: modules.reduce(
35+
(acc, name) => {
36+
acc[name] = path.join(__dirname, 'node_modules', name);
37+
return acc;
38+
},
39+
{
40+
[pak.name]: root,
41+
}
42+
),
3743
},
3844
};
3945
module.exports = config;

‎example/package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@react-navigation/native": "^6.1.6",
1818
"@react-navigation/native-stack": "^6.9.12",
1919
"@react-navigation/stack": "^6.3.16",
20-
"expo": "~50.0.15",
20+
"expo": "~50.0.17",
2121
"expo-splash-screen": "~0.26.4",
2222
"expo-status-bar": "~1.11.1",
2323
"react": "18.2.0",
@@ -28,11 +28,13 @@
2828
"react-native-screens": "~3.29.0",
2929
"react-native-web": "~0.19.6"
3030
},
31+
"resolutions": {
32+
"@types/react": "18.2.79"
33+
},
3134
"devDependencies": {
3235
"@babel/core": "^7.20.0",
3336
"@expo/webpack-config": "~19.0.1",
34-
"babel-loader": "^8.1.0",
35-
"babel-plugin-module-resolver": "^4.1.0"
37+
"babel-loader": "^8.1.0"
3638
},
3739
"private": true
3840
}

‎example/src/App.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { HeaderButtonsProvider } from 'react-navigation-header-buttons/HeaderBut
44
// just for custom overflow menu onPress action
55
import { ActionSheetProvider } from '@expo/react-native-action-sheet';
66
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
7-
87
import { StatusBar } from 'expo-status-bar';
98
import { ThemeContext, ThemeProvider } from './ThemeProvider';
109
import { screens } from './NavTypes';
@@ -64,7 +63,6 @@ const ThemedApp = () => {
6463
return (
6564
<NavigationContainer theme={theme}>
6665
<StatusBar style="light" backgroundColor="darkgreen" />
67-
6866
<ActionSheetProvider>
6967
<HeaderButtonsProvider stackType={stackType}>
7068
<TabbedApp />

0 commit comments

Comments
 (0)