Question 50232 in Javascript Question posted in
A very good W3school tutorial can be found here.

Re-resizable preventing flatlist from scrolling – Javascript

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the issue. overflow when set to hidden will prevent scrolling. This is documented in the CSS documentation. The was 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',
},

  2. 0

    The best way to handle scroll is to add

    overflow-y

    or

    overflow-x

    ..depending on your data to

    auto

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search