ZIndex overlapping with any react-native-paper component in Android only

Question

I have an absolute flatlist and if I select one of the options and there's a paper button or any other pressable component is getting pressed along side with the selected element.

Expected behaviour:

I am using zIndex but still the component behind the option from "react-native-paper" is still getting clicked. I tried using TouchableOpactiy it's not getting clicked, In iOS everything works fine the issue is only in Android.

Code sample

Screenshot

I already have included this issue in their github you can see the whole thing in there.

https://github.com/callstack/react-native-paper/issues/2635

score 1 · Answer 1 · answered Apr 01 '21 at 09:17

I solved it by moving the flatlist outside the appbar.header component

 <View style={{}}>
        <Appbar.Header
          style={{
            backgroundColor: colors.surface,
            borderBottomWidth: 1.5,
            borderBottomColor: hexToRgbA(colors.primary, 0.3),
          }}>
          <Appbar.BackAction
            style={{
              marginHorizontal: 5,
            }}
            onPress={_searchOff}
          />
          <TextInput
            underlineColor="transparent"
            underlineColorAndroid="transparent"
            style={{height: 56, backgroundColor: 'transparent', flex: 1}}
            value={searchQuery}
            placeholder={'Search...'}
            onChangeText={onChangeText}
            left={
              <TextInput.Icon
                name={() => (
                  <Icon name={'search'} color={colors.primary} size={20} />
                )}
                disabled={true}
              />
            }
            right={
              <TextInput.Icon
                style={{
                  height: 50,
                  width: 100,
                }}
                name={() => (
                  <Icon
                    name={'arrow-drop-down-circle'}
                    color={colors.primary}
                    size={20}
                    onPress={() => {
                      setFilteredArray(searchQuery);
                      arrowToggle(!arrow);
                    }}
                  />
                )}
              />
            }
          />
        </Appbar.Header>

        {arrow ? (
          <View
            style={{
              position: 'absolute',
              top: 55,
              width: '100%',
              zIndex: 123,
            }}>
            <FlatList
              data={filteredArrayList}
              style={style.mainlist}
              initialNumToRender={6}
              nestedScrollEnabled={false}
              keyExtractor={(item: any, index: number) => `${item.id}_${index}`}
              renderItem={({item}) => <SelectedItemJSX {...item} />}
            />
          </View>
        ) : null}
      </View>

ZIndex overlapping with any react-native-paper component in Android only

1 Answers1