bottom tab navigation created

package.json

@@ -14,6 +14,7 @@
     },
     "dependencies": {
         "@react-native-community/checkbox": "^0.5.8",
+        "@react-navigation/bottom-tabs": "^6.0.9",
         "@react-navigation/native": "^6.0.2",
         "@react-navigation/native-stack": "^6.1.0",
         "@react-navigation/stack": "^6.0.7",

src/components/background/Background.tsx

@@ -1,6 +1,7 @@
 import { StatusBar } from "expo-status-bar";
 import React, { ReactElement, ReactNode } from "react";
 import { SafeAreaView, StyleSheet } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
 
 type background = {
     children: ReactNode;

src/config/Navigator.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import {
+    Home,
     Getstarted,
     Language,
     Register,
@@ -10,32 +11,38 @@ import {
     PoliceDetail,
     DetailFilled,
     CitizenSignin,
-    CitizenSignup
+    CitizenSignup,
+    Profile
 } from "@screens";
+
 import { StackNavigatorParams } from "@types";
 
 const Stack = createStackNavigator<StackNavigatorParams>();
 
 export default function Navigator(): ReactElement {
     return (
-        <NavigationContainer>
-            <Stack.Navigator
-                initialRouteName="DetailFilled"
-                screenOptions={{
-                    headerMode: "screen",
-                    headerShown: false
-                }}
-            >
-                <Stack.Screen name="Getstarted" component={Getstarted} />
-                <Stack.Screen name="Language" component={Language} />
-                <Stack.Screen name="Register" component={Register} />
-                <Stack.Screen name="PoliceSignin" component={PoliceSignin} />
-                <Stack.Screen name="PoliceSignup" component={PoliceSignup} />
-                <Stack.Screen name="CitizenSignin" component={CitizenSignin} />
-                <Stack.Screen name="CitizenSignup" component={CitizenSignup} />
-                <Stack.Screen name="PoliceDetail" component={PoliceDetail} />
-                <Stack.Screen name="DetailFilled" component={DetailFilled} />
-            </Stack.Navigator>
-        </NavigationContainer>
+        <>
+            <NavigationContainer>
+                <Stack.Navigator
+                    initialRouteName="Home"
+                    screenOptions={{
+                        headerMode: "screen",
+                        headerShown: false
+                    }}
+                >
+                    <Stack.Screen name="Home" component={Home} />
+                    <Stack.Screen name="Profile" component={Profile} />
+                    <Stack.Screen name="Getstarted" component={Getstarted} />
+                    <Stack.Screen name="Language" component={Language} />
+                    <Stack.Screen name="Register" component={Register} />
+                    <Stack.Screen name="PoliceSignin" component={PoliceSignin} />
+                    <Stack.Screen name="PoliceSignup" component={PoliceSignup} />
+                    <Stack.Screen name="CitizenSignin" component={CitizenSignin} />
+                    <Stack.Screen name="CitizenSignup" component={CitizenSignup} />
+                    <Stack.Screen name="PoliceDetail" component={PoliceDetail} />
+                    <Stack.Screen name="DetailFilled" component={DetailFilled} />
+                </Stack.Navigator>
+            </NavigationContainer>
+        </>
     );
 }

src/config/index.ts

@@ -1 +1,2 @@
 export { default as Navigator } from "./navigator";
+export { default as Tab } from "./tabnavigator/Tab";

src/config/tabnavigator/Tab.tsx

@@ -0,0 +1,88 @@
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import React from "react";
+import { Home, Profile } from "@screens";
+import { View, Image, TouchableOpacity } from "react-native";
+import { Text } from "@components";
+
+const Tab = createBottomTabNavigator();
+
+const Tabs = () => {
+    return (
+        <Tab.Navigator
+            screenOptions={{
+                headerShown: false,
+                tabBarShowLabel: false,
+                tabBarStyle: {
+                    position: "absolute",
+                    bottom: 25,
+                    left: 20,
+                    right: 20,
+                    elevation: 0,
+                    borderRadius: 10,
+                    height: 80,
+                    backgroundColor: "#389FFE"
+                }
+            }}
+        >
+            <Tab.Screen
+                name="Home"
+                component={Home}
+                options={{
+                    tabBarIcon: ({ focused }) => (
+                        <View style={{ alignItems: "center", justifyContent: "center" }}>
+                            <Image
+                                source={require("@assets/homeicon.png")}
+                                resizeMode="contain"
+                                style={{
+                                    height: 25,
+                                    width: 25,
+                                    marginBottom: 5,
+                                    tintColor: focused ? "#1C32F3" : "#FFF"
+                                }}
+                            />
+                            <Text
+                                weight="200"
+                                style={{
+                                    color: focused ? "#1C32F3" : "#FFF",
+                                    fontFamily: "Chillax-Medium"
+                                }}
+                            >
+                                HOME
+                            </Text>
+                        </View>
+                    )
+                }}
+            />
+            <Tab.Screen
+                name="Profile"
+                component={Profile}
+                options={{
+                    tabBarIcon: ({ focused }) => (
+                        <View style={{ alignItems: "center", justifyContent: "center" }}>
+                            <Image
+                                source={require("@assets/profileicon.png")}
+                                resizeMode="contain"
+                                style={{
+                                    height: 25,
+                                    width: 25,
+                                    marginBottom: 5,
+                                    tintColor: focused ? "#1C32F3" : "#FFF"
+                                }}
+                            />
+                            <Text
+                                weight="200"
+                                style={{
+                                    color: focused ? "#1C32F3" : "#FFF",
+                                    fontFamily: "Chillax-Medium"
+                                }}
+                            >
+                                PROFILE
+                            </Text>
+                        </View>
+                    )
+                }}
+            />
+        </Tab.Navigator>
+    );
+};
+export default Tabs;

src/index.tsx

@@ -1,10 +1,22 @@
 import React, { ReactElement } from "react";
 import { AppBootstrap } from "@components";
 import Navigator from "@config/Navigator";
+import Tabs from "@config/tabnavigator/Tab";
+import { NavigationContainer } from "@react-navigation/native";
+import { useState } from "react";
 
 export default function App(): ReactElement {
+    const [login, setLogin] = useState(true);
+
     return (
         <AppBootstrap>
+            {/* {login ? (
+                <NavigationContainer>
+                    <Tabs />
+                </NavigationContainer>
+            ) : (
+                <Navigator />
+            )} */}
             <Navigator />
         </AppBootstrap>
     );

src/screens/homescreen/Home.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { View, Image } from "react-native";
+import { Background, Text } from "@components";
+import { StyleSheet } from "react-native";
+import { LanguageNavigationProps } from "@types";
+
+export function Home({ navigation }: LanguageNavigationProps<"Home">) {
+    return (
+        <Background>
+            <View style={styles.view}>
+                <Text style={styles.text} onPress={() => navigation.navigate("Profile")}>
+                    {" "}
+                    Complaints
+                </Text>
+                <Image source={require("@assets/home.png")} />
+            </View>
+        </Background>
+    );
+}
+
+const styles = StyleSheet.create({
+    view: {
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%"
+    },
+    text: {
+        color: "#fff",
+
+        marginBottom: 60
+    }
+});

src/screens/index.ts

@@ -1,4 +1,4 @@
-export { Getstarted } from "./home/Getstarted";
+export { Getstarted } from "./splashscreen/Getstarted";
 export { Language } from "./language/Language";
 export { default as Register } from "./register/Register";
 export { PoliceSignin } from "./register/police/signin/PoliceSignin";
@@ -7,3 +7,5 @@ export { CitizenSignin } from "./register/citizen/signin/CitizenSignin";
 export { CitizenSignup } from "./register/citizen/signup/CitizenSignup";
 export { PoliceDetail } from "./register/police/detail/PoliceDetail";
 export { DetailFilled } from "./register/police/detailfilled/DetailFilled";
+export { Home } from "./homescreen/Home";
+export { Profile } from "./profile/Profile";

src/screens/profile/Profile.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { Background, Text } from "@components";
+import { Image, View } from "react-native";
+import { StyleSheet } from "react-native";
+
+export function Profile() {
+    return (
+        <Background>
+            <View style={styles.view}>
+                <Image style={styles.img} source={require("@assets/prachit.png")} />
+                <View>
+                    <Text
+                        weight="400"
+                        style={{
+                            color: "#FFF",
+                            textAlign: "center",
+                            backgroundColor: "#1D0ECC",
+                            height: 50,
+                            width: 320,
+                            borderTopLeftRadius: 10,
+                            borderTopRightRadius: 10,
+                            paddingVertical: 9
+                        }}
+                    >
+                        prachit bipin gharat
+                    </Text>
+                    <View
+                        style={{
+                            display: "flex",
+                            flexDirection: "row",
+                            borderTopColor: "#FFF",
+                            borderTopWidth: 1
+                        }}
+                    >
+                        <Text
+                            weight="400"
+                            style={{
+                                color: "#FFF",
+                                textAlign: "center",
+                                backgroundColor: "#1D0ECC",
+                                height: 50,
+                                width: 160,
+                                borderBottomLeftRadius: 10,
+                                paddingVertical: 9
+                            }}
+                        >
+                            citizen
+                        </Text>
+                        <Text
+                            weight="400"
+                            style={{
+                                color: "#FFF",
+                                textAlign: "center",
+                                backgroundColor: "#1D0ECC",
+                                height: 50,
+                                width: 160,
+                                borderBottomRightRadius: 10,
+                                paddingVertical: 9
+                            }}
+                        >
+                            <Image source={require("@assets/percent.png")} />
+                            90%
+                        </Text>
+                    </View>
+                </View>
+                <View>
+                    <Text weight="400" style={styles.text}>
+                        Edit Profile
+                    </Text>
+                    <Text weight="400" style={styles.text}>
+                        Complaints
+                    </Text>
+                    <Text weight="400" style={styles.text}>
+                        Setting
+                    </Text>
+                    <Text weight="400" style={styles.text}>
+                        Help
+                    </Text>
+                    <Text weight="400" style={styles.text}>
+                        Logout
+                    </Text>
+                </View>
+            </View>
+        </Background>
+    );
+}
+const styles = StyleSheet.create({
+    view: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%"
+    },
+    img: {
+        height: 170,
+        width: 170,
+        borderRadius: 95,
+        marginBottom: 30
+    },
+    // protext: {
+    //     color: "#FFF",
+    //     textAlign: "center",
+    //     backgroundColor: "#1D0ECC",
+    //     height: 50,
+    //     width: 320,
+    //     borderTopLeftRadius: 10,
+    //     borderTopRightRadius: 10,
+
+    //     paddingVertical: 9
+    // },
+    text: {
+        color: "#FFF",
+        textAlign: "center",
+        backgroundColor: "#1D0ECC",
+        height: 50,
+        width: 320,
+        borderRadius: 10,
+        marginVertical: 10,
+        paddingVertical: 9
+    }
+});

src/screens/register/police/signin/signin.styles.ts

@@ -12,7 +12,8 @@ const styles = StyleSheet.create({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        height: "50%"
+        paddingTop: 45,
+        paddingBottom: 20
     },
     text: {
         backgroundColor: "#FFF",
@@ -30,9 +31,10 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         alignItems: "center",
         backgroundColor: "#1D0ECC",
-        height: "55%",
+        paddingBottom: 250,
+        paddingTop: 30,
         width: "100%",
-
+        marginVertical: 15,
         borderTopLeftRadius: 60,
         borderTopRightRadius: 60
     },