Input will hide behind other inputs

Describe the bug

The input will hide behind other inputs and the list wont show up at all

Reproduction - (required - issue will be closed without this)

Here is the snack link snack

Please provide a FULLY REPRODUCIBLE example.

Click to expand!

  
  import * as React from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GOOGLE_PLACES_API_KEY = ''; // never save your real api key in a snack!

const App = () => {
return (
  <View style={styles.container}>
    <View style={{ height: 100 }}>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      />
      <GooglePlacesAutocomplete
        query={{
          key: GOOGLE_PLACES_API_KEY,
          language: 'en', // language of the results
        }}
        onPress={(data, details = null) => console.log(data)}
        onFail={(error) => console.error(error)}
        requestUrl={{
          url:
            'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api',
          useOnPlatform: 'web',
        }} // this in only required for use on the web. See https://git.io/JflFv more for details.
        styles={{
          textInputContainer: {
            backgroundColor: 'rgba(0,0,0,0)',
            borderTopWidth: 0,
            borderBottomWidth: 0,
          },
          textInput: {
            marginLeft: 0,
            marginRight: 0,
            height: 38,
            color: '#5d5d5d',
            fontSize: 16,
          },
          predefinedPlacesDescription: {
            color: '#1faadb',
          },
        }}
      />
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
      />
    </View>
  </View>
);
};

const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  paddingTop: Constants.statusBarHeight,
  backgroundColor: '#ecf0f1',
  padding: 8,
},
});

export default App;

Additional context

• Library Version: latest

• React Native Version: 0.62

• iOS

• Android

• Web

If you are using expo please indicate here:

• I am using expo

Add any other context about the problem here, screenshots etc https://i.imgur.com/zeFDWKL.png

[arulp3]

There is a simple solution to this, Jus create a separate view and put the Googleautocomplete tag inside the view.

[bell-steven]

First off, thank you for taking the time to reproduce this and dig into it.

Just so other people reading this know, the correct way to solve this (currently) is to set the zIndex in the container style and position: absolute or fixed in the listView style.

Example

import * as React from 'react';
import { View, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GOOGLE_PLACES_API_KEY = ''; // never save your real api key in a snack!

const App = () => {
  return (
    <View style={styles.container}>
      <View>
        <TextInput style={{ borderWidth: 1, height: 40 }} />
        <GooglePlacesAutocomplete
          query={{
            key: GOOGLE_PLACES_API_KEY,
            language: 'en', // language of the results
          }}
          onPress={(data, details = null) => console.log(data)}
          onFail={(error) => console.error(error)}
          requestUrl={{
            url:
              'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api',
            useOnPlatform: 'web',
          }} // this in only required for use on the web. See https://git.io/JflFv more for details.
          styles={{
            container: {
              zIndex: 99,
            },
            listView: {
              backgroundColor: 'white',
              position: 'absolute',
              marginTop: 40,
            },
          }}
        />
        <TouchableOpacity onPress={() => alert('taco')}>
          <TextInput
            placeholder="Press here and you wil get an alert"
            style={{ borderWidth: 1, borderColor: 'red', height: 40 }}
          />
        </TouchableOpacity>
        <View style={{ height: 30, backgroundColor: 'orange' }} />
        <TextInput style={{ borderWidth: 1, height: 40 }} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

export default App;

Well then first off InputComp is not documented anywhere, in this library, or the docs for TextInput, its also not in the d.ts file

You are right. Feel free to put in a PR

You can’t tell me that that is expected behavior…

If you take out all the styles it would have fit in the box.

If you feel there is a better approach to this (or anything), I would be more than happy to discuss and/or review/merge a PR.