ScrollView Reactive Header

ScrollView Reactive Header

Twitter Github Get Early Access

ScrollView Reactive Header

Read Docs on Github Want more detail? See the full readme! It goes into more detail and documents all configuration options. Get Started

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:

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: {

        .frame(height: 300)
}, headerOverlay: {

        .frame(height: 300)
}, body: {

    // Note: This view will be placed inside a ScrollView
}, 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 ScrollViewReactiveHeader
Make headerOverlay interactive. At the moment, ScrollView intercepts all taps
Remove dependence on GeometryReader for status bar height calculations.
Add configuration for disabling / enabling fade-on-scroll