CODEWITHSUNDEEP
react-nativez-indexreact-native-flatlistflatlist
aashik hameed
aashik hameed

Reputation: 11

React native: zIndex in flatlist item is not working as expected

i have a flatlist and blur view component in the parent component, on press of the item in flat list im adding zindex to the selected item in flat list.

Expecting that the item should be visible over blur view component, but its not working.

Does the zindex property will not work if we use it in the render item of flatlist?

` sample

<FlatList
    ref={flatlistRef}
    data={Array(10).fill(1)}
    removeClippedSubviews={false}
    CellRendererComponent={({children}) => children}
    renderItem={({item, index}) => (
      <Items
        index={index}
      />
    )}
    showsVerticalScrollIndicator={false}
  />

  {openContextMenu ? (
    <BlurView
      style={styles.absolute}
      blurType="light"
      blurAmount={10}
      reducedTransparencyFallbackColor="white">
      
    </BlurView>
  ) : null}`

`items

<View style={{zIndex: 1}}>
  <TouchableOpacity activeOpacity={1} onPress={() => setOpenContextMenu(index + '')}>
    {isUser ? <RightMessage showAvatar isSelected /> : <LeftMessage />}
  </TouchableOpacity>
</View>

`

`I tried to use the component outside of flatlist component and its working as expected.

<Items
        index={index}
      />
<BlurView
      style={styles.absolute}
      blurType="light"
      blurAmount={10}
      reducedTransparencyFallbackColor="white">
      
    </BlurView>

`

How to resolve the zindex issue when using flatlist.

Upvotes: 0

Views: 91

Answers (1)

Xhirazi
Xhirazi

Reputation: 857

Use FlatList after BlurView, so that it it will render over blurview, like this

{openContextMenu && (
    <BlurView
      style={styles.absolute}
      blurType="light"
      blurAmount={10}
      reducedTransparencyFallbackColor="white">
      
    </BlurView>
  )}

<FlatList
    ref={flatlistRef}
    data={Array(10).fill(1)}
    removeClippedSubviews={false}
    CellRendererComponent={({children}) => children}
    renderItem={({item, index}) => (
      <Items
        index={index}
      />
    )}
    showsVerticalScrollIndicator={false}
  />

Upvotes: 0

Related Questions