Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)

like image 846
user19923908 Avatar asked Sep 05 '25 03:09

user19923908


2 Answers

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

<DropDownPicker
                style={{
                  borderWidth: 1, 
                  borderColor: '#d5d5d9',  
                  backgroundColor: '#eee',
                  borderRadius: 40, 
                  paddingHorizontal: 5,
                  minHeight: 30,   // <---- here               
                }} 
/>                     
like image 142
Sir'Damilare Avatar answered Sep 07 '25 20:09

Sir'Damilare


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

enter image description here

like image 33
Shahjahan Avatar answered Sep 07 '25 20:09

Shahjahan