|
1 | 1 | # Installation & Setup
|
2 | 2 |
|
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. |
| 3 | +Version >= 12 requires React Native 0.73 / Expo 50 or newer (because of [`unstable_enablePackageExports`](https://metrobundler.dev/docs/configuration/#unstable_enablepackageexports-experimental)). Use version 11 if you're on older version of RN / Expo. |
4 | 4 |
|
5 | 5 | Version >= 11 requires React Native 0.71 / Expo 48 or newer. Use version 10 if you're on older version of RN / Expo.
|
6 | 6 |
|
7 |
| -1. 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 | +1. In your `tsconfig.json`, make sure you set up `module` and `moduleResolution` like this: |
| 8 | + |
| 9 | + ``` |
| 10 | + "module": "ESNext", |
| 11 | + "moduleResolution": "Bundler", |
| 12 | + ``` |
| 13 | + |
| 14 | + [source 1](https://twitter.com/mattpocockuk/status/1724462050288587123), [source 2](https://callstack.github.io/react-native-builder-bob/esm). This is required for TS to see the typings exported via [package.json `exports`](https://reactnative.dev/blog/2023/06/21/package-exports-support). |
8 | 15 |
|
9 | 16 | 2. 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.
|
10 | 17 |
|
11 |
| -```js |
12 |
| -// if you use Expo: |
13 |
| -const config = getDefaultConfig(__dirname); |
14 |
| -// unstable_enablePackageExports: true, |
15 |
| -config.resolver.unstable_enablePackageExports = true; |
16 |
| -module.exports = config; |
17 |
| - |
18 |
| -// if you use bare React Native: |
19 |
| -const config = { |
20 |
| - resolver: { |
21 |
| - unstable_enablePackageExports: true, |
22 |
| - }, |
23 |
| -}; |
24 |
| -module.exports = mergeConfig(getDefaultConfig(__dirname), config); |
25 |
| -``` |
| 18 | + ```js |
| 19 | + // if you use Expo: |
| 20 | + const config = getDefaultConfig(__dirname); |
| 21 | + // unstable_enablePackageExports: true, |
| 22 | + config.resolver.unstable_enablePackageExports = true; |
| 23 | + module.exports = config; |
| 24 | + |
| 25 | + // if you use bare React Native: |
| 26 | + const config = { |
| 27 | + resolver: { |
| 28 | + unstable_enablePackageExports: true, |
| 29 | + }, |
| 30 | + }; |
| 31 | + module.exports = mergeConfig(getDefaultConfig(__dirname), config); |
| 32 | + ``` |
26 | 33 |
|
27 | 34 | 3. `yarn add react-navigation-header-buttons`
|
28 | 35 |
|
|
0 commit comments