Flashlist doesn't support overflow: 'visible'

[SSHristow]

Description

Thanks for the amazing library. I'm not sure if this is more of a bug or a feature. But I have the following issue:

I need to apply overflow: 'visible' on the FlashList in order to achieve the following design 👇

Currently, this is implemented with FlatList

<FlatList
   style={{ overflow: 'visible', backgroundColor: 'red' }}
...rest

As you can see, the "masks" need to overflow the list.

Here is the result when using FlashList

<FlashList
     style={{ overflow: 'visible', backgroundColor: 'red' }}
{...rest}

Overflow doesn't work, and masks are cut

Current behavior

overflow: 'visible' doesn't do anything. I tried to put it on every style prop of the Flashlist, but it doesn't work

Expected behavior

Reproduction

In the renderItem I'm rendering the mask and the card. The masked is taking the size of the card and I'm applying scale 1.25

{
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: [{ translateX: '-50%' }, { translateY: '-50%' }, { scale: 1.25 }],
  }

Expo Snack or minimal reproduction link:

Platform

• iOS
• Android
• Web (if applicable)

Environment

React Native info output:

Paste output here

FlashList version:

Additional context

Checklist

• I've searched existing issues and couldn't find a duplicate
• I've provided a minimal reproduction (Expo Snack preferred)
• I'm using the latest version of @shopify/flash-list
• I've included all required information above

[rohitx15]

Having the same issue. Overflow visible does nothing.

[thomasdelobel]

I finally manage to get it work by using the not recommended overrideProps={{ style: { overflow: "visible" } }}

[SSHristow]

@thomasdelobel nice one, I will only add that both props needs to be passed in order to work

<FlashList
overrideProps={{ style: { overflow: 'visible' } }}
style={{ overflow: 'visible' }}

[naqvitalha]

The overrideProps approach is an acceptable way to achieve this. You need to set overflow: "visible" on both the outer container and the internal ScrollView:

<FlashList
  style={{ overflow: "visible" }}
  overrideProps={{ style: { overflow: "visible" } }}
/>

We've updated the docs for both overrideProps and style to make this clearer: #2128