Send data from React Native component to WebView

Question

I really tried to make a connection between my react native component and my webview but it doesn't work . Have you any solution ? Here is my code :

      let Script = ` 

  document.getElementById("input").addEventListener("focus", function(data) 
                         {alert(data.data)})

   `;

  render(){
       return(
     <View>
    <WebView
  style={{ flex: 1 }}
  source={{
    html:
      '</br></br></br></br><form > <input id="input" class="input" 
    type="text" 
    placeholder="Product barcode "/></form>'
  }}
  keyboardDisplayRequiresUserAction={false} //ios
  autoFocus={true} //android
  injectedJavaScript={Script1}
  automaticallyAdjustContentInsets={false}
  allowFileAccessFromFileURLs={true}
  scalesPageToFit={false}
  mixedContentMode={"always"}
  javaScriptEnabled={true}
  javaScriptEnabledAndroid={true}
  startInLoadingState={true}
  onMessage={event => {

  alert("HI")

  }}
  onLoad={() => {}}
  />      
    <Button
        onPress={ this.refs.WEBVIEW_REF.postMessage("Hello from RN");}
        title="Scan Barcode"
        color="#6495ED"
      />
   </View> })

I want just to dispatch the alert after clicking on the button so when i focus the input of the WebView .

Lukáš Šálek · Accepted Answer · 2019-01-15 15:33:58Z

1

you can try wrap webview into TouchableWithoutFeedback

answered Jan 15, 2019 at 15:33

Lukáš Šálek

1,3163 gold badges21 silver badges45 bronze badges

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

2 Comments

Asma_Kh Over a year ago

thank you for your response but i don't think it will be a good solution because i am using a generated webview it's not simple like the example here . So i search a solution which can be suitable to all types of webview

Lukáš Šálek Over a year ago

Did you use it?

Collectives™ on Stack Overflow

Send data from React Native component to WebView

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related