hoaphantn7604 / react-native-element-dropdown

A react-native dropdown component easy to customize for both iOS and Android.
MIT License
861 stars 154 forks source link

Item padding in the Drop Down list #266

Open devic021 opened 2 months ago

devic021 commented 2 months ago

Hello,

Correct me if i'm wrong, but i can't see any param that can modify dropdown list items padding.

Is it possible to introduce param like dropDownListPadding or something similar that will be able to modify default item padding of 17 here:

item: {
    padding: 17,
    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
},

in the file /node_modules/react-native-element-dropdown/src/components/Dropdown/styles.ts

Cureently i'm forced to use patch for that (also added ellipsizeMode and numberOfLines props for long item text):

diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
index b5bb13c..9597dec 100644
--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
@@ -373,6 +373,8 @@ const DropdownComponent: <T>(
           <View style={styles.dropdown}>
             {renderLeftIcon?.(visible)}
             <Text
+              ellipsizeMode='tail'
+              numberOfLines={1}
               style={[
                 styles.textItem,
                 isSelected !== null ? selectedTextStyle : placeholderStyle,
@@ -431,6 +433,8 @@ const DropdownComponent: <T>(
               ) : (
                 <View style={styles.item}>
                   <Text
+                    ellipsizeMode='tail'
+                    numberOfLines={1}
                     style={StyleSheet.flatten([
                       styles.textItem,
                       itemTextStyle,
diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/styles.ts b/node_modules/react-native-element-dropdown/src/components/Dropdown/styles.ts
index 751c62a..e984e1f 100644
--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/styles.ts
+++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/styles.ts
@@ -39,7 +39,7 @@ export const styles = StyleSheet.create({
     writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
   },
   item: {
-    padding: 17,
+    padding: 8,
     flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
     justifyContent: 'space-between',
     alignItems: 'center',

Thank you in advance!!!

yannispgs commented 4 weeks ago

Hi ! I'd appreciate as well. Those list items are twice as big as my placeholder area, that's pretty awkward