[Android][Animation] Interpolated translateY value causes android view to jump.
See original GitHub issue- [+] 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® Core™ 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] });
Issue Analytics
- State:
- Created 5 years ago
- Reactions:41
- Comments:107 (5 by maintainers)
Top GitHub Comments
The issue still exists on rn 0.57
@kelset Yes. Here is a example tested on RN 58.1:
Just create a new project with react-native init and paste it on App.js. Here is a gif of the result: