Question 34815 in React native Question posted in
The official React Native documentation can be found here.

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

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)

Tags:

6

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

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

    enter image description here

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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,
},
    Login or Signup to reply.
  5. 0

    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

    Login or Signup to reply.
  6. 0

    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               
                }} 
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search