Skip to content

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

update example

parent c7b04d2f
Show 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;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
......@@ -36,4 +37,10 @@ public class MainApplication extends Application implements ReactApplication {
public ReactNativeHost getReactNativeHost() {
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 @@
* @flow
*/
import React, { Component } from 'react';
import React, { Component } from "react";
import {
StyleSheet,
Text,
......@@ -13,13 +13,13 @@ import {
Clipboard,
Platform,
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";
registerKilledListener();
......@@ -31,34 +31,38 @@ class MainPage extends Component {
this.state = {
token: "",
tokenCopyFeedback: ""
}
};
}
async componentDidMount(){
async componentDidMount() {
registerAppListener(this.props.navigation);
FCM.getInitialNotification().then(notif => {
this.setState({
initNotif: notif
})
if(notif && notif.targetScreen === 'detail'){
setTimeout(()=>{
this.props.navigation.navigate('Detail')
}, 500)
});
if (notif && notif.targetScreen === "detail") {
setTimeout(() => {
this.props.navigation.navigate("Detail");
}, 500);
}
});
try{
let result = await FCM.requestPermissions({badge: false, sound: true, alert: true});
} catch(e){
try {
let result = await FCM.requestPermissions({
badge: false,
sound: true,
alert: true
});
} catch (e) {
console.error(e);
}
FCM.getFCMToken().then(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 => {
console.log("APNS TOKEN (getFCMToken)", token);
});
......@@ -81,7 +85,8 @@ class MainPage extends Component {
number: 10, // Android only
ticker: "My Notification Ticker", // Android only
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:
"https://image.freepik.com/free-icon/small-boy-cartoon_318-38077.jpg", // Android only
icon: "ic_launcher", // as FCM payload, you can relace this with custom icon you put in mipmap
big_text: "Show when notification is expanded", // Android only
sub_text: "This is a subText", // Android only
......@@ -89,9 +94,10 @@ class MainPage extends Component {
vibrate: 300, // Android only default: 300, no vibration if you pass 0
wake_screen: true, // Android only, wake up screen when notification arrives
group: "group", // Android only
picture: "https://google.png", // Android only bigPicture style
picture:
"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png", // Android only bigPicture style
ongoing: true, // Android only
my_custom_data:'my_custom_field_value', // extra data you want to throw
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)
});
......@@ -99,18 +105,20 @@ class MainPage extends Component {
scheduleLocalNotification() {
FCM.scheduleLocalNotification({
id: 'testnotif',
fire_date: new Date().getTime()+5000,
id: "testnotif",
fire_date: new Date().getTime() + 5000,
vibrate: 500,
title: 'Hello',
body: 'Test Scheduled Notification',
sub_text: 'sub text',
title: "Hello",
body: "Test Scheduled Notification",
sub_text: "sub text",
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,
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,
extra1: {a: 1},
extra1: { a: 1 },
extra2: 1
});
}
......@@ -118,34 +126,34 @@ class MainPage extends Component {
sendRemoteNotification(token) {
let body;
if(Platform.OS === 'android'){
if (Platform.OS === "android") {
body = {
"to": token,
"data":{
"custom_notification": {
"title": "Simple FCM Client",
"body": "Click me to go to detail",
"sound": "default",
"priority": "high",
"show_in_foreground": true,
targetScreen: 'detail'
to: token,
data: {
custom_notification: {
title: "Simple FCM Client",
body: "Click me to go to detail",
sound: "default",
priority: "high",
show_in_foreground: true,
targetScreen: "detail"
}
},
"priority": 10
}
priority: 10
};
} else {
body = {
"to": token,
"notification":{
"title": "Simple FCM Client",
"body": "Click me to go to detail",
"sound": "default"
to: token,
notification: {
title: "Simple FCM Client",
body: "Click me to go to detail",
sound: "default"
},
data: {
targetScreen: 'detail'
targetScreen: "detail"
},
"priority": 10
}
priority: 10
};
}
firebaseClient.send(JSON.stringify(body), "notification");
......@@ -153,32 +161,35 @@ class MainPage extends Component {
sendRemoteData(token) {
let body = {
"to": token,
"data":{
"title": "Simple FCM Client",
"body": "This is a notification with only DATA.",
"sound": "default"
to: token,
data: {
title: "Simple FCM Client",
body: "This is a notification with only DATA.",
sound: "default"
},
"priority": "normal"
}
priority: "normal"
};
firebaseClient.send(JSON.stringify(body), "data");
}
showLocalNotificationWithAction() {
FCM.presentLocalNotification({
title: 'Test Notification with action',
body: 'Force touch to reply',
title: "Test Notification with action",
body: "Force touch to reply",
priority: "high",
show_in_foreground: true,
click_action: "com.myidentifi.fcm.text", // for ios
android_actions: JSON.stringify([{
android_actions: JSON.stringify([
{
id: "view",
title: 'view'
},{
title: "view"
},
{
id: "dismiss",
title: 'dismiss'
}]) // for android, take syntax similar to ios's. only buttons are supported
title: "dismiss"
}
]) // for android, take syntax similar to ios's. only buttons are supported
});
}
......@@ -187,50 +198,60 @@ class MainPage extends Component {
return (
<View style={styles.container}>
<ScrollView style={{paddingHorizontal: 20}}>
<Text style={styles.welcome}>
Welcome to Simple Fcm Client!
</Text>
<ScrollView style={{ paddingHorizontal: 20 }}>
<Text style={styles.welcome}>Welcome to Simple Fcm Client!</Text>
<Text style={styles.feedback}>
{this.state.tokenCopyFeedback}
</Text>
<Text style={styles.feedback}>{this.state.tokenCopyFeedback}</Text>
<Text style={styles.feedback}>
Remote notif won't be available to iOS emulators
</Text>
<TouchableOpacity onPress={() => this.sendRemoteNotification(token)} style={styles.button}>
<TouchableOpacity
onPress={() => this.sendRemoteNotification(token)}
style={styles.button}
>
<Text style={styles.buttonText}>Send Remote Notification</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.sendRemoteData(token)} style={styles.button}>
<TouchableOpacity
onPress={() => this.sendRemoteData(token)}
style={styles.button}
>
<Text style={styles.buttonText}>Send Remote Data</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.showLocalNotification()} style={styles.button}>
<TouchableOpacity
onPress={() => this.showLocalNotification()}
style={styles.button}
>
<Text style={styles.buttonText}>Show Local Notification</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.showLocalNotificationWithAction(token)} style={styles.button}>
<Text style={styles.buttonText}>Show Local Notification with Action</Text>
<TouchableOpacity
onPress={() => this.showLocalNotificationWithAction(token)}
style={styles.button}
>
<Text style={styles.buttonText}>
Show Local Notification with Action
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.scheduleLocalNotification()} style={styles.button}>
<TouchableOpacity
onPress={() => this.scheduleLocalNotification()}
style={styles.button}
>
<Text style={styles.buttonText}>Schedule Notification in 5s</Text>
</TouchableOpacity>
<Text style={styles.instructions}>
Init notif:
</Text>
<Text>
{JSON.stringify(this.state.initNotif)}
</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)}>
<Text style={styles.instructions}>Token:</Text>
<Text
selectable={true}
onPress={() => this.setClipboardContent(this.state.token)}
>
{this.state.token}
</Text>
</ScrollView>
......@@ -240,55 +261,62 @@ class MainPage extends Component {
setClipboardContent(text) {
Clipboard.setString(text);
this.setState({tokenCopyFeedback: "Token copied to clipboard."});
setTimeout(() => {this.clearTokenCopyFeedback()}, 2000);
this.setState({ tokenCopyFeedback: "Token copied to clipboard." });
setTimeout(() => {
this.clearTokenCopyFeedback();
}, 2000);
}
clearTokenCopyFeedback() {
this.setState({tokenCopyFeedback: ""});
this.setState({ tokenCopyFeedback: "" });
}
}
class DetailPage extends Component {
render(){
return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Detail page</Text>
</View>
);
}
}
export default StackNavigator({
export default StackNavigator(
{
Main: {
screen: MainPage,
screen: MainPage
},
Detail: {
screen: DetailPage
}
}, {
initialRouteName: 'Main',
});
},
{
initialRouteName: "Main"
}
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 2,
textAlign: "center",
color: "#333333",
marginBottom: 2
},
feedback: {
textAlign: 'center',
color: '#996633',
marginBottom: 3,
textAlign: "center",
color: "#996633",
marginBottom: 3
},
button: {
backgroundColor: "teal",
......@@ -300,5 +328,5 @@ const styles = StyleSheet.create({
buttonText: {
color: "white",
backgroundColor: "transparent"
},
}
});
Examples/simple-fcm-client/package.json
View file @ d02ea2ca
......@@ -8,7 +8,7 @@
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "^0.47.2",
"react-native": "^0.55.4",
"react-native-fcm": "^14.1.3",
"react-native-maps": "^0.20.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