react-native-event-bridge
Send and Receive events between React Native and native.
DISCLAIMER
This project is currently in beta.
Core APIs are subject to change. We encourage people to try this library out and provide us feedback as we get it to a stable state.
Getting started
$ npm install react-native-event-bridge --save
Mostly automatic installation
$ react-native link react-native-event-bridge
Manual installation
iOS
- In Xcode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-event-bridge
and addMSREventBridge.xcodeproj
- In Xcode, in the project navigator, select your project. Add
libMSREventBridge.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
iOS using CocoaPods
You can use CocoaPods to manage your native (Swift and Objective-C) dependencies:
- Add MSREventBridge to your Podfile
pod 'MSREventBridge', :path => '../node_modules/react-native-event-bridge'
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import net.mischneider.MSREventBridgePackage;
to the imports at the top of the file - Add
new MSREventBridgePackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-event-bridge' project(':react-native-event-bridge').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-event-bridge/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-event-bridge')
Usage
For different usage examples look into the example and example-swift folder.
Emit events from React Native
JavaScript
; // Emit an event from within a React componentEventBridge; // Emit an event with callback from within a React componentEventBridge;
Handle events from native
iOS:
// Receiver needs to conform to the MSREventBridgeEventReceiver protocol // Implement the following two methods by receiver that conforms to MSREventBridgeEventReceiver // Handle events - (void)onEventWithName:(NSString *)eventName info:(nullable NSDictionary *)info // Handle events with callback - (void)onEventWithName:(NSString *)eventName info:(nullable NSDictionary *)info callback:(MSREventBridgeReventReceiverCallback)callback;
Android:
// Receiver needs to implement MSREventBridgeEventReceiver e.g.
Subscribe to events in React Native
JavaScript
// Import PropTypes for contextTypes; // Import EventBridge from the react-native-event-bridge native module; // Event listener need to define a rootTag contextType.static contextTypes = rootTag: PropTypesnumber; // Add and remove as event listener { // Register for any kind of event that will be sent from the native side this_eventSubscription = EventBridge;} { this_eventSubscription && this_eventSubscription;}
Sending events from native
iOS
//... // Get the RCTBridge RCTBridge *bridge = ...; // Send an event with name 'eventName' to listeners for this event within the React Native component hierarchy // of that is managed by this view ;/...
Android
// Get the MSREventBridgeInstanceManagerProvider somehow MSREventBridgeInstanceManagerProvider instanceManagerProvider = (MSREventBridgeInstanceManagerProvider)this.; // Emit event via MSREventBridgeModule String rowID = ...;WritableMap map = new WritableNativeMap();map.;MSREventBridgeModule.;
Example fetching data
JavaScript
// Fetch some datathis // Load some data and update the data sourceEventBridge;
iOS
- (void)onEventWithName:(NSString *)eventName info:(nullable NSDictionary *)info callback:(MSREventBridgeReventReceiverCallback)callback
Android
@Overridepublic void { Log.; final String activityClassName = this..; // Example how to load some async data if (name.) { final int count = info.; // Simulate some data loading delay final Handler handler = new Handler(); handler.; return; } //... }
Development / Example
- In one terminal session, run
$ cd example && npm run-script sync-rneb
. This will make changes that you make to the module available to the example app, in a way that will trigger the Example app’s ‘packager’ to reload those files. - In another terminal session, run
$ cd example && react-native run-ios
. This will start the ‘packager’ for the example app, which serves the processed JS source to the Example app.
TODO:
- API refinements
- Improve general documentation
- Improve documentation around "enhanced" features
License
Copyright 2017-2018 Michael Schneider
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.