Scrollview style height not making any difference

September 3, 2023

Why does this code create a Scrollview of width 100, but with an unlimited height? Am I missing something obvious? Changing the height value doesn’t change anything.

import { ScrollView } from 'react-native';

export default function App() {
  return (<ScrollView style={{ width: 100, height: 0, backgroundColor: 'red'}}/>);
}

>Solution :

You can resolve the height issue by explicitly setting the flexGrow property of the ScrollView to 0 so that the ScrollView to only occupy the space required by its children.

import { ScrollView } from 'react-native';

export default function App() {
  return (<ScrollView style={{flexGrow: 0, width: 100, height: 0, backgroundColor: 'red'}}/>);
}