Skip to content

Commit

Permalink
Fix sticky header not sticking on first render in ScrollView
Browse files Browse the repository at this point in the history
Summary:
# The bug
Sticky headers would not "stick" to the top of the ScrollView on initial render. On subsequent redners, all sticking would work correctly.

# Why the bug existed
This code to initialize the animated values used for sticky headers was in `UNSAFE_componentWillMount` prior to D26375818 (1641d46). `UNSAFE_componentWillMount` is called before `render`.

In D26375818 (1641d46), I moved the code into `componentDidMount`, which is called after `render`.

This caused a problem because code in `render` was relying on these initializations being done already.

# How I resolved the bug
To resolve this, I initialize these values in the constructor.

# Reference
Docs for React mount ordering: https://reactjs.org/docs/react-component.html#mounting

Changelog:
[General][Fixed] Fix sticky header not sticking on first render in ScrollView

Reviewed By: nadiia

Differential Revision: D26792003

fbshipit-source-id: c575e8cdd1d986ce3c38941d95d763e329e74874
  • Loading branch information
kacieb authored and facebook-github-bot committed Mar 3, 2021
1 parent fca0442 commit 921c9ff
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions Libraries/Components/ScrollView/ScrollView.js
Original file line number Diff line number Diff line change
Expand Up @@ -719,6 +719,13 @@ class ScrollView extends React.Component<Props, State> {
static Context: typeof ScrollViewContext = ScrollViewContext;
constructor(props: Props) {
super(props);

this._scrollAnimatedValue = new AnimatedImplementation.Value(
this.props.contentOffset?.y ?? 0,
);
this._scrollAnimatedValue.setOffset(this.props.contentInset?.top ?? 0);
this._stickyHeaderRefs = new Map();
this._headerLayoutYs = new Map();
}

_scrollAnimatedValue: AnimatedImplementation.Value = new AnimatedImplementation.Value(
Expand Down Expand Up @@ -789,13 +796,6 @@ class ScrollView extends React.Component<Props, State> {
this.scrollResponderKeyboardDidHide,
);

this._scrollAnimatedValue = new AnimatedImplementation.Value(
this.props.contentOffset?.y ?? 0,
);
this._scrollAnimatedValue.setOffset(this.props.contentInset?.top ?? 0);
this._stickyHeaderRefs = new Map();
this._headerLayoutYs = new Map();

this._updateAnimatedNodeAttachment();
}

Expand Down

0 comments on commit 921c9ff

Please sign in to comment.