How to communcation between web inside webview back to react native apps

I'm new in React Native.

I need to create communication between RN - Web - RN (RN to Web and then Web back to RN).

Assume i have list of item inside my web that called inside a webview. Each item inside list can be tapped/clicked. When i click one of item inside item list inside my web, i will redirect it to React Native apps page and show detail of realted item.

What i have done until now :
I can inject Javascript from React Native to Webview like this :

<WebView

  source={{uri: "myweb.com/webview.php"}}

  injectedJavaScript={jsCode}

  javaScriptEnabledAndroid={true}

  style={{height: 100}} />

That code can open communication between React Native to Webpage inside webview, but i still fail to communication from Web inside webview to React Native. Can anyone explain, how to do it (and is it possible?)?

edited Nov 14 '18 at 9:57

asked Nov 14 '18 at 9:52

Crocodile

8710

add a comment |

I'm new in React Native.

I need to create communication between RN - Web - RN (RN to Web and then Web back to RN).

What i have done until now :
I can inject Javascript from React Native to Webview like this :

<WebView

  source={{uri: "myweb.com/webview.php"}}

  injectedJavaScript={jsCode}

  javaScriptEnabledAndroid={true}

  style={{height: 100}} />

edited Nov 14 '18 at 9:57

asked Nov 14 '18 at 9:52

Crocodile

8710

add a comment |

I'm new in React Native.

I need to create communication between RN - Web - RN (RN to Web and then Web back to RN).

What i have done until now :
I can inject Javascript from React Native to Webview like this :

<WebView

  source={{uri: "myweb.com/webview.php"}}

  injectedJavaScript={jsCode}

  javaScriptEnabledAndroid={true}

  style={{height: 100}} />

edited Nov 14 '18 at 9:57

asked Nov 14 '18 at 9:52

Crocodile

8710

I'm new in React Native.

I need to create communication between RN - Web - RN (RN to Web and then Web back to RN).

What i have done until now :
I can inject Javascript from React Native to Webview like this :

<WebView

  source={{uri: "myweb.com/webview.php"}}

  injectedJavaScript={jsCode}

  javaScriptEnabledAndroid={true}

  style={{height: 100}} />

javascript react-native webview

edited Nov 14 '18 at 9:57

asked Nov 14 '18 at 9:52

Crocodile

8710

edited Nov 14 '18 at 9:57

asked Nov 14 '18 at 9:52

Crocodile

8710

edited Nov 14 '18 at 9:57

asked Nov 14 '18 at 9:52

Crocodile

8710

asked Nov 14 '18 at 9:52

Crocodile

8710

asked Nov 14 '18 at 9:52

Crocodile

8710

add a comment |

1 Answer
1

active

oldest

votes

You need to use window.postMessage to communicate from Web to RN.

In your injectedJavascript do something like this:

const injectedJs = `

  window.postMessage("Your message");

`;

(in your case, you will need to find the list DOM elements and use postMessage on every click)

And then on your WebView component read this message like so:

<WebView

    source={{uri: "myweb.com/webview.php"}}

    injectedJavaScript={injectedJs}

    startInLoadingState

    javaScriptEnabledAndroid={true}

    javaScriptEnabled={true}

    onMessage={event => {

      alert('MESSAGE >>>>' + event.nativeEvent.data);

    }}

/>

You can even send a json string as a message.

answered Nov 14 '18 at 10:49

needsleep

1,11639

So we will use like a "string code" and when React Native receive code from postMessage and then we can navigate to other React Native page ? isn't it ? or we can send navigate instruction directly from Webview ?

– Crocodile
Nov 14 '18 at 11:30

1

You will send a postMessage from WebView and then you can handle all the RN related actions inside your WebView's onMessage function. What we do in our app is send a json string as a message with actionType and bodyData. Then in our onMessage function we have a switch(actionType) and there we handle the different Views that we need to open inside our App.

– needsleep
Nov 14 '18 at 12:09

i already try this code. This code working fine in iOS, but not in Android. Nothing happen in Android. Can you explain why?

– Crocodile
Nov 15 '18 at 3:37

When i trace , the problem only appear when you try inject this : const injectedJs = ` window.postMessage("Your message"); `; In Android not working, but working if not come from injected script.

– Crocodile
Nov 15 '18 at 4:05

I have put together a snack that displays a basic usage of the postMessage, and works on my android phone. It basically triggers an alert with the loaded url. snack.expo.io/B1MDei5aX. I'm sure there are plenty of cases that you would need to tweak this a bit to make it work. For example I noticed that if you make any errors in the injected Javascript then the code doesn't run and there are no errors telling you what is wrong... Maybe you can put together a snack with your example so I can have a look.

– needsleep
Nov 15 '18 at 7:33

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297300%2fhow-to-communcation-between-web-inside-webview-back-to-react-native-apps%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You need to use window.postMessage to communicate from Web to RN.

In your injectedJavascript do something like this:

const injectedJs = `

  window.postMessage("Your message");

`;

(in your case, you will need to find the list DOM elements and use postMessage on every click)

And then on your WebView component read this message like so:

<WebView

    source={{uri: "myweb.com/webview.php"}}

    injectedJavaScript={injectedJs}

    startInLoadingState

    javaScriptEnabledAndroid={true}

    javaScriptEnabled={true}

    onMessage={event => {

      alert('MESSAGE >>>>' + event.nativeEvent.data);

    }}

/>

You can even send a json string as a message.

answered Nov 14 '18 at 10:49

needsleep

1,11639

So we will use like a "string code" and when React Native receive code from postMessage and then we can navigate to other React Native page ? isn't it ? or we can send navigate instruction directly from Webview ?

– Crocodile
Nov 14 '18 at 11:30

1

You will send a postMessage from WebView and then you can handle all the RN related actions inside your WebView's onMessage function. What we do in our app is send a json string as a message with actionType and bodyData. Then in our onMessage function we have a switch(actionType) and there we handle the different Views that we need to open inside our App.

– needsleep
Nov 14 '18 at 12:09

i already try this code. This code working fine in iOS, but not in Android. Nothing happen in Android. Can you explain why?

– Crocodile
Nov 15 '18 at 3:37

When i trace , the problem only appear when you try inject this : const injectedJs = ` window.postMessage("Your message"); `; In Android not working, but working if not come from injected script.

– Crocodile
Nov 15 '18 at 4:05

I have put together a snack that displays a basic usage of the postMessage, and works on my android phone. It basically triggers an alert with the loaded url. snack.expo.io/B1MDei5aX. I'm sure there are plenty of cases that you would need to tweak this a bit to make it work. For example I noticed that if you make any errors in the injected Javascript then the code doesn't run and there are no errors telling you what is wrong... Maybe you can put together a snack with your example so I can have a look.

– needsleep
Nov 15 '18 at 7:33

|
show 2 more comments

You need to use window.postMessage to communicate from Web to RN.

In your injectedJavascript do something like this:

const injectedJs = `

  window.postMessage("Your message");

`;

(in your case, you will need to find the list DOM elements and use postMessage on every click)

And then on your WebView component read this message like so:

<WebView

    source={{uri: "myweb.com/webview.php"}}

    injectedJavaScript={injectedJs}

    startInLoadingState

    javaScriptEnabledAndroid={true}

    javaScriptEnabled={true}

    onMessage={event => {

      alert('MESSAGE >>>>' + event.nativeEvent.data);

    }}

/>

You can even send a json string as a message.

answered Nov 14 '18 at 10:49

needsleep

1,11639

So we will use like a "string code" and when React Native receive code from postMessage and then we can navigate to other React Native page ? isn't it ? or we can send navigate instruction directly from Webview ?

– Crocodile
Nov 14 '18 at 11:30

1

You will send a postMessage from WebView and then you can handle all the RN related actions inside your WebView's onMessage function. What we do in our app is send a json string as a message with actionType and bodyData. Then in our onMessage function we have a switch(actionType) and there we handle the different Views that we need to open inside our App.

– needsleep
Nov 14 '18 at 12:09

i already try this code. This code working fine in iOS, but not in Android. Nothing happen in Android. Can you explain why?

– Crocodile
Nov 15 '18 at 3:37

When i trace , the problem only appear when you try inject this : const injectedJs = ` window.postMessage("Your message"); `; In Android not working, but working if not come from injected script.

– Crocodile
Nov 15 '18 at 4:05

I have put together a snack that displays a basic usage of the postMessage, and works on my android phone. It basically triggers an alert with the loaded url. snack.expo.io/B1MDei5aX. I'm sure there are plenty of cases that you would need to tweak this a bit to make it work. For example I noticed that if you make any errors in the injected Javascript then the code doesn't run and there are no errors telling you what is wrong... Maybe you can put together a snack with your example so I can have a look.

– needsleep
Nov 15 '18 at 7:33

|
show 2 more comments

You need to use window.postMessage to communicate from Web to RN.

In your injectedJavascript do something like this:

const injectedJs = `

  window.postMessage("Your message");

`;

(in your case, you will need to find the list DOM elements and use postMessage on every click)

And then on your WebView component read this message like so:

<WebView

    source={{uri: "myweb.com/webview.php"}}

    injectedJavaScript={injectedJs}

    startInLoadingState

    javaScriptEnabledAndroid={true}

    javaScriptEnabled={true}

    onMessage={event => {

      alert('MESSAGE >>>>' + event.nativeEvent.data);

    }}

/>

You can even send a json string as a message.

answered Nov 14 '18 at 10:49

needsleep

1,11639

You need to use window.postMessage to communicate from Web to RN.

In your injectedJavascript do something like this:

const injectedJs = `

  window.postMessage("Your message");

`;

(in your case, you will need to find the list DOM elements and use postMessage on every click)

And then on your WebView component read this message like so:

<WebView

    source={{uri: "myweb.com/webview.php"}}

    injectedJavaScript={injectedJs}

    startInLoadingState

    javaScriptEnabledAndroid={true}

    javaScriptEnabled={true}

    onMessage={event => {

      alert('MESSAGE >>>>' + event.nativeEvent.data);

    }}

/>

You can even send a json string as a message.

answered Nov 14 '18 at 10:49

needsleep

1,11639

answered Nov 14 '18 at 10:49

needsleep

1,11639

answered Nov 14 '18 at 10:49

needsleep

1,11639

answered Nov 14 '18 at 10:49

needsleep

1,11639

So we will use like a "string code" and when React Native receive code from postMessage and then we can navigate to other React Native page ? isn't it ? or we can send navigate instruction directly from Webview ?

– Crocodile
Nov 14 '18 at 11:30

1

You will send a postMessage from WebView and then you can handle all the RN related actions inside your WebView's onMessage function. What we do in our app is send a json string as a message with actionType and bodyData. Then in our onMessage function we have a switch(actionType) and there we handle the different Views that we need to open inside our App.

– needsleep
Nov 14 '18 at 12:09

i already try this code. This code working fine in iOS, but not in Android. Nothing happen in Android. Can you explain why?

– Crocodile
Nov 15 '18 at 3:37

When i trace , the problem only appear when you try inject this : const injectedJs = ` window.postMessage("Your message"); `; In Android not working, but working if not come from injected script.

– Crocodile
Nov 15 '18 at 4:05

I have put together a snack that displays a basic usage of the postMessage, and works on my android phone. It basically triggers an alert with the loaded url. snack.expo.io/B1MDei5aX. I'm sure there are plenty of cases that you would need to tweak this a bit to make it work. For example I noticed that if you make any errors in the injected Javascript then the code doesn't run and there are no errors telling you what is wrong... Maybe you can put together a snack with your example so I can have a look.

– needsleep
Nov 15 '18 at 7:33

|
show 2 more comments

So we will use like a "string code" and when React Native receive code from postMessage and then we can navigate to other React Native page ? isn't it ? or we can send navigate instruction directly from Webview ?

– Crocodile
Nov 14 '18 at 11:30

1

You will send a postMessage from WebView and then you can handle all the RN related actions inside your WebView's onMessage function. What we do in our app is send a json string as a message with actionType and bodyData. Then in our onMessage function we have a switch(actionType) and there we handle the different Views that we need to open inside our App.

– needsleep
Nov 14 '18 at 12:09

i already try this code. This code working fine in iOS, but not in Android. Nothing happen in Android. Can you explain why?

– Crocodile
Nov 15 '18 at 3:37

When i trace , the problem only appear when you try inject this : const injectedJs = ` window.postMessage("Your message"); `; In Android not working, but working if not come from injected script.

– Crocodile
Nov 15 '18 at 4:05

I have put together a snack that displays a basic usage of the postMessage, and works on my android phone. It basically triggers an alert with the loaded url. snack.expo.io/B1MDei5aX. I'm sure there are plenty of cases that you would need to tweak this a bit to make it work. For example I noticed that if you make any errors in the injected Javascript then the code doesn't run and there are no errors telling you what is wrong... Maybe you can put together a snack with your example so I can have a look.

– needsleep
Nov 15 '18 at 7:33

So we will use like a "string code" and when React Native receive code from postMessage and then we can navigate to other React Native page ? isn't it ? or we can send navigate instruction directly from Webview ?

– Crocodile
Nov 14 '18 at 11:30

You will send a postMessage from WebView and then you can handle all the RN related actions inside your WebView's onMessage function. What we do in our app is send a json string as a message with actionType and bodyData. Then in our onMessage function we have a switch(actionType) and there we handle the different Views that we need to open inside our App.

– needsleep
Nov 14 '18 at 12:09

i already try this code. This code working fine in iOS, but not in Android. Nothing happen in Android. Can you explain why?

– Crocodile
Nov 15 '18 at 3:37

When i trace , the problem only appear when you try inject this : const injectedJs = ` window.postMessage("Your message"); `; In Android not working, but working if not come from injected script.

– Crocodile
Nov 15 '18 at 4:05

I have put together a snack that displays a basic usage of the postMessage, and works on my android phone. It basically triggers an alert with the loaded url. snack.expo.io/B1MDei5aX. I'm sure there are plenty of cases that you would need to tweak this a bit to make it work. For example I noticed that if you make any errors in the injected Javascript then the code doesn't run and there are no errors telling you what is wrong... Maybe you can put together a snack with your example so I can have a look.

– needsleep
Nov 15 '18 at 7:33

|
show 2 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky