inokawa/react-native-react-bridge

Webview renders empty

Closed this issue · 4 comments

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 it's not triggering onLoadError, If you check zip file thats the output of the library of the webpage

@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,
    });
  }
};

@inokawa thanks