Re-resizable preventing flatlist from scrolling

Question

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,
  },

Answer 1

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',
},

Answer 2

The best way to handle scroll is to add

overflow-y

or

overflow-x

..depending on your data to

auto