When using in LinearGradient view, Results are overlapping with the below content in IOS

[GangadharG]

The package is working fine when it is used in any normal View elements. If I use it in LinearGradient View, The search results View is overlapping with the below content in IOS. I tried with lot of styles, But no luck.

import React from 'react';
import { View, Text, Platform} from 'react-native';
import {LinearGradient} from 'expo-linear-gradient';
import PlacesInput from 'react-native-places-input';

const TestScreen = (props) => {
  return (
    <View
      style={[
        {flex: 1},
        Platform.OS === 'ios' ? {paddingTop: 32} : {paddingTop: 22},
      ]}>
      <LinearGradient
        colors={['#64C0CB', '#5EC8C7', '#56D8C3']}
        start={{x: 0, y: 0}}
        end={{x: 1, y: 0}}
        style={{height: 100, paddingLeft: 15, paddingRight: 15}}>
        <PlacesInput
          googleApiKey="YOUR_GOOGLE_API_KEY"
          onSelect={(place) => {
            console.log(place);
          }}
          placeHolder={'search place'}
          stylesInput={{
            backgroundColor: 'transparent',
            borderWidth: 1,
            borderColor: 'white',
            borderRadius: 22,
            color: 'white',
            fontSize: 18,
          }}
          stylesList={{zIndex: 10002}} /*This is not working */
        />
      </LinearGradient>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Below content</Text>
      </View>
    </View>
  );
};

TestScreen.navigationOptions = {
  headerShown: false,
};

export default TestScreen;

In Android it is working fine. As seen in the below image.

But in IOS, it is not working as expected.