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

[jaing]

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

[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',
    },
});