Is there a way to decrease the height of dropdown picker (react-native-dropdown-picker module)

Question

Dropdown Picker Screenshot

There is no problem in increasing its height but I want to style the container to decrease its height. I have tried changing all the props with style properties but I still can't decrease its height. This is my code below.

import {
  ThemeProvider,
  createTheme,
  Header,
  Text,
  SocialIcon,
  Button,
  Divider,
  Overlay,
  SearchBar,
  ListItem,
  Avatar,
} from '@rneui/themed';
import DropDownPicker from 'react-native-dropdown-picker';

// code here
<View>
  <View>
    <Text
      style={{
        fontSize: 14,
        color: COLORS.gray_header2,
      }}>
      Label 2:
    </Text>
    <DropDownPicker
      open={open}
      value={value}
      items={items}
      setOpen={setOpen}
      setValue={setValue}
      setItems={setItems}
      style={styles.dropdown_container}
      textStyle={styles.dropdown_itemstyle}
    />
  </View>
</View>

//code here

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },

  dropdown_container: {
    width: '100%',
    backgroundColor: COLORS.dirty_white,
    borderRadius: 6,
    borderColor: COLORS.gray_filter,
  },
  
  dropdown_itemstyle: {
    color: COLORS.gray_header,
    borderColor: COLORS.gray_filter,
    marginLeft: 10,
  },
});

Dropdown Picker Screenshot with react-devtools

Upon using react-devtools module, I have debugged where the height could be changed. Is there any way to decrease its height? (apparently minHeight in devtools)

Edit Height of the container itself (not the dropdown menu when clicked)

Answer 1

You have to set minHeight and paddingHorizontal in your dropdown_container. In this way you will be able to decrease the height of your dropdown.

dropdown_container: {
  width: '100%',
  backgroundColor: COLORS.dirty_white,
  borderRadius: 6,
  borderColor: COLORS.gray_filter,
  paddingHorizontal: 5,
  minHeight: 30,
},

Answer 2

If anyone is having the issue of size, maxHeight worked for me. See example below.

<DropDownPicker
                style={{
                  borderWidth: 1, 
                  borderColor: '#d5d5d9',  
                  backgroundColor: '#eee',
                  borderRadius: 40, 
                  paddingHorizontal: 5,
                  minHeight: 30,   // <---- here               
                }} 
/>

Answer 3

Hi there try adding maxHeight as follow?

maxHeight={200}

Check out the docs from their website: https://hossein-zare.github.io/react-native-dropdown-picker-website/

Answer 4

As Glen suggested, maxHeight is your answer.

Answer 5

You can check the react-native-dropdown-picker source code in your node_modules folder, in src/themes/dark/index.js or src/themes/light/index.js. The author did a minHeight:50 for the container height in the stylesheet class which name is style. You can pass your own minHeight through DropDownPicker style property to override it.

I think same as the list Item, just find the correct style property and override it.

Answer 6

Min height is ignored because it looks like it is hardcoded in theme files. A good exmaple is this MR - https://github.com/hossein-zare/react-native-dropdown-picker/pull/555 So I plan to create custom theme like it is described in docs https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/themes