Merge pull request #6 from Mehul2410/features/vallabh

Features/vallabh

app.json

@@ -4,9 +4,9 @@
         "slug": "BeSafe",
         "version": "1.0.0",
         "orientation": "portrait",
-        "icon": "./assets/logo.png",
+        "icon": "./img/logo.png",
         "splash": {
-            "image": "./assets/logo.png",
+            "image": "./img/logo.png",
             "resizeMode": "contain",
             "backgroundColor": "#0085FF"
         },
@@ -19,12 +19,12 @@
         },
         "android": {
             "adaptiveIcon": {
-                "foregroundImage": "./assets/logo.png",
+                "foregroundImage": "./img/logo.png",
                 "backgroundColor": "#0085FF"
             }
         },
         "web": {
-            "favicon": "./assets/logo.png"
+            "favicon": "./img/logo.png"
         }
     }
 }

babel.config.js

@@ -13,7 +13,7 @@ module.exports = function (api) {
                         "@components": "./src/components",
                         "@types": "./src/types",
                         "@utils": "./src/utils",
-                        "@assest": "/assets"
+                        "@assets": "./src/assets"
                     }
                 }
             ]

package.json

@@ -23,7 +23,7 @@
         "react": "16.13.1",
         "react-dom": "16.13.1",
         "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
-        "react-native-gesture-handler": "~1.10.2",
+        "react-native-gesture-handler": "^1.10.3",
         "react-native-safe-area-context": "3.2.0",
         "react-native-screens": "~3.4.0",
         "react-native-web": "~0.13.12"

src/components/AppBootstrap/app-bootstrap.tsx

@@ -9,10 +9,10 @@ type AppBootstrapProps = {
 
 export default function AppBootstrap({ children }: AppBootstrapProps): ReactElement {
     const [loaded] = useFonts({
-        "Chillax-Medium": require("../../../assets/fonts/Chillax-Medium.ttf"),
-        "Chillax-Regular": require("../../../assets/fonts/Chillax-Regular.ttf"),
-        "Chillax-Bold": require("../../../assets/fonts/Chillax-Bold.ttf"),
-        "Chillax-Light": require("../../../assets/fonts/Chillax-Light.ttf")
+        "Chillax-Medium": require("@assets/fonts/Chillax-Medium.ttf"),
+        "Chillax-Regular": require("@assets/fonts/Chillax-Regular.ttf"),
+        "Chillax-Bold": require("@assets/fonts/Chillax-Bold.ttf"),
+        "Chillax-Light": require("@assets/fonts/Chillax-Light.ttf")
     });
     return loaded ? <>{children}</> : <AppLoading />;
 }

src/components/background/Background.tsx

@@ -1,17 +1,17 @@
 import { StatusBar } from "expo-status-bar";
 import React, { ReactElement, ReactNode } from "react";
-import { View, StyleSheet } from "react-native";
+import { SafeAreaView, StyleSheet } from "react-native";
 
 type background = {
     children: ReactNode;
 };
 
 export default function Background({ children }: background): ReactElement {
     return (
-        <View style={styles.screenview}>
+        <SafeAreaView style={styles.screenview}>
             <StatusBar style="light" />
             {children}
-        </View>
+        </SafeAreaView>
     );
 }
 

src/config/Navigator.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
-import { Getstarted, Language } from "@screens";
+import { Getstarted, Language, Register } from "@screens";
 import { StackNavigatorParams } from "@types";
 
 const Stack = createStackNavigator<StackNavigatorParams>();
@@ -10,13 +10,15 @@ export default function Navigator(): ReactElement {
     return (
         <NavigationContainer>
             <Stack.Navigator
+                initialRouteName="Register"
                 screenOptions={{
                     headerMode: "screen",
                     headerShown: false
                 }}
             >
                 <Stack.Screen name="Getstarted" component={Getstarted} />
                 <Stack.Screen name="Language" component={Language} />
+                <Stack.Screen name="Register" component={Register} />
             </Stack.Navigator>
         </NavigationContainer>
     );

src/screens/home/Getstarted.tsx

@@ -8,7 +8,7 @@ export function Getstarted({ navigation }: LanguageNavigationProps<"Getstarted">
     return (
         <Background>
             <ScrollView contentContainerStyle={styles.screenview}>
-                <Image source={require("../../../assets/getstarted.png")} />
+                <Image source={require("@assets/getstarted.png")} />
                 <Text weight="900" style={styles.landingtext}>
                     Welcome to
                 </Text>

src/screens/index.ts

@@ -1,2 +1,3 @@
 export { Getstarted } from "./home/Getstarted";
 export { Language } from "./language/Language";
+export { default as Register } from "./register/Register";

src/screens/language/Language.tsx

@@ -7,17 +7,22 @@ import { LanguageNavigationProps } from "@types";
 export function Language({ navigation }: LanguageNavigationProps<"Language">) {
     return (
         <Background>
-            <ScrollView contentContainerStyle={styles.screenview}>
-                <Image source={require("../../../assets/lang.png")} />
-                <Text style={styles.text}>Select your langague</Text>
-                <View style={styles.view}>
-                    <Text style={styles.button}>English</Text>
-
-                    <Text style={styles.button}>हिंदी</Text>
-
-                    <Text style={styles.button}>मराठी</Text>
+            <View style={styles.screenview}>
+                <View style={styles.container1}>
+                    <Image source={require("@assets/lang.png")} />
+                    <Text style={styles.text}>Select your langague</Text>
+                </View>
+                <View style={styles.container2}>
+                    <ScrollView contentContainerStyle={styles.scroll}>
+                        <Text style={styles.button}>English</Text>
+                        <Text style={styles.button}>हिंदी</Text>
+                        <Text style={styles.button}>मराठी</Text>
+                        <Text style={styles.button}>English</Text>
+                        <Text style={styles.button}>हिंदी</Text>
+                        <Text style={styles.button}>मराठी</Text>
+                    </ScrollView>
                 </View>
-            </ScrollView>
+            </View>
         </Background>
     );
 }

src/screens/language/language.styles.ts

@@ -2,38 +2,48 @@ import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
     screenview: {
+        width: "100%",
+        height: "100%",
         display: "flex",
         alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-        height: "100%"
+        justifyContent: "center"
+    },
+    scroll: {
+        width: "100%"
     },
     text: {
-        color: "#FFF"
+        color: "#FFF",
+        textAlign: "justify"
     },
     button: {
-        width: "100%",
-        maxWidth: 300,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
+        width: 200,
+        maxWidth: 200,
+        textAlign: "center",
         backgroundColor: "#FFF",
         color: "#362C87",
-        margin: 10,
+        marginVertical: 10,
         paddingVertical: 10,
         paddingHorizontal: 30,
         borderRadius: 10
     },
-    view: {
-        flex: 1,
-        backgroundColor: "#1D0ECC",
-        borderTopRightRadius: 30,
-        borderTopLeftRadius: 30,
-        marginTop: 10,
+    container1: {
+        display: "flex",
+        width: "100%",
+        justifyContent: "flex-end",
         alignItems: "center",
-        justifyContent: "center",
+        paddingBottom: 30,
+        flex: 1
+    },
+    container2: {
+        display: "flex",
         width: "100%",
-        height: "auto"
+        justifyContent: "center",
+        alignItems: "center",
+        height: 300,
+        padding: 20,
+        backgroundColor: "#1D0ECC",
+        borderTopRightRadius: 50,
+        borderTopLeftRadius: 50
     }
 });
 

src/screens/register/Register.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { View, Image, TouchableOpacity } from "react-native";
+import { Background, Text } from "@components";
+import styles from "./register.styles";
+
+export default function Register() {
+    return (
+        <Background>
+            <View style={styles.view}>
+                <Text weight="700">Select your role</Text>
+                <View style={styles.char}>
+                    <Image source={require("@assets/police.png")}></Image>
+                    <Text>police</Text>
+                </View>
+                <View style={styles.char}>
+                    <Image source={require("@assets/citizen.png")}></Image>
+                    <Text>citizen</Text>
+                </View>
+                <TouchableOpacity
+                    style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        paddingVertical: 10,
+                        paddingHorizontal: 30,
+                        backgroundColor: "#1D0ECC",
+                        borderRadius: 15
+                    }}
+                >
+                    <Text weight="700" style={styles.text}>
+                        {" "}
+                        Next
+                        <Image source={require("@assets/arrow.png")} />
+                    </Text>
+                </TouchableOpacity>
+            </View>
+        </Background>
+    );
+}

src/screens/register/register.styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    view: {
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        alignItems: "center",
+        justifyContent: "center"
+    },
+    char: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: 20
+    },
+    text: {
+        color: "#FFF"
+    }
+});
+
+export default styles;

src/types/navigationTypes/navigationTypes.tsx

@@ -4,6 +4,7 @@ import { StackNavigationProp } from "@react-navigation/stack";
 export type StackNavigatorParams = {
     Getstarted: undefined;
     Language: undefined;
+    Register: undefined;
 };
 
 export type LanguageNavigationProps<T extends keyof StackNavigatorParams> = {

tsconfig.json

@@ -15,7 +15,7 @@
             "@types": ["src/types"],
             "@utils": ["src/utils"],
             "@contexts/*": ["src/contexts/*"],
-            "@assets/*": ["/assets/*"],
+            "@assets/*": ["src/assets/*"],
             "@config/*": ["src/config/*"]
         }
     }