Skip to content

Commit 921c9ff

Browse files
kaciebfacebook-github-bot
authored andcommitted
Fix sticky header not sticking on first render in ScrollView
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
1 parent fca0442 commit 921c9ff

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

Libraries/Components/ScrollView/ScrollView.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -719,6 +719,13 @@ class ScrollView extends React.Component<Props, State> {
719719
static Context: typeof ScrollViewContext = ScrollViewContext;
720720
constructor(props: Props) {
721721
super(props);
722+
723+
this._scrollAnimatedValue = new AnimatedImplementation.Value(
724+
this.props.contentOffset?.y ?? 0,
725+
);
726+
this._scrollAnimatedValue.setOffset(this.props.contentInset?.top ?? 0);
727+
this._stickyHeaderRefs = new Map();
728+
this._headerLayoutYs = new Map();
722729
}
723730

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

792-
this._scrollAnimatedValue = new AnimatedImplementation.Value(
793-
this.props.contentOffset?.y ?? 0,
794-
);
795-
this._scrollAnimatedValue.setOffset(this.props.contentInset?.top ?? 0);
796-
this._stickyHeaderRefs = new Map();
797-
this._headerLayoutYs = new Map();
798-
799799
this._updateAnimatedNodeAttachment();
800800
}
801801

0 commit comments

Comments
 (0)