@trycourier/courier-react-native
Version:
Inbox, Push Notifications, and Preferences for React Native
76 lines (75 loc) • 4 kB
JavaScript
import React, { useEffect } from "react";
import { Platform, DeviceEventEmitter } from "react-native";
import { Modules } from "../Modules";
const CourierInbox = Modules.getNativeComponent('CourierInboxView');
export const CourierInboxView = (props) => {
let onClickInboxMessageAtIndexListener = undefined;
let onLongPressInboxMessageAtIndexListener = undefined;
let onClickInboxActionForMessageAtIndexListener = undefined;
let onScrollInboxListener = undefined;
useEffect(() => {
return () => {
onClickInboxMessageAtIndexListener?.remove();
onLongPressInboxMessageAtIndexListener?.remove();
onClickInboxActionForMessageAtIndexListener?.remove();
onScrollInboxListener?.remove();
};
}, []);
useEffect(() => {
onClickInboxMessageAtIndexListener?.remove();
if (Platform.OS === 'android' && props.onClickInboxMessageAtIndex) {
onClickInboxMessageAtIndexListener = DeviceEventEmitter.addListener('courierClickMessageAtIndex', onClickInboxMessageAtIndex);
}
}, [props.onClickInboxMessageAtIndex]);
const onClickInboxMessageAtIndex = (event) => {
// Parse the native event data
if (props.onClickInboxMessageAtIndex) {
const index = event["index"];
const message = JSON.parse(event["message"]);
props.onClickInboxMessageAtIndex(message, index);
}
};
useEffect(() => {
onLongPressInboxMessageAtIndexListener?.remove();
if (Platform.OS === 'android' && props.onLongPressInboxMessageAtIndex) {
onLongPressInboxMessageAtIndexListener = DeviceEventEmitter.addListener('courierLongPressMessageAtIndex', onLongPressInboxMessageAtIndex);
}
}, [props.onLongPressInboxMessageAtIndex]);
const onLongPressInboxMessageAtIndex = (event) => {
// Parse the native event data
if (props.onLongPressInboxMessageAtIndex) {
const index = event["index"];
const message = JSON.parse(event["message"]);
props.onLongPressInboxMessageAtIndex(message, index);
}
};
useEffect(() => {
onClickInboxActionForMessageAtIndexListener?.remove();
if (Platform.OS === 'android' && props.onClickInboxActionForMessageAtIndex) {
onClickInboxActionForMessageAtIndexListener = DeviceEventEmitter.addListener('courierClickActionAtIndex', onClickInboxActionForMessageAtIndex);
}
}, [props.onClickInboxActionForMessageAtIndex]);
const onClickInboxActionForMessageAtIndex = (event) => {
// Parse the native event data
if (props.onClickInboxActionForMessageAtIndex) {
const index = event["index"];
const action = JSON.parse(event["action"]);
const message = JSON.parse(event["message"]);
props.onClickInboxActionForMessageAtIndex(action, message, index);
}
};
useEffect(() => {
onScrollInboxListener?.remove();
if (Platform.OS === 'android' && props.onScrollInbox) {
onScrollInboxListener = DeviceEventEmitter.addListener('courierScrollInbox', onScrollInbox);
}
}, [props.onScrollInbox]);
const onScrollInbox = (event) => {
// Parse the native event data
if (props.onScrollInbox) {
const contentOffset = event["contentOffset"];
props.onScrollInbox(contentOffset["y"], contentOffset["x"]);
}
};
return (React.createElement(CourierInbox, { canSwipePages: props.canSwipePages ?? false, theme: props.theme ?? { light: undefined, dark: undefined }, onClickInboxMessageAtIndex: (event) => onClickInboxMessageAtIndex(event.nativeEvent), onLongPressInboxMessageAtIndex: (event) => onLongPressInboxMessageAtIndex(event.nativeEvent), onClickInboxActionForMessageAtIndex: (event) => onClickInboxActionForMessageAtIndex(event.nativeEvent), onScrollInbox: (event) => onScrollInbox(event.nativeEvent), style: props.style }));
};