fix: correct package.json exports, update to 0.76 (#257)

BREAKING CHANGE: new setup instructions, fixed package.json exports

Author: vonovak

.github/actions/setup/action.yml

@@ -9,21 +9,8 @@ runs:
       with:
         node-version: 'lts/*'
 
-    - name: Get yarn cache directory path
-      id: yarn-cache-dir-path
-      shell: bash
-      run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-    - uses: actions/cache@v3
-      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-      with:
-        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock', '**/package.json') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-
-
     - name: Install dependencies
       run: |
-        yarn install --cwd example --frozen-lockfile
-        yarn install --frozen-lockfile
+        yarn --cwd example install --immutable
+        yarn install --immutable
       shell: bash

.gitignore

@@ -68,3 +68,9 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+
+# https://github.com/yarnpkg/berry/issues/454#issuecomment-530312089
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/patches

.watchmanconfig

@@ -1 +1 @@
-{}
+{}

.yarn/releases/yarn-4.5.2.cjs

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.2.cjs

.yarnrc.yml

@@ -59,7 +59,6 @@ Remember to add tests for your change if possible. Run the unit tests by:
 yarn test
 ```
 
-
 ### Commit message convention
 
 We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:

CONTRIBUTING.md

@@ -1,28 +1,35 @@
 # Installation & Setup
 
-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 >= 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.
 
 Version >= 11 requires React Native 0.71 / Expo 48 or newer. Use version 10 if you're on older version of RN / Expo.
 
-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).
+1. In your `tsconfig.json`, make sure you set up `module` and `moduleResolution` like this:
+
+   ```
+       "module": "ESNext",
+       "moduleResolution": "Bundler",
+   ```
+
+   [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).
 
 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.
 
-```js
-// if you use Expo:
-const config = getDefaultConfig(__dirname);
-// unstable_enablePackageExports: true,
-config.resolver.unstable_enablePackageExports = true;
-module.exports = config;
-
-// if you use bare React Native:
-const config = {
-  resolver: {
-    unstable_enablePackageExports: true,
-  },
-};
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
-```
+   ```js
+   // if you use Expo:
+   const config = getDefaultConfig(__dirname);
+   // unstable_enablePackageExports: true,
+   config.resolver.unstable_enablePackageExports = true;
+   module.exports = config;
+
+   // if you use bare React Native:
+   const config = {
+     resolver: {
+       unstable_enablePackageExports: true,
+     },
+   };
+   module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+   ```
 
 3. `yarn add react-navigation-header-buttons`
 

INSTALL.md

@@ -73,3 +73,7 @@ yarn-error.log
 # generated by tests
 requires-android.txt
 requires-ios.txt
+
+# prebuild
+android/
+ios/

example/.gitignore

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-4.5.2.cjs

example/.yarn/install-state.gz

@@ -11,9 +11,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.vonovak.navbar-buttons-demo"

example/.yarn/releases/yarn-4.5.2.cjs

@@ -7,34 +7,36 @@
     "ios": "expo run:ios",
     "web": "expo start --web",
     "fix-deps": "npx expo install --check",
-    "requires-ios": "yarn metro get-dependencies --entry-file App.js --platform ios --output requires-ios.txt",
-    "requires-android": "yarn metro get-dependencies --entry-file App.js --platform android --output requires-android.txt"
+    "requires-ios": "npx metro get-dependencies --entry-file App.js --platform ios --output requires-ios.txt",
+    "requires-android": "npx metro get-dependencies --entry-file App.js --platform android --output requires-android.txt"
   },
   "dependencies": {
-    "@expo/react-native-action-sheet": "^4.0.1",
-    "@react-native-menu/menu": "^0.9.1",
-    "@react-navigation/bottom-tabs": "^6.5.9",
-    "@react-navigation/native": "^6.1.6",
-    "@react-navigation/native-stack": "^6.9.12",
-    "@react-navigation/stack": "^6.3.16",
-    "expo": "~50.0.17",
-    "expo-splash-screen": "~0.26.4",
-    "expo-status-bar": "~1.11.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-gesture-handler": "~2.14.0",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "react-native-web": "~0.19.6"
+    "@expo/react-native-action-sheet": "^4.1.0",
+    "@react-native-menu/menu": "^1.1.6",
+    "@react-navigation/bottom-tabs": "^7.0.7",
+    "@react-navigation/native": "^7.0.4",
+    "@react-navigation/native-stack": "^7.1.1",
+    "@react-navigation/stack": "^7.0.6",
+    "expo": "~52.0.11",
+    "expo-splash-screen": "~0.29.13",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-error-boundary": "^4.1.2",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
+    "react-native-web": "~0.19.13"
   },
   "resolutions": {
     "@types/react": "18.2.79"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.25.2",
     "@expo/webpack-config": "~19.0.1",
     "babel-loader": "^8.1.0"
   },
-  "private": true
+  "private": true,
+  "packageManager": "yarn@4.5.2"
 }

example/.yarnrc.yml

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { HeaderButtonsProvider } from 'react-navigation-header-buttons/HeaderButtonsProvider';
+// import { HeaderButtonsProviderDropdownMenu } from 'react-navigation-header-buttons/HeaderButtonsProviderDropdownMenu';
 // just for custom overflow menu onPress action
 import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
@@ -10,6 +11,10 @@ import { screens } from './NavTypes';
 import { TabScreenWithButtons } from './screens/TabScreenWithButtons';
 import { createNativeStackNavigator as createStackNavigator } from '@react-navigation/native-stack';
 const stackType = 'native';
+import { ErrorBoundary } from 'react-error-boundary';
+import { View, Text } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
 // import { createStackNavigator } from '@react-navigation/stack';
 // const stackType = 'js';
 
@@ -62,20 +67,32 @@ const ThemedApp = () => {
   const { theme } = useContext(ThemeContext);
   return (
     <NavigationContainer theme={theme}>
-      <StatusBar style="light" backgroundColor="darkgreen" />
-      <ActionSheetProvider>
-        <HeaderButtonsProvider stackType={stackType}>
-          <TabbedApp />
-        </HeaderButtonsProvider>
-      </ActionSheetProvider>
+      <SafeAreaProvider>
+        <StatusBar style="light" backgroundColor="darkgreen" />
+        <ActionSheetProvider>
+          <HeaderButtonsProvider stackType={stackType}>
+            <TabbedApp />
+          </HeaderButtonsProvider>
+        </ActionSheetProvider>
+      </SafeAreaProvider>
     </NavigationContainer>
   );
 };
 
 export default function App() {
   return (
-    <ThemeProvider>
-      <ThemedApp />
-    </ThemeProvider>
+    <ErrorBoundary FallbackComponent={Fallback}>
+      <ThemeProvider>
+        <ThemedApp />
+      </ThemeProvider>
+    </ErrorBoundary>
+  );
+}
+function Fallback({ error }: { error: Error }) {
+  return (
+    <View>
+      <Text>Something went wrong:</Text>
+      <Text style={{ color: 'red' }}>{error?.message}</Text>
+    </View>
   );
 }