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

Viewed 82

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)

2 Answers

As Glen suggested, maxHeight is your answer. enter image description here

enter image description here

Related