import React from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Text,
StatusBar,
TouchableOpacity,
Alert,
Platform,
} from 'react-native';
import messaging from '@react-native-firebase/messaging';
import {CometChat} from '@cometchat/chat-sdk-react-native';
import {decode, encode} from 'base-64';
if (!global.btoa) {
global.btoa = encode;
}
if (!global.atob) {
global.atob = decode;
}
var topics = [];
this.DOMParser = require('xmldom').DOMParser;
class App extends React.Component {
async componentDidMount() {
this.checkPermission();
this.createNotificationListeners();
}
async checkPermission() {
const authStatus = await messaging.requestPermission();
const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;
if (enabled) {
await messaging.getToken();
}
}
createNotificationListeners() {
this.messageListener = messaging.onMessage(async remoteMessage => {
Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
});
}
subscribeForPushNotification() {
var appSettings = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();
CometChat.init("APP_ID", appSettings).then(
() => {
CometChat.login("UID", "API_KEY").then(
user => {
CometChat.getJoinedGroups().then(
groups=>{
let isiOS = Platform.OS === 'ios';
var userTopic = appId + "_user_" + user.getUid();
if(isiOS){
var userTopicIos = userTopic + "_ios";
topics.push(userTopicIos);
}else{
var userTopicIos = userTopic + "_notification";
topics.push(userTopic);
}
groups.forEach(group => {
var groupTopic = appId + "_group_" + group;
if(isiOS){
var groupTopicIos = groupTopic + "_ios";
topics.push(groupTopicIos);
}else{
var groupTopicIos = groupTopic + "_notification";
topics.push(groupTopic);
}
});
topics.forEach(async topic => {
console.log('subscribing to topic => ', topic);
await messaging.subscribeToTopic(topic);
});
}
);
}
);
}, error => {
console.log('Initialization failed with error:', error);
}
);
}
unsubscribeFromPushNotification(){
topics.forEach(async topic => {
await messaging.unsubscribeFromTopic(topic);
});
}
render() {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView style={styles.body}>
<View>
<Text>CometChat Push Notification</Text>
</View>
<View style={styles.separator} />
<TouchableOpacity
accessibilityRole={'button'}
onPress={()=>{this.subscribeForPushNotification();}}
style={styles.linkContainer}>
<Text style={styles.link}>Subscribe for push notification</Text>
</TouchableOpacity>
<View style={styles.separator} />
<TouchableOpacity
accessibilityRole={'button'}
onPress={()=>{this.unsubscribeFromPushNotification();}}
style={styles.linkContainer}>
<Text style={styles.link}>Unsubscribe from push notification</Text>
</TouchableOpacity>
<View style={styles.separator} />
</SafeAreaView>
</>
);
}
}
const styles = StyleSheet.create({
body: {
backgroundColor: '#fff',
justifyContent: 'space-around',
alignItems: 'center',
flex: 1,
height: '100%',
},
linkContainer: {
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 8,
backgroundColor: '#ddd',
borderRadius: 40,
height: 40,
width: '80%',
},
separator: {
backgroundColor: '#ddd',
height: 1,
width: '100%',
},
});
export default App;
