build(metro): add web shims for native React Native API compatibility
Add Metro configuration to resolve native-only React Native APIs with web-compatible shims. This enables packages like react-native-pager-view to work on the web platform by providing shim implementations for codegenNativeComponent, codegenNativeCommands, and CodegenTypes that are unavailable in react-native-web. Also simplify Android signing configuration in CI by using standard Gradle property names (MYAPP_UPLOAD_*) and remove the build.gradle patching step.
This commit is contained in:
@@ -19,6 +19,35 @@ config.resolver.alias = {
|
||||
// Ensure platform-specific files are resolved correctly
|
||||
config.resolver.platforms = ['ios', 'android', 'native', 'web'];
|
||||
|
||||
// Web shims for native-only React Native APIs that don't exist in react-native-web.
|
||||
// Packages like react-native-pager-view import codegenNativeComponent from
|
||||
// react-native/Libraries/Utilities/codegenNativeComponent, which calls
|
||||
// requireNativeComponent internally. On web (react-native-web), these APIs
|
||||
// don't exist, causing "(0 , _reactNativeWebDistIndex.requireNativeComponent)
|
||||
// is not a function".
|
||||
const webShimPaths = [
|
||||
'react-native/Libraries/Utilities/codegenNativeComponent',
|
||||
'react-native/Libraries/Utilities/codegenNativeCommands',
|
||||
'react-native/Libraries/Types/CodegenTypes',
|
||||
];
|
||||
|
||||
const originalResolveRequest = config.resolver.resolveRequest;
|
||||
const shimDir = path.resolve(__dirname, 'web-shims');
|
||||
|
||||
config.resolver.resolveRequest = (context, moduleName, platform) => {
|
||||
if (platform === 'web' && webShimPaths.some((p) => moduleName.endsWith(p))) {
|
||||
const shimName = moduleName.replace('react-native/Libraries/', '');
|
||||
return {
|
||||
type: 'sourceFile',
|
||||
filePath: path.join(shimDir, 'react-native', 'Libraries', shimName + '.js'),
|
||||
};
|
||||
}
|
||||
if (originalResolveRequest) {
|
||||
return originalResolveRequest(context, moduleName, platform);
|
||||
}
|
||||
return context.resolveRequest(context, moduleName, platform);
|
||||
};
|
||||
|
||||
// NOTE: enhanceMiddleware is marked as deprecated in Metro's types,
|
||||
// but there's currently no official alternative for custom dev server headers.
|
||||
// For production, configure COEP/COOP headers on your hosting platform.
|
||||
@@ -31,4 +60,4 @@ config.server.enhanceMiddleware = (middleware) => {
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
module.exports = config;
|
||||
Reference in New Issue
Block a user