Redesign

Author: chakrihacker

awesome-app/App.js

@@ -1,5 +1,12 @@
 import React from "react";
-import { StyleSheet, Text, View, Alert, Platform } from "react-native";
+import {
+  StyleSheet,
+  Text,
+  View,
+  Alert,
+  Platform,
+  AppState
+} from "react-native";
 import { Constants, Notifications } from "expo";
 import { NavigationActions } from "react-navigation";
 import AppContainer from "./screens";
@@ -9,7 +16,8 @@ export default class App extends React.Component {
     routeName: null,
     data: null,
     origin: null,
-    remote: null
+    remote: null,
+    shouldSplashHandleNotifications: true
   };
 
   constructor(props) {
@@ -31,19 +39,26 @@ export default class App extends React.Component {
   handlePushNotification = ({ data, origin, remote }) => {
     console.log(origin, data);
     if (origin === "selected") {
+      this.setState({
+        shouldSplashHandleNotifications: false
+      });
       // User opened the app via push
-      if (this.isFirstTime) {
-        this.isFirstTime = false;
-        this.setState({ routeName: data.goToPage, data, origin, remote });
-      } else {
-        this.navigator &&
-          this.navigator.dispatch(
-            NavigationActions.navigate({ routeName: data.goToPage, data })
-          );
-      }
+      this.navigator &&
+        this.navigator.dispatch(
+          NavigationActions.navigate({ routeName: data.goToPage, data })
+        );
+      // if (this.isFirstTime) {
+      //   this.isFirstTime = false;
+      //   this.setState({ routeName: data.goToPage, data, origin, remote });
+      // } else {
+      //   console.log("I am here");
+      //   this.navigator &&
+      //     this.navigator.dispatch(
+      //       NavigationActions.navigate({ routeName: data.goToPage, data })
+      //     );
+      // }
     } else if (origin === "received") {
       // App was open when notification was received
-      console.log("I am here");
       if (Platform.OS == "ios") {
         Alert.alert(
           "Notification clicked while app is opened",
@@ -81,7 +96,6 @@ export default class App extends React.Component {
 const styles = StyleSheet.create({
   container: {
     marginTop: Constants.statusBarHeight,
-    flex: 1,
-    backgroundColor: "#000"
+    flex: 1
   }
 });

awesome-app/assets/Pokeballz.png

@@ -4,8 +4,14 @@ import {
   View,
   TextInput,
   TouchableOpacity,
-  AsyncStorage
+  AsyncStorage,
+  Image,
+  Dimensions,
+  StyleSheet
 } from "react-native";
+import { LinearGradient } from "expo";
+
+const { height, width } = Dimensions.get("window");
 
 export default class Auth extends Component {
   state = {
@@ -25,9 +31,14 @@ export default class Auth extends Component {
     this.setState({ intervalId: emojiInterval });
   };
 
+  sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
   logMeIn = async () => {
     this.randomEmoji();
     let setUserLogin = await AsyncStorage.setItem("userStatus", "true");
+    await this.sleep(2500);
     this.props.navigation.navigate("Notification");
   };
 
@@ -37,55 +48,83 @@ export default class Auth extends Component {
 
   render() {
     return (
-      <View
-        style={{ flex: 1, alignItems: "stretch", justifyContent: "center" }}
-      >
-        <Text
-          style={{
-            color: "#fff",
-            fontSize: 36,
-            fontWeight: "bold",
-            alignSelf: "center",
-            margin: 30
-          }}
-        >
-          {" "}
-          🔒 Auth 🔒{" "}
-        </Text>
-        <TextInput
-          onChangeText={text => this.setState({ username: text })}
-          value={this.state.username}
-          style={{
-            backgroundColor: "#fff",
-            margin: 30,
-            height: 60,
-            fontSize: 36
-          }}
-        />
-        <TextInput
-          secureTextEntry={true}
-          style={{
-            backgroundColor: "#fff",
-            margin: 30,
-            height: 60,
-            fontSize: 36
-          }}
-          onChangeText={text => this.setState({ password: text })}
-          value={this.state.password}
-        />
-        <TouchableOpacity
-          style={{
-            backgroundColor: "#00FFFF",
-            height: 60,
-            margin: 30,
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-          onPress={this.logMeIn}
-        >
-          <Text style={{ fontSize: 36 }}>{this.state.button}</Text>
-        </TouchableOpacity>
+      <View style={{ flex: 1 }}>
+        <View style={{ flex: 1 }}>
+          <Text
+            style={{
+              fontSize: 36,
+              fontWeight: "bold",
+              alignSelf: "center",
+              marginTop: 10
+            }}
+          >
+            🔒 Login 🔒
+          </Text>
+          <TextInput
+            onChangeText={text => this.setState({ username: text })}
+            value={this.state.username}
+            style={styles.input}
+          />
+          <TextInput
+            secureTextEntry={true}
+            style={styles.input}
+            onChangeText={text => this.setState({ password: text })}
+            value={this.state.password}
+          />
+
+          <TouchableOpacity style={styles.loginButton} onPress={this.logMeIn}>
+            <LinearGradient
+              style={styles.gradient}
+              colors={["#14F1D9", "#3672F8"]}
+              start={{ x: 0, y: 0.5 }}
+              end={{ x: 1, y: 0.5 }}
+            >
+              <Text style={{ fontSize: 36 }}>{this.state.button}</Text>
+            </LinearGradient>
+          </TouchableOpacity>
+        </View>
+        {/* Images Code */}
+        <View style={{ flex: 1 }}>
+          <View style={{ position: "absolute", top: 75, left: 25 }}>
+            <Image
+              source={require("../assets/Pokeballz.png")}
+              style={{ height: 70, width: 70 }}
+            />
+          </View>
+          <View style={{ position: "absolute", top: height / 15 }}>
+            <Image
+              source={require("../assets/pokemons.png")}
+              style={{ height: height / 2.3, width }}
+              resizeMode={"cover"}
+            />
+          </View>
+        </View>
       </View>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  input: {
+    borderColor: "gray",
+    borderWidth: 1,
+    margin: 15,
+    height: 60,
+    fontSize: 36,
+    borderRadius: 25,
+    paddingLeft: 10
+  },
+  loginButton: {
+    height: 60,
+    margin: 15,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  gradient: {
+    height: "100%",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 50
+  }
+});