Add Typing for list items and update index.d.ts

Author: HerrSpeck

index.d.ts

@@ -1,62 +1,72 @@
-import {ViewStyle, TextStyle} from 'react-native';
-
+import React from "react";
+import { ViewStyle, TextStyle } from "react-native";
 
 export interface CountryCodeProps {
-    /**
-    * Selected Country Dial Code
-    */
-    selected: string,
-     /**
-    * Function to set the country
-    */
-     setSelected: React.Dispatch<React.SetStateAction<undefined>>,
-      /**
-    * Function to set the country
-    */
-      setCountryDetails?: React.Dispatch<React.SetStateAction<undefined>>,
-     /**
-    * State variable for storing the phone number
-    */
-     phone?: string,
-     /**
-    * Function to set the phone number state variable
-    */
-     setPhone?: React.Dispatch<React.SetStateAction<undefined>>,
-     /**
-    * Style the Country Code Container 
-    */
-     countryCodeContainerStyles?: ViewStyle,
-     /**
-    * Style the text inside Country Code 
-    */
-     countryCodeTextStyles?: TextStyle,
-     /**
-    * Phone Text Input Styles
-    */
-     phoneStyles?: ViewStyle,
-    /**
-    * URL for the search Icon
-    */
-    searchIcon?: string,
-    /**
-    * URL for the close Icon
-    */
-    closeIcon?: string,
-    /**
-    * Search Input Container Styles
-    */
-    searchStyles?: ViewStyle,
-    /**
-    * Search Input Text Styles
-    */
-    searchTextStyles?: TextStyle,
-     /**
-    * Search Dropdown Container Styles
-    */
-     dropdownStyles?: ViewStyle,
-     /**
-    * Search Dropdown Text Styles
-    */
-     dropdownTextStyles?: TextStyle
+  /**
+   * Selected Country Dial Code
+   */
+  selected: string;
+  /**
+   * Function to set the country
+   */
+  setSelected: React.Dispatch<React.SetStateAction<undefined>>;
+  /**
+   * Function to set the country
+   */
+  setCountryDetails: React.Dispatch<React.SetStateAction<undefined>>;
+  /**
+   * State variable for storing the phone number
+   */
+  phone?: string;
+  /**
+   * Function to set the phone number state variable
+   */
+  setPhone?: React.Dispatch<React.SetStateAction<undefined>>;
+  /**
+   * Style the Country Code Container
+   */
+  countryCodeContainerStyles?: ViewStyle;
+  /**
+   * Style the text inside Country Code
+   */
+  countryCodeTextStyles?: TextStyle;
+  /**
+   * Phone Text Input Styles
+   */
+  phoneStyles?: ViewStyle;
+  /**
+   * URL for the search Icon
+   */
+  searchIcon?: string;
+  /**
+   * URL for the close Icon
+   */
+  closeIcon?: string;
+  /**
+   * Search Input Container Styles
+   */
+  searchStyles?: ViewStyle;
+  /**
+   * Search Input Text Styles
+   */
+  searchTextStyles?: TextStyle;
+  /**
+   * Search Dropdown Container Styles
+   */
+  dropdownStyles?: ViewStyle;
+  /**
+   * Search Dropdown Text Styles
+   */
+  dropdownTextStyles?: TextStyle;
+  /**
+   * Search Dropdown List Item Styles
+   */
+  dropdownTextContainerStyles?: ViewStyle;
+}
 
-}
+export interface CountryCodeDropdownItemProps {
+  name: string;
+  dial_code: string;
+  code: string;
+  flag: string;
+}

index.tsx

@@ -13,6 +13,8 @@ import {
 } from "react-native";
 import { countries, _getFlag } from "./_inc/_lib/enhanced";
 
+const Countries: CountryCodeDropdownItemProps[] = countries;
+
 interface CountryCodeProps {
   /**
    * Selected Country Dial Code
@@ -21,19 +23,21 @@ interface CountryCodeProps {
   /**
    * Function to set the country
    */
-  setSelected: React.Dispatch<React.SetStateAction<undefined>>;
+  setSelected: React.Dispatch<React.SetStateAction<string>>;
   /**
    * Function to set the country
    */
-  setCountryDetails: React.Dispatch<React.SetStateAction<undefined>>;
+  setCountryDetails: React.Dispatch<
+    React.SetStateAction<CountryCodeDropdownItemProps>
+  >;
   /**
    * State variable for storing the phone number
    */
   phone?: string;
   /**
    * Function to set the phone number state variable
    */
-  setPhone?: React.Dispatch<React.SetStateAction<undefined>>;
+  setPhone?: React.Dispatch<React.SetStateAction<string | undefined>>;
   /**
    * Style the Country Code Container
    */
@@ -72,10 +76,18 @@ interface CountryCodeProps {
    */
   dropdownTextStyles?: TextStyle;
   /**
-   * Search Dropdown Text Container Styles
+   * Search Dropdown List Item Styles
    */
   dropdownTextContainerStyles?: ViewStyle;
 }
+
+interface CountryCodeDropdownItemProps {
+  name: string;
+  dial_code: string;
+  code: string;
+  flag: string;
+}
+
 const CountryCodeDropdownPicker: React.FC<CountryCodeProps> = ({
   selected,
   setSelected,
@@ -95,7 +107,7 @@ const CountryCodeDropdownPicker: React.FC<CountryCodeProps> = ({
 }) => {
   const [_selected, _setSelected] = React.useState(false);
   const [_search, _setSearch] = React.useState("");
-  const [_countries, _setCountries] = React.useState(countries);
+  const [_countries, _setCountries] = React.useState(Countries);
 
   const slideAnim = React.useRef(new Animated.Value(0)).current;
 
@@ -121,9 +133,9 @@ const CountryCodeDropdownPicker: React.FC<CountryCodeProps> = ({
     }).start(() => _setSelected(false));
   };
 
-  function _searchCountry(country) {
+  function _searchCountry(country: string) {
     _setSearch(country);
-    let c = countries.filter((item) => {
+    let c = Countries.filter((item) => {
       return item.name.includes(country);
     });
     _setCountries(c);
@@ -136,7 +148,7 @@ const CountryCodeDropdownPicker: React.FC<CountryCodeProps> = ({
           <TouchableOpacity
             style={{ flexDirection: "row" }}
             onPress={() => {
-              _setCountries(countries);
+              _setCountries(Countries);
               slideDown();
             }}
           >
@@ -208,7 +220,11 @@ const CountryCodeDropdownPicker: React.FC<CountryCodeProps> = ({
     }
   };
 
-  const renderCountryItem = ({ item }) => {
+  const renderCountryItem = ({
+    item,
+  }: {
+    item: CountryCodeDropdownItemProps;
+  }) => {
     return (
       <TouchableOpacity
         style={[styles.countryContainer, dropdownTextContainerStyles]}