Skip to content

Commit 1ce7139

Browse files
chakrihackerchakrihacker
committed
Ask User Permission for notifications
1 parent 0960dcf commit 1ce7139

12 files changed

+5847
-8
lines changed

‎.expo/packager-info.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"devToolsPort": 19002,
3+
"expoServerPort": null
4+
}

‎.expo/settings.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"hostType": "lan",
3+
"lanType": "ip",
4+
"dev": true,
5+
"minify": false,
6+
"urlRandomness": null
7+
}

‎awesome-app/App.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1-
import React from 'react';
2-
import { StyleSheet, Text, View } from 'react-native';
1+
import React from "react";
2+
import { StyleSheet, Text, View } from "react-native";
3+
import { Constants } from "expo";
4+
import AppContainer from "./screens";
35

46
export default class App extends React.Component {
57
render() {
68
return (
79
<View style={styles.container}>
8-
<Text>Open up App.js to start working on your app!</Text>
10+
<AppContainer />
911
</View>
1012
);
1113
}
1214
}
1315

1416
const styles = StyleSheet.create({
1517
container: {
18+
marginTop: Constants.statusBarHeight,
1619
flex: 1,
17-
backgroundColor: '#fff',
18-
alignItems: 'center',
19-
justifyContent: 'center',
20-
},
20+
backgroundColor: "#000"
21+
}
2122
});

‎awesome-app/README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
This repo consists the code for [ReactJS Bangalore - ReactNative #04](https://www.meetup.com/ReactJS-Bangalore/events/255320385/)
2+
3+
Pikachu Bureau of Investigation (PBI)
4+
5+
1. User can login and asked for notification permission
6+
2. If user grants permission notifications will be sent
7+
3. User can configure notification preferences
8+
4. Send a Local Notification of upload in progress
9+
5. Send a scheduled Notification of Monthly stats
10+
6. Send a Push Notification from server

‎awesome-app/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
"dependencies": {
1212
"expo": "^31.0.2",
1313
"react": "16.5.0",
14-
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz"
14+
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
15+
"react-navigation": "^3.0.0"
1516
},
1617
"devDependencies": {
1718
"babel-preset-expo": "^5.0.0"

‎awesome-app/screens/Auth.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React, { Component } from "react";
2+
import {
3+
Text,
4+
View,
5+
TextInput,
6+
TouchableOpacity,
7+
AsyncStorage
8+
} from "react-native";
9+
10+
export default class Auth extends Component {
11+
state = {
12+
username: "pikachu",
13+
password: "deadpool",
14+
button: "🙊🙉🙈",
15+
intervalId: null
16+
};
17+
emoji = ["😎", "😍", "😉", "🤐", "😝", "😲", "😦", "😵", "👻"];
18+
19+
randomEmoji = () => {
20+
let emojiInterval = setInterval(() => {
21+
this.setState({
22+
button: this.emoji[Math.floor(Math.random() * this.emoji.length)]
23+
});
24+
}, 250);
25+
this.setState({ intervalId: emojiInterval });
26+
};
27+
28+
logMeIn = async () => {
29+
this.randomEmoji();
30+
let setUserLogin = await AsyncStorage.setItem("userStatus", "true");
31+
this.props.navigation.navigate("Notification");
32+
};
33+
34+
componentWillUnmount = () => {
35+
clearInterval(this.state.intervalId);
36+
};
37+
38+
render() {
39+
return (
40+
<View
41+
style={{ flex: 1, alignItems: "stretch", justifyContent: "center" }}
42+
>
43+
<Text
44+
style={{
45+
color: "#fff",
46+
fontSize: 36,
47+
fontWeight: "bold",
48+
alignSelf: "center",
49+
margin: 30
50+
}}
51+
>
52+
{" "}
53+
🔒 Auth 🔒{" "}
54+
</Text>
55+
<TextInput
56+
onChangeText={text => this.setState({ username: text })}
57+
value={this.state.username}
58+
style={{
59+
backgroundColor: "#fff",
60+
margin: 30,
61+
height: 60,
62+
fontSize: 36
63+
}}
64+
/>
65+
<TextInput
66+
secureTextEntry={true}
67+
style={{
68+
backgroundColor: "#fff",
69+
margin: 30,
70+
height: 60,
71+
fontSize: 36
72+
}}
73+
onChangeText={text => this.setState({ password: text })}
74+
value={this.state.password}
75+
/>
76+
<TouchableOpacity
77+
style={{
78+
backgroundColor: "#00FFFF",
79+
height: 60,
80+
margin: 30,
81+
alignItems: "center",
82+
justifyContent: "center"
83+
}}
84+
onPress={this.logMeIn}
85+
>
86+
<Text style={{ fontSize: 36 }}>{this.state.button}</Text>
87+
</TouchableOpacity>
88+
</View>
89+
);
90+
}
91+
}

‎awesome-app/screens/Home.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, { Component } from "react";
2+
import { Text, View } from "react-native";
3+
4+
export default class Home extends Component {
5+
render() {
6+
return (
7+
<View>
8+
<Text> Home </Text>
9+
</View>
10+
);
11+
}
12+
}

‎awesome-app/screens/Notification.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React, { Component } from "react";
2+
import { Text, View, TouchableOpacity, AsyncStorage } from "react-native";
3+
import { Notifications, Permissions } from "expo";
4+
5+
export default class Notification extends Component {
6+
registerForPushNotification = async () => {
7+
const enabled = await this.pushNotificationsEnabled();
8+
9+
if (!enabled) {
10+
return Promise.resolve();
11+
}
12+
13+
return Notifications.getExpoPushTokenAsync();
14+
};
15+
16+
pushNotificationsEnabled = async () => {
17+
const { status: existingStatus } = await Permissions.getAsync(
18+
Permissions.NOTIFICATIONS
19+
);
20+
let finalStatus = existingStatus;
21+
if (existingStatus !== "granted") {
22+
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
23+
finalStatus = status;
24+
}
25+
if (finalStatus !== "granted") {
26+
return false;
27+
}
28+
29+
return true;
30+
};
31+
32+
handleNotificationStatus = async () => {
33+
let token = await this.registerForPushNotification();
34+
console.log(token);
35+
if (token) {
36+
await AsyncStorage.setItem("notificationStatus", "true");
37+
}
38+
this.goToHome();
39+
};
40+
41+
goToHome = () => {
42+
this.props.navigation.navigate("HomeNavigator");
43+
};
44+
45+
render() {
46+
return (
47+
<View
48+
style={{ alignItems: "stretch", justifyContent: "center", flex: 1 }}
49+
>
50+
<Text style={{ fontSize: 48, margin: 30, textAlign: "center" }}>
51+
🙏
52+
</Text>
53+
<Text
54+
style={{
55+
color: "#fff",
56+
fontSize: 36,
57+
textAlign: "center",
58+
margin: 30
59+
}}
60+
>
61+
Namaste Detective Pikachu
62+
</Text>
63+
<Text
64+
style={{
65+
color: "#fff",
66+
fontSize: 30,
67+
textAlign: "center",
68+
margin: 30
69+
}}
70+
>
71+
Do you want me to notify 🔔 about new complaints?
72+
</Text>
73+
<TouchableOpacity
74+
style={{
75+
backgroundColor: "#00FFFF",
76+
height: 60,
77+
margin: 15,
78+
alignItems: "center",
79+
justifyContent: "center"
80+
}}
81+
onPress={() => this.handleNotificationStatus()}
82+
>
83+
<Text style={{ fontSize: 36 }}>Yes Pleeezz 😀</Text>
84+
</TouchableOpacity>
85+
<TouchableOpacity
86+
style={{
87+
backgroundColor: "#00FFFF",
88+
height: 60,
89+
margin: 15,
90+
alignItems: "center",
91+
justifyContent: "center"
92+
}}
93+
onPress={() => this.goToHome()}
94+
>
95+
<Text style={{ fontSize: 36 }}>No 😭</Text>
96+
</TouchableOpacity>
97+
</View>
98+
);
99+
}
100+
}

‎awesome-app/screens/Settings.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React, { Component } from "react";
2+
import { Text, View } from "react-native";
3+
4+
export default class Settings extends Component {
5+
render() {
6+
return (
7+
<View>
8+
<Text> Settings </Text>
9+
</View>
10+
);
11+
}
12+
}

‎awesome-app/screens/Splash.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { Component } from "react";
2+
import { Text, View, AsyncStorage } from "react-native";
3+
import { StackActions } from "react-navigation";
4+
5+
export default class Splash extends Component {
6+
static navigationOptions = {
7+
header: null
8+
};
9+
10+
isUserLoggedIn = async () => {
11+
let userStatus = await AsyncStorage.getItem("userStatus");
12+
console.log(userStatus);
13+
if (userStatus) {
14+
return this.props.navigation.navigate("Home");
15+
}
16+
return this.props.navigation.navigate("Auth");
17+
};
18+
19+
componentDidMount = () => {
20+
setTimeout(() => {
21+
this.isUserLoggedIn();
22+
}, 2000);
23+
};
24+
25+
render() {
26+
return (
27+
<View
28+
style={{
29+
flex: 1,
30+
alignItems: "center",
31+
justifyContent: "center",
32+
borderWidth: 2
33+
}}
34+
>
35+
<Text style={{ color: "#fff", fontSize: 36 }}>
36+
{" "}
37+
React.JS Bengaluru{" "}
38+
</Text>
39+
</View>
40+
);
41+
}
42+
}

‎awesome-app/screens/index.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {
2+
createStackNavigator,
3+
createAppContainer,
4+
createSwitchNavigator
5+
} from "react-navigation";
6+
import Home from "./Home";
7+
import Splash from "./Splash";
8+
import Auth from "./Auth";
9+
import Notification from "./Notification";
10+
import Settings from "./Settings";
11+
12+
const HomeNavigator = createStackNavigator({
13+
Home,
14+
Settings
15+
});
16+
17+
const AppNavigator = createSwitchNavigator(
18+
{
19+
HomeNavigator,
20+
Splash,
21+
Auth,
22+
Notification
23+
},
24+
{
25+
initialRouteName: "Splash"
26+
}
27+
);
28+
29+
const AppContainer = createAppContainer(AppNavigator);
30+
31+
export default AppContainer;

0 commit comments

Comments
 (0)