diff --git a/Examples/simple-fcm-client/.gitignore b/Examples/simple-fcm-client/.gitignore index 4f02e05740db6475060c9b62d0c385dd9e3b2eb0..ae8fa79806c9fec0838f5bb9ee77d4f50efb0413 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 0000000000000000000000000000000000000000..a358221772de07feb0393837b8aae621b45f03f2 --- /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 0000000000000000000000000000000000000000..f6bb1bdf42c10193d30cc43fb1523dc7120da57d --- /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 0000000000000000000000000000000000000000..5fa9c53d9710653ce5e780098856795de009e121 --- /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 506346eb48cf8533c4ddae21027030dcc3074d41..abd811126a3a88fcd4304a27efa2e88217cd2e3f 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 4a40c4c5c5b67e55b563a2f62f0728138c20cbf6..abd811126a3a88fcd4304a27efa2e88217cd2e3f 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);