overlap button with another view

I have a screen where I input some values in the input field and get search results displayed accordingly (within the <View style={styles.dropdown}>). I want that the list should overlap my ActionButton. Just like it overlaps my other input field.

I have already added zIndex and it works for the second input field but not for the button.

  return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.container}><View style={styles.searchFieldContainer}><AddressSearchInput            addressType="favouritePoint"            iconName="search"            textChangeHandler={textChangeHandler}/></View><View style={styles.dropdown}><LocationsFound            addressesFound={locations.addressesFoundList}/></View><View style={styles.fieldDescription}><Text>Standortname:</Text></View><View style={styles.searchFieldContainer}><Item style={styles.searchField}><Input style={styles.searchText}/></Item></View><View style={styles.buttonContainer}><ActionButton buttonText="Platz Speichern"/></View></View></SafeAreaView>  );};export const styles = StyleSheet.create({  searchFieldContainer: {    alignItems: 'center',    height: moderateScale(120),  },  buttonContainer: {    flexDirection: 'row',    justifyContent: 'center',    zIndex: 1,  },  fieldDescription: {    alignItems: 'center',  },  dropdown: {    position: 'absolute',    top: moderateScale(215),    zIndex: moderateScale(10),    backgroundColor: '#fff',  },  container: {    height: '100%',    backgroundColor: 'white',    width: '100%',    flex:1,  },});