React Native using pass parameter with Load local HTML file into WebView

Question

How can I pass props in Webview and get the props in my local html page

export default class HomeScreen extends React.Component {
  render() {
    return (
       <View>
            <WebView source={require('../Web/index.html')} />
          </View>  
    );
  }
}

Khoa · Accepted Answer · 2018-03-15 09:35:29Z

1

You cannot pass any props to html page inside your Webview.

But there is a trick by using injectedJavascript https://facebook.github.io/react-native/docs/webview.html#injectedjavascript

Here is example: https://www.undefinednull.com/2015/12/27/injecting-custom-javascript-into-react-natives-webview/

answered Mar 15, 2018 at 9:35

Khoa

2,9321 gold badge20 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Prabhu Over a year ago

Yes i tried injectedJavascript it's working but i want to pass an dynamic object

Khoa Over a year ago

what is the dynamic object ?

Khoa Over a year ago

if here is the static object "window.static = 1;" you mentioned => injectedJavascript for your dynamic is `window.dynObj = ${JSON.stringify(your_dynObj)};`

Prabhu Over a year ago

let say if i have a function called jsonData() which returns an array of objects, how do we inject that ex:jsonData() { const items = [ { id: 1, title: "Thomas Williams" }, { id: 2, title: "Mary Spencer" } ] return document.querySelector('#query').value = ${JSON.stringify(items)} } <WebView source={require('../Web/index.html')} injectedJavaScript = {this.jsonData} />

Khoa Over a year ago

what do you want to inject? that function definition or its returned value

|

Collectives™ on Stack Overflow

React Native using pass parameter with Load local HTML file into WebView

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related