Can't register tap on list when wrapped in fixed height View

[luismasg]

Really impressed thank you. Small speed bump. I think I'm stuck. Could someone nudge me in the right direction? I have two of these inside a view with two rows. The tap event is not registering since (i believe) the dropdown overflows outside the parent View .

(Never mind the pesky dropdown with a a zIndex of 1000. that's should be more manageable. It is a native-base Picker)

Is this a panResponder thing to catch the tap event ? Or just a matter of sticking-in the ScrollView i keep hearing about somewhere?

If posible. I'd like to contribute the base idea of this examplee to your docs.

import React from "react";

import { View, Text, StyleSheet, TextInput } from "react-native";
import { Card } from "native-base";
import { FontAwesome } from "@expo/vector-icons";

import { orange } from "../utils/colors";
import PlacesInput from "react-native-places-input";

export default ({ tripDetails, setTripDetails, style }) => {
  return (
    <Card style={[style, styles.container]}>
      <View style={[styles.row, styles.topRow]}>
        <FontAwesome name="circle" color={orange} size={10}></FontAwesome>
        <View style={[styles.textWrapper]}>
          <Text style={styles.greyText}>Origen</Text>
          <PlacesInput
            queryCountries={["mx"]}
            placeHolder={tripDetails.origin.description ?? ""}
            stylesInput={{
              height: 25,
              backgroundColor: "transparent", //para que ni pise el greyText,
              color: orange
            }}
            stylesContainer={{
              position: "relative",
              alignSelf: "stretch",
              margin: 0,
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              shadowOpacity: 0,
              borderColor: "white",
              borderWidth: 1,
              marginBottom: 9, // hace que la listView tape el underline, no perfecto
              elevation: 0 // remove shadow on android
            }}
            stylesList={{
              top: 1, // shrink space between nput and  list
              borderColor: "#dedede",
              borderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              left: -1,
              right: -1,
              backgroundColor: "white", //so the input below isint visible 
              zIndex: 2,
              elevation: 3
            }}
            googleApiKey="------"
            onSelect={place => {
              setTripDetails({ ...tripDetails, origin: { ...place.result.geometry.location, description: place.result.formatted_address } });
              // console.log("origin onSelect: ", place);
            }}
          />
        </View>
      </View>
      <View style={[styles.row, styles.bottomRow]}>
        <FontAwesome name="map-marker" color={orange} size={10}></FontAwesome>
        <View style={styles.textWrapper}>
          <Text style={[styles.greyText, { marginBottom: -4 }]}>Destino</Text>
          {/* 
          <Text style={[styles.orangeText]}> {destination}</Text> */}
          <PlacesInput
            queryCountries={["mx"]}
            placeHolder={""}
            stylesInput={{ height: 25, backgroundColor: "transparent", color: orange, borderWidth: 0 }}
            textInputProps={{
              underlineColorAndroid: "transparent" //noline in andoird
            }}
            stylesContainer={{
              position: "relative",
              alignSelf: "stretch",
              margin: 0,
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              shadowOpacity: 0,
              borderColor: "transparent",
              borderWidth: 0,
              marginBottom: 10,
              elevation: 0, // quitar la puta boxShadow del input en android !!
              backgroundColor: "transparent" //para que ni pise el greyText
            }}
            stylesList={{
              top: 1, // encoger espacio entre input y lista estaba en 50
              borderColor: "#dedede",
              borderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              left: -1,
              right: -1
            }}
            googleApiKey="------"
            onSelect={place => {
              setTripDetails(tripDetails => ({
                ...tripDetails,
                destination: { ...place.result.geometry.location, description: place.result.formatted_address }
              }));
            }}
          />
        </View>
      </View>
    </Card>
  );
};

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    left: 10,
    right: 10,
    top: 10
  },
  textWrapper: { marginLeft: 20, marginRight: "auto", flex: 1, height: 30 },
  orangeText: { color: orange },

  greyText: { color: "#BFBFBF", fontSize: 10, zIndex: -1 },
  row: {
    padding: 10,
    paddingLeft: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start"
  },
  topRow: {
    borderBottomColor: "rgba(112,112,112,0.08)",
    borderBottomWidth: 1,
    paddingTop: 0,
    zIndex: 10 // que este arriba del input de abajo
  },
  bottomRow: {
    paddingBottom: 0,
    zIndex: 5 //Que este abajo del inpout de arriba
  },
  costBox: {
    elevation: 4,
    height: 40,
    // width: 40,
    backgroundColor: orange,
    justifyContent: "center",
    padding: 10
  },
  costContainer: {
    position: "absolute",
    flexDirection: "row",
    top: 0,
    bottom: 0,
    left: 0,
    right: 20,
    alignItems: "center",
    justifyContent: "flex-end"
  }
});

[luismasg]

Apologies Mr. @jaing. Have you heard of this ? any idea if this is a simple matter of zIndex or do I need to do something else ?

[jaing]

Unless you will provide a full report with not working example I wont be able to help. I copied your code and remove native base only and it was working fine:

https://drive.google.com/open?id=1dMHge_hFSEFq4aFd352cH3qGWC6o0pet

import { View, Text, StyleSheet, TextInput } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

import PlacesInput from '../components/places-input/index';
import { GOOGLE_API_KEY } from "../constants/config";

const orange = 'red';

export default () => {
    return (
        <View style={[ styles.container]}>
            <View style={[styles.row, styles.topRow]}>
                <FontAwesome name="circle" color={orange} size={10} />
                <View style={[styles.textWrapper]}>
                    <Text style={styles.greyText}>Origen</Text>
                    <PlacesInput
                        queryCountries={['mx']}
                        placeHolder={''}
                        stylesInput={{
                            height: 25,
                            backgroundColor: 'transparent', // para que ni pise el greyText,
                            color: orange,
                        }}
                        stylesContainer={{
                            position: 'relative',
                            alignSelf: 'stretch',
                            margin: 0,
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            shadowOpacity: 0,
                            borderColor: 'white',
                            borderWidth: 1,
                            marginBottom: 9, // hace que la listView tape el underline, no perfecto
                            elevation: 0, // remove shadow on android
                        }}
                        stylesList={{
                            top: 1, // shrink space between nput and  list
                            borderColor: '#dedede',
                            borderLeftWidth: 1,
                            borderRightWidth: 1,
                            borderBottomWidth: 1,
                            left: -1,
                            right: -1,
                            backgroundColor: 'white', // so the input below isint visible
                            zIndex: 2,
                            elevation: 3,
                        }}
                        googleApiKey={GOOGLE_API_KEY}
                        onSelect={place => {

                            console.log("origin onSelect: ", place);
                        }}
                    />
                </View>
            </View>
            <View style={[styles.row, styles.bottomRow]}>
                <FontAwesome name="map-marker" color={orange} size={10} />
                <View style={styles.textWrapper}>
                    <Text style={[styles.greyText, { marginBottom: -4 }]}>Destino</Text>
                    {/*
          <Text style={[styles.orangeText]}> {destination}</Text> */}
                    <PlacesInput
                        queryCountries={['mx']}
                        placeHolder=""
                        googleApiKey={GOOGLE_API_KEY}
                        stylesInput={{
                            height: 25,
                            backgroundColor: 'transparent',
                            color: orange,
                            borderWidth: 0,
                        }}
                        textInputProps={{
                            underlineColorAndroid: 'transparent', // noline in andoird
                        }}
                        stylesContainer={{
                            position: 'relative',
                            alignSelf: 'stretch',
                            margin: 0,
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            shadowOpacity: 0,
                            borderColor: 'transparent',
                            borderWidth: 0,
                            marginBottom: 10,
                            elevation: 0, // quitar la puta boxShadow del input en android !!
                            backgroundColor: 'transparent', // para que ni pise el greyText
                        }}
                        stylesList={{
                            top: 1, // encoger espacio entre input y lista estaba en 50
                            borderColor: '#dedede',
                            borderLeftWidth: 1,
                            borderRightWidth: 1,
                            borderBottomWidth: 1,
                            left: -1,
                            right: -1,
                        }}
                        onSelect={place => {

                        }}
                    />
                </View>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        left: 10,
        right: 10,
        top: 50,
    },
    textWrapper: { marginLeft: 20, marginRight: 'auto', flex: 1, height: 30 },
    orangeText: { color: orange },

    greyText: { color: '#BFBFBF', fontSize: 10, zIndex: -1 },
    row: {
        padding: 10,
        paddingLeft: 20,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    topRow: {
        borderBottomColor: 'rgba(112,112,112,0.08)',
        borderBottomWidth: 1,
        paddingTop: 0,
        zIndex: 10, // que este arriba del input de abajo
    },
    bottomRow: {
        paddingBottom: 0,
        zIndex: 5, // Que este abajo del inpout de arriba
    },
    costBox: {
        elevation: 4,
        height: 40,
        // width: 40,
        backgroundColor: orange,
        justifyContent: 'center',
        padding: 10,
    },
    costContainer: {
        position: 'absolute',
        flexDirection: 'row',
        top: 0,
        bottom: 0,
        left: 0,
        right: 20,
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
});