[Android][Animation] Interpolated translateY value causes android view to jump.

• [+] Review the documentation: https://facebook.github.io/react-native
• [+] Search for existing issues: https://github.com/facebook/react-native/issues
• [+] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 862.68 MB / 16.00 GB
Shell: 3.2.57 - /bin/sh
Binaries:
Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node
Yarn: 1.10.1 - ~/.nvm/versions/node/v10.9.0/bin/yarn
npm: 6.2.0 - ~/.nvm/versions/node/v10.9.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.2/9C40b - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: ^0.57.3 => 0.57.3
npmGlobalPackages:
react-native-cli: 2.0.1

Description

I'm trying to implement collapsible header using React Native Animated API. using event method i get AnimatedHeaderValue and interpolate it into translateY value.
This value i apply to container of my listView (so listView moves vertically).
IOS animation works perfectly, but Android animation jumping and lagging when i scroll. I tried to inscrease scroll value and Android animation became more smooth.

This is scrollView container that passes onScroll to scrollView (listView)

<ScCompanyNewsFeedList optimizeHeight getRef={scrollView => { console.log("SCROLL VIEW", scrollView) this._scrollView = scrollView; }} scrollEventThrottle = { 2 } onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.AnimatedHeaderValue }}}], )} companyId={this.props.companyId}/> }

this is base container that contains tabs and my scrollView. It's moving when scroll.

<Animated.View style={[{flex: 1}, {transform: [{translateY: headerHeight}]}]}> ... </Animated.View>

Interpolation

const animationRange = this.AnimatedHeaderValue.interpolate({ inputRange: [0, scrollRange], outputRange: [0, 1], extrapolate: "clamp" }); const headerHeight2 = animationRange.interpolate({ inputRange: [0, 1], outputRange: [0, -200] });

Các điểm vào được báo cáo là Animated API của React Native, Animated.event trên scroll view và translateY được nội suy trên một Animated.View; hãy bắt đầu bằng cách tái hiện trường hợp Android từ snippet được cung cấp. Được xem là hoàn tất khi thao tác cuộn không còn khiến view Android bị giật hoặc trễ, trong khi hành vi tương đương trên iOS vẫn được giữ nguyên.