-
Notifications
You must be signed in to change notification settings - Fork 166
Description
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:
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>
);