search

hossein-zare / react-native-dropdown-picker

A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.
https://hossein-zare.github.io/react-native-dropdown-picker-website/
MIT License
998 stars 297 forks source link

`maxHeight` not working #591

Open KrisLau opened 2 years ago

KrisLau commented 2 years ago

I have a dropdown picker with extendableBadgeContainer set to true and maxHeight={20} but the height isn't working at all.

Screenshot: image

KrisLau commented 2 years ago

Figured it out. I needed to remove the extendableBadgeContainer prop and just set the container and style props to flex: 1

KrisLau commented 2 years ago

Jk I thought that worked but when the number of badges is greater than the size of the container it overflows

g-otn commented 3 months ago

If you need to modify the style of components which you cannot override via props (e.g [...]Style or [...]Component), I believe you must create a custom theme using DropDownPicker.addTheme and set it via DropDownPicker.setTheme or the theme prop.

const baseTheme = (DropDownPicker.THEMES as any).LIGHT;

DropDownPicker.addTheme('mytheme', {
  ...baseTheme,
  default: {
    ...baseTheme.default,
    extendableBadgeContainer: {
      ...baseTheme.extendableBadgeContainer,
      maxHeight: 20
    }
  } satisfies { [key: string]: ViewStyle }
});

DropDownPicker.setTheme('mytheme');

Docs: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/themes