drawing each item on same z-index

[Bayramito]

Current behavior

as you can see my items being rendered with a logic like a card deck on top of each other.

how can i render them like in ScrollView so each item should be at the same zIndex. is there any setting for that?
Becouse in this case i cant implement pinch zoom feature to my list. becouse everytime second item on the list will be on top of the first one.

Platform:

• [ x] iOS
• [ x] Android

Environment

latest

[Bayramito]

I found a solution for this later on, but would be great to access and modify cell renderer styles from outside via hook or something…
Just a feedback

[MikeJWms]

@Bayramito I would also be interested to know the solution you found.

[Bayramito]

By default FlashList gives to each item a zIndex based on it's index number. You can modify this approach by using CellRendererComponent....

In this thread i shared a example

facebook/react-native#28751

Basically i set same zIndex for each item but, setting higher value for the one which i interact with.

[MikeJWms]

Thanks for your reply, @Bayramito. Oddly enough, I could get your simple example working with FlatList but not FlashList. I am also building pinch-zoom functionality into a list of images and having a hard time getting the image to layer over the next list item.

In your exploration, did you find any truth to the statement "It is important to notice that it works only with class components, not functional"?

[Bayramito]

Use react-native-pinchable it handles zooming functionality on native side perfectly

[MikeJWms]

@Bayramito thank you for the suggestion - it works!

[phgn0]

So here's what fixed click interactions with absolute overlay content for me.

<FlashList
    ...
    CellRendererComponent={(props) => (
        <View
            {...props}
            style={{
                zIndex: isActiveElement ? 10 : 1,
            }}
        >
            {props.children}
        </View>
    )}
    disableAutoLayout={true} // needed to fix CellRendererComponent
/>