Search code examples
react-nativeassets

react native file cannot be loaded as its extension is not registered in assetExts

I am trying to load my local html file into webview, but i got this error:

Error: 'assets/html/lxHtmlEditor.js' cannot be loaded as its extension is not registered in assetExts

Error: 'assets/html/lxHtmlEditor.css' cannot be loaded as its extension is not registered in assetExts

here is my assets html file in my project:

enter image description here

Here is my metro config:

const defaultAssetExts = require("metro-config/src/defaults/defaults").assetExts

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
      assetExts: [ ...defaultAssetExts, "css","js"]
  }
};

my webview screen:

<WebView
                ref={require('...')}
                source={WebViewFile}

Here is html content file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" />
        
        <link rel="stylesheet" href="resources/dx/dx.material.blue.dark.css">
        <link rel="stylesheet" href="lxHtmlEditor.css">
    </head>
    <body class="dx-theme-background-color">
        <div id="dxHtmlEditor"></div>
        <script src="resources/jquery.min.js"></script>
        <script src="lxHtmlEditor.js"></script>
        <script src="resources/dx/dx-quill.min.js"></script>
        <script src="resources/dx/dx.all.js"></script>
    </body>
</html>

can someone help?

Solution

  • Here is my solution:

    let initiateSource = Platform.OS === 'ios'
        ? require('../../assets/html/LxHtmlEditor.html')
        : { uri: 'file:///android_asset/html/LxHtmlEditor.html', baseurl: 'file:///android_asset/html' }

    Note, LxHtmlEditor must be place into IOS/Android project