chore: update example

example/src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleSheet, View, ScrollView } from 'react-native';
 import DropdownExample1 from './dropdown/Dropdown1';
 import DropdownExample2 from './dropdown/Dropdown2';
+import Menu from './dropdown/Menu';
 import DropdownWithConfirm from './dropdown/DropdownWithConfirm';
 import CountrySelect1 from './dropdown/CountrySelect1';
 import CountrySelect2 from './dropdown/CountrySelect2';
@@ -13,6 +14,7 @@ const DropdownScreen = (_props: any) => {
   return (
     <View style={styles.container}>
       <ScrollView keyboardShouldPersistTaps="handled">
+        <Menu />
         <DropdownExample1 />
         <DropdownExample2 />
         <DropdownWithConfirm />

example/src/dropdown/Dropdown1.tsx

@@ -65,7 +65,6 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
     padding: 16,
-    marginTop: 30,
   },
   dropdown: {
     height: 50,

example/src/dropdown/Menu.tsx

@@ -0,0 +1,75 @@
+import React, { useRef, useState } from 'react';
+import { StyleSheet, Dimensions, View, Text } from 'react-native';
+import { Dropdown, IDropdownRef } from 'react-native-element-dropdown';
+
+const data = [
+  { label: 'Item 1', value: '1' },
+  { label: 'Item 2', value: '2' },
+  { label: 'Item 3', value: '3' },
+  { label: 'Item 4', value: '4' },
+  { label: 'Item 5', value: '5' },
+  { label: 'Item 6', value: '6' },
+  { label: 'Item 7', value: '7' },
+  { label: 'Item 8', value: '8' },
+];
+
+const { width } = Dimensions.get('window');
+
+const DropdownComponent = () => {
+  const [value, setValue] = useState<string>();
+  const ref = useRef<IDropdownRef>(null);
+
+  const renderIcon = () => {
+    return (
+      <View style={styles.iconStyle}>
+        <Text>Icon</Text>
+      </View>
+    );
+  };
+
+  return (
+    <Dropdown
+      ref={ref}
+      statusBarIsTranslucent={true}
+      style={styles.dropdown}
+      containerStyle={styles.containerStyle}
+      iconStyle={styles.iconStyle}
+      data={data}
+      maxHeight={300}
+      labelField="label"
+      valueField="value"
+      value={value}
+      onChange={(item) => {
+        setValue(item.value);
+      }}
+      onChangeText={() => {}} // Keep search keyword
+      renderRightIcon={renderIcon}
+    />
+  );
+};
+
+export default DropdownComponent;
+
+const styles = StyleSheet.create({
+  dropdown: {
+    margin: 16,
+    width: 50,
+    marginLeft: width - 80,
+    height: 50,
+    borderColor: 'gray',
+    borderWidth: 0.5,
+    borderRadius: 8,
+    paddingRight: 14,
+  },
+  containerStyle: {
+    width: 200,
+    marginLeft: -150,
+    marginTop: 5,
+  },
+  iconStyle: {
+    width: 50,
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});