app/(application)/announcement/[id].tsx

@@ -84,9 +84,9 @@ export default function DetailAnnouncement() {
                         </View>
                         :
                         <>
-                           <View style={Styles.rowItemsCenter}>
+                           <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
                               <MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
-                              <Text style={[Styles.textDefaultSemiBold]}>{data?.title}</Text>
+                              <Text style={[Styles.textDefaultSemiBold, Styles.w90]}>{data?.title}</Text>
                            </View>
                            <View style={[Styles.mt10]}>
                               {

app/(application)/banner/index.tsx

@@ -142,6 +142,7 @@ export default function BannerList() {
                               />
                            }
                            title={index.title}
+                           width={65}
                         />
                      ))}
                   </View>

app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx

@@ -9,10 +9,11 @@ import { valueTypeEventRepeat } from "@/constants/TypeEventRepeat"
 import { apiGetCalendarOne, apiUpdateCalendar } from "@/lib/api"
 import { stringToDateTime } from "@/lib/fun_stringToDate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useHeaderHeight } from "@react-navigation/elements"
 import { Stack, router, useLocalSearchParams } from "expo-router"
 import moment from "moment"
 import { useEffect, useState } from "react"
-import { SafeAreaView, ScrollView, View } from "react-native"
+import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, View } from "react-native"
 import Toast from "react-native-toast-message"
 
 export default function EditEventCalendar() {
@@ -22,6 +23,7 @@ export default function EditEventCalendar() {
    const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>()
    const [idCalendar, setIdCalendar] = useState('')
    const [loading, setLoading] = useState(false)
+   const headerHeight = useHeaderHeight()
 
    const [error, setError] = useState({
       title: false,
@@ -176,94 +178,100 @@ export default function EditEventCalendar() {
                   />
             }}
          />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
-               <InputForm
-                  label="Nama Acara"
-                  type="default"
-                  placeholder="Nama Acara"
-                  required
-                  bg="white"
-                  value={data.title}
-                  onChange={(val) => validationForm("title", val)}
-                  error={error.title}
-                  errorText="Nama acara tidak boleh kosong"
-               />
-               <InputDate
-                  onChange={(val) => validationForm("dateStart", val)}
-                  mode="date"
-                  value={data.dateStart}
-                  label="Tanggal Acara"
-                  required
-                  error={error.dateStart}
-                  errorText="Tanggal acara tidak boleh kosong"
-                  placeholder="Pilih Tanggal Acara"
-               />
-               <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
-                  <View style={[{ width: "48%" }]}>
-                     <InputDate
-                        onChange={(val) => validationForm("timeStart", val)}
-                        mode="time"
-                        value={data.timeStart}
-                        label="Waktu Awal"
-                        required
-                        error={error.timeStart}
-                        errorText="Waktu awal tidak valid"
-                        placeholder="--:--"
-                     />
-                  </View>
-                  <View style={[{ width: "48%" }]}>
-                     <InputDate
-                        onChange={(val) => validationForm("timeEnd", val)}
-                        mode="time"
-                        value={data.timeEnd}
-                        label="Waktu Akhir"
-                        required
-                        error={error.timeEnd}
-                        errorText="Waktu akhir tidak valid"
-                        placeholder="--:--"
-                     />
+         <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            keyboardVerticalOffset={headerHeight}
+         >
+            <ScrollView>
+               <View style={[Styles.p15]}>
+                  <InputForm
+                     label="Nama Acara"
+                     type="default"
+                     placeholder="Nama Acara"
+                     required
+                     bg="white"
+                     value={data.title}
+                     onChange={(val) => validationForm("title", val)}
+                     error={error.title}
+                     errorText="Nama acara tidak boleh kosong"
+                  />
+                  <InputDate
+                     onChange={(val) => validationForm("dateStart", val)}
+                     mode="date"
+                     value={data.dateStart}
+                     label="Tanggal Acara"
+                     required
+                     error={error.dateStart}
+                     errorText="Tanggal acara tidak boleh kosong"
+                     placeholder="Pilih Tanggal Acara"
+                  />
+                  <View style={[Styles.rowSpaceBetween, Styles.mv10]}>
+                     <View style={[{ width: "48%" }]}>
+                        <InputDate
+                           onChange={(val) => validationForm("timeStart", val)}
+                           mode="time"
+                           value={data.timeStart}
+                           label="Waktu Awal"
+                           required
+                           error={error.timeStart}
+                           errorText="Waktu awal tidak valid"
+                           placeholder="--:--"
+                        />
+                     </View>
+                     <View style={[{ width: "48%" }]}>
+                        <InputDate
+                           onChange={(val) => validationForm("timeEnd", val)}
+                           mode="time"
+                           value={data.timeEnd}
+                           label="Waktu Akhir"
+                           required
+                           error={error.timeEnd}
+                           errorText="Waktu akhir tidak valid"
+                           placeholder="--:--"
+                        />
+                     </View>
                   </View>
+                  <InputForm
+                     label="Link Meet"
+                     type="default"
+                     placeholder="Link Meet"
+                     bg="white"
+                     value={data.linkMeet}
+                     onChange={(val) => validationForm("linkMeet", val)}
+                  />
+                  <SelectForm
+                     bg="white"
+                     label="Ulangi Acara"
+                     placeholder="Ulangi Acara"
+                     value={choose.label}
+                     required
+                     onPress={() => { setSelect(true) }}
+                  />
+                  <InputForm
+                     label="Jumlah Pengulangan"
+                     type="numeric"
+                     placeholder="Jumlah Pengulangan"
+                     required
+                     bg="white"
+                     value={String(data.repeatValue)}
+                     onChange={(val) => validationForm("repeatValue", val)}
+                     error={error.repeatValue}
+                     errorText="Jumlah pengulangan tidak valid"
+                     disable={choose.val == "once"}
+                  />
+                  <InputForm
+                     label="Deskripsi"
+                     type="default"
+                     placeholder="Deskripsi"
+                     bg="white"
+                     value={data.desc}
+                     onChange={(val) => validationForm("desc", val)}
+                     multiline
+                  />
                </View>
-               <InputForm
-                  label="Link Meet"
-                  type="default"
-                  placeholder="Link Meet"
-                  bg="white"
-                  value={data.linkMeet}
-                  onChange={(val) => validationForm("linkMeet", val)}
-               />
-               <SelectForm
-                  bg="white"
-                  label="Ulangi Acara"
-                  placeholder="Ulangi Acara"
-                  value={choose.label}
-                  required
-                  onPress={() => { setSelect(true) }}
-               />
-               <InputForm
-                  label="Jumlah Pengulangan"
-                  type="numeric"
-                  placeholder="Jumlah Pengulangan"
-                  required
-                  bg="white"
-                  value={String(data.repeatValue)}
-                  onChange={(val) => validationForm("repeatValue", val)}
-                  error={error.repeatValue}
-                  errorText="Jumlah pengulangan tidak valid"
-                  disable={choose.val == "once"}
-               />
-               <InputForm
-                  label="Deskripsi"
-                  type="default"
-                  placeholder="Deskripsi"
-                  bg="white"
-                  value={data.desc}
-                  onChange={(val) => validationForm("desc", val)}
-                  multiline
-               />
-            </View>
-         </ScrollView>
+            </ScrollView>
+         </KeyboardAvoidingView>
+
 
          <ModalSelect
             category={"type-event-repeat"}

app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx

@@ -165,12 +165,12 @@ export default function DetailEventCalendar() {
          >
             <View style={[Styles.p15]}>
                <View style={[Styles.wrapPaper, Styles.mb15]}>
-                  <View style={Styles.rowItemsCenter}>
+                  <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
                      <MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
-                           : <Text style={[Styles.textDefault]}>{data?.title}</Text>
+                           : <Text style={[Styles.textDefault, Styles.w90]}>{data?.title}</Text>
                      }
 
                   </View>
@@ -219,13 +219,13 @@ export default function DetailEventCalendar() {
                            <Text style={[Styles.textDefault]}>{data?.linkMeet ? data.linkMeet : '-'}</Text>
                      }
                   </View>
-                  <View style={[Styles.rowItemsCenter, Styles.mt10]}>
+                  <View style={[Styles.rowItemsCenter, Styles.mt10, {alignItems:'flex-start'}]}>
                      <MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} />
                      {
                         loading ?
                            <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
                            :
-                           <Text style={[Styles.textDefault]}>{data?.desc}</Text>
+                           <Text style={[Styles.textDefault, Styles.w90]}>{data?.desc}</Text>
                      }
                   </View>
                </View>

app/(application)/member/[id].tsx

@@ -95,7 +95,7 @@ export default function MemberDetail() {
                      :
                      <>
                         <ImageUser src={`${ConstEnv.url_storage}/files/${data?.img}`} size="lg" />
-                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{data?.name}</Text>
+                        <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10, { textAlign: 'center' }]}>{data?.name}</Text>
                         <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
                      </>
 

components/drawerBottom.tsx

@@ -44,7 +44,7 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
                >
                   <View style={[Styles.modalContentNew, { height: tinggiFix }]}>
                      <View style={[Styles.titleContainerNew]}>
-                        <Text style={Styles.textDefault}>{title}</Text>
+                        <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefault, Styles.w90]}>{title}</Text>
                         <Pressable onPress={() => setVisible(false)}>
                            <MaterialIcons name="close" color="black" size={22} />
                         </Pressable>
@@ -57,7 +57,7 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
                :
                <View style={[Styles.modalContentNew, { height: tinggiFix }]}>
                   <View style={[Styles.titleContainerNew]}>
-                     <Text style={Styles.textDefault}>{title}</Text>
+                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefault, Styles.w90]}>{title}</Text>
                      <Pressable onPress={() => setVisible(false)}>
                         <MaterialIcons name="close" color="black" size={22} />
                      </Pressable>

components/eventItem.tsx

@@ -1,5 +1,5 @@
-import Styles from "@/constants/Styles"
-import { Pressable, View } from "react-native"
+import Styles from "@/constants/Styles";
+import { Pressable, View } from "react-native";
 import Text from "./Text";
 
 type Props = {
@@ -17,8 +17,8 @@ export default function EventItem({ category, title, user, jamAwal, jamAkhir, on
          <View style={[Styles.dividerEvent, { backgroundColor: category == 'orange' ? '#FB804C' : '#535FCA' }]} />
          <View>
             <Text>{jamAwal} - {jamAkhir}</Text>
-            <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>{title}</Text>
-            <Text>Dibuat oleh : {user}</Text>
+            <Text numberOfLines={1} ellipsizeMode="tail" style={[Styles.textDefaultSemiBold, Styles.mv05]}>{title}</Text>
+            <Text numberOfLines={1} ellipsizeMode="tail">Dibuat oleh : {user}</Text>
          </View>
       </Pressable>
    )

components/itemSectionTanggalTugas.tsx

@@ -33,7 +33,7 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
 
          </View>
          <View style={[Styles.wrapPaper, Styles.mv10, Styles.p10]}>
-            <View style={[Styles.rowItemsCenter]}>
+            <View style={[Styles.rowItemsCenter, {alignItems:'flex-start'}]}>
                <MaterialCommunityIcons name="file-table-outline" size={25} color="black" style={[Styles.mr10]} />
                <View style={[Styles.w90]}>
                   <Text style={[Styles.textDefault]}>{title}</Text>

components/selectForm.tsx

@@ -34,9 +34,9 @@ export default function SelectForm({ label, value, placeholder, onPress, info, e
                <Feather name="chevron-right" size={20} color="grey" />
                {
                   value ? (
-                     <Text style={[Styles.cBlack]}>{value}</Text>
+                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.cBlack, Styles.w90]}>{value}</Text>
                   ) : (
-                     <Text style={[Styles.cGray]}>{placeholder}</Text>
+                     <Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.cGray, Styles.w90]}>{placeholder}</Text>
                   )
                }
             </View>