"Position: absolute" not working on iOS, displaying views at the back as well

I want to display a custom flatlist as a dropdown on click of a touchable. I have given position as absolute as well as zIndex etc to display the list on the top of other views. It works fine on Android, but on iOS, it does not overlap the views on the back, it shows as in the image provided here.

Any suggestions please!!??

import React, {Component} from 'react';
import {
  View,
  FlatList,
  Text, 
  StyleSheet,
  Image, 
  TextInput, 
  TouchableOpacity,
  TouchableWithoutFeedback, 
  Keyboard,
} from 'react-native';

class SearchableDropdownInput extends Component {

  state = {
    showItemList: false,
    selectedItem: {item: {name: ''}},
    destinationName: '',
    validation: '',
  };

  renderListItems = () => {
      return (
        <View style={{position: 'relative'}}>
          <FlatList
            keyboardShouldPersistTaps="handled"
            style={styles.itemsContainerStyle}
            data={this.props.destinationList}
            nestedScrollEnabled={true}
            keyExtractor={(item, index) => item.id}
            renderItem={item => (
              <TouchableOpacity
                key={item.item.key}
                style={styles.itemStyle}
                onPress={() => {
                  Keyboard.dismiss();
                  this.setState(
                    {
                      showItemList: false,
                      selectedItem: item,
                      destinationName: item.item.key,
                      validation: false,
                    },
                    () => {
                      this.props.onChange(item.item.key);
                      this.props.clearValidation();
                    },
                  );
                }}>
                {typeof item.item !== 'string' ? (
                  <Text key={item.id} style={styles.textField}>
                    {item.item.key} 
                  </Text>
                ) : (
                  <Text key={item.id} style={styles.textHeading}>
                    {item.item}
                  </Text>
                )}
              </TouchableOpacity>
            )}

          />
        </View>
      );
  };
  render() {
    return (
      <View>
        <View
          style={
            this.props.validationMsg !== ''
              ? styles.inActiveInputContainerStyle
              : styles.inputContainerStyle
          }
          >
          <TouchableWithoutFeedback
            onPress={() => this.refs['textInput'].focus()}
            style={{marginTop: 10}}>
            <Image source={this.props.icon} style={styles.imageStyle} 
            />
          </TouchableWithoutFeedback>
          <TextInput
            onFocus={() => {
              this.setState({showItemList: true});
              this.onChangeText(this.state.destinationName);
            }}
            ref="textInput"
            onBlur={() => this.setState({showItemList: false})}
            style={styles.inputStyle}
            placeholder={this.props.placeholder}
            placeholderTextColor="grey"
            value={this.state.destinationName}
            onChangeText={text => this.onChangeText(text)}
            testID={'Start_Planning_To_TextInput'}
            accessibilityLabel={'Start_Planning_To_TextInput'}
          />
        </View>
        {
            this.state.showItemList &&
            this.renderListItems()
        }
      </View>
    );
  }
}

export default SearchableDropdownInput;

const styles = StyleSheet.create({
  inputContainerStyle: {
    flexDirection: 'row',
    borderWidth: 1,
    height: 50,
    borderRadius:2,
    borderColor: '#b2b2b2',
    // elevation: 5,
    // shadowColor:"#15000000",
    // shadowOffset:{height:0,width:0},
    // elevation:10,
    // backgroundColor: 'white',
  },
  inActiveInputContainerStyle: {
    flexDirection: 'row',
    borderWidth: 1,
    borderRadius:2,
    height: 50, 
    borderColor: '#fe5246',
  },
  itemsContainerStyle: {
    maxHeight: 280,
    position: 'absolute',
    width: '100%',
    alignSelf: 'center',
    zIndex: 100,
    borderTopWidth: 0,
    borderColor: '#ccc',
    borderWidth: 1,
    backgroundColor: 'white',
    borderBottomWidth: 1,
  },
  itemStyle: {
    backgroundColor: 'white',
    width: '100%',
    alignSelf: 'center',
  },
  textField: {
    paddingLeft: 20,
    height: 42,
    paddingTop: 12, 
    color:"#3e3e3e"
    // justifyContent:"center",
  },
  textHeading: {
    color: '#999999',
    padding: 10,
    backgroundColor: '#efefef',
    marginBottom: 3,
  },
  imageStyle: {
    height: 25,
    width: 25,
    alignSelf: 'center',
    marginLeft: 15,
  },
  inputStyle: {
    height: 55,
    padding: 15,
    fontSize: 16,
    color:"#3e3e3e",
    width: '90%',
    alignSelf: 'center',
    borderRadius: 3, 
  },
});