CODEWITHSUNDEEP
react-native
Asma_Kh
Asma_Kh

Reputation: 93

Send data from React Native component to WebView

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 .

Upvotes: 0

Views: 1261

Answers (1)

Luk&#225;š Š&#225;lek
Luk&#225;š Š&#225;lek

Reputation: 1336

you can try wrap webview into TouchableWithoutFeedback

Upvotes: 1

Related Questions