I’m developing a React Native application for an Android mobile version.
I’m using Expo Webview to use an HTML file with assets loaded inside like this <link href="../styles/style.css" rel="stylesheet">
for example (I also have a JS file that dynamically loads JS files as needed). I tried with the path <link href="./assets/styles/style.css" rel="stylesheet">
but same problem.
Everything works fine when launching expo run but when I build the APK my assets are not found because the name of my assets are hashed (like bf865d20386eaf619c.css
instead of style.css
) and put in another path.
My webview:
const [assets, error] = useAssets([require('./assets/webview/index.html')])
const [renderedOnce, setRenderedOnce] = useState(false)
const updateSource = () => {
setRenderedOnce(true)
}
return (
<WebView
ref={webViewRef}
style={styles.webview}
allowUniversalAccessFromFileURLs={true}
originWhitelist={["*"]}
source={{ uri: assets[0].localUri }}
onLoad={updateSource}
javaScriptEnabled={true}
webviewDebuggingEnabled={true}
allowingReadAccessToURL="*"
allowFileAccess={true}
allowFileAccessFromFileURLs={true}
useWebKit={true}
cacheEnabled={false}
/>)
My assets is located at the root of the project. Project > assets > (js, css, images…)
In metro.config I’ve put all the assetExt I need:
config.resolver["sourceExts"].push("css");
config.resolver["assetExts"].push("assets");
config.resolver["assetExts"].push("css");
config.resolver["assetExts"].push("ttf");
config.resolver["assetExts"].push("html");
config.resolver["assetExts"].push("svg");
config.resolver["assetExts"].push("json");
In app.json:
"assetBundlePatterns": [
"./assets/**/*"
],
...
"packagerOpts": {
"assetExts": [
"html",
"js",
"jsx",
"css",
"html",
"svg",
"ttf",
"eot",
"woff",
"json"
],
"config": "metro.config.js",
"sourceExts": [
"js",
"jsx",
"css",
"html",
"svg",
"ttf",
"eot",
"woff",
"json"
]
},
I don’t really understand how to do this. Could you please help me? Thanks in advance!