Skip to content

Commit 15fcbf2

Browse files
chakrihackerchakrihacker
committed
local-notifications
1 parent 1ce7139 commit 15fcbf2

File tree

7 files changed

+334
-13
lines changed

7 files changed

+334
-13
lines changed

‎awesome-app/App.js

+68-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,78 @@
11
import React from "react";
2-
import { StyleSheet, Text, View } from "react-native";
3-
import { Constants } from "expo";
2+
import { StyleSheet, Text, View, Alert, Platform } from "react-native";
3+
import { Constants, Notifications } from "expo";
4+
import { NavigationActions } from "react-navigation";
45
import AppContainer from "./screens";
56

67
export default class App extends React.Component {
8+
state = {
9+
routeName: null,
10+
data: null,
11+
origin: null,
12+
remote: null
13+
};
14+
15+
constructor(props) {
16+
super(props);
17+
this.isFirstTime = true;
18+
this.notificationSubscription = null;
19+
}
20+
21+
componentDidMount = () => {
22+
this.notificationSubscription = Notifications.addListener(
23+
this.handlePushNotification
24+
);
25+
};
26+
27+
componentWillUnmount = () => {
28+
this.notificationSubscription.remove();
29+
};
30+
31+
handlePushNotification = ({ data, origin, remote }) => {
32+
console.log(origin, data);
33+
if (origin === "selected") {
34+
// User opened the app via push
35+
if (this.isFirstTime) {
36+
this.isFirstTime = false;
37+
this.setState({ routeName: data.goToPage, data, origin, remote });
38+
} else {
39+
this.navigator &&
40+
this.navigator.dispatch(
41+
NavigationActions.navigate({ routeName: data.goToPage, data })
42+
);
43+
}
44+
} else if (origin === "received") {
45+
// App was open when notification was received
46+
console.log("I am here");
47+
if (Platform.OS == "ios") {
48+
Alert.alert(
49+
"Notification clicked while app is opened",
50+
"Some random information",
51+
[
52+
{
53+
text: "ignore",
54+
style: "cancel"
55+
},
56+
{
57+
text: "show Me",
58+
style: "default",
59+
onPress: () => this.props.onPushNotificationReceived(data)
60+
}
61+
]
62+
);
63+
}
64+
}
65+
};
66+
767
render() {
868
return (
969
<View style={styles.container}>
10-
<AppContainer />
70+
<AppContainer
71+
ref={nav => {
72+
this.navigator = nav;
73+
}}
74+
screenProps={this.state}
75+
/>
1176
</View>
1277
);
1378
}

‎awesome-app/screens/Home.js

+99-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,107 @@
11
import React, { Component } from "react";
2-
import { Text, View } from "react-native";
2+
import {
3+
Text,
4+
View,
5+
Dimensions,
6+
TouchableOpacity,
7+
AsyncStorage
8+
} from "react-native";
9+
import { Notifications } from "expo";
10+
11+
const { height, width } = Dimensions.get("window");
312

413
export default class Home extends Component {
14+
static navigationOptions = {
15+
header: null
16+
};
17+
18+
handleLogout = async () => {
19+
await AsyncStorage.multiRemove(["userStatus", "notificationStatus"]);
20+
this.props.navigation.navigate("Splash");
21+
};
22+
523
render() {
624
return (
7-
<View>
8-
<Text> Home </Text>
25+
<View
26+
style={{
27+
backgroundColor: "#000",
28+
flex: 1
29+
}}
30+
>
31+
<View
32+
style={{
33+
alignItems: "center",
34+
justifyContent: "space-around",
35+
backgroundColor: "forestgreen",
36+
flexDirection: "row"
37+
}}
38+
>
39+
<Text style={{ color: "#fff", fontSize: 36 }}> 🌟 Dashboard 🌟 </Text>
40+
<TouchableOpacity onPress={this.handleLogout}>
41+
<Text style={{ color: "#fff", fontSize: 36 }}>⛔</Text>
42+
</TouchableOpacity>
43+
</View>
44+
<View
45+
style={{
46+
alignItems: "stretch"
47+
}}
48+
>
49+
<View
50+
style={{
51+
backgroundColor: "darkred",
52+
alignItems: "center",
53+
justifyContent: "center",
54+
padding: 10,
55+
margin: 10
56+
}}
57+
>
58+
<Text style={{ color: "#fff", fontSize: 24 }}>
59+
Pending Cases 😴
60+
</Text>
61+
<Text style={{ color: "#fff", fontSize: 24 }}>12</Text>
62+
</View>
63+
<View
64+
style={{
65+
backgroundColor: "teal",
66+
alignItems: "center",
67+
justifyContent: "center",
68+
padding: 10,
69+
margin: 10
70+
}}
71+
>
72+
<Text style={{ color: "#fff", fontSize: 24 }}>
73+
Completed Cases 🏆
74+
</Text>
75+
<Text style={{ color: "#fff", fontSize: 24 }}>100</Text>
76+
</View>
77+
<View
78+
style={{
79+
backgroundColor: "indigo",
80+
alignItems: "center",
81+
justifyContent: "center",
82+
padding: 10,
83+
margin: 10
84+
}}
85+
>
86+
<Text style={{ color: "#fff", fontSize: 24 }}>
87+
In Progress Cases 🏃‍♀️
88+
</Text>
89+
<Text style={{ color: "#fff", fontSize: 24 }}>1</Text>
90+
</View>
91+
</View>
92+
<View style={{ flex: 1, justifyContent: "flex-end" }}>
93+
<TouchableOpacity
94+
style={{
95+
backgroundColor: "#E67D27",
96+
margin: 10,
97+
padding: 10,
98+
alignItems: "center"
99+
}}
100+
onPress={() => this.props.navigation.navigate("Report")}
101+
>
102+
<Text style={{ color: "#fff", fontSize: 36 }}>Create Report</Text>
103+
</TouchableOpacity>
104+
</View>
9105
</View>
10106
);
11107
}

‎awesome-app/screens/Notification.js

+21-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import React, { Component } from "react";
2-
import { Text, View, TouchableOpacity, AsyncStorage } from "react-native";
2+
import {
3+
Text,
4+
View,
5+
TouchableOpacity,
6+
AsyncStorage,
7+
Platform
8+
} from "react-native";
39
import { Notifications, Permissions } from "expo";
410

511
export default class Notification extends Component {
@@ -31,8 +37,21 @@ export default class Notification extends Component {
3137

3238
handleNotificationStatus = async () => {
3339
let token = await this.registerForPushNotification();
34-
console.log(token);
3540
if (token) {
41+
if (Platform.OS === "android") {
42+
await Notifications.createChannelAndroidAsync("local", {
43+
name: "Local",
44+
sound: true,
45+
priority: "max",
46+
badge: true
47+
});
48+
await Notifications.createChannelAndroidAsync("remote", {
49+
name: "Remote",
50+
sound: true,
51+
priority: "max",
52+
badge: true
53+
});
54+
}
3655
await AsyncStorage.setItem("notificationStatus", "true");
3756
}
3857
this.goToHome();

‎awesome-app/screens/Report.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React, { Component } from "react";
2+
import {
3+
Text,
4+
View,
5+
TextInput,
6+
TouchableOpacity,
7+
AsyncStorage
8+
} from "react-native";
9+
import { Notifications } from "expo";
10+
11+
export default class Report extends Component {
12+
static navigationOptions = {
13+
header: null
14+
};
15+
16+
scheduleNotification = async () => {
17+
await Notifications.scheduleLocalNotificationAsync(
18+
{
19+
title: "Your Monthly Stats are available",
20+
body: "You have set a new record",
21+
android: {
22+
sound: "default",
23+
priority: "max",
24+
channelId: "local"
25+
},
26+
ios: {
27+
sound: "default"
28+
},
29+
data: {
30+
goToPage: "Stats",
31+
secret: "Just Kidding! Better Luck Next Time"
32+
}
33+
},
34+
{
35+
time: new Date().getTime() + 5000
36+
}
37+
);
38+
};
39+
40+
handleSubmitReport = async () => {
41+
let notificationStatus = await AsyncStorage.getItem("notificationStatus");
42+
if (notificationStatus) {
43+
Notifications.presentLocalNotificationAsync({
44+
title: "Sending Report",
45+
body: "Connecting to Pokemon Secure Servers",
46+
android: {
47+
sound: "default",
48+
priority: "max",
49+
channelId: "local"
50+
},
51+
ios: {
52+
sound: "default"
53+
}
54+
});
55+
this.scheduleNotification();
56+
}
57+
};
58+
59+
render() {
60+
return (
61+
<View style={{ backgroundColor: "#000", flex: 1 }}>
62+
<View style={{ alignItems: "center", backgroundColor: "forestgreen" }}>
63+
<Text style={{ color: "#fff", fontSize: 36 }}>
64+
{" "}
65+
📜 Create Report📜{" "}
66+
</Text>
67+
</View>
68+
<View style={{ padding: 10 }}>
69+
<Text style={{ color: "#fff", fontSize: 28 }}>Criminal Name</Text>
70+
<TextInput
71+
style={{ backgroundColor: "#fff", height: 60, fontSize: 36 }}
72+
placeholder={"Enter Criminal Name"}
73+
/>
74+
<Text style={{ color: "#fff", fontSize: 28 }}>Crime Committed</Text>
75+
<TextInput
76+
style={{ backgroundColor: "#fff", height: 60, fontSize: 36 }}
77+
placeholder={"Enter Name of Crime"}
78+
/>
79+
<Text style={{ color: "#fff", fontSize: 28 }}>Crime Location</Text>
80+
<TextInput
81+
style={{ backgroundColor: "#fff", height: 60, fontSize: 36 }}
82+
placeholder={"Enter Crime Location"}
83+
/>
84+
</View>
85+
<View style={{ flex: 1, justifyContent: "flex-end", padding: 10 }}>
86+
<TouchableOpacity
87+
style={{
88+
backgroundColor: "maroon",
89+
alignItems: "center",
90+
justifyContent: "center"
91+
}}
92+
onPress={this.handleSubmitReport}
93+
>
94+
<Text style={{ color: "#fff", fontSize: 36 }}>Submit Report</Text>
95+
</TouchableOpacity>
96+
</View>
97+
</View>
98+
);
99+
}
100+
}

‎awesome-app/screens/Splash.js

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from "react";
2-
import { Text, View, AsyncStorage } from "react-native";
2+
import { Text, View, AsyncStorage, Alert } from "react-native";
33
import { StackActions } from "react-navigation";
4+
import { Notifications } from "expo";
45

56
export default class Splash extends Component {
67
static navigationOptions = {
@@ -9,16 +10,31 @@ export default class Splash extends Component {
910

1011
isUserLoggedIn = async () => {
1112
let userStatus = await AsyncStorage.getItem("userStatus");
12-
console.log(userStatus);
1313
if (userStatus) {
1414
return this.props.navigation.navigate("Home");
1515
}
1616
return this.props.navigation.navigate("Auth");
1717
};
1818

19+
isOpenedByNotification = async () => {
20+
if (this.props.screenProps.origin === null) {
21+
this.isUserLoggedIn();
22+
} else {
23+
if (this.props.screenProps.routeName) {
24+
this.props.navigation.navigate(
25+
this.props.screenProps.routeName,
26+
this.props.screenProps.data
27+
);
28+
} else {
29+
this.isUserLoggedIn();
30+
}
31+
}
32+
console.log(this.props.screenProps);
33+
};
34+
1935
componentDidMount = () => {
2036
setTimeout(() => {
21-
this.isUserLoggedIn();
37+
this.isOpenedByNotification();
2238
}, 2000);
2339
};
2440

‎awesome-app/screens/Stats.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { Component } from "react";
2+
import { Text, View } from "react-native";
3+
4+
export default class Stats extends Component {
5+
static navigationOptions = {
6+
header: null
7+
};
8+
render() {
9+
const { navigation } = this.props;
10+
const data = navigation.getParam("secret", "No Secret Available");
11+
return (
12+
<View style={{ backgroundColor: "000" }}>
13+
<Text style={{ color: "#fff", fontSize: 36 }}> Stats </Text>
14+
<Text>The Data from Notifications is {data}</Text>
15+
</View>
16+
);
17+
}
18+
}

0 commit comments

Comments
 (0)