ListView over other components

Hi Guys,

I’m trying to display list view over other components in my View but it is hidden behind them. This happen both iOS and Android. This is my code:

//VIEW
return (
    <>
      <View style={{ flex: 1 }}>
        <View style={{
          height: showSearchTabs ? 100 : 70,
          backgroundColor: Colors.background,
        }}>
          {
            currentViewIndex === 0 ? (
              <MapInput
                notifyChange={(loc) => getCoordsFromName(loc)}
                fromSearch={true}
              />
            ) : (

                <SearchBar
                  placeholder={currentViewIndex == 0 ? M("searchOnMap") : M("searchProposalAndUsers")}
                  placeholderTextColor="rgba(60,60,67,0.60)"
                  onChangeText={updateSearch}
                  onClear={onClearHandler}
                  onCancel={() => setShowSearchTabs(false)}
                  onFocus={loadSearchTabContent}
                  value={description}
                  lightTheme
                  platform={"ios"}
                  containerStyle={styles.searchBarContainer}
                  inputContainerStyle={styles.searchBar}
                  inputStyle={styles.inputStyle}
                  cancelButtonTitle={M("cancel")}
                  cancelButtonProps={{ color: Colors.primary }}
                />

              )
          }
          {
            !showSearchTabs ? (
              <View style={styles.Separator} />
            ) : null
          }
          {showTabs()}
        </View>

        {showSearchTabs ?
          (selectedIndex == 0 || selectedIndex == 1) && (props.proposals == [] || props.users == []) ?
            <Text style={{ fontFamily: Fonts.avenirMedium, fontSize: 17, color: Colors.primary, paddingLeft: 18, paddingTop: 18 }}>{M("noElementFound")}</Text> :
            showTabContent()
          :
          //MAPS AND PROPOSALS LIST (VIEW PAGER)
          (
            <>
              <FastCategoriesFilterBox info={{ categories, catIndexSelected, subcatIndexSelected, subcategories, fromSearch: true }} chooseCategory={(id, index) => chooseCategory(id, index)} snap={testSnap} />

              <IndicatorViewPager
                ref={(viewpager) => { this.pager = viewpager }}
                style={{ flex: 1, backgroundColor: Colors.background }}
                onPageScroll={(event) => setCurrentViewIndex(event.position)}
              >
                {renderMapView()}
                {renderProposalsList()}
              </IndicatorViewPager>

              {currentViewIndex == 0 ? (
                <LocationButton currentPosition={getCurrentPosition} />
              ) : null}

              <CustomSwitch currentViewIndex={currentViewIndex} itemSelected={(n) => switchTab(n)} />
            </>
          )
        }
        {_.isEmpty(categories) || catIndexSelected == null ? (
          <></>
        ) : (
            <BottomSheetCategories fall={fall} inputRef={inputRef} renderContent={renderContent} renderHeader={renderHeader} />
          )
        }
      </View>
    </>
  );

// GOOGLE MAPS PLACES INPUT 

const GooglePlacesInput = (props) => {

    function customRow(row) {
        return (
            <View style={{ flexDirection: "row", alignItems: "center" }}>
                <Image style={{ marginLeft: 10, marginRight: 16 }} source={require('../images/t_input.png')} />
                <View style={styles.locatioInfo}>
                    <Text style={styles.mainLocation}>{row.structured_formatting.main_text}</Text>
                    <Text style={styles.streetLocation}>{row.structured_formatting.secondary_text}</Text>
                </View>
            </View>
        )
    }

    return (
        <>
            <View style={{ flex: 1, backgroundColor: Colors.white }}>
                <Icon style={{ width: 24, height: 24, position: "absolute", marginTop: 25, marginLeft: 25, color: "gray", zIndex: 1000 }} name={'search'} size={20} color="#000" />
                <GooglePlacesAutocomplete
                    listViewDisplayed={true}
                    style={{ backgroundColor: Colors.redLogout }}
                    placeholder={props.fromSearch ? M("searchOnMap") : M("searchLocation")}
                    autoFocus={false}
                    fetchDetails={true}
                    onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                        const locatioInfo = { locName: details.name, locStreet: details.vicinity }
                        props.fromSearch == true ?
                            props.notifyChange(details.geometry.location) :
                            props.locationChange(locatioInfo);
                        props.notifyChange(details.geometry.location)

                    }}
                    renderRow={(row) => customRow(row)}
                    getDefaultValue={() => {
                        return ''; // text input default value
                    }}
                    query={{
                        // available options: https://developers.google.com/places/web-service/autocomplete
                        key: apiKey,
                        language: 'it', // language of the results,
                    }}
                    styles={{
                        textInputContainer: {
                            backgroundColor: Colors.white,
                            borderTopWidth: 0,
                            borderBottomWidth: 0,
                            height: 60
                        },
                        textInput: {
                            marginLeft: 16,
                            marginRight: 16,
                            marginTop: 16,
                            height: 38,
                            color: '#5d5d5d',
                            fontSize: 16,
                            borderRadius: 10,
                            backgroundColor: 'rgba(118, 118, 128, 0.12)',
                            paddingLeft: 35
                        },
                        predefinedPlacesDescription: {
                            color: '#1faadb',
                        },
                        listView: {
                            color: 'black', //To see where exactly the list is
                            zIndex: 9999, //To popover the component outwards
                            position: "absolute",
                            elevation: 1,
                            flex: 1,
                        },
                        row: { height: 60 }
                    }}
                    nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
                    GooglePlacesDetailsQuery={{
                        // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details

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

const styles = StyleSheet.create({
    mainLocation: {
        fontFamily: "Roboto-Medium",
        fontSize: 15
    },
    streetLocation: {
        fontFamily: "Roboto-Regular",
        fontSize: 13,
        color: "#808080"
    },
    locationInfo: {
        textAlign: "left",
        marginTop: -20
    }
})

export default GooglePlacesInput;

Hope you can help me, thx;

[bell-steven]

@dakkafex issues with reproducible code examples (or links to a snack, minimal repo etc) will always be looked at.

[tgreco]

If you have this component inside a scrollview or flatlist use keyboardShouldPersistTaps=“always” to fix onpress issues that result from using zIndex on the listview