Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open
  • Is something wrong?
#23 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react-native, typescript
Domain
mobile

Research direction

Start with TriggeringView and inspect its onLayout handling, especially how initialPageY is used to calculate the triggering threshold. Reproduce the case where HeaderScrollView's header height changes after the initial render, then verify that onHide and onDisplay use the updated threshold rather than the initial height.

Written by the indexing model from the issue text.

Description

bug

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).

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 (
            <View style={styles.container}>

                <HeaderImageScrollView
                    maxHeight={this.props.headerHeight} // Prop coming from redux state.
                    minHeight={0}
                    fadeOutForeground={true}
                    renderHeader={this._renderHeader.bind(this)}
                >

                    <TriggeringView
                        onHide={this._onHide.bind(this)}
                        onDisplay={this._onDisplay.bind(this)}
                    >
                    </TriggeringView>

                    <Text>
                        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?
                    </Text>

                </HeaderImageScrollView>

            </View>
        );

    }

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

    _renderHeader() {
        return (
            <View>
                <AutoHeightImage
                    width={360} // Hardcoded, not important for this example
                    imageURL='https://example.com'
                    onHeightChange={this._setHeaderHeight.bind(this)}
                />
            </View>
        );
    }

    _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!

Dominant language
TypeScript
Stars
1k
Forks
101
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

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

All issues in bamlab/react-native-image-header-scroll-view

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.