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…

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. Is it flex? Is it the ScrollView? It was time I wrote an article.My favorite scenario, the one that inspired this article, the one that I *always* forget about, the one I recently encountered for Orchard, (what a build-up) is one where I’d like the screen to scroll normally when things don’t fit and justify-content: space-between when there’s room.A comparison between what the screens should look like on an iPhone 5s. 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 felt like these options would either make my life miserable or even worse: the user’s life miserable. 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. It will apply styles to the content container as if there were a View wrapping your children.It worked great on the iPhone X. There was enough room so everything was justified vertically. But what happens when you try this on a smaller device like the iPhone 5s? It sticks! Why?iPhone 5s with…

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