bamlab / bamlab/react-native-image-header-scroll-view

TriggeringView doesn't update threshold if renderHeader() component updates its height

Open
#23 0 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
1k
Forks
101
PR merge metrics
No merged PRs in 30d

Description

Hey, first of all, thank you for this amazing work!

I'm using it in a special scenario where the header component height is calculated dynamically (using [react-native-auto-height-image](https://github.com/vivaxy/react-native-auto-height-image)).

This would be my code:

import React, {Component} from "react";
import {Text, View} from "react-native";

import AutoHeightImage from 'react-native-auto-height-image';
import HeaderImageScrollView, {TriggeringView} from 'react-native-image-header-scroll-view';

const DEFAULT_HEADER_HEIGHT = 500;

export default class WallScreen extends Component {

componentWillMount() {
this._setHeaderHeight(DEFAULT_HEADER_HEIGHT);
}

render() {

return (








Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam asperiores at commodi cumque
dolor dolorum, ea eaque est excepturi nam, perferendis perspiciatis, porro! A illo ipsa itaque
quae rerum unde?





);

}

_setHeaderHeight(height){
// Here I would dispatch the redux action to update 'headerHeight'.
}

_renderHeader() {
return (



);
}

_onHide() {
console.log('On hide called');
}

_onDisplay() {
console.log('On display called')
}

}

Until now, all great! All the layout works great out of the box and my code updates the header height correctly!

BUT the problem comes with `TriggeringView`.
As you can see, the header height is initialized at `500`. Well, as I update the `headerHeight` prop via redux, `TriggeringView` will still trigger the `onHide` and `onDisplay` callbacks using the `500` initial height.

I took a look at the source and saw that the triggering threshold is based in the `initialPageY` property, and this property is calculated in the `onLayout` hook.
So the problem is this that hook is not triggered when the header height changes.

PS: I fixed this adding a new `dynamicHeaderHeight` prop to `HeaderScrollView`. Will submit a PR today!

Thanks!

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.