submitipd

 import React from 'react' import { View, Text, TouchableOpacity, StyleSheet,Image } from 'react-native'; import { router } from 'expo-router'; import { Ionicons } from '@expo/vector-icons'; import DropdownIcons from '../../components/dropdown'; import { useForm } from 'react-hook-form'; import new_ecard_tem from '../../../vidal-app/assets/images/ipd_images/Group 40332.png'; type FormData = { dropdown: string | null; }; export default function index() { const backHandler = () => { router.navigate("/(drawer)"); }; const { setValue, watch } = useForm<FormData>({ defaultValues: { dropdown: null, // Default value for the dropdown }, }); // Watching the dropdown value const selectedValue = watch('dropdown'); const handleValueChange = (value: string | null) => { console.log('Selected Value:', value); setValue('dropdown', value); }; /*default values:--*/ const dropdownOptions = [ { label: 'SF/VIDAL 2022', value: 'SF/VIDAL 2022', icon: require('../../assets/images/ecard_images/Group_Icon.png') }, { label: 'SF/VIDAL 2023', value: 'SF/VIDAL 2023', icon: require('../../assets/images/ecard_images/Group_Icon.png') }, { label: 'SF/VIDAL 2024', value: 'SF/VIDAL 2024', icon: require('../../assets/images/ecard_images/Group_Icon.png') }, ]; /*end of default values*/ return ( <> <View style={styles.headercontainer}> <TouchableOpacity onPress={backHandler}> <Ionicons name="arrow-back" size={25} /> </TouchableOpacity> <View style={styles.textContainer}> <Text style={styles.title}>Reimbursement</Text> </View> </View> <View style={styles.container}> {/* <Text style={styles.title}>Selected Value: {selectedValue || 'None'}</Text> */} {/* Dropdown with onChange handler */} <DropdownIcons options={dropdownOptions} selectedValue={selectedValue} onValueChange={handleValueChange} // Directly updating the form state placeholder="Choose Policy" /> </View> <View style={styles.containerbutton}> <TouchableOpacity style={styles.button}> <Text style={styles.buttonText}>Intimation</Text> </TouchableOpacity> <TouchableOpacity style={styles.button1}> <Text style={styles.buttonText1}>Ongoing</Text> </TouchableOpacity> <TouchableOpacity style={styles.button1}> <Text style={styles.buttonText1}>History</Text> </TouchableOpacity> </View> <View style={styles.container3}> <Text style={styles.message}>No Reimburse Intimations found</Text> <Image source={new_ecard_tem} style={styles.image} resizeMode="contain" /> <TouchableOpacity style={styles.button} onPress={() => console.log('Submit a Claim pressed')}> <Text style={styles.buttonText}>Submit a Claim</Text> </TouchableOpacity> </View> </> ) } const styles = StyleSheet.create({ headercontainer: { flexDirection: 'row', padding: 20, alignItems: 'flex-end', justifyContent: 'space-between' }, container: { justifyContent: 'center', alignItems: 'center', }, textContainer: { width: '60%', textAlign: 'center', }, title: { fontSize: 18, fontWeight: '700', lineHeight: 28, }, containerbutton: { flexDirection: 'row', justifyContent: 'space-between', padding: 10, }, button: { // backgroundColor: '#4CAF50', // Green background for selected item // backgroundColor:"#9DB0B0", backgroundColor:'#72BF44', paddingVertical: 10, paddingHorizontal: 20, borderRadius: 5, flex: 1, // Ensure the buttons take equal space alignItems: 'center', justifyContent: 'center', }, button1: { // backgroundColor: '#4CAF50', // Green background for selected item backgroundColor:"#D1E0DC", paddingVertical: 10, paddingHorizontal: 20, borderRadius: 5, flex: 1, // Ensure the buttons take equal space alignItems: 'center', justifyContent: 'center', }, buttonText: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, buttonText1:{ color:"9DB0B0", fontSize:16, fontWeight:'bold' }, container3: { backgroundColor: '#f0f8ff', // Background color similar to image padding: 20, borderRadius: 10, elevation: 3, // Adds shadow effect (for Android) height:300, }, message: { fontSize: 18, color: '#333', marginBottom: 30, // Space between text and button textAlign: 'center', }, image: { justifyContent: 'center', alignItems: 'center', width: 150, height: 150, marginBottom: 20, // Space between image and text }, });