Search code examples
react-nativedrop-down-menudimensions

react-native dropdown position

If I have a dropdown that is near the bottom of the screen, how do I prevent the dropdown from leaving the screen when it is opened? Currently if I have more than a few options, the dropdown container goes off the screen. How do I make it so it knows that it is near the bottom and will open upward or will move higher than the bottom of the screen?

Solution

  • give top and z-index to dropdown like .....

    <Dropdown
                    label='Program Type'
                    containerStyle={{width:140,zIndex:60,
                        top:20,}}
                    fontSize={16}
                    baseColor={"#0000ff"}
                    data={dropBoxData}
                    onChangeText={this.onChangeText}>
                </Dropdown>