React native absolute being hidden by parent

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>        );    }}