From a599fcdf4dc244eb2c7117eb683299201cba5205 Mon Sep 17 00:00:00 2001 From: renato Date: Wed, 12 Oct 2016 17:13:17 -0300 Subject: [PATCH] Added simple notifications --- Examples/simple-fcm-client/.gitignore | 1 + Examples/simple-fcm-client/app/App.js | 67 +++++++++++++++++++ .../simple-fcm-client/app/FirebaseClient.js | 54 +++++++++++++++ .../simple-fcm-client/app/PushController.js | 35 ++++++++++ Examples/simple-fcm-client/index.android.js | 36 +--------- Examples/simple-fcm-client/index.ios.js | 36 +--------- 6 files changed, 163 insertions(+), 66 deletions(-) create mode 100644 Examples/simple-fcm-client/app/App.js create mode 100644 Examples/simple-fcm-client/app/FirebaseClient.js create mode 100644 Examples/simple-fcm-client/app/PushController.js diff --git a/Examples/simple-fcm-client/.gitignore b/Examples/simple-fcm-client/.gitignore index 4f02e05..ae8fa79 100644 --- a/Examples/simple-fcm-client/.gitignore +++ b/Examples/simple-fcm-client/.gitignore @@ -43,3 +43,4 @@ android/keystores/debug.keystore # FCM ios/SimpleFcmClient/GoogleService-Info.plist android/app/google-services.json +app/FirebaseConstants.js diff --git a/Examples/simple-fcm-client/app/App.js b/Examples/simple-fcm-client/app/App.js new file mode 100644 index 0000000..a358221 --- /dev/null +++ b/Examples/simple-fcm-client/app/App.js @@ -0,0 +1,67 @@ +/** + * 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 PushController from "./PushController"; +import firebaseClient from "./FirebaseClient"; + +export default class App extends Component { + render() { + return ( + + + + Welcome to Simple Fcm Client! + + + firebaseClient.sendNotification()} style={styles.button}> + Send Notification + + + firebaseClient.sendData()} style={styles.button}> + Send Data + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, + button: { + backgroundColor: "teal", + paddingHorizontal: 20, + paddingVertical: 10, + marginVertical: 5, + borderRadius: 10 + }, + buttonText: { + color: "white", + backgroundColor: "transparent" + }, +}); diff --git a/Examples/simple-fcm-client/app/FirebaseClient.js b/Examples/simple-fcm-client/app/FirebaseClient.js new file mode 100644 index 0000000..f6bb1bd --- /dev/null +++ b/Examples/simple-fcm-client/app/FirebaseClient.js @@ -0,0 +1,54 @@ +import FirebaseConstants from "./FirebaseConstants"; + +const API_URL = "https://fcm.googleapis.com/fcm/send"; + +class FirebaseClient { + + sendNotification() { + let body = { + "to": FirebaseConstants.TO, + "notification":{ + "icon": "appLogo", + "title": "Notification Title", + "body": "Notification Body", + "sound": "default", + "click_action": "fcm.ACTION.HELLO" + }, + "priority": 10 + } + + this._send(JSON.stringify(body), "notification"); + } + + sendData() { + let body = { + "to": FirebaseConstants.TO, + "data":{ + "icon": "appLogo", + "title": "Notification Title", + "body": "Notification Body", + "sound": "default", + "click_action": "fcm.ACTION.HELLO" + }, + "priority": 10 + } + + this._send(JSON.stringify(body), "data"); + } + + _send(body, type) { + let headers = new Headers({ + "Content-Type": "application/json", + "Content-Length": parseInt(body.length), + "Authorization": "key=" + FirebaseConstants.KEY + }); + + fetch(API_URL, { method: "POST", headers, body }) + .then(response => console.log("Send " + type + " response", response)) + .catch(error => console.log("Error sending " + type, error)); + } + +} + +let firebaseClient = new FirebaseClient(); +export default firebaseClient; diff --git a/Examples/simple-fcm-client/app/PushController.js b/Examples/simple-fcm-client/app/PushController.js new file mode 100644 index 0000000..5fa9c53 --- /dev/null +++ b/Examples/simple-fcm-client/app/PushController.js @@ -0,0 +1,35 @@ +import React, { Component } from "react"; + +import FCM from "react-native-fcm"; + +export default class PushController extends Component { + componentDidMount() { + FCM.requestPermissions(); + + FCM.getFCMToken().then(token => { + console.log("TOKEN (getFCMToken)", token); + }); + + FCM.getInitialNotification().then(notif => { + console.log("INITIAL NOTIFICATION", notif) + }); + + this.notificationUnsubscribe = FCM.on("notification", notif => { + console.log("Notification", notif); + }); + + this.refreshUnsubscribe = FCM.on("refreshToken", token => { + console.log("TOKEN (refreshUnsubscribe)", token); + }); + } + + componentWillUnmount() { + this.refreshUnsubscribe(); + this.notificationUnsubscribe(); + } + + + render() { + return null; + } +} diff --git a/Examples/simple-fcm-client/index.android.js b/Examples/simple-fcm-client/index.android.js index 506346e..abd8111 100644 --- a/Examples/simple-fcm-client/index.android.js +++ b/Examples/simple-fcm-client/index.android.js @@ -12,42 +12,12 @@ import { View } from 'react-native'; +import App from "./app/App"; + export default class SimpleFcmClient extends Component { render() { - return ( - - - Welcome to React Native! - - - To get started, edit index.android.js - - - Double tap R on your keyboard to reload,{'\n'} - Shake or press menu button for dev menu - - - ); + return (); } } -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, -}); - AppRegistry.registerComponent('SimpleFcmClient', () => SimpleFcmClient); diff --git a/Examples/simple-fcm-client/index.ios.js b/Examples/simple-fcm-client/index.ios.js index 4a40c4c..abd8111 100644 --- a/Examples/simple-fcm-client/index.ios.js +++ b/Examples/simple-fcm-client/index.ios.js @@ -12,42 +12,12 @@ import { View } from 'react-native'; +import App from "./app/App"; + export default class SimpleFcmClient extends Component { render() { - return ( - - - Welcome to React Native! - - - To get started, edit index.ios.js - - - Press Cmd+R to reload,{'\n'} - Cmd+D or shake for dev menu - - - ); + return (); } } -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, -}); - AppRegistry.registerComponent('SimpleFcmClient', () => SimpleFcmClient); -- 2.26.2