Skip to content

R
react-native-fcm
Commit d02ea2ca authored by Libin Lu's avatar Libin Lu
Browse files
Options

update example

parent c7b04d2f
Hide whitespace changes
Inline Side-by-side
Showing with 1451 additions and 997 deletions
Examples/simple-fcm-client/android/app/src/main/java/com/google/firebase/quickstart/fcm/MainApplication.java
View file @ d02ea2ca
...@@ -10,6 +10,7 @@ import com.facebook.react.ReactInstanceManager; ...@@ -10,6 +10,7 @@ import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage; import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage; import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays; import java.util.Arrays;
import java.util.List; import java.util.List;
...@@ -36,4 +37,10 @@ public class MainApplication extends Application implements ReactApplication { ...@@ -36,4 +37,10 @@ public class MainApplication extends Application implements ReactApplication {
public ReactNativeHost getReactNativeHost() { public ReactNativeHost getReactNativeHost() {
return mReactNativeHost; return mReactNativeHost;
} }
@Override
public void onCreate() { // <-- Check this block exists
super.onCreate();
SoLoader.init(this, /* native exopackage */ false); // <-- Check this line exists within the block
}
} }
Examples/simple-fcm-client/app/App.js
View file @ d02ea2ca
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
* @flow * @flow
*/ */
import React, { Component } from 'react'; import React, { Component } from "react";
import { import {
StyleSheet, StyleSheet,
Text, Text,
...@@ -13,14 +13,14 @@ import { ...@@ -13,14 +13,14 @@ import {
Clipboard, Clipboard,
Platform, Platform,
ScrollView ScrollView
} from 'react-native'; } from "react-native";
import { StackNavigator } from 'react-navigation'; import { StackNavigator } from "react-navigation";
import FCM, {NotificationActionType} from "react-native-fcm"; import FCM, { NotificationActionType } from "react-native-fcm";
import {registerKilledListener, registerAppListener} from "./Listeners"; import { registerKilledListener, registerAppListener } from "./Listeners";
import firebaseClient from "./FirebaseClient"; import firebaseClient from "./FirebaseClient";
registerKilledListener(); registerKilledListener();
...@@ -31,86 +31,94 @@ class MainPage extends Component { ...@@ -31,86 +31,94 @@ class MainPage extends Component {
this.state = { this.state = {
token: "", token: "",
tokenCopyFeedback: "" tokenCopyFeedback: ""
} };
} }
async componentDidMount(){ async componentDidMount() {
registerAppListener(this.props.navigation); registerAppListener(this.props.navigation);
FCM.getInitialNotification().then(notif => { FCM.getInitialNotification().then(notif => {
this.setState({ this.setState({
initNotif: notif initNotif: notif
}) });
if(notif && notif.targetScreen === 'detail'){ if (notif && notif.targetScreen === "detail") {
setTimeout(()=>{ setTimeout(() => {
this.props.navigation.navigate('Detail') this.props.navigation.navigate("Detail");
}, 500) }, 500);
} }
}); });
try{ try {
let result = await FCM.requestPermissions({badge: false, sound: true, alert: true}); let result = await FCM.requestPermissions({
} catch(e){ badge: false,
sound: true,
alert: true
});
} catch (e) {
console.error(e); console.error(e);
} }
FCM.getFCMToken().then(token => { FCM.getFCMToken().then(token => {
console.log("TOKEN (getFCMToken)", token); console.log("TOKEN (getFCMToken)", token);
this.setState({token: token || ""}) this.setState({ token: token || "" });
}); });
if(Platform.OS === 'ios'){ if (Platform.OS === "ios") {
FCM.getAPNSToken().then(token => { FCM.getAPNSToken().then(token => {
console.log("APNS TOKEN (getFCMToken)", token); console.log("APNS TOKEN (getFCMToken)", token);
}); });
} }
// topic example // topic example
// FCM.subscribeToTopic('sometopic') // FCM.subscribeToTopic('sometopic')
// FCM.unsubscribeFromTopic('sometopic') // FCM.unsubscribeFromTopic('sometopic')
} }
showLocalNotification() { showLocalNotification() {
FCM.presentLocalNotification({ FCM.presentLocalNotification({
id: new Date().valueOf().toString(), // (optional for instant notification) id: new Date().valueOf().toString(), // (optional for instant notification)
title: "Test Notification with action", // as FCM payload title: "Test Notification with action", // as FCM payload
body: "Force touch to reply", // as FCM payload (required) body: "Force touch to reply", // as FCM payload (required)
sound: "bell.mp3", // "default" or filename sound: "bell.mp3", // "default" or filename
priority: "high", // as FCM payload priority: "high", // as FCM payload
click_action: "com.myapp.MyCategory", // as FCM payload - this is used as category identifier on iOS. click_action: "com.myapp.MyCategory", // as FCM payload - this is used as category identifier on iOS.
badge: 10, // as FCM payload IOS only, set 0 to clear badges badge: 10, // as FCM payload IOS only, set 0 to clear badges
number: 10, // Android only number: 10, // Android only
ticker: "My Notification Ticker", // Android only ticker: "My Notification Ticker", // Android only
auto_cancel: true, // Android only (default true) auto_cancel: true, // Android only (default true)
large_icon: "https://image.freepik.com/free-icon/small-boy-cartoon_318-38077.jpg", // Android only large_icon:
icon: "ic_launcher", // as FCM payload, you can relace this with custom icon you put in mipmap "https://image.freepik.com/free-icon/small-boy-cartoon_318-38077.jpg", // Android only
big_text: "Show when notification is expanded", // Android only icon: "ic_launcher", // as FCM payload, you can relace this with custom icon you put in mipmap
sub_text: "This is a subText", // Android only big_text: "Show when notification is expanded", // Android only
color: "red", // Android only sub_text: "This is a subText", // Android only
vibrate: 300, // Android only default: 300, no vibration if you pass 0 color: "red", // Android only
wake_screen: true, // Android only, wake up screen when notification arrives vibrate: 300, // Android only default: 300, no vibration if you pass 0
group: "group", // Android only wake_screen: true, // Android only, wake up screen when notification arrives
picture: "https://google.png", // Android only bigPicture style group: "group", // Android only
ongoing: true, // Android only picture:
my_custom_data:'my_custom_field_value', // extra data you want to throw "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png", // Android only bigPicture style
lights: true, // Android only, LED blinking (default false) ongoing: true, // Android only
show_in_foreground: true // notification when app is in foreground (local & remote) my_custom_data: "my_custom_field_value", // extra data you want to throw
lights: true, // Android only, LED blinking (default false)
show_in_foreground: true // notification when app is in foreground (local & remote)
}); });
} }
scheduleLocalNotification() { scheduleLocalNotification() {
FCM.scheduleLocalNotification({ FCM.scheduleLocalNotification({
id: 'testnotif', id: "testnotif",
fire_date: new Date().getTime()+5000, fire_date: new Date().getTime() + 5000,
vibrate: 500, vibrate: 500,
title: 'Hello', title: "Hello",
body: 'Test Scheduled Notification', body: "Test Scheduled Notification",
sub_text: 'sub text', sub_text: "sub text",
priority: "high", priority: "high",
large_icon: "https://image.freepik.com/free-icon/small-boy-cartoon_318-38077.jpg", large_icon:
"https://image.freepik.com/free-icon/small-boy-cartoon_318-38077.jpg",
show_in_foreground: true, show_in_foreground: true,
picture: 'https://firebase.google.com/_static/af7ae4b3fc/images/firebase/lockup.png', picture:
"https://firebase.google.com/_static/af7ae4b3fc/images/firebase/lockup.png",
wake_screen: true, wake_screen: true,
extra1: {a: 1}, extra1: { a: 1 },
extra2: 1 extra2: 1
}); });
} }
...@@ -118,67 +126,70 @@ class MainPage extends Component { ...@@ -118,67 +126,70 @@ class MainPage extends Component {
sendRemoteNotification(token) { sendRemoteNotification(token) {
let body; let body;
if(Platform.OS === 'android'){ if (Platform.OS === "android") {
body = { body = {
"to": token, to: token,
"data":{ data: {
"custom_notification": { custom_notification: {
"title": "Simple FCM Client", title: "Simple FCM Client",
"body": "Click me to go to detail", body: "Click me to go to detail",
"sound": "default", sound: "default",
"priority": "high", priority: "high",
"show_in_foreground": true, show_in_foreground: true,
targetScreen: 'detail' targetScreen: "detail"
} }
}, },
"priority": 10 priority: 10
} };
} else { } else {
body = { body = {
"to": token, to: token,
"notification":{ notification: {
"title": "Simple FCM Client", title: "Simple FCM Client",
"body": "Click me to go to detail", body: "Click me to go to detail",
"sound": "default" sound: "default"
}, },
data: { data: {
targetScreen: 'detail' targetScreen: "detail"
}, },
"priority": 10 priority: 10
} };
} }
firebaseClient.send(JSON.stringify(body), "notification"); firebaseClient.send(JSON.stringify(body), "notification");
} }
sendRemoteData(token) { sendRemoteData(token) {
let body = { let body = {
"to": token, to: token,
"data":{ data: {
"title": "Simple FCM Client", title: "Simple FCM Client",
"body": "This is a notification with only DATA.", body: "This is a notification with only DATA.",
"sound": "default" sound: "default"
}, },
"priority": "normal" priority: "normal"
} };
firebaseClient.send(JSON.stringify(body), "data"); firebaseClient.send(JSON.stringify(body), "data");
} }
showLocalNotificationWithAction() { showLocalNotificationWithAction() {
FCM.presentLocalNotification({ FCM.presentLocalNotification({
title: 'Test Notification with action', title: "Test Notification with action",
body: 'Force touch to reply', body: "Force touch to reply",
priority: "high", priority: "high",
show_in_foreground: true, show_in_foreground: true,
click_action: "com.myidentifi.fcm.text", // for ios click_action: "com.myidentifi.fcm.text", // for ios
android_actions: JSON.stringify([{ android_actions: JSON.stringify([
id: "view", {
title: 'view' id: "view",
},{ title: "view"
id: "dismiss", },
title: 'dismiss' {
}]) // for android, take syntax similar to ios's. only buttons are supported id: "dismiss",
title: "dismiss"
}
]) // for android, take syntax similar to ios's. only buttons are supported
}); });
} }
...@@ -187,52 +198,62 @@ class MainPage extends Component { ...@@ -187,52 +198,62 @@ class MainPage extends Component {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView style={{paddingHorizontal: 20}}> <ScrollView style={{ paddingHorizontal: 20 }}>
<Text style={styles.welcome}> <Text style={styles.welcome}>Welcome to Simple Fcm Client!</Text>
Welcome to Simple Fcm Client!
</Text> <Text style={styles.feedback}>{this.state.tokenCopyFeedback}</Text>
<Text style={styles.feedback}> <Text style={styles.feedback}>
{this.state.tokenCopyFeedback} Remote notif won't be available to iOS emulators
</Text> </Text>
<Text style={styles.feedback}> <TouchableOpacity
Remote notif won't be available to iOS emulators onPress={() => this.sendRemoteNotification(token)}
</Text> style={styles.button}
>
<TouchableOpacity onPress={() => this.sendRemoteNotification(token)} style={styles.button}> <Text style={styles.buttonText}>Send Remote Notification</Text>
<Text style={styles.buttonText}>Send Remote Notification</Text> </TouchableOpacity>
</TouchableOpacity>
<TouchableOpacity
<TouchableOpacity onPress={() => this.sendRemoteData(token)} style={styles.button}> onPress={() => this.sendRemoteData(token)}
<Text style={styles.buttonText}>Send Remote Data</Text> style={styles.button}
</TouchableOpacity> >
<Text style={styles.buttonText}>Send Remote Data</Text>
<TouchableOpacity onPress={() => this.showLocalNotification()} style={styles.button}> </TouchableOpacity>
<Text style={styles.buttonText}>Show Local Notification</Text>
</TouchableOpacity> <TouchableOpacity
onPress={() => this.showLocalNotification()}
<TouchableOpacity onPress={() => this.showLocalNotificationWithAction(token)} style={styles.button}> style={styles.button}
<Text style={styles.buttonText}>Show Local Notification with Action</Text> >
</TouchableOpacity> <Text style={styles.buttonText}>Show Local Notification</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.scheduleLocalNotification()} style={styles.button}>
<Text style={styles.buttonText}>Schedule Notification in 5s</Text> <TouchableOpacity
</TouchableOpacity> onPress={() => this.showLocalNotificationWithAction(token)}
style={styles.button}
<Text style={styles.instructions}> >
Init notif: <Text style={styles.buttonText}>
</Text> Show Local Notification with Action
<Text> </Text>
{JSON.stringify(this.state.initNotif)} </TouchableOpacity>
</Text>
<TouchableOpacity
<Text style={styles.instructions}> onPress={() => this.scheduleLocalNotification()}
Token: style={styles.button}
</Text> >
<Text selectable={true} onPress={() => this.setClipboardContent(this.state.token)}> <Text style={styles.buttonText}>Schedule Notification in 5s</Text>
{this.state.token} </TouchableOpacity>
</Text>
<Text style={styles.instructions}>Init notif:</Text>
<Text>{JSON.stringify(this.state.initNotif)}</Text>
<Text style={styles.instructions}>Token:</Text>
<Text
selectable={true}
onPress={() => this.setClipboardContent(this.state.token)}
>
{this.state.token}
</Text>
</ScrollView> </ScrollView>
</View> </View>
); );
...@@ -240,55 +261,62 @@ class MainPage extends Component { ...@@ -240,55 +261,62 @@ class MainPage extends Component {
setClipboardContent(text) { setClipboardContent(text) {
Clipboard.setString(text); Clipboard.setString(text);
this.setState({tokenCopyFeedback: "Token copied to clipboard."}); this.setState({ tokenCopyFeedback: "Token copied to clipboard." });
setTimeout(() => {this.clearTokenCopyFeedback()}, 2000); setTimeout(() => {
this.clearTokenCopyFeedback();
}, 2000);
} }
clearTokenCopyFeedback() { clearTokenCopyFeedback() {
this.setState({tokenCopyFeedback: ""}); this.setState({ tokenCopyFeedback: "" });
} }
} }
class DetailPage extends Component { class DetailPage extends Component {
render(){ render() {
return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> return (
<Text>Detail page</Text> <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
</View> <Text>Detail page</Text>
</View>
);
} }
} }
export default StackNavigator({ export default StackNavigator(
Main: { {
screen: MainPage, Main: {
screen: MainPage
},
Detail: {
screen: DetailPage
}
}, },
Detail: { {
screen: DetailPage initialRouteName: "Main"
} }
}, { );
initialRouteName: 'Main',
});
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
backgroundColor: '#F5FCFF', backgroundColor: "#F5FCFF"
}, },
welcome: { welcome: {
fontSize: 20, fontSize: 20,
textAlign: 'center', textAlign: "center",
margin: 10, margin: 10
}, },
instructions: { instructions: {
textAlign: 'center', textAlign: "center",
color: '#333333', color: "#333333",
marginBottom: 2, marginBottom: 2
}, },
feedback: { feedback: {
textAlign: 'center', textAlign: "center",
color: '#996633', color: "#996633",
marginBottom: 3, marginBottom: 3
}, },
button: { button: {
backgroundColor: "teal", backgroundColor: "teal",
...@@ -300,5 +328,5 @@ const styles = StyleSheet.create({ ...@@ -300,5 +328,5 @@ const styles = StyleSheet.create({
buttonText: { buttonText: {
color: "white", color: "white",
backgroundColor: "transparent" backgroundColor: "transparent"
}, }
}); });
Examples/simple-fcm-client/package.json
View file @ d02ea2ca
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
}, },
"dependencies": { "dependencies": {
"react": "16.0.0-alpha.12", "react": "16.0.0-alpha.12",
"react-native": "^0.47.2", "react-native": "^0.55.4",
"react-native-fcm": "^14.1.3", "react-native-fcm": "^14.1.3",
"react-native-maps": "^0.20.1", "react-native-maps": "^0.20.1",
"react-navigation": "^1.2.1" "react-navigation": "^1.2.1"
......
Examples/simple-fcm-client/yarn.lock
View file @ d02ea2ca
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment