Twitter Github Get Early Access
ScrollView Reactive Header
ScrollView that supports a parallax header image and static overlay.
How to Use
Step 1:
Install with Swift Package Manager. In your Xcode Project, select File > Add Packages, and paste in the following URL:
https://github.com/swiftui-library/scrollview-reactive-header
Step 2:
Getting up and running is as easy as importing the package in your view, then using ScrollViewReactiveHeader in place of ScrollView. Here's an example.
import ScrollViewReactiveHeader
...
ScrollViewReactiveHeader(header: {
MyHeaderBackground()
.frame(height: 300)
}, headerOverlay: {
MyHeaderContent()
.frame(height: 300)
}, body: {
// Note: This view will be placed inside a ScrollView
MyScrollingContentView()
}, configuration: .init(showStatusBar: true, backgroundColor: .white))As you can see, ScrollViewReactiveHeader takes in a handful of arguments. First is the header, which in the example is the background image. Next is the headerOverlay, which is a view that will remain fixed on scroll. Lastly is your body content.
Future Todos
There are several improvements planned for later versions of this package. If your use-case matches the one shown in the Reader Example in the video above, this package already has all you need.
scrollOffset callback for use outside of ScrollViewReactiveHeaderheaderOverlay interactive. At the moment, ScrollView intercepts all tapsGeometryReader for status bar height calculations.