mobile-darmasaba/app/(application)/announcement/[id].tsx

import HeaderRightAnnouncementDetail from "@/components/announcement/headerAnnouncementDetail";
import ButtonBackHeader from "@/components/buttonBackHeader";
import Styles from "@/constants/Styles";
import { AntDesign, MaterialIcons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { SafeAreaView, ScrollView, SectionList, Text, View } from "react-native";

export default function DetailAnnouncement() {
   const { id } = useLocalSearchParams()
   return (
      <SafeAreaView>
         <Stack.Screen
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Pengumuman',
               headerTitleAlign: 'center',
               headerRight: () => <HeaderRightAnnouncementDetail id={id} />,
            }}
         />
         {/* <ScrollView> */}
         <View style={[Styles.p15]}>
            <View style={[Styles.wrapPaper]}>
               <View style={Styles.rowItemsCenter}>
                  <MaterialIcons name="campaign" size={30} color="black" style={Styles.mr05} />
                  <Text style={[Styles.textDefaultSemiBold]}>Libur Nyepi</Text>
               </View>
               <View style={[Styles.rowItemsCenter, Styles.mt10]}>
                  <AntDesign name="profile" size={30} color="black" style={Styles.mr05} />
                  <Text style={[Styles.textDefault]}>Pengumuman terkait libur nyepi</Text>
               </View>
            </View>
            <View style={[Styles.wrapPaper, Styles.mv15, { paddingTop: 0, paddingBottom: 10 }]}>
               <SectionList
                  sections={[
                     { title: 'Dinas', data: ['TU dan Umum', 'Kasi Pemerintahan', 'Pelaksana Kewilayahan'] },
                     {
                        title: 'Adat',
                        data: [
                           'PKK',
                           'Karang Taruna',
                        ],
                     },
                  ]}
                  renderItem={({ item }) => <Text style={Styles.textDefault}>{item}</Text>}
                  renderSectionHeader={({ section }) => (
                     <Text style={[Styles.textDefaultSemiBold, Styles.mt10, { borderBottomWidth: 1, borderBottomColor: 'gray' }]}>{section.title}</Text>
                  )}
                  keyExtractor={item => `basicListEntry-${item}`}
               />
            </View>
         </View>
         {/* </ScrollView> */}
      </SafeAreaView>
   )
}