This PR introduces two new properties, headerFadeInThreshold and disableLargeHeaderFadeAnim. The headerFadeInThreshold allows you to define a number between 0 and 1, which represents the percentage of the large header's height, to be used to animate the smaller header in and out. If you set a smaller headerFadeInThreshold, the LargeHeader will fade in earlier and may look weird (since the component essentially disappears in front of the user), hence why disableLargeHeaderFadeAnim was introduced.
Motivation and Context
The reason this was introduced is because the header will fade in once the scroll container has passed the LargeHeader. The issue is that if you have a big LargeHeader component, you may want to fade in the header at an earlier time. These new properties allow you to achieve that.
How Has This Been Tested?
There are 2 examples that make use of this in the example application - the Twitter example and the new ArbitraryYTransitionHeaderUsageScreen. See the attached video below for a showcase of the new feature.
Types of changes
[ ] Bug fix (non-breaking change which fixes an issue)
[x] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
Checklist:
[x] I have followed the guidelines in the README.md file.
[x] I have updated the documentation as necessary.
Description
This PR introduces two new properties,
headerFadeInThresholdanddisableLargeHeaderFadeAnim. TheheaderFadeInThresholdallows you to define a number between 0 and 1, which represents the percentage of the large header's height, to be used to animate the smaller header in and out. If you set a smallerheaderFadeInThreshold, the LargeHeader will fade in earlier and may look weird (since the component essentially disappears in front of the user), hence whydisableLargeHeaderFadeAnimwas introduced.Motivation and Context
The reason this was introduced is because the header will fade in once the scroll container has passed the LargeHeader. The issue is that if you have a big LargeHeader component, you may want to fade in the header at an earlier time. These new properties allow you to achieve that.
How Has This Been Tested?
There are 2 examples that make use of this in the example application - the Twitter example and the new
ArbitraryYTransitionHeaderUsageScreen. See the attached video below for a showcase of the new feature.Types of changes
Checklist:
Screenshots
https://github.com/codeherence/react-native-header/assets/128341688/09f52076-a9c2-4936-a828-683deaa67a93