Dropdown picker placed above ScrollView isn't responding to scroll but ScrollView is

Question

I have placed a Dropdown picker above a ScrollView, when both Dropdown picker and ScrollView is poppulated with data and I'm trying to scroll through the data in Dropdown it instead scrolling the ScrollView in the background. Infact the Dropdown isn't scrolling at all, even if there's no ScrollView in the background, I'm not sure what I'm doing wrong.

 <View style={styles.lowerContainer}>
    {sevaListDrop ? (
      <>
        <View // specific search section
          style={[styles.searchContainer, {zIndex: 2, marginBottom: '2%'}]}>
          <DropDownPicker // dropdown
            style={{borderColor: '#ccc'}}
            containerStyle={{flex: 3, marginLeft: '2%'}}
            dropDownContainerStyle={{
              borderColor: '#ccc',
              zIndex: 1000,
              elevation: 1000,
              position: 'absolute',
            }}
            open={openDrop}
            setOpen={setOpenDrop}
            items={sevaListDrop?.map(item => ({
              label: item.sevaName,
              value: item.calendarId,
            }))}
            placeholder="Select Seva"
            value={calendarId}
            setValue={type => setCalendarId(type)}
          />

          <PrimaryButton // search button
            name="Search"
            action={search}
          />
        </View>
        <View // lower container for seva list
          style={[styles.lowerContainer, {justifyContent: 'center'}]}>
          {sevaList ? (
            <ScrollView // seva list
              style={{width: '100%'}}
              contentContainerStyle={{
                alignItems: 'center',
                paddingBottom: 50,
              }}
              showsVerticalScrollIndicator={false}>
              {sevaList?.map((item, index) => (
                <SevaCard // seva card
                  key={index}
                  sevakName={item.sevakName}
                  bookedBy={item.bookedBy}
                  noOfAttendees={item.noOfAttendees}
                  onChangeText={text => {
                    setPeopleCount(item.slotId, text);
                  }}
                  onPress={() =>
                    updateAttendees(item.slotId, item.calendarId)
                  }
                />
              ))}
            </ScrollView>
          ) : noDataInner ? (
            <CautionSection // no data container
              title="No Data Found"
              icon="no_user_found"
            />
          ) : (
            <CautionSection // default container
              title="Search Patron Id"
              icon="search"
            />
          )}
        </View>
      </>
    ) : (
      <View // lower caution container
        style={[styles.lowerContainer, {justifyContent: 'center'}]}>
        {noData ? (
          <CautionSection // no data container
            title="No Data Found"
            icon="no_user_found"
          />
        ) : noConnection ? (
          <CautionSection // no connection container
            title="No Connection"
            icon="no_connection"
          />
        ) : (
          <CautionSection // default container
            title="Search Patron Id"
            icon="search"
          />
        )}
      </View>
    )}
  </View>

 

Answer 1

What is really causing this problem is the zIndex:2 in the <View> // specific search section. If you erase that zIndex you should stop having this problem.

At the same time, you may have a problem with your Dropdown, because you will not see the options anymore (or the Dropdown itself). To solve this you should have your <View // lower container for seva list component inside your <View // specific search section component, and then add a zIndex:0 in that last <View> like this:

<View> // specific search section
    <DropdownPicker zIndex={1000}></DropdownPicker>
    <PrimaryButton></PrimaryButton>
    <View style={{zIndex:0}}>
        <ScrollView>
            <SevaCard></SevaCard>
        </ScrollView>
    </View>
</View>

As you can see, I also added a zIndex as an attribute of the element, since it is allowed in DropdownPicker, and preferred.