dropdowncomponent use native

 import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import { useForm } from 'react-hook-form';

import DropdownIcons from '../../components/Dropdown';

type FormData = {

  dropdown: string | null; // Name of the field in the form

};

export default function EcardModule() {

  const { setValue, handleSubmit, 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); // Update the form state using setValue

  };

//   const onSubmit = (data: FormData) => {

//     console.log('Form Data:', data);

//   };

  const dropdownOptions = [

    { label: 'Option 1', value: 'option1',  icon: require('../../assets/images/icon.png') },

    { label: 'Option 2', value: 'option2',  icon: require('../../assets/images/icon.png') },

    { label: 'Option 3', value: 'option3',  icon: require('../../assets/images/icon.png') },

  ];

  return (

    <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 an option"

      />

      {/* <Text style={styles.button} onPress={handleSubmit(onSubmit)}>

        Submit

      </Text> */}

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  title: {

    fontSize: 18,

    marginBottom: 20,

  },

  button: {

    marginTop: 20,

    padding: 10,

    backgroundColor: 'blue',

    color: 'white',

    textAlign: 'center',

    borderRadius: 5,

  },

});