SurveyApp/src/component/homescreen.tsx

import { 
    StyleSheet,
    SafeAreaView,
    ScrollView,
    TouchableOpacity,
    View,
    Image,
    Text,
    StatusBar,
    Pressable,
    Alert
 } 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 HomeScreen({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,marginTop:50}}>
                    <View key={"Description"}>
                        <Text style={{fontSize:26,color:"#000000",textAlign:'left',fontWeight:'bold'}}>
                            Explore, Collect, and Record!
                        </Text>
                        <Text style={{fontSize:18,color:"#535252",textAlign:'left'}}>
                            Your field insights matter. 
                        </Text>
                        <Text style={{fontSize:18,color:"#535252",textAlign:'left'}}>
                            Capture data with ease and precision.
                        </Text>
                    </View>
                    <View key={"Image"}>
                        <Image source={require("../../assets/img/Survey_illustration.png")} style={{width:'100%',height:400}} resizeMode='contain' />
                    </View>
                    <View key={"Button"} style={{alignSelf:'center'}}>
                        <TouchableOpacity onPress={()=>{
                            navigation.navigate('Survey', { screen: 'Survey', })
                        }}>
                            <View style={{backgroundColor:'#0386D0',width:150,height:40,borderRadius:20,alignItems:'center',justifyContent:'center'}}>

                            <Text style={{color:'#F5F5F5',fontSize:16,fontWeight:'bold'}}>Start Survey</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    
                </View>
            </View>
            <View key={"background2"} style={{backgroundColor:'#FFFFFF',width:'100%',height:'7%',borderTopColor:'#A6A6A6B2',borderTopWidth:2, flexDirection:'row',justifyContent:'space-around',alignItems:'center'}}>
                <Pressable>
                    <Image
                        source={require('../../assets/icon/home.png')}
                        style={[styles.buttonImageIconStyle,{tintColor:iconActive}]}
                    />
                </Pressable>
                <Pressable onPress={()=>{
                    navigation.navigate('Survey', { screen: 'Survey', })
                }}>
                    <Image
                        source={require('../../assets/icon/Survey_Icon.png')}
                        style={styles.buttonImageIconStyle}
                    />
                </Pressable>
                <Pressable onPress={()=>{
                    navigation.navigate('Setting', { screen: 'Setting', })
                }}>
                    <Image
                        source={require('../../assets/icon/Setting.png')}
                        style={styles.buttonImageIconStyle}
                    />
                </Pressable>
            </View>
            {/* Menus */}
            
        </SafeAreaView>
    )
 }

 export default HomeScreen;

 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',
    },
  });