Last active
October 5, 2018 13:09
-
-
Save tjkang/89b5a6723f991b754f5cc06f415f14b7 to your computer and use it in GitHub Desktop.
Push Notification for React Native
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Sample React Native App | |
* https://github.com/facebook/react-native | |
* @flow | |
*/ | |
import React, { Component } from 'react'; | |
import { | |
StyleSheet, | |
Text, | |
TouchableOpacity, | |
View | |
} from 'react-native'; | |
import PushNotificationController from "./PushNotificationController"; | |
export default class App extends Component { | |
render() { | |
return ( | |
<View style={styles.container}> | |
<PushNotificationController /> | |
<Text style={styles.welcome}> | |
Welcome to Push Notification for React Native! | |
</Text> | |
</View> | |
); | |
} | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
justifyContent: 'center', | |
alignItems: 'center', | |
backgroundColor: '#F5FCFF', | |
}, | |
welcome: { | |
fontSize: 20, | |
textAlign: 'center', | |
margin: 10, | |
}, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import { Platform } from 'react-native'; | |
import FCM, {FCMEvent, RemoteNotificationResult, WillPresentNotificationResult, NotificationType} from "react-native-fcm"; | |
export default class PushNotificationController extends Component { | |
constructor(props) { | |
super(props); | |
} | |
componentDidMount() { | |
FCM.requestPermissions(); | |
FCM.getFCMToken().then(token => { | |
console.log("TOKEN (getFCMToken)", token); | |
}); | |
FCM.getInitialNotification().then(notif => { | |
console.log("INITIAL NOTIFICATION", notif) | |
}); | |
this.notificationListner = FCM.on(FCMEvent.Notification, notif => { | |
console.log("Notification", notif); | |
if(notif.local_notification){ | |
return; | |
} | |
if(notif.opened_from_tray){ | |
return; | |
} | |
if(Platform.OS ==='ios'){ | |
//optional | |
//iOS requires developers to call completionHandler to end notification process. If you do not call it your background remote notifications could be throttled, to read more about it see the above documentation link. | |
//This library handles it for you automatically with default behavior (for remote notification, finish with NoData; for WillPresent, finish depend on "show_in_foreground"). However if you want to return different result, follow the following code to override | |
//notif._notificationType is available for iOS platfrom | |
switch(notif._notificationType){ | |
case NotificationType.Remote: | |
notif.finish(RemoteNotificationResult.NewData) //other types available: RemoteNotificationResult.NewData, RemoteNotificationResult.ResultFailed | |
break; | |
case NotificationType.NotificationResponse: | |
notif.finish(); | |
break; | |
case NotificationType.WillPresent: | |
notif.finish(WillPresentNotificationResult.All) //other types available: WillPresentNotificationResult.None | |
break; | |
} | |
} | |
this.showLocalNotification(notif); | |
}); | |
this.refreshTokenListener = FCM.on(FCMEvent.RefreshToken, token => { | |
console.log("TOKEN (refreshUnsubscribe)", token); | |
}); | |
} | |
showLocalNotification(notif) { | |
FCM.presentLocalNotification({ | |
title: notif.title, | |
body: notif.body, | |
priority: "high", | |
click_action: notif.click_action, | |
show_in_foreground: true, | |
local: true | |
}); | |
} | |
componentWillUnmount() { | |
this.notificationListner.remove(); | |
this.refreshTokenListener.remove(); | |
} | |
render() { | |
return null; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment