Taming React Native’s ScrollView with flex – Peter Piekarczyk – Medium

  • Taming React Native’s ScrollView with flexTime and time again I find myself fighting a ScrollView to get it to work the way I want it to.
  • vs iPhone XA couple of different solutions came to mind at first:Use either View or ScrollView depending on the device height (meh)Decrease the text size until everything fit (meh)Place the “Privacy Policy” outside of the ScrollView making it sticky, but it felt weird to scroll over and still see the privacy policy.I…
  • I went to the docs for ScrollView and read over `contentContainerStyle`:These styles will be applied to the scroll view content container which wraps all of the child viewscontentContainerStyle is a step in the right direction.
  • Why?iPhone 5s with a ScrollView that doesn’t scrollReact Native Flex vs. CSS FlexIt turns out that flex functions a bit differently in React Native than it does in CSS which is why setting flex: 1 didn’t work the way I thought it would.In CSS, flex is short-hand for controlling the following flex:…
  • Why does this matter?The solution has to do with the implementation differences of flex and flexGrow in React Native.Since flexGrow functions the same way, we can easily solve this problem by updating our contentContainerStyle to flexGrow: 1 instead:Using flexGrow vs. flex in contentContainerStyle propiPhone 5s with a ScrollView that scrolls correctlyHopefully…

Time and time again I find myself fighting a ScrollView to get it to work the way I want it to. Is it flex? Is it the ScrollView? It was time I wrote an article. My favorite scenario, the one that…
Continue reading “Taming React Native’s ScrollView with flex – Peter Piekarczyk – Medium”