Permalink
Browse files

fix stickySectionHeader re-render issue

Summary:
Close #13500

I've been bothered by this issue for quite a long time, finally get some time to look into it.

I find the root cause is that after a prop of the native driven node is assigned with a plain value, if you set it to be a `Animated.Value` again , it will take no effect any more, so I just keep it be a `Animated.Value` all the time.

`value --> Animated.Value () --> value () --> Animated.Value ()`

ping janicduplessis
Closes #13885

Differential Revision: D5077094

Pulled By: javache

fbshipit-source-id: 3fb5d8196d94101200394b2bb2b95c776fb1d2f3
  • Loading branch information...
nihgwu authored and facebook-github-bot committed May 22, 2017
1 parent 784f89d commit 872fbc27fe87af89f7c52a973eb3b307f85dfa2d
Showing with 8 additions and 9 deletions.
  1. +8 −9 Libraries/Components/ScrollView/ScrollViewStickyHeader.js
@@ -61,8 +61,9 @@ class ScrollViewStickyHeader extends React.Component {
render() {
const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state;
const inputRange: Array<number> = [-1, 0];
const outputRange: Array<number> = [0, 0];
let translateY;
if (measured) {
// The interpolation looks like:
// - Negative scroll: no translation
@@ -74,8 +75,8 @@ class ScrollViewStickyHeader extends React.Component {
// header to continue scrolling up and make room for the next sticky header.
// In the case that there is no next header just translate equally to
// scroll indefinetly.
const inputRange = [-1, 0, layoutY];
const outputRange: Array<number> = [0, 0, 0];
inputRange.push(layoutY);
outputRange.push(0);
// Sometimes headers jump around so we make sure we don't violate the monotonic inputRange
// condition.
const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
@@ -86,14 +87,12 @@ class ScrollViewStickyHeader extends React.Component {
inputRange.push(layoutY + 1);
outputRange.push(1);
}
translateY = this.props.scrollAnimatedValue.interpolate({
inputRange,
outputRange,
});
} else {
translateY = 0;
}
const translateY = this.props.scrollAnimatedValue.interpolate({
inputRange,
outputRange,
});
const child = React.Children.only(this.props.children);
return (

0 comments on commit 872fbc2

Please sign in to comment.