Native Events
Native Events
Native events allow native code to communicate asynchronous updates back to JavaScript, such as notifying your app when a native process completes or when a device state changes.
Using NativeEventEmitter
NativeEventEmitter provides a way for native modules to emit events that JavaScript components can subscribe to and react accordingly.
javascript
import { NativeEventEmitter, NativeModules } from 'react-native';
const { MyNativeModule } = NativeModules;
const eventEmitter = new NativeEventEmitter(MyNativeModule);
Subscribing to Native Events
javascript
useEffect(() => {
const subscription = eventEmitter.addListener('onDownloadProgress', (data) => {
console.log('Progress:', data.progress);
});
return () => subscription.remove();
}, []);
Emitting Events from Android (Java)
java
getReactApplicationContext()
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("onDownloadProgress", progressData);
Emitting Events from iOS (Swift)
swift
@objc func sendEvent() {
self.sendEvent(withName: "onDownloadProgress", body: ["progress": 50])
}
Common Use Cases for Native Events
- Reporting download or upload progress from native code
- Notifying JavaScript of device state changes, such as battery level
- Communicating results from long-running native background tasks
Cleaning Up Event Listeners
Always remove event listeners in a useEffect cleanup function to prevent memory leaks and avoid receiving events after a component has unmounted.
Conclusion
Native events, implemented through NativeEventEmitter, provide a powerful mechanism for native code to communicate asynchronous updates back to your React Native JavaScript layer.
