'ScrollView not scrolling inside absolute component
I'm trying to create a fixed height scrollview from a select button, in with will be able to be scrolled. Although I can't seem to make the scroll work inside a View component.
I have the following component:
<MyInput
key={name}
type={'select'}
rightIcon={rightIcon}
placeholder={"Some"}
onChangeText={onChangedText}
onInputFocus={onShowDropdown}
dropdown={active && options.length > 0 && (
<styled.Dropdown>
<styled.Options
keyboardShouldPersistTaps='handled'
scrollEnabled={(options.length > 3)}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
horizontal={false}>
{options.map((item) => (
<Option
key={item.id || item.text}
title={item.place_name || item.text}
selected={(item.id === highlighted) || (item.text === highlighted)}
onHideUnderlay={() => onHideUnderlay(item.id || item.text)}
onShowUnderlay={() => onShowUnderlay(item.id || item.text)}
onPressed={() => onSelectOption(item)} />
))}
</styled.Options>
</styled.Dropdown>
When I remove the </styled.Dropdown> the List work fine, but it won't have a fixed height.
This is the styles:
styles.Dropdown = styled.View`
position: absolute;
left: 0;
right: 0;
top: 51px;
z-index: 30;
background-color: ${Colors.white};
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
min-height: 56px;
max-height: 168px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
`
styles.Options = styled.ScrollView`
flex: 1;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
`
styles.Option = styled.TouchableHighlight``
This is how it renderes (with the complete code), but it doesn't allow scrolling and the selection doesn't work:

This is how it renderes without the <styled.DropDown> and it works, but without a fixed height:

OBS: IOS works fine, android doens't work
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
