Resizable
from the re-resizable
package is preventing my Flatlist from scrolling. When the list has enough elements to require scrolling, it doesn't start to scroll. This behavior doesn't happen when the resizable element isn't there. The documentation for Resizable doesn't mention scrolling.
<Resizable
style={style.mainViewExpanded}
defaultSize={{
width: 300,
height: 300,
}}
maxHeight="80vh"
maxWidth="600"
minWidth="300"
minHeight="300"
enable={{
top: true,
right: false,
bottom: false,
left: true,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: true,
}}
>
<FlatList
data={parsedPacks}
keyExtractor={(item) => item.packName}
renderItem={({item}) => (
<PackListItem
packName={item.packName || pack}
content={item.content}
/>
)}
/>
</Resizable>
Styles:
mainViewExpanded: {
overflow: 'hidden',
height: 300,
width: 300,
backgroundColor: theme.BGSECOND,
borderStyle: 'solid',
borderRadius: 10,
borderWidth: 2,
borderColor: theme.FIRST,
},
I found the issue. overflow
when set to hidden
will prevent scrolling. This is documented in the CSS documentation. The way to solve this problem is by either setting overflow
to auto
, hidden visible
or visible hidden
depending on the situation. The reason is because overflow
is a shorthand for overflow-x
and overflow-y
. The first word in the value is for x
, and the second is for y
.
mainViewExpanded: {
overflow: 'hidden visible',
},