React Native DropdownPicker doesn't expands in horizontal scrollview in iOS

Issue with DropdownPicker in iOS 

DropdownPicker along with different components in a horizontal scrollview doesn't expands in iOS. Dropdown height limits to the scrollview height and incase if a specific height is provided to dropdown picker then it overlay the items to that specific height and restricts the component functioning that is in the coverage of that specific height.

For e.g. If there is a dropdown picker provided with height 215 in horizontal scrollview and a FlatList below it then the click function on initial items of FlatList that is in coverage till 215 height stops working.

Issues Faced in iOS with DropdownPicker in Horizontal Scroll with code attached 

Case1: Horizontal Scrollview in react native takes static height and the dropdown picker doesn't gets expanded inside the view until some specific height is provided as such minheight:215

Case 2: If a specific height is provided to horizontal scrollview by default it takes that specific mentioned gap for say a height fixed with 215 but i don't need extra space beneath the horizontal scrollview

Case 3: If the horizontal scrollview with some specific height is provided a position:"absolute",there is no gap and the dropdown picker works well but the dropdown picker height blocks the flatlist beneath it i.e the space till 215 height the FlatList item doesn't gets clicked.

Have tried providing flexGrow:1 to contentContainerStyle but that doesn't seems to be working

Case1 code on snack

Case3 code on snack 

This overlay issue is only in ios and works fine in android

Solution

The above cases failed to achieve expanding of DropdownPicker in horizontal scrollview and found alternative solution to this:

import { Dropdown } from 'react-native-material-dropdown-v2'

<Dropdown

multiple={true}

data={getAllStates}

value={"All States"}

style={{

justifyContent: "center", alignSelf: "center", height: hp('3%'), minWidth: wp('30%'),

}}

containerStyle={{ alignSelf: "center", backgroundColor: "transparent", color: "transparent", }}

onChangeText={text => {

}}

/>

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope this helped you!!