SwiftUI: Nesting Scroll Views without tearing your hair out

Christopher Truman
iOS App Development
2 min readJun 17, 2019

I’ve been trying to recreate a typical nested scrolling content list UI. I want to build a vertical scrolling list of horizontally scrolling lists, similar to the App Store (seen below).

When nesting ScrollViews you will see strange errors like “Reparenting nested renderer host — preferences may be missing.” that I discussed more here. You need to constrain the ScrollView to a specific frame or layout dimension to avoid the old “Scroll View has ambiguous scrollable content height/width” error from UIScrollView.

Below, you can see that I constrain the inner horizontal ScrollView to a width (300) larger than its’ parent vertical ScrollView (200). This ensures that it will scroll horizontally.

I have not yet figured how to constrain a ScrollView using the .relativeSize options found here:

If anyone can find a better way to build something similar to a UICollectionViewFlowLayout using SwiftUI let me know on twitter!

--

--