0

I want to create a wrapper around react-native webview such that I provide some of the default values and client can override them. I would also like to provide default implementations for methods

For Example:

<MyBaseWebView uri ={provided by user of MyBaseWebView}>
MyBaseWebView can have default implementations for onError etc.

I have been using props to send various overrides from client but I am what to do for the following:

  • ref={this.setRNWebView} This needs to be only in one of the children
  • injectedJavaScript={this.injectedJavaScript()} I don't want to inject any javascript at all if client does not send it. How can I achieve this?

The BaseWebView class looks like the following:

<WebView
  allowsInlineMediaPlayback={this.allowsInlineMediaPlayback()}
  ref={this.setRNWebView}
  source={{uri: uri}} // from prop
  mediaPlaybackRequiresUserAction={this.mediaPlaybackRequiresUserAction()}
  onMessage={this.onMessage}
  onError={this.onError}
  onLoad={this.onLoad}
  injectedJavaScript={this.injectedJavaScript()}
/>
JaSON
  • 4,843
  • 2
  • 8
  • 15
user415612
  • 457
  • 1
  • 3
  • 13

1 Answers1

0

Sounds to me like you need to add state variables, probably on the screen thats before the webview.

constructor(props) {
    super(props);
    this.state = {
      uri: "www.defaultUri.com",
      injectedJavascript: "", 
    };
  }

//then for example in a textInput in render() you could allow your 
//user to update these values

<TextInput
value={this.state.uri}
onChangeText={text => this.setState({uri: text})}/>

You can do the same for injectedJavascript or any other variable and when your user hits submit or something you can pass those state variables to your webview as props.

Let me know if this isn't what you're looking for or not clear enough.

cschultz1272
  • 130
  • 8