@kbach/react-native 1.0.0-beta.13 → 1.0.0-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -74,6 +74,56 @@ useEffect(() => setMounted(true), []);
74
74
  <View className={mounted ? 'bg-gray-1 dark:bg-gray-12' : 'bg-gray-1'} />;
75
75
  ```
76
76
 
77
+ ### Monorepo installs (npm/yarn/pnpm workspaces)
78
+
79
+ If your app lives in a monorepo where `@kbach/react-native` is a workspace
80
+ package (a `file:`/`link:` dependency, or hoisted rather than nested), watch
81
+ for **two physical copies of `react-native`/`react`** ending up in your
82
+ dependency tree — one this package would otherwise resolve up to from its
83
+ own directory, and a different one your app's own files resolve to. Metro
84
+ walks `node_modules` hierarchically per-file, so it can silently hand two
85
+ different files two different copies of the *same* module, each with its
86
+ own separate module state.
87
+
88
+ This isn't hypothetical: it's the root cause of a real dark-mode bug this
89
+ package shipped and fixed — `useColorScheme()`/`Appearance` in one copy
90
+ never saw changes made through the other, so an explicit theme toggle
91
+ appeared to do nothing. The fix is a Metro config override that forces a
92
+ single instance, **required in your app**, not something this package can
93
+ do on your behalf from inside `node_modules`:
94
+
95
+ ```js
96
+ // metro.config.js
97
+ const path = require('path');
98
+ // React Native CLI: const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
99
+ // Expo: const { getDefaultConfig } = require('expo/metro-config');
100
+
101
+ const projectRoot = __dirname;
102
+ const workspaceRoot = path.resolve(projectRoot, '../..'); // -> your monorepo root
103
+
104
+ const config = getDefaultConfig(projectRoot);
105
+ config.watchFolders = [workspaceRoot];
106
+
107
+ const forcedSingleInstance = {
108
+ 'react-native': path.resolve(projectRoot, 'node_modules/react-native'),
109
+ react: path.resolve(projectRoot, 'node_modules/react'),
110
+ };
111
+ const defaultResolveRequest = config.resolver.resolveRequest;
112
+ config.resolver.resolveRequest = (context, moduleName, platform) => {
113
+ if (Object.prototype.hasOwnProperty.call(forcedSingleInstance, moduleName)) {
114
+ return { type: 'sourceFile', filePath: require.resolve(forcedSingleInstance[moduleName]) };
115
+ }
116
+ return defaultResolveRequest
117
+ ? defaultResolveRequest(context, moduleName, platform)
118
+ : context.resolveRequest(context, moduleName, platform);
119
+ };
120
+
121
+ module.exports = config; // (React Native CLI: mergeConfig(getDefaultConfig(projectRoot), config))
122
+ ```
123
+
124
+ A single, non-monorepo `npm install` never hits this — only relevant if your
125
+ app and `@kbach/react-native` share a workspace root.
126
+
77
127
  ## Dark mode
78
128
 
79
129
  ```tsx