status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 https://github.com/facebook/react-native/pull/13885

Differential Revision: D5077094

Pulled By: javache

fbshipit-source-id: 3fb5d8196d94101200394b2bb2b95c776fb1d2f3
This commit is contained in:
Neo 2017-05-22 03:21:51 -07:00 committed by Facebook Github Bot
parent 784f89d0c9
commit 872fbc27fe
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Libraries/Components/ScrollView/ScrollViewStickyHeader.js
View File

@ -61,8 +61,9 @@ class ScrollViewStickyHeader extends React.Component {
render() { render() {
const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state; const {measured, layoutHeight, layoutY, nextHeaderLayoutY} = this.state;
const inputRange: Array<number> = [-1, 0];
const outputRange: Array<number> = [0, 0];
let translateY;
if (measured) { if (measured) {
// The interpolation looks like: // The interpolation looks like:
// - Negative scroll: no translation // - 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. // 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 // In the case that there is no next header just translate equally to
// scroll indefinetly. // scroll indefinetly.
const inputRange = [-1, 0, layoutY]; inputRange.push(layoutY);
const outputRange: Array<number> = [0, 0, 0]; outputRange.push(0);
// Sometimes headers jump around so we make sure we don't violate the monotonic inputRange // Sometimes headers jump around so we make sure we don't violate the monotonic inputRange
// condition. // condition.
const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight; const collisionPoint = (nextHeaderLayoutY || 0) - layoutHeight;
@ -86,14 +87,12 @@ class ScrollViewStickyHeader extends React.Component {
inputRange.push(layoutY + 1); inputRange.push(layoutY + 1);
outputRange.push(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); const child = React.Children.only(this.props.children);
return ( return (