Skip to content

ScrollView contents not laying out correctly when scroll indicators are always on and ScrollView is fixed width/height #363

@tom-un

Description

@tom-un

Typically macOS scroll indicators only appear on top of the contents when scrolling using a trackpad or Magic Mouse gesture -- similar to iOS. But if a PC mouse is attached or the System Preferences are set to show scroll indicators always, then the layout of the ScrollView contents should adjust to the narrower view port. Currently they are not which can force the appearance of a horizontal scrollbar.

For example, if the following is rendered with many children

    return (
      <ScrollView
        style={{
          flex: 1,
          backgroundColor: 'red',
          width: 200,
          height: 200,
        }}
        contentContainerStyle={{
          flexGrow: 1,
        }}
      >
        <Text>Some text</Text>
        . . . many more . . .
      </ScrollView>
    );

and scroll indicators are always on, then the layout of the content view is too wide forcing the appearance of a horizontal scrollbar:

scrolling

UPDATED: A related issue was fixed with the change d604a2d#diff-f4440252d71357db0518df7c857743f5 in RCTScrollContentView.m. It fixes layout if the ScrollView has variable width/height such as the main screen in RNTester. But it doesn't work if the ScrollView layout is fixed. A workaround is to simply wrap the ScrollView in a View and put the fixed constraints on the View:

    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'red',
          width: 200,
          height: 200,
        }}>
        <ScrollView
          contentContainerStyle={{
            flexGrow: 1,
          }}>
          <Text>Some text</Text>
          . . . many more . . .
        </ScrollView>
      </View>
    );

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions