upd: refactor style

2026-02-19 15:27:02 +08:00
parent 77f478b7ca
commit 6770d40b41
45 changed files with 195 additions and 136 deletions
--- a/app/(application)/announcement/[id].tsx
+++ b/app/(application)/announcement/[id].tsx
@@ -177,7 +177,7 @@ export default function DetailAnnouncement() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -211,7 +211,7 @@ export default function DetailAnnouncement() {
                        <View>
                           <View style={[Styles.rowOnly]}>
                              <Skeleton width={30} height={30} borderRadius={10} />
-                              <View style={[{ flex: 1 }, Styles.ph05]}>
+                              <View style={[Styles.flex1, Styles.ph05]}>
                                 <Skeleton width={100} widthType="percent" height={30} borderRadius={10} />
                              </View>
                           </View>
@@ -221,7 +221,7 @@ export default function DetailAnnouncement() {
                        </View>
                        :
                        <>
-                           <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
+                           <View style={[Styles.rowOnly, Styles.alignStart]}>
                              <MaterialIcons name="campaign" size={25} color={colors.text} style={[Styles.mr05]} />
                              <Text style={[Styles.textDefaultSemiBold, Styles.w90, Styles.mt02]}>{data?.title}</Text>
                           </View>
@@ -318,7 +318,7 @@ export default function DetailAnnouncement() {
                     accessibilityRole="button"
                     accessibilityLabel="Close image viewer"
                  >
-                     <Text style={{ color: 'white', fontSize: 26 }}>✕</Text>
+                     <Text style={[Styles.textWhite, Styles.font26]}>✕</Text>
                  </Pressable>

                  {/* MENU */}
@@ -328,17 +328,17 @@ export default function DetailAnnouncement() {
                     accessibilityLabel="Download or share image"
                     disabled={loadingOpen}
                  >
-                     <Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}>⋯</Text>
+                     <Text style={[{ color: loadingOpen ? 'gray' : 'white' }, Styles.font26]}>⋯</Text>
                  </Pressable>
               </View>
            )}
            FooterComponent={({ imageIndex }) => (
-               <View style={{
-                  paddingBottom: 20,
-                  paddingHorizontal: 16,
-                  alignItems: 'center',
-               }}>
-                  <Text style={{ color: 'white', fontSize: 16 }}>{chooseFile?.name}.{chooseFile?.extension}</Text>
+               <View style={[
+                  Styles.pb20,
+                  Styles.ph16,
+                  Styles.alignCenter,
+               ]}>
+                  <Text style={[Styles.textWhite, Styles.font16]}>{chooseFile?.name}.{chooseFile?.extension}</Text>
               </View>
            )}
         />
--- a/app/(application)/announcement/create.tsx
+++ b/app/(application)/announcement/create.tsx
@@ -17,7 +17,7 @@ import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import React, { useEffect, useState } from "react";
-import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import { SafeAreaView, ScrollView, View } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";

@@ -131,7 +131,7 @@ export default function CreateAnnouncement() {
   }

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -281,15 +281,4 @@ export default function CreateAnnouncement() {
   );
 }

-const styles = StyleSheet.create({
-   container: {
-      padding: 20,
-   },
-   textArea: {
-      height: 100, // Or use flex-based sizing
-      borderColor: 'gray',
-      borderWidth: 1,
-      padding: 10,
-      textAlignVertical: 'top', // Important for Android to align text at the top
-   },
-});
+
--- a/app/(application)/announcement/index.tsx
+++ b/app/(application)/announcement/index.tsx
@@ -85,11 +85,11 @@ export default function Announcement() {
   })

   return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
         <View>
            <InputSearch onChange={setSearch} />
         </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt05]}>
            {
               loading ?
                  arrSkeleton.map((item, index) => {
@@ -113,7 +113,7 @@ export default function Announcement() {
                                 bgColor="transparent"
                                 icon={
                                    // <View style={[Styles.iconContent]}>
-                                       <MaterialIcons name="campaign" size={25} color={colors.text} />
+                                    <MaterialIcons name="campaign" size={25} color={colors.text} />
                                    // </View>
                                 }
                                 title={item.title}
@@ -135,7 +135,7 @@ export default function Announcement() {
                        }
                     />
                     :
-                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada pengumuman</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada pengumuman</Text>
            }
         </View>
      </View>
--- a/app/(application)/banner/[id].tsx
+++ b/app/(application)/banner/[id].tsx
@@ -114,7 +114,7 @@ export default function EditBanner() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -156,7 +156,7 @@ export default function EditBanner() {
                                 ? selectedImage
                                 : selectedImage.uri
                           }
-                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                           style={[Styles.resizeContain, Styles.w100, { height: 100 }]}
                        />
                     </Pressable>
                  ) : (
@@ -165,7 +165,7 @@ export default function EditBanner() {
                        style={[Styles.wrapPaper, Styles.contentItemCenter]}
                     >
                        <View
-                           style={{ justifyContent: "center", alignItems: "center" }}
+                           style={[Styles.contentItemCenter]}
                        >
                           <Entypo name="image" size={50} color={"#aeaeae"} />
                           <Text style={[Styles.textInformation, Styles.mt05]}>
--- a/app/(application)/banner/create.tsx
+++ b/app/(application)/banner/create.tsx
@@ -96,7 +96,7 @@ export default function CreateBanner() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -142,7 +142,7 @@ export default function CreateBanner() {
                     <Pressable onPress={pickImageAsync}>
                        <Image
                           src={selectedImage}
-                           style={{ resizeMode: "contain", width: "100%", height: 100 }}
+                           style={[Styles.resizeContain, Styles.w100, { height: 100 }]}
                        />
                     </Pressable>
                  ) : (
@@ -151,7 +151,7 @@ export default function CreateBanner() {
                        style={[Styles.wrapPaper, Styles.contentItemCenter]}
                     >
                        <View
-                           style={{ justifyContent: "center", alignItems: "center" }}
+                           style={[Styles.contentItemCenter]}
                        >
                           <Entypo name="image" size={50} color={"#aeaeae"} />
                           <Text style={[Styles.textInformation, Styles.mt05]}>
--- a/app/(application)/banner/index.tsx
+++ b/app/(application)/banner/index.tsx
@@ -108,7 +108,7 @@ export default function BannerList() {


   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -158,13 +158,12 @@ export default function BannerList() {
                              />
                           }
                           title={index.title}
-                           width={65}
                        />
                     ))}
                  </View>
                  :
                  <View style={[Styles.p15, Styles.mb100]}>
-                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter]}>Tidak ada data</Text>
                  </View>
            }

--- a/app/(application)/discussion/[id].tsx
+++ b/app/(application)/discussion/[id].tsx
@@ -239,7 +239,7 @@ export default function DetailDiscussionGeneral() {
               )
            }}
         />
-         <View style={{ flex: 1, backgroundColor: colors.background }}>
+         <View style={[Styles.flex1, { backgroundColor: colors.background }]}>
            <ScrollView
               showsVerticalScrollIndicator={false}
               style={[Styles.h100, { backgroundColor: colors.background }]}
@@ -402,7 +402,7 @@ export default function DetailDiscussionGeneral() {
                              }
                           />
                           :
-                           <View style={[Styles.pv20, { alignItems: 'center' }]}>
+                           <View style={[Styles.pv20, Styles.itemsCenter]}>
                              <Text style={[Styles.textInformation, { color: colors.dimmed }]}>
                                 {
                                    data?.status == 2 ? "Diskusi telah ditutup" : data?.isActive == false ? "Diskusi telah diarsipkan" : "Hanya anggota diskusi yang dapat memberikan komentar"
--- a/app/(application)/discussion/add-member/[id].tsx
+++ b/app/(application)/discussion/add-member/[id].tsx
@@ -127,7 +127,7 @@ export default function AddMemberDiscussionDetail() {
               )
            }}
         />
-         <View style={[Styles.p15, {flex: 1,  backgroundColor: colors.background }]}>
+         <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
            <InputSearch onChange={setSearch} value={search} />

            {
@@ -149,7 +149,7 @@ export default function AddMemberDiscussionDetail() {
                  </View>

                  :
-                  <Text style={[Styles.textDefault, Styles.pv05, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.pv05, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada member yang dipilih</Text>
            }
            <ScrollView
               showsVerticalScrollIndicator={false}
@@ -172,7 +172,7 @@ export default function AddMemberDiscussionDetail() {
                                 <View style={[Styles.ml10]}>
                                    <Text style={[Styles.textDefault]}>{item.name}</Text>
                                    {
-                                       found && <Text style={[Styles.textInformation, {color: colors.dimmed}]}>sudah menjadi anggota</Text>
+                                       found && <Text style={[Styles.textInformation, { color: colors.dimmed }]}>sudah menjadi anggota</Text>
                                    }
                                 </View>
                              </View>
@@ -184,7 +184,7 @@ export default function AddMemberDiscussionDetail() {
                     }
                     )
                     :
-                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter]}>Tidak ada data</Text>
               }
            </ScrollView>
         </View>
--- a/app/(application)/discussion/create.tsx
+++ b/app/(application)/discussion/create.tsx
@@ -165,7 +165,7 @@ export default function CreateDiscussionGeneral() {
   }

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -207,7 +207,7 @@ export default function CreateDiscussionGeneral() {
            }}
         />
         <LoadingOverlay visible={loading} />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
            <View style={[Styles.p15, Styles.mb100]}>
               {
                  (entityUser.role == "supadmin" ||
--- a/app/(application)/discussion/edit/[id].tsx
+++ b/app/(application)/discussion/edit/[id].tsx
@@ -164,7 +164,7 @@ export default function EditDiscussionGeneral() {
   }

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -200,7 +200,7 @@ export default function EditDiscussionGeneral() {
            }}
         />
         <LoadingOverlay visible={loading} />
-         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
+         <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
            <View style={[Styles.p15]}>
               <InputForm
                  label="Judul"
--- a/app/(application)/discussion/index.tsx
+++ b/app/(application)/discussion/index.tsx
@@ -99,7 +99,7 @@ export default function Discussion() {
   })

   return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
         <View>
            {
               entityUser.role != "user" && entityUser.role != "coadmin" &&
@@ -130,7 +130,7 @@ export default function Discussion() {
               </View>
            }
         </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt05]}>
            {
               loading ?
                  arrSkeleton.map((item: any, i: number) => {
@@ -154,7 +154,7 @@ export default function Discussion() {
                                 borderType="bottom"
                                 icon={
                                    // <View style={[Styles.iconContent]}>
-                                       <MaterialIcons name="chat" size={25} color={colors.text} />
+                                    <MaterialIcons name="chat" size={25} color={colors.text} />
                                    // </View>
                                 }
                                 title={item.title}
@@ -187,7 +187,7 @@ export default function Discussion() {
                        }
                     />
                     :
-                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
            }
         </View>
      </View>
--- a/app/(application)/discussion/member/[id].tsx
+++ b/app/(application)/discussion/member/[id].tsx
@@ -75,7 +75,7 @@ export default function MemberDiscussionDetail() {
   }

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -90,7 +90,7 @@ export default function MemberDiscussionDetail() {
               )
            }}
         />
-         <ScrollView style={{ backgroundColor: colors.background }}>
+         <ScrollView style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}>
            <View style={[Styles.p15]}>
               <Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text>
               <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
--- a/app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx
@@ -156,7 +156,7 @@ export default function CreateCalendarAddMember() {
                        return (
                           <Pressable
                              key={index}
-                              style={[Styles.itemSelectModal, {borderColor: colors.icon + '20'}]}
+                              style={[Styles.itemSelectModal, { borderColor: colors.icon + '20' }]}
                              onPress={() => { onChoose(item.idUser, item.name, item.img) }}
                           >
                              <View style={[Styles.rowItemsCenter, Styles.w70]}>
--- a/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
@@ -209,7 +209,7 @@ export default function DiscussionDivision() {
                        }
                     />
                     :
-                     (<Text style={[Styles.textDefault, Styles.mv10, { textAlign: "center", color:colors.dimmed }]}>Tidak ada diskusi</Text>)
+                     (<Text style={[Styles.textDefault, Styles.mv10, { textAlign: "center", color: colors.dimmed }]}>Tidak ada diskusi</Text>)
            }
         </View>
      </View>
--- a/app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx
@@ -89,7 +89,7 @@ export default function TaskDivisionReport() {
   }

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
--- a/app/(application)/division/[id]/(fitur-division)/task/index.tsx
+++ b/app/(application)/division/[id]/(fitur-division)/task/index.tsx
@@ -112,7 +112,7 @@ export default function ListTask() {
   })

   return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
         <View>
            <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
               <ButtonTab
@@ -190,7 +190,7 @@ export default function ListTask() {
         <View style={[Styles.mv05]}>
            <View style={[Styles.rowOnly]}>
               <Text style={[Styles.mr05]}>Filter :</Text>
-               <LabelStatus size="small" category="secondary" text={isYear} style={{ marginRight: 5 }} />
+               <LabelStatus size="small" category="secondary" text={isYear} style={[Styles.mr05]} />
            </View>
         </View>
         <View style={[{ flex: 2 }]}>
@@ -342,13 +342,13 @@ export default function ListTask() {
                        </View>
                     )
                  ) : (
-                     <Text style={[Styles.textDefault, { textAlign: "center", color: colors.dimmed }]} >
+                     <Text style={[Styles.textDefault, Styles.textCenter]} >
                        Tidak ada data
                     </Text>
                  )

            }
-         </View>
-      </View>
+         </View >
+      </View >
   );
 }
--- a/app/(application)/division/index.tsx
+++ b/app/(application)/division/index.tsx
@@ -204,7 +204,7 @@ export default function ListDivision() {
               </View>
            )}
         </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
            {
               loading ?
                  isList ?
--- a/app/(application)/edit-profile.tsx
+++ b/app/(application)/edit-profile.tsx
@@ -216,7 +216,7 @@ export default function EditProfile() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -262,7 +262,7 @@ export default function EditProfile() {
         >
            <ScrollView showsVerticalScrollIndicator={false}>
               <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                     {
                        selectedImage != undefined ? (
                           <Pressable onPress={pickImageAsync}>
--- a/app/(application)/group/index.tsx
+++ b/app/(application)/group/index.tsx
@@ -150,7 +150,7 @@ export default function Index() {
            </WrapTab>
            <InputSearch onChange={setSearch} />
         </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
            {
               loading ?
                  arrSkeleton.map((item, index) => {
--- a/app/(application)/home.tsx
+++ b/app/(application)/home.tsx
@@ -49,7 +49,7 @@ export default function Home() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               title: 'Home',
@@ -71,19 +71,21 @@ export default function Home() {
               />
            }
            showsVerticalScrollIndicator={false}
-            style={{ backgroundColor: colors.background }}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
         >
            <LinearGradient
               colors={[colors.header, colors.header, colors.header, colors.header, colors.homeGradient]}
-               style={{
-                  position: 'absolute',
-                  width: Dimensions.get('window').width * 1.5,
-                  height: Dimensions.get('window').width * 1.5,
-                  borderRadius: Dimensions.get('window').width * 0.5,
-                  top: -Dimensions.get('window').width * 1, // Positioned to show the bottom part of the circle as an arc
-                  left: -Dimensions.get('window').width * 0.25,
-                  zIndex: -1,
-               }}
+               style={[
+                  Styles.posAbsolute,
+                  Styles.zIndexMinus1,
+                  {
+                     width: Dimensions.get('window').width * 1.5,
+                     height: Dimensions.get('window').width * 1.5,
+                     borderRadius: Dimensions.get('window').width * 0.5,
+                     top: -Dimensions.get('window').width * 1, // Positioned to show the bottom part of the circle as an arc
+                     left: -Dimensions.get('window').width * 0.25,
+                  }
+               ]}
            />
            {/* <CaraouselHome refreshing={refreshing} /> */}
            <View style={[Styles.ph15]}>
--- a/app/(application)/member/[id].tsx
+++ b/app/(application)/member/[id].tsx
@@ -77,7 +77,7 @@ export default function MemberDetail() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               headerTitle: 'Anggota',
@@ -119,7 +119,7 @@ export default function MemberDetail() {
                        <Pressable onPress={() => setPreview(true)}>
                           <ImageUser src={`${ConstEnv.url_storage}/files/${data?.img}`} size="lg" onError={setErrorImg} />
                        </Pressable>
-                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, { textAlign: 'center' }]}>{data?.name}</Text>
+                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, Styles.textCenter]}>{data?.name}</Text>
                        <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
                     </>

--- a/app/(application)/member/create.tsx
+++ b/app/(application)/member/create.tsx
@@ -208,7 +208,7 @@ export default function CreateMember() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               headerTitle: "Tambah Anggota",
@@ -235,7 +235,7 @@ export default function CreateMember() {
         >
            <ScrollView showsVerticalScrollIndicator={false}>
               <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                     {selectedImage != undefined ? (
                        <Pressable onPress={pickImageAsync}>
                           <Image src={selectedImage} style={[Styles.userProfileBig]} />
--- a/app/(application)/member/edit/[id].tsx
+++ b/app/(application)/member/edit/[id].tsx
@@ -238,7 +238,7 @@ export default function EditMember() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               headerTitle: "Edit Anggota",
@@ -269,7 +269,7 @@ export default function EditMember() {
         >
            <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}>
               <View style={[Styles.p15]}>
-                  <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <View style={[Styles.contentItemCenter]}>
                     {
                        errorImg ?
                           <Pressable onPress={pickImageAsync}>
--- a/app/(application)/member/index.tsx
+++ b/app/(application)/member/index.tsx
@@ -134,7 +134,7 @@ export default function Index() {
               </View>
            }
         </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[{ flex: 2 }, Styles.mt10]}>
            {
               loading ?
                  arrSkeleton.map((item, index) => {
--- a/app/(application)/notification.tsx
+++ b/app/(application)/notification.tsx
@@ -100,7 +100,7 @@ export default function Notification() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <View style={[Styles.p15]}>
            {
               loading ?
@@ -148,7 +148,7 @@ export default function Notification() {
                        }
                     />
                     :
-                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
            }
         </View>
      </SafeAreaView>
--- a/app/(application)/position/index.tsx
+++ b/app/(application)/position/index.tsx
@@ -1,4 +1,3 @@
-import ModalConfirmation from "@/components/ModalConfirmation";
 import BorderBottomItem from "@/components/borderBottomItem";
 import { ButtonForm } from "@/components/buttonForm";
 import ButtonTab from "@/components/buttonTab";
@@ -7,10 +6,10 @@ import { InputForm } from "@/components/inputForm";
 import InputSearch from "@/components/inputSearch";
 import LabelStatus from "@/components/labelStatus";
 import MenuItemRow from "@/components/menuItemRow";
+import ModalConfirmation from "@/components/ModalConfirmation";
 import SkeletonTwoItem from "@/components/skeletonTwoItem";
 import Text from "@/components/Text";
 import WrapTab from "@/components/wrapTab";
-import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
 import { setUpdatePosition } from "@/lib/positionSlice";
@@ -150,7 +149,7 @@ export default function Index() {
   });

   return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
         <View>
            <WrapTab>
               <ButtonTab
@@ -177,7 +176,7 @@ export default function Index() {
               </View>
            }
         </View>
-         <View style={[{ flex: 2 }, Styles.mt05]}>
+         <View style={[Styles.flex2, Styles.mt10]}>
            {
               loading ?
                  arrSkeleton.map((item, index) => {
@@ -221,7 +220,7 @@ export default function Index() {
                        }
                     />
                     :
-                     <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada data</Text>
            }
         </View>
         <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={chooseData.name}>
@@ -251,7 +250,7 @@ export default function Index() {


         <DrawerBottom animation="none" keyboard height={30} backdropPressable={false} isVisible={isVisibleEdit} setVisible={() => setVisibleEdit(false)} title="Edit Jabatan">
-            <View style={{ justifyContent: 'space-between', flex: 1 }}>
+            <View style={[Styles.justifySpaceBetween, Styles.flex1]}>
               <View>
                  <InputForm
                     type="default"
--- a/app/(application)/profile.tsx
+++ b/app/(application)/profile.tsx
@@ -43,7 +43,7 @@ export default function Profile() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               headerTitle: 'Profile',
@@ -75,7 +75,7 @@ export default function Profile() {
            }
            style={[Styles.h100, { backgroundColor: colors.background }]}
         >
-            <View style={{ flexDirection: 'column' }}>
+            <View style={[Styles.flexColumn]}>
               <LinearGradient
                  colors={[colors.header, colors.homeGradient]}
                  style={[Styles.wrapHeadViewMember]}
--- a/app/(application)/project/[id]/add-file.tsx
+++ b/app/(application)/project/[id]/add-file.tsx
@@ -129,7 +129,7 @@ export default function ProjectAddFile() {


   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -155,7 +155,7 @@ export default function ProjectAddFile() {
               )
            }}
         />
-         <ScrollView style={{ backgroundColor: colors.background }}>
+         <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
            <View style={[Styles.p15, Styles.mb100]}>
               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
               {
--- a/app/(application)/project/[id]/add-task.tsx
+++ b/app/(application)/project/[id]/add-task.tsx
@@ -135,7 +135,7 @@ export default function ProjectAddTask() {
   }

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -174,7 +174,7 @@ export default function ProjectAddTask() {
            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
            keyboardVerticalOffset={headerHeight}
         >
-            <ScrollView style={{ backgroundColor: colors.background }}>
+            <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
               <View style={[Styles.p15, Styles.mb100]}>
                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                     <DateTimePicker
@@ -198,20 +198,20 @@ export default function ProjectAddTask() {
                  </View>
                  <View style={[Styles.mv10]}>
                     <View style={[Styles.rowSpaceBetween]}>
-                        <View style={[{ width: "48%" }]}>
+                        <View style={[Styles.w48]}>
                           <Text style={[Styles.mb05]}>
                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                           </Text>
                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: "center" }}>{from}</Text>
+                              <Text style={Styles.textCenter}>{from}</Text>
                           </View>
                        </View>
-                        <View style={[{ width: "48%" }]}>
+                        <View style={[Styles.w48]}>
                           <Text style={[Styles.mb05]}>
                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                           </Text>
                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: "center" }}>{to}</Text>
+                              <Text style={Styles.textCenter}>{to}</Text>
                           </View>
                        </View>
                     </View>
--- a/app/(application)/project/[id]/cancel.tsx
+++ b/app/(application)/project/[id]/cancel.tsx
@@ -67,7 +67,7 @@ export default function ProjectCancel() {
   }

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
--- a/app/(application)/project/[id]/edit.tsx
+++ b/app/(application)/project/[id]/edit.tsx
@@ -88,7 +88,7 @@ export default function EditProject() {


   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -123,7 +123,7 @@ export default function EditProject() {
               )
            }}
         />
-         <ScrollView style={{ backgroundColor: colors.background }}>
+         <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
            <View style={[Styles.p15, Styles.mb100]}>
               <InputForm
                  label="Judul Kegiatan"
--- a/app/(application)/project/[id]/index.tsx
+++ b/app/(application)/project/[id]/index.tsx
@@ -93,7 +93,7 @@ export default function DetailProject() {
   };

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -113,7 +113,7 @@ export default function DetailProject() {
            }}
         />
         <ScrollView
-            style={{ backgroundColor: colors.background }}
+            style={[Styles.h100, { backgroundColor: colors.background }]}
            refreshControl={
               <RefreshControl
                  refreshing={refreshing}
--- a/app/(application)/project/[id]/report.tsx
+++ b/app/(application)/project/[id]/report.tsx
@@ -88,7 +88,7 @@ export default function ReportProject() {


   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -192,7 +192,7 @@ export default function CreateProject() {


   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
--- a/app/(application)/project/create/member.tsx
+++ b/app/(application)/project/create/member.tsx
@@ -105,7 +105,7 @@ export default function AddMemberCreateProject() {
               )
            }}
         />
-         <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+         <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
            <InputSearch onChange={(val) => setSearch(val)} value={search} />

            {
@@ -127,11 +127,11 @@ export default function AddMemberCreateProject() {
                  </View>

                  :
-                  <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }, Styles.pv05]}>Tidak ada member yang dipilih</Text>
+                  <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }, Styles.pv05]}>Tidak ada member yang dipilih</Text>
            }
            <ScrollView
               showsVerticalScrollIndicator={false}
-               style={{ backgroundColor: colors.background }}
+               style={[Styles.h100, Styles.flex1, { backgroundColor: colors.background }]}
            >

               {
@@ -159,7 +159,7 @@ export default function AddMemberCreateProject() {
                     }
                     )
                     :
-                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     <Text style={[Styles.textDefault, Styles.textCenter]}>Tidak ada data</Text>
               }
            </ScrollView>
         </View>
--- a/app/(application)/project/create/task.tsx
+++ b/app/(application)/project/create/task.tsx
@@ -121,7 +121,7 @@ export default function CreateProjectAddTask() {
   }

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => (
@@ -160,7 +160,7 @@ export default function CreateProjectAddTask() {
            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
            keyboardVerticalOffset={headerHeight}
         >
-            <ScrollView style={{ backgroundColor: colors.background }}>
+            <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
               <View style={[Styles.p15, Styles.mb100]}>
                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                     <DateTimePicker
@@ -189,7 +189,7 @@ export default function CreateProjectAddTask() {
                              Tanggal Mulai <Text style={{ color: colors.error }}>*</Text>
                           </Text>
                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: "center" }}>{from}</Text>
+                              <Text style={Styles.textCenter}>{from}</Text>
                           </View>
                        </View>
                        <View style={[{ width: "48%" }]}>
@@ -197,7 +197,7 @@ export default function CreateProjectAddTask() {
                              Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text>
                           </Text>
                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: "center" }}>{to}</Text>
+                              <Text style={Styles.textCenter}>{to}</Text>
                           </View>
                        </View>
                     </View>
--- a/app/(application)/project/index.tsx
+++ b/app/(application)/project/index.tsx
@@ -126,7 +126,7 @@ export default function ListProject() {
   })

   return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
         <View>
            <WrapTab>
               <ScrollView horizontal showsHorizontalScrollIndicator={false} style={[Styles.round20]}>
@@ -189,7 +189,7 @@ export default function ListProject() {
               </ScrollView>
            </WrapTab>

-            <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
+            <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter]}>
               <InputSearch width={68} onChange={setSearch} />
               <Pressable
                  onPress={() => {
@@ -203,21 +203,21 @@ export default function ListProject() {
                  />
               </Pressable>
            </View>
-            <View style={[Styles.mv05]}>
+            <View style={[Styles.mt10]}>
               {
                  // entityUser.role != 'cosupadmin' && entityUser.role != 'admin' &&
                  <View style={[Styles.rowOnly]}>
                     <Text style={[Styles.mr05]}>Filter :</Text>
                     {
                        (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-                        <LabelStatus size="small" category="secondary" text={nameGroup} style={{ marginRight: 5 }} />
+                        <LabelStatus size="small" category="secondary" text={nameGroup} style={[Styles.mr05]} />
                     }
                     {
                        (entityUser.role == 'user' || entityUser.role == 'coadmin')
-                           ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="secondary" text="Kegiatan Saya" style={{ marginRight: 5 }} /> : <LabelStatus size="small" category="secondary" text="Semua Kegiatan" style={{ marginRight: 5 }} />
+                           ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="secondary" text="Kegiatan Saya" style={[Styles.mr05]} /> : <LabelStatus size="small" category="secondary" text="Semua Kegiatan" style={[Styles.mr05]} />
                           : ''
                     }
-                     <LabelStatus size="small" category="secondary" text={isYear} style={{ marginRight: 5 }} />
+                     <LabelStatus size="small" category="secondary" text={isYear} style={[Styles.mr05]} />
                     {/* {
                        (entityUser.role == 'user' || entityUser.role == 'coadmin')
                           ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? <LabelStatus size="small" category="primary" text="Kegiatan Saya" /> : <LabelStatus size="small" category="primary" text="Semua Kegiatan" />
@@ -227,7 +227,7 @@ export default function ListProject() {
               }
            </View>
         </View>
-         <View style={[{ flex: 2 }]}>
+         <View style={[Styles.flex2, Styles.mt10]}>
            {
               loading ?
                  isList ?
@@ -399,7 +399,7 @@ export default function ListProject() {
                     )
                     :
                     <View style={[Styles.mt15]}>
-                        <Text style={[Styles.textDefault, { textAlign: 'center', color: colors.dimmed }]}>Tidak ada kegiatan</Text>
+                        <Text style={[Styles.textDefault, Styles.textCenter, { color: colors.dimmed }]}>Tidak ada kegiatan</Text>
                     </View>
            }
         </View>
--- a/app/(application)/project/update/[detail].tsx
+++ b/app/(application)/project/update/[detail].tsx
@@ -172,7 +172,7 @@ export default function UpdateProjectTask() {
   }, [range])

   return (
-      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+      <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
         <Stack.Screen
            options={{
               // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -203,7 +203,7 @@ export default function UpdateProjectTask() {
            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
            keyboardVerticalOffset={headerHeight}
         >
-            <ScrollView style={{ backgroundColor: colors.background }}>
+            <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
               <View style={[Styles.p15, Styles.mb100]}>
                  <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                     {
@@ -237,13 +237,13 @@ export default function UpdateProjectTask() {
                        <View style={[{ width: '48%' }]}>
                           <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={{ color: colors.error }}>*</Text></Text>
                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: 'center' }}>{from}</Text>
+                              <Text style={Styles.textCenter}>{from}</Text>
                           </View>
                        </View>
                        <View style={[{ width: '48%' }]}>
                           <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={{ color: colors.error }}>*</Text></Text>
                           <View style={[Styles.wrapPaper, Styles.noShadow, Styles.borderAll, Styles.p10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
-                              <Text style={{ textAlign: 'center' }}>{to}</Text>
+                              <Text style={Styles.textCenter}>{to}</Text>
                           </View>
                        </View>
                     </View>
--- a/app/(application)/search.tsx
+++ b/app/(application)/search.tsx
@@ -82,7 +82,7 @@ export default function Search() {

   return (
      <>
-         <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
+         <SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
            <Stack.Screen
               options={{
                  headerTitle: 'Pencarian',
--- a/app/(application)/setting/index.tsx
+++ b/app/(application)/setting/index.tsx
@@ -117,7 +117,7 @@ export default function ListSetting() {
         }}
      >
         <View style={Styles.rowItemsCenter}>
-            <Ionicons name={icon as any} size={20} color={colors.text} style={{ marginRight: 10 }} />
+            <Ionicons name={icon as any} size={20} color={colors.text} style={Styles.mr10} />
            <Text style={{ color: colors.text }}>{label}</Text>
         </View>
         {theme === value && <Ionicons name="checkmark" size={20} color={colors.text} />}
@@ -125,7 +125,7 @@ export default function ListSetting() {
   );

   return (
-      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
+      <View style={[Styles.p15, Styles.flex1, { backgroundColor: colors.background }]}>
         <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0, Styles.round05]}>
            {
               entities.idUserRole != "developer" &&
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { NotifierWrapper } from 'react-native-notifier';
 import 'react-native-reanimated';
+import Styles from '@/constants/Styles';

 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -28,7 +29,7 @@ export default function RootLayout() {
  }

  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={Styles.flex1}>
      <NotifierWrapper>
        <ThemeProvider>
          <AuthProvider>
--- a/app/verification.tsx
+++ b/app/verification.tsx
@@ -33,7 +33,7 @@ export default function Index() {
   }
   return (
      <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
-         <View style={{ alignItems: "center", marginVertical: 50 }}>
+         <View style={[Styles.rowItemsCenter, Styles.mv50]}>
            <Image
               source={require("../assets/images/logo.png")}
               style={[{ width: 300, height: 150 }]}
--- a/components/buttonSetting.tsx
+++ b/components/buttonSetting.tsx
@@ -25,7 +25,7 @@ export default function ButtonSetting({ title, onPress, icon, borderBottom = tru
               {icon}
               <Text style={[{ color: colors.text }, Styles.ml05]}>{title}</Text>
            </View>
-            {value && <Text style={[{ color: colors.dimmed }]}>{value}</Text>}
+            {value && <Text style={[{ color: colors.dimmed, alignSelf: 'center' }]}>{value}</Text>}
         </View>
      </Pressable>
   )
--- a/components/inputForm.tsx
+++ b/components/inputForm.tsx
@@ -69,7 +69,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
                     Styles.mh05,
                     multiline && { height: '100%', maxHeight: 100 },
                     { width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
-                     Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 3 } : { paddingVertical: 0 },
+                     Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 4 } : { paddingVertical: 0 },
                  ]}
               />
            </View>
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -118,6 +118,9 @@ const Styles = StyleSheet.create({
   mh15: {
      marginHorizontal: 15
   },
+   mv50: {
+      marginVertical: 50
+   },
   mv10: {
      marginVertical: 10
   },
@@ -169,12 +172,21 @@ const Styles = StyleSheet.create({
   pb10: {
      paddingBottom: 10
   },
+   pb50: {
+      paddingBottom: 50
+   },
+   pb100: {
+      paddingBottom: 100
+   },
   pb13: {
      paddingBottom: 13
   },
   pb15: {
      paddingBottom: 15
   },
+   pb20: {
+      paddingBottom: 20
+   },
   ph05: {
      paddingHorizontal: 5,
   },
@@ -235,6 +247,9 @@ const Styles = StyleSheet.create({
   w100: {
      width: '100%'
   },
+   w48: {
+      width: '48%'
+   },
   w95: {
      width: '95%'
   },
@@ -277,6 +292,9 @@ const Styles = StyleSheet.create({
      justifyContent: 'space-between',
      flexDirection: 'row'
   },
+   justifySpaceBetween: {
+      justifyContent: 'space-between'
+   },
   rowSpaceBetweenReverse: {
      justifyContent: 'space-between',
      flexDirection: 'row-reverse'
@@ -791,6 +809,57 @@ const Styles = StyleSheet.create({
   },
   flex1: {
      flex: 1
+   },
+   flex2: {
+      flex: 2
+   },
+   flexColumn: {
+      flexDirection: 'column'
+   },
+   textCenter: {
+      textAlign: 'center'
+   },
+   posAbsolute: {
+      position: 'absolute'
+   },
+   zIndex1: {
+      zIndex: 1
+   },
+   zIndexMinus1: {
+      zIndex: -1
+   },
+   alignCenter: {
+      alignItems: 'center'
+   },
+   itemsCenter: {
+      alignItems: 'center'
+   },
+   justifyCenter: {
+      justifyContent: 'center'
+   },
+   resizeContain: {
+      resizeMode: 'contain'
+   },
+   resizeCover: {
+      resizeMode: 'cover'
+   },
+   resizeStretch: {
+      resizeMode: 'stretch'
+   },
+   textWhite: {
+      color: 'white'
+   },
+   font16: {
+      fontSize: 16
+   },
+   font26: {
+      fontSize: 26
+   },
+   ph16: {
+      paddingHorizontal: 16
+   },
+   alignStart: {
+      alignItems: 'flex-start'
   }
 })