Expanded component in react native on android is not touchable

I am implementing my custom react native drop down for ios & android.The component has a scrollView (the dropdown options) that opens when the component is pressed.

The component that is "expanded" works fine for iOS but does not on Android.On android the expanded drop down expands normally but is not touchable.

The dropdown base view component is in a view which has position: absolute, I tried using z-index: 10& elevation: 10 but nothing works.I don't think that I should use either z-index or elevation.I think there may be a bug in react native itself.

Here is my dropdown component:

  return (<BaseContainer><SelectedContainer onPress={toggleDropdown}><SelectedText>{props.default}</SelectedText>        {openDropdown ? (<DropdownContainer>            {props.items.map((item, index) => (<DropDownItem                key={item.id}                onPress={onSelectItem.bind(this, { item, index })}              />            ))}</DropdownContainer>        ) : null}</SelectedContainer></BaseContainer>  );};``````const BaseContainer = styled.View`  width: 37%;  flex-direction: row;  justify-content: center;  align-items: center;`;const SelectedContainer = styled.TouchableOpacity`  width: 70%;  height: 100%;  flex-direction: row;  justify-content: center;  align-items: center;`;const SelectedText = styled.Text`  font-size: 10;  color: ${colors.secondary};`;const DropdownContainer = styled.ScrollView`  width: 100%;  height: 230px;  position: absolute;  top: 100;  left: 0;`;```