inokawa / react-native-react-bridge

An easy way to integrate your React (or Preact/React Native Web) app into React Native app with WebView.
https://www.npmjs.com/package/react-native-react-bridge
MIT License
270 stars 21 forks source link

Webview renders empty #170

Closed itsnyx closed 6 months ago

itsnyx commented 7 months ago

Describe the bug Hello i've tried example in my project and web view renders empty and problem is not with the webview compnent because i've tested it. with other sources and it worked ok. and also webview dosen't call onError method instead it loads the page perfectly but display blank.

"react-native-react-bridge": "^0.11.2",
"react-native-webview": "^13.8.6",
"react-dom": "^18.2.0",
"react": "18.2.0",
"react-native": "0.71.18",

and when i console.log webapp it will return this: (file was too long so i've uploaded via zip) outt.html.zip

and i saved that file to html file and opening it with browser it also returns blank page.

Screenshot 2024-04-24 at 12 58 10 PM

inokawa commented 7 months ago

Try https://github.com/inokawa/react-native-react-bridge?tab=readme-ov-file#my-webview-displays-a-blank-page

itsnyx commented 7 months ago

@inokawa it's not triggering onLoadError, If you check zip file thats the output of the library of the webpage

itsnyx commented 7 months ago

@inokawa my project was native project then i added expo support to my project here are my config files :

metro.config.js

const {getDefaultConfig} = require('metro-config');
const {
  createSentryMetroSerializer,
} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('./customTransformer.js'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
    serializer: {
      customSerializer: createSentryMetroSerializer(),
    },
  };
})();

and customTransformer.js

const reactNativeReactBridgeTransformer = require('react-native-react-bridge/lib/plugin');
const svgTransformer = require('react-native-svg-transformer');

module.exports.transform = function ({src, filename, options}) {
  if (filename.endsWith('.svg')) {
    return svgTransformer.transform({src, filename, options});
  } else {
    return reactNativeReactBridgeTransformer.transform({
      src,
      filename,
      options,
    });
  }
};
itsnyx commented 6 months ago

@inokawa thanks