ReactNative: WebView with local content

TLDR

  1. Copy static html (ex:- index.html) and its resources to be loaded in web view to the following paths:
  • Android: <react-native-project>/android/app/src/main/assets/
  • iOS: <react-native-project>/ios/<new group as folder>/ (Note: “New group as folder” will ensure all its contents are bundled into the IPA file.)
const isAndroid=  Platform.OS==='android'..... ..... .....<WebView source:{{uri: isAndroid?'file:///android_asset/widget/index.html'
:'./external/widget/index.html'}}/>

First Approach

import React, { Component } from 'react'
import {WebView} from 'react-native'
import Widget from './external/widget/index.html'
class ExternalWidget extends Component {
render()
{
<WebView source={Widget} scalesPageToFit/>
}
}
export default ExternalWidget

Final Approach

  1. Create assets folder by clicking on File->New->Folder-> Assets folder on android studio.
  2. Add the widget to the assets folder as seen below:
import React, { Component } from 'react'
import {WebView} from 'react-native'
class ExternalWidget extends Component {
render()
{
<WebView
source={{uri:'file:///android_asset/widget/index.html'}}
scalesPageToFit/>
}
}
export default ExternalWidget
  1. Go to xcode-> main app folder -> add new group with folder callled ‘external’ -> add the widget files as shown below:
import React, { Component } from 'react'
import {WebView} from 'react-native'
class ExternalWidget extends Component {
render()
{
<WebView source={{uri:'./external/widget/index.html'}}
scalesPageToFit/>
}
}
export default ExternalWidget

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sneha Bagri

Sneha Bagri

More from Medium

Testing Axios async hook in React native with react-hooks

Handling custom layouts on Device orientation changes in React Native

Using React Native TypeScript and Redux

Installing Redux in a React Native App(Expo Based)