ios – Loading native html/js/css-website with react-native-webview

In my expo react-native app, the consumer is ready to load html5 web sites in a react-native-webview. The recordsdata for these web sites are hosted in s3-buckets and have comparable file buildings, e.g.:

website-folder-id/
├─ index.html (entry file)
├─ knowledge.js
├─ otherJSFiles.min.js
├─ media/
│  ├─ img1.png
│  ├─ audio1.wav

This works nice when loaded into the webview, nonetheless I need the consumer to have the ability to obtain these offline. I exploit expo-file-system to obtain the folder containing all of the recordsdata. But it surely does not work when I attempt to load this into my webview.

Right here are some things I’ve tried thus far:

const [offlineHTML, setOfflineHTML] = useState("")

const asyncFunc = async () => {
   const localUri = await FileSystem.getContentUriAsync(
          FileSystem.documentDirectory + 'downloadedWebsite/' + {id} + '/index.html'
        );
   const offlineString = await FileSystem.readAsStringAsync(localUri);
setOfflineHTML(offlineString)
}

<WebView 
  supply={{
  html: offlineHTML,
  baseUrl: 'file://'
   }}
  javaScriptEnabled
  originWhitelist={['*']}
/>

or

const [offlineUri, setOfflineUri] = useState("")

const asyncFunc = async () => {
   const localUri = await FileSystem.getContentUriAsync(
          FileSystem.documentDirectory + 'downloadedWebsite/' + {id} + '/index.html'
        );  
setOfflineUri(localUri)
}

<WebView 
  supply={{
  uri: offlineUri
   }}
  javaScriptEnabled
  originWhitelist={['*']}
/>

However I solely get a white display. Anybody who is aware of how to do that?

I’ve solely tried this on iOS.

Thanks