keannu125/Reactnative-notesapp
1
0
Fork 0
mirror of https://github.com/lemeow125/Reactnative-notesapp.git synced 2025-06-29 00:45:44 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added pages and basic drawer

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-05 21:37:52 +08:00
parent 4755f592c2
commit 95255a49c1
22 changed files with 1085 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

91
src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx Normal file
View file

@ -0,0 +1,91 @@
import * as React from "react";
import { DrawerContentScrollView } from "@react-navigation/drawer";
import { useNavigation } from "@react-navigation/native";
import { Text, View } from "react-native";
import ButtonAlignLeft from "../../../Buttons/ButtonAlignLeft/ButtonAlignLeft";
import styles from "../../../../styles";
import { RootDrawerParamList } from "../../../../Interfaces/Interfaces";
import AddIcon from "../../../Icons/AddIcon/AddIcon";
import HomeIcon from "../../../Icons/HomeIcon/HomeIcon";
import LoginIcon from "../../../Icons/LoginIcon/LoginIcon";
import SignupIcon from "../../../Icons/SignupIcon/SignupIcon";
import UserIcon from "../../../Icons/UserIcon/UserIcon";
import AppIcon from "../../../Icons/AppIcon/AppIcon";
export default function CustomDrawerContent(props: {}) {
const navigation = useNavigation<RootDrawerParamList>();
const width = 224;
return (
<DrawerContentScrollView {...props}>
<View
style={{
...styles.flex_row,
...{ justifyContent: "center" },
}}
>
<AppIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Clip Notes
</Text>
</View>
<ButtonAlignLeft
color="Blue"
width={width}
onPress={() => {
navigation.navigate("Home");
}}
>
<HomeIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Home</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Green"
width={width}
onPress={() => {
navigation.navigate("Add Note");
}}
>
<AddIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Add Note
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Green"
width={width}
onPress={() => {
navigation.navigate("Login");
}}
>
<LoginIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Login</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Yellow"
width={width}
onPress={() => {
navigation.navigate("User Info");
}}
>
<UserIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
User Info
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Yellow"
width={width}
onPress={() => {
navigation.navigate("Register");
}}
>
<SignupIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Register
</Text>
</ButtonAlignLeft>
</DrawerContentScrollView>
);
}

25
src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx Normal file
View file

@ -0,0 +1,25 @@
import { View, Image, Text } from "react-native";
import type { DrawerNavigationOptions } from "@react-navigation/drawer";
import AppIcon from "../../Icons/AppIcon/AppIcon";
const DrawerScreenSettings: DrawerNavigationOptions = {
headerTitleStyle: { color: "white", fontSize: 26 },
unmountOnBlur: true,
headerStyle: { backgroundColor: "#0087e4" },
headerTintColor: "white",
drawerType: "slide",
drawerLabelStyle: {
color: "white",
},
drawerStyle: {
backgroundColor: "#002d4d",
width: 260,
},
headerRight: () => (
<View
style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
>
<AppIcon size={32} color="white" />
</View>
),
};
export default DrawerScreenSettings;