Dropdown showing empty rows when there are only 2 options

[lucasharada]

I'm using this for gender selection, but the dropdown is showing 4 rows, 2 of them being empty with no press event handler. How can I remove this empty rows?

[apurvaaggarwal]

this happens only when you have set static height , change the height of your modaldropdown u ll come to know your mistake. If u still don't get that ...ping me I ll send u the code

[lucasharada]

@apurvaaggarwal This is my code:

<ModalDropdown
  style={{ 
    backgroundColor: 'rgba(255, 255, 255, 1)',
    height: 40,
    paddingLeft: 10,
    paddingRight: 10,
    borderRadius: 4,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }}
  defaultValue='Gender'
  options={['Female', 'Male']}
  onSelect={(index) => this.onGenderPicked(index)}
  textStyle={{ fontSize: 14, color: '#4C606B' }}
  dropdownTextStyle={{ fontSize: 14 }}
/>

I tried removing the height: 40 line, but only the container changed the size. The dropdown still shows empty spaces when pressed.

[Dhanraj-bidchat]

@lucasharada did u found any solution for this ? I have not added height also.

this is my code snippet

<ModalDropdown 
                        defaultValue={eventsArray[0]} 
                        options={eventsArray}
                        showsVerticalScrollIndicator
                        style={{ borderColor: Colors.COLOR_LIGHT_GREY, borderWidth: 0.5, flex: 1, }} 
                        textStyle={{ paddingVertical: 10, fontSize: UIConst.FONT_SIZE.SM, paddingLeft: 10 }}
                        dropdownStyle={{ width: '95%', backgroundColor: 'pink' }} 
                        dropdownTextStyle={{ }}
                        onSelect={(index, value) => {   
                            props.onEventChange({ eventType: value });
                    }} 

[Dhanraj-bidchat]

@lucasharada Anyways this is how I handled the situation for now. if you know one item height and knows length of array , then

<ModalDropdown 
                        defaultValue={eventsArray[0]} 
                        options={eventsArray}
                        showsVerticalScrollIndicator
                        style={{ borderColor: Colors.COLOR_LIGHT_GREY, borderWidth: 0.5, flex: 1, }} 
                        textStyle={{ paddingVertical: 10, fontSize: UIConst.FONT_SIZE.SM, paddingLeft: 10 }}
                        dropdownStyle={{ width: '95%', backgroundColor: 'pink', height: 35 * eventsArray.length }}
                        dropdownTextStyle={{ }}
                        onSelect={(index, value) => {   
                            props.onEventChange({ eventType: value });
                    }} 
                    />

In library, default height is set with absolute position like this, height: (33 + StyleSheet.hairlineWidth) * 5, you can override it with your height

[sohobloo]

You can use adjustFrame to change the height dynamically

[sohobloo]

You can try this(https://github.com/sohobloo/react-native-modal-dropdown/issues/81#issuecomment-343800342) first . But it will take risk of mistake dropdown position in some cases like the trigger button is in the bottom of the screen.