React native absolute being hidden by parent - node.js

Question

When I have an absolute scrollview inside of a view, where the view is position relative and the scrollview is absolute, the contents of the absolute scrollview are hidden outside of the view, this occurs even if I have the parent view set as oveflow: "hidden"
I am trying it create a auto suggest drop down for a text input.
I have seen that this is an issue on android, but I am testing this on IOS and I am having the same issues.
From what I understood what I am doing should work as shown in this JSFiddle (https://jsfiddle.net/qax6dvrc/14/)
But it looks like this:
Styling
const styles = {
destinationInputContainer: {
width: '90%',
height: 50,
backgroundColor: '#fff',
borderRadius: 10,
marginBottom: '2.5%',
marginHorizontal: '5%',
// IOS
shadowColor: '#000',
shadowOffset: { width: 1, height: 4},
shadowOpacity: 0.5,
shadowRadius: 1,
elevation: 3,
position: "relative",
flexDirection: "row",
},
destinationInput: {
paddingLeft: 10,
paddingTop: 0,
flex: 1,
},
searchResults: {
position: "absolute",
top: 50,
zIndex: 1,
elevation: 5,
},
topContainer: {
position: "relative",
overflow: "visible"
}
}
Component Structure ( I have tried to remove all irrelevant code)
const DestinationInput = ({ _currentTextValue, _latLong, dragCallback, id, updateCallback}: destinationInputProps) => {
const updateValue = (newValue: string) => {
setCurrentText(newValue); // update the value stored in the state
updateCallback(inputId, newValue);
}
return (
<View style={styles.topContainer as any}>
<View style={styles.destinationInputContainer as any} >
<TextInput style={styles.destinationInput} value={currentText} placeholderTextColor='#000' placeholder='Destinations' onChangeText={(currentInput) => updateValue(currentInput)} />
<TouchableOpacity onLongPress={dragCallback} style={{flexDirection: "column", justifyContent: "center", flex: 1}}>
<Text>Drag</Text>
</TouchableOpacity>
</View>
<ScrollView style={styles.searchResults as any} >
<Text>Option1</Text>
<Text>Option2</Text>
<Text>Option3</Text>
</ScrollView>
</View>
);
};
export class DestinationSearch extends React.Component {
state: {currentDestinations: destinationInputProps[]} // specify the type for the props
constructor(props: any) {
super(props);
}
renderItem({ item, index, drag, isActive }: RenderItemParams<destinationInputProps>) {
return <DestinationInput updateCallback={this.updateSingleValue} _currentTextValue={item._currentTextValue} id={item.id} dragCallback={drag} />
}
render() {
return (
<View>
<ScrollView style={{maxHeight: 220}}>
<DraggableFlatList
data = { this.state.currentDestinations }
keyExtractor={(item, index) => `draggable-item-${item.id}`}
renderItem = {this.renderItem}
onDragEnd={({ data }) => { console.log(this.state.currentDestinations); this.setCurrentDestinations(data)}}
extraData = { this.state.currentDestinations }
/>
</ScrollView>
<Button title={"Add"} disabled={this.state.currentDestinations.length >= 5} onPress={this.addDestination}></Button>
</View>
);
}
}