fix: type mismatch in example

Author: imdevan

examples/App.tsx

@@ -14,25 +14,23 @@ const EXAMPLES: Array<ExampleProps> = [
   {
     title: 'Multiple Select',
     description: 'Multiple select example',
-    multiple: true,
+    dropdownProps: { multiple: true },
   },
   {
     title: 'Multiple Select Badge Mode',
     description: 'Multiple select example - with badges',
-    multiple: true,
-    dropdownProps: { mode: 'BADGE', showBadgeDot: false },
+    dropdownProps: { multiple: true, mode: 'BADGE', showBadgeDot: false },
   },
   {
     title: 'Multiple Select Badge Mode with Dots',
     description: 'Multiple select example - with badges and dots',
-    multiple: true,
-    dropdownProps: { mode: 'BADGE', showBadgeDot: true },
+    dropdownProps: { multiple: true, mode: 'BADGE', showBadgeDot: true },
   },
   {
     title: 'Customized Multiple Select Badge Mode',
     description: 'Multiple select example - with badges',
-    multiple: true,
     dropdownProps: {
+      multiple: true,
       mode: 'BADGE',
       showBadgeDot: false,
       badgeDotStyle: {},
@@ -74,14 +72,14 @@ const EXAMPLES: Array<ExampleProps> = [
   {
     title: 'Multiple Search Example',
     description: 'This is the default dropdown picker - with search',
-    multiple: true,
-    dropdownProps: { searchable: true },
+    
+    dropdownProps: { multiple: true, searchable: true },
   },
   {
     title: 'Multiple Search Clear on Select Example',
     description: 'This is the default dropdown picker - with search',
-    multiple: true,
     dropdownProps: {
+      multiple: true,
       searchable: true,
       clearSearchFieldOnSelect: true,
       mode: 'BADGE',
@@ -90,8 +88,7 @@ const EXAMPLES: Array<ExampleProps> = [
   {
     title: 'Modal Example',
     description: 'This is the default dropdown picker - with search',
-    multiple: true,
-    dropdownProps: { listMode: 'MODAL' },
+    dropdownProps: { multiple: true, listMode: 'MODAL' },
   },
 ];
 

examples/example-src-files/example.tsx

@@ -1,21 +1,32 @@
-import React, { JSX, useState } from 'react';
+import React, { JSX, useMemo, useState } from 'react';
 import { Button, StyleSheet, Text, useColorScheme, View } from 'react-native';
 import DropDownPicker, {
-  DropDownPickerMultipleProps,
-  DropDownPickerProps,
-  DropDownPickerSingleProps,
+  DropDownPickerIsMultipleProps,
+  DropDownPickerIsSingleProps,
   ItemType,
+  ValueType,
 } from 'react-native-dropdown-picker';
 
+// Omit these types from the example props
+type CommonOmitKeys = 'setValue' | 'value' | 'open' | 'items' | 'setOpen';
+
+type SingleDropdownProps<T extends ValueType> = Omit<
+  Partial<DropDownPickerIsSingleProps<T>>,
+  CommonOmitKeys
+>;
+
+type MultipleDropdownProps<T extends ValueType> = Omit<
+  Partial<DropDownPickerIsMultipleProps<T>>,
+  CommonOmitKeys
+>;
+
 export interface ExampleProps {
-  multiple?: boolean;
   title: string;
   description?: string;
   placeholder?: string;
   multipleText?: string;
-  // For the sake of keeping the examples simple for now
-  items?: Array<ItemType<string>>;
-  dropdownProps?: Partial<DropDownPickerProps<string>>;
+  items?: Array<ItemType<ValueType>>;
+  dropdownProps?: MultipleDropdownProps<ValueType> | SingleDropdownProps<ValueType>;
 }
 
 const DEFAULT_ITEMS = [
@@ -64,7 +75,6 @@ const styles = StyleSheet.create({
  * @param props.multiple
  */
 export default function DropDownPickerExample({
-  multiple = false,
   title,
   description,
   dropdownProps,
@@ -73,26 +83,21 @@ export default function DropDownPickerExample({
   items = DEFAULT_ITEMS,
 }: ExampleProps): JSX.Element {
   const [open, setOpen] = useState<boolean>(false);
-  const [singleValue, setSingleValue] = useState<string | null>(null);
-  const [multiValue, setMultiValue] = useState<Array<string> | null>(null);
+  const [singleValue, setSingleValue] = useState<ValueType | null>(null);
+  const [multiValue, setMultiValue] = useState<Array<ValueType> | null>(null);
   const colorScheme = useColorScheme();
   const color = colorScheme === 'dark' ? '#fff' : '#222';
   const theme = colorScheme === 'dark' ? 'DARK' : 'LIGHT';
 
-  const [_items, setItems] = useState<Array<ItemType<string>>>(items);
-
-  return (
-    // eslint-disable-next-line react-native/no-inline-styles
-    <View style={{ ...styles.exampleContainer, zIndex: open ? 10 : 1 }}>
-      <View>
-        <Text style={{ ...styles.title, color }}>{title}</Text>
-        {description && (
-          <Text style={{ ...styles.description, color }}>{description}</Text>
-        )}
-      </View>
+  const [_items, setItems] = useState<Array<ItemType<ValueType>>>(items);
+  const isMultiple = dropdownProps?.multiple;
 
-      {multiple ? (
-        <DropDownPicker<string>
+  const RenderDropDown = () => {
+    if(isMultiple) {
+      const {..._dropdownProps} = dropdownProps;
+      delete _dropdownProps.multiple // remove multiple prop to hard set as true 
+      return (
+        <DropDownPicker<ValueType>
           open={open}
           value={multiValue}
           items={_items}
@@ -103,13 +108,12 @@ export default function DropDownPickerExample({
           placeholder={placeholder}
           multipleText={multipleText}
           multiple
-          {...(dropdownProps as Omit<
-            DropDownPickerMultipleProps<string>,
-            'setValue' | 'value' | 'multiple'
-          >)}
+          {..._dropdownProps as MultipleDropdownProps<ValueType>}
         />
-      ) : (
-        <DropDownPicker<string>
+      )
+    } else {
+      return (
+        <DropDownPicker<ValueType>
           open={open}
           value={singleValue}
           items={_items}
@@ -119,23 +123,34 @@ export default function DropDownPickerExample({
           theme={theme}
           placeholder={placeholder}
           multiple={false}
-          {...(dropdownProps as Omit<
-            DropDownPickerSingleProps<string>,
-            'setValue' | 'value'
-          >)}
+          {...dropdownProps as SingleDropdownProps<ValueType>}
         />
-      )}
+      )
+    }
+  }
+
+  return (
+    // eslint-disable-next-line react-native/no-inline-styles
+    <View style={{ ...styles.exampleContainer, zIndex: open ? 10 : 1 }}>
+      <View>
+        <Text style={{ ...styles.title, color }}>{title}</Text>
+        {description && (
+          <Text style={{ ...styles.description, color }}>{description}</Text>
+        )}
+      </View>
+
+      {RenderDropDown()}
 
       <View style={{ ...styles.body }}>
         <Text style={{ ...styles.description, color }}>
-          {multiple ? 'Fruits currently are: ' : 'Fruit currently is: '}
-          {multiple ? JSON.stringify(multiValue) : JSON.stringify(singleValue)}
+          {isMultiple ? 'Fruits currently are: ' : 'Fruit currently is: '}
+          {isMultiple ? JSON.stringify(multiValue) : JSON.stringify(singleValue)}
         </Text>
 
         <Button
-          title={multiple ? 'Clear fruits' : 'Clear fruit'}
+          title={isMultiple ? 'Clear fruits' : 'Clear fruit'}
           onPress={(): void => {
-            if (multiple) setMultiValue(null);
+            if (isMultiple) setMultiValue(null);
             else setSingleValue(null);
           }}
         />