ScrollArea not working properly (MacOS Big Sur 11.2.2)

[dshomoye]

trafficstars

Describe the bug

ScrollArea does not seem to work with nested view (no scrollbars).

It's a little confusing because rendering a single Text component inside the scroll area works.

Like so:

  <Window
    windowIcon={winIcon}
    windowTitle="Look Back"
    styleSheet={styleSheet}
    minSize={minSize}
  >
    <ScrollArea>
      <Text>
      {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      ...
      Duis aute irure dolor in reprehenderit in voluptate velit 
      ...
      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
      deserunt mollit anim id est laborum
      `}
      </Text>
    </ScrollArea>
  </Window>

Which yields:

But nesting the Text in a View, inside a ScrollArea (which is required for multiple children) doesn't work:

  <Window
    windowIcon={winIcon}
    windowTitle="Look Back"
    styleSheet={styleSheet}
    minSize={minSize}
  >
    <ScrollArea>
      <View style={` height: '100%'; width: '100%'; `}>
        <Text>
        {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        ...
        nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit 
        ...
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
        deserunt mollit anim id est laborum
        `}
        </Text>
      </View>
    </ScrollArea>
  </Window>

Which yields (text clipped, no scroll bar):

Expected behavior Nesting View should behave like any other component, especially since a container is required for nesting children in a ScrollArea.

Desktop (please complete the following information):

• OS: Mac
• NodeGUI version: "@nodegui/[email protected]"
• React NodeGUI version : "@nodegui/[email protected]"
• OS Version: Big Sur 11.2.2

[KRTirtho]

Just upgrade to the latest versions of nodegui & react-nodegui See issue #341 for better understanding, I was having this issue to

[dshomoye]

I updated to latest but I'm still seeing the issue. It doesn't seem to be marked as fixed either, just going by this.

[a7ul]

@dshomoye Have you updated the react nodegui and nodegui versions ?

I tried your example and it looks like its working as expected

That issue is closed and fixed.

[dshomoye]

You're right, I'm not sure what happened when I had initially tested, but it seems this is not the problem I have. Does ScrollArea adapt to View size changes after first render?

In my case, I'm getting an array of objects and rendering them into a View after rendering (in a useEffect). If I use static values the scroll area actually works (from the latest update).

I have a sample code here: https://github.com/dshomoye/react-nodegui-starter/blob/ff14af28d9b207e9ba4c377ed23b2f3be4491dac/src/components/NotesContainer.tsx#L7