javascriptreactjsreact-nativejsxresizable

Re-resizable preventing flatlist from scrolling


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

Solution

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