SurveyApp/src/component/surveyPJU.tsx

import { 
    StyleSheet,
    SafeAreaView,
    ScrollView,
    TouchableOpacity,
    View,
    Image,
    Text,
    StatusBar,
    Pressable
 } from "react-native";

import MapView from 'react-native-maps';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer';
import { useState } from "react";

const img_1 = require('../../assets/img/Geonet_polos.png')
 function SurveyPJU({navigation}:any): React.JSX.Element {
    const [sendItem, setSendItem] = useState(0);
    const [iconActive,setIconActive] = useState('#0386D0')
    const onPressSent = () => {
        navigation.navigate('Sent', { screen: 'Sent', 
        //   onGoBack: (data:number) => {
        //     // Callback function to handle data from ScreenB
        //     setSendItem(data);
        //   },
        })
    }
    const onPressDraft = () => {
        navigation.navigate('Draft', { screen: 'Draft', 
        //   onGoBack: (data:number) => {
        //     // Callback function to handle data from ScreenB
        //     setDraftItem(data);
        //   },
        })
    }
    const onPressInbox = () => {
        navigation.navigate('Inbox', { screen: 'Inbox', 
          
        })
    }

    return(
        <SafeAreaView style={{ flex: 1, backgroundColor: '#f2f2f2' }}>
            <StatusBar backgroundColor="#34A6F8" barStyle={'light-content'} />
            <View key={"mainBackground"} style={{backgroundColor:'#34A6F8',width:'100%',height:'93%'}} />
            <View key={"background"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'100%',position:'absolute',borderTopRightRadius:50,borderTopLeftRadius:35,marginTop:10}}>
                <View key={"Content"} style={{padding:30}}>
                    <View key={"Image"}>
                        <Image source={require("../../assets/img/Survey_PJU.png")} style={{width:'100%',height:200}} resizeMode='contain' />
                    </View>
                </View>
                <View style={{flexDirection:'row',justifyContent:'space-around',marginTop:20}}>
                    {/* <Text>aaa</Text> */}
                    <Pressable onPress={()=> {
                        navigation.navigate('PJU Map Collect', { screen: 'PJU Map Collect'})
                    }}>
                        <Image source={require("../../assets/icon/Add_Icon.png")} style={{width:100}} resizeMode='contain' />
                        <Text style={{textAlign:'center',fontSize:20,color:'black',fontWeight:'400'}}>
                            Add Data
                        </Text>
                    </Pressable>
                    <Pressable onPress={()=> {
                        navigation.navigate('Sent Penerangan Jalan Umum', { screen: 'Sent'})
                    }}>
                        <Image source={require("../../assets/icon/Sent_Icon.png")} style={{}} resizeMode='contain' />
                        <Text style={{textAlign:'center',fontSize:20,color:'black',fontWeight:'400'}}>
                            Sent
                        </Text>
                    </Pressable>
                </View>
                <View style={{flexDirection:'row',justifyContent:'space-around',marginTop:50}}>
                    {/* <Text>aaa</Text> */}
                    <Pressable onPress={()=> {
                        navigation.navigate('Inbox Penerangan Jalan Umum', { screen: 'Inbox'})
                    }}>
                        <Image source={require("../../assets/icon/Inbox_Icon.png")} style={{width:100}} resizeMode='contain' />
                        <Text style={{textAlign:'center',fontSize:20,color:'black',fontWeight:'400'}}>
                            Inbox
                        </Text>
                    </Pressable>
                    <Pressable>
                        <Image source={require("../../assets/icon/Draft_Icon.png")} style={{}} resizeMode='contain' />
                        <Text style={{textAlign:'center',fontSize:20,color:'black',fontWeight:'400'}}>
                            Draft
                        </Text>
                    </Pressable>
                </View>
            </View>
            <View key={"background2"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'7%',borderTopColor:'#A6A6A6B2',borderTopWidth:2, flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}>
                <Pressable onPress={()=>{
                    navigation.navigate('Home', { screen: 'Home', })
                }}>
                    <Image
                        source={require('../../assets/icon/home.png')}
                        style={[styles.buttonImageIconStyle]}
                    />
                </Pressable>
                <Pressable onPress={()=>{
                    navigation.navigate('Survey', { screen: 'Survey', })
                }}>
                    <Image
                        source={require('../../assets/icon/Survey_Icon.png')}
                        style={[styles.buttonImageIconStyle]}
                    />
                </Pressable>
                <Pressable>
                    <Image
                        source={require('../../assets/icon/Profile_Icon.png')}
                        style={styles.buttonImageIconStyle}
                    />
                </Pressable>
            </View>
            {/* Menus */}
            
        </SafeAreaView>
    )
 }

 export default SurveyPJU;

 const styles = StyleSheet.create({
    menus: {
        backgroundColor: '#E7E7E7',
        flexDirection: 'row',
        justifyContent: 'space-around',
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 10,
        paddingRight: 10
    },
    menu_item: {
        justifyContent:'center',
        // alignContent:'center',
        // alignItems:'center'
    },
    buttonImageIconStyle: {
        padding: 10,
        margin: 5,
        height: 25,
        width: 25,
        resizeMode: 'stretch',
    },
    content: {
      paddingTop: 8,
      paddingHorizontal: 16,
    },
    /** Header */
    header: {
      paddingHorizontal: 16,
      marginBottom: 12,
    },
    headerTop: {
      marginHorizontal: -6,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    headerAction: {
      width: 40,
      height: 40,
      alignItems: 'center',
      justifyContent: 'center',
    },
    headerTitle: {
      fontSize: 32,
      fontWeight: '700',
      color: '#1d1d1d',
    },
    /** Card */
    card: {
        flexDirection:'row',
        height: 100,
        position: 'relative',
        borderRadius: 8,
        marginBottom: 16,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.2,
        shadowRadius: 1.41,
        elevation: 2,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
        borderBottomRightRadius:8,
        borderBottomLeftRadius:8
    },
    cardLikeWrapper: {
      position: 'absolute',
      zIndex: 1,
      top: 12,
      right: 12,
    },
    cardLike: {
      width: 40,
      height: 40,
      borderRadius: 9999,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    cardTop: {
      borderTopLeftRadius: 8,
      borderTopRightRadius: 8,
    },
    cardImg: {
      width: '100%',
      height: '100%',
      borderTopLeftRadius: 8,
      borderTopRightRadius: 8,
    },
    cardBody: {
      padding: 12,
    },
    cardHeader: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    cardTitle: {
      fontSize: 18,
      fontWeight: '500',
      color: '#232425',
      marginRight: 'auto',
    },
    cardStars: {
      marginLeft: 2,
      marginRight: 4,
      fontSize: 15,
      fontWeight: '500',
      color: '#232425',
    },
    cardDates: {
      marginTop: 4,
      fontSize: 16,
      color: '#595a63',
    },
    cardPrice: {
      marginTop: 6,
      fontSize: 16,
      color: '#232425',
    },
  });