codeherence / react-native-header

A high-performance, cross-platform animated header component for React Native applications.
MIT License
237 stars 20 forks source link

feat: absolute headers #16

Closed e-younan closed 1 year ago

e-younan commented 1 year ago

Description

This PR introduces two new props to all scroll containers: absoluteHeader and initialAbsoluteHeaderHeight. These props allow you to position the header absolutely, so that the scroll container content can scroll behind the header.

Motivation and Context

iOS native headers allow for a blurred header above a scroll container. As the user scrolls, the content below can be seen through the blurred surface. These changes were made to introduce that functionality to the scroll containers exported in this library.

How Has This Been Tested?

These changes have been tested via the example application, and all other examples are working as expected.

Types of changes

Checklist:

Screenshots

https://github.com/codeherence/react-native-header/assets/128341688/f99a6cb3-a8e7-42f5-926f-abfd26aa4538

Additional Notes

The reason for the changes in API for this feature is because a BlurView specifically requires itself to be defined after the scroll container to work properly.