React Native WebView Messaging
React Native WebView extension with 2-way event-based communication API
🔥 check out early release of v2
- Installation
- Roadmap
- Usage
- API Docs
Installation
npm install react-native-webview-messaging
Roadmap
- channel for redux actions
- enhanced dev environment
Examples
React Native view
;;; { return <View> <WebView ref= { thiswebview = webview; } source= /> <TouchableHighlight onPress=thissendMessageToWebView underlayColor='transparent'> <Text>Send message to WebView</Text> </TouchableHighlight> </View> } { thiswebviewmessagesChannel; thiswebviewmessagesChannel; thiswebviewmessagesChannel; } { thiswebview; thiswebview; thiswebview; }
WebView
; RNMsgChannel;RNMsgChannel;RNMsgChannel; RNMsgChannel;RNMsgChannel; RNMsgChannel;
API Docs
WebView
extends WebView from react-native
Import
// es6 modules;// commonJSconst WebView = ;
WebView#send(text: String)
Emits 'text'
event on RNMessagesChannel
inside WebView
WebView#sendJSON(json: Object)
Emits 'json'
event on RNMessagesChannel
inside WebView
WebView#emit(eventName: String, [eventData: Object])
Emits custom event on RNMessagesChannel
inside WebView
messagesChannel: EventEmitter
Emits events sent from WebView
'text'
- emitted whenRNMessagesChannel#send(text: String)
is called in WebView'json'
- emitted whenRNMessagesChannel#sendJSON(json: Object)
is called in WebView- you can also emit custom events with
RNMessagesChannel#emit(eventName: String, [eventData: Object])
method
RNMessagesChannel
extends EventEmitter
Emits events sent from RN app
'text'
- emitted whenWebView#send(text: String)
is called in RN app'json'
- emitted whenWebView#sendJSON(json: Object)
is called in RN app- you can also emit custom events with
WebView#emit(eventName: String, [eventData: Object])
method
RNMessagesChannel#send(text: String)
Emits 'text'
event to WebView#messagesChannel
in RN app
RNMessagesChannel#sendJSON(json: Object)
Emits 'json'
event to WebView#messagesChannel
in RN app
RNMessagesChannel#emit(eventName: String, [eventData: Object])
Emits custom event to WebView#messagesChannel
in RN app
Import
// es6 modules;// commonJSconst RNMessagesChannel = ;
LICENSE
MIT