Here code of HTML and React native to send and Receive data Please checkout and give some solution if anyone have ...appreciate their support
// Below is HTML Code..
$('#submitBtn').on('click', function (e) {
try {
;
// check if form is valid
if (!$('#Form').valid()) {
return;
}
if (typeof invokeFormsAction == 'function') {
var param = $("#username").val() + "~" + $('#pwd').val();
invokeFormsAction('REMEMBER_SET|' + param);
}
// always submit form
$('#loginForm').submit();
} catch (err) {
console.log("standalone");
}
});
// React native Code
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
webview: "",
canGoBack: null,
ref: null,
}
}
onMessage = (message) => {
console.log('action result coming from the webview:==> ', message.nativeEvent);
};
onNavigationStateChange(navState) {
this.setState({
canGoBack: navState.canGoBack
});
}
onBack() {
console.log("GoBack");
this.state.webview.goBack();
}
onLoadEnd() {
this.state.webview.postMessage("RN message");
}
render() {
var INJECTED_JAVASCRIPT = `function invokeFormsAction(data){window.ReactNativeWebView.postMessage(data)}`;
return (
<SafeAreaView style={{ flex: 1 }}>
<View>
<TouchableOpacity
style={{ margin: 15 }}
disabled={!this.state.canGoBack}
onPress={this.onBack.bind(this)}
>
<Image source={require('../webtest/src/assets/images/back.png')} style={{ tintColor: "black", height: 20, width: 20, resizeMode: 'contain' }} />
</TouchableOpacity>
</View>
<WebView
ref={webView => {
this.state.webview = webView;
}}
source={{
uri: 'WEB URL',
}}
injectedJavaScript={INJECTED_JAVASCRIPT}
onMessage={this.onMessage}
onLoadEnd={() => this.onLoadEnd()}
onNavigationStateChange={this.onNavigationStateChange.bind(this)}
javaScriptEnabled={true}
/>
</SafeAreaView>
)
}
}
I need to receive data of HTML form from webview to react native and Display in onMessage() method.if anyone have ref Thanks for Support....