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

[mmamoyco]

• [+] 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] });

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.57 and verify if the issue still exists.

The ":rewind:Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[mmamoyco]

The issue still exists on rn 0.57

[darylalexjohnson]

@godofmadness You ever resolve this issue?

[mmamoyco]

@darylalexjohnson nope, issue still exist.

[lindesvard]

Having similar issues..

[d2dindustries]

I am also having this issue. Any resolution in sight?

My guess is that Y translating the scrollview while scrolling throws off the difference calculation between the start scrollY coordinate and it's relative current scrollY coordinate. I assume this calculation is how the scrollview component does it's scrolling animation. If it's relative point is changing along with the y translation, that would explain the jumping.

[mateusfontana]

I'm also having this issue using RN 0.57.8.

It looks like it only happens when you have a decreasing outputRange, like [100, 0], or in OP's case, [0, -200]. It also happens with animated margins and paddings.

[kelset]

Does this still happen on 0.58?

[mateusfontana]

@kelset Yes. Here is a example tested on RN 58.1:

import React, { Component } from "react";
import { Animated, View, StyleSheet } from "react-native";

export default class Example extends Component {
  state = {
    scrollY: new Animated.Value(0)
  };

  render() {
    const marginTopAnimated = this.state.scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [100, 0],
      extrapolate: "clamp"
    });

    return (
      <View style={{ flex: 1, backgroundColor: "skyblue" }}>
        <Animated.ScrollView
          style={[
            styles.scrollView,
            {
              transform: [{ translateY: marginTopAnimated }]
            }
          ]}
          scrollEventThrottle={16}
          onScroll={Animated.event(
            [
              {
                nativeEvent: { contentOffset: { y: this.state.scrollY } }
              }
            ],
            { useNativeDriver: true }
          )}
        >
          <View style={{ height: 1000 }} />
        </Animated.ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: "#FFF",
    borderTopRightRadius: 28,
    borderTopLeftRadius: 28
  }
});

Just create a new project with react-native init and paste it on App.js. Here is a gif of the result:

[benevbright]

Hi, I'm maintaining react-navigation-collapsible. This issue is critical for my module and I tried many things for a workaround but no luck.

[benevbright]

https://github.com/facebook/react-native/issues/15445 It has not been fixed for a long time though.

[kelset]

Are there any PRs open to try and fix this? Or commits already on master?

[benevbright]

Can anyone tell me how to trigger re-compile react-native Android native? I want to try modifying some files. But It seems that it's using a build from somewhere else. ./gladlew clean nor deleting android/app/build do not work. Even I created a new project and deleted a couple of native java file just to break building, but it succeeds to build the project!

[davidkalosi]

any news on this issue, it's a pretty annoying and visually nasty bug

thx

[httol]

I think this is a serious issue, but nobody has any solution,hahah

[d2dindustries]

Is anyone looking into this?

[stockrel]

+1

[ddedic]

+1

[imyagnesh]

+1

[davidkalosi]

bump again, can we get at least a milestone / time frame when this will be addressed?

[alz10]

1 Eternity Later...............

This bug still exists on v0.59

[kelset]

can we get at least a milestone / time frame when this will be addressed?

AFAIK this issue is not in the roadmap - the best idea would be for someone actually concerned with this issue to investigate it more and submit a PR. A lot of work has been done to improve the PR to master timing so that would be the best way.

We are currently re-thinking how to approach issues so maybe in the next few days someone will be able to pick this up - but, again, since you are experiencing the issue you may have more time to dedicate to it.

re: @benevbright sorry just saw your question:

Can anyone tell me how to trigger re-compile react-native Android native?

There is a section in the docs about building from source -> https://facebook.github.io/react-native/docs/building-from-source

[alz10]

@benevbright Hello, I started using your react-navigation-collapsible unfortunately the bug on android where the header started to jump when scrolling slowly made it not suitable for production release. I made a hack way to avoid the "jumping bug" but i dont how to implement it on your library but i hope it helps

https://snack.expo.io/r1hwBv0wV - Here's the one with "Jumping Bug" https://snack.expo.io/Hk34BPCDN - Here's the one without the bug

I just add the following style

position: 'absolute',
zIndex: 999,
top: 0

i dont know but i think the position: 'absolute' removes the bug

[brunohkbx]

Any update on this?

[belgamo]

+1

[alz10]

They dont give a sh*t anymore to this bug. This is the reason why some RN devs are going flutter.

[brunohkbx]

Hey @kelset, how much time until Mid-Priority issues get fixed?

[kelset]

I don't know, as I mentioned previously:

AFAIK this issue is not in the roadmap - the best idea would be for someone actually concerned with this issue to investigate it more and submit a PR. A lot of work has been done to improve the PR to master timing so that would be the best way.

Also, we are trying to focus on getting an RC for 0.60 out this week, so 🤞, maybe it's fixed on master?

[wuchangming]

@AaaChiuuu ， I think it‘s not a good workaround. Demo without the bug just because header layout Animation do not affect the scrollview.
https://snack.expo.io/@wuchangming/bad-donut-x

[alishamae]

Unsubscribe

On Mon, May 27, 2019, 9:33 PM wuchangming [email protected] wrote:

@AaaChiuuu https://github.com/AaaChiuuu ， I think it‘s not a good workaround. Demo without the bug just because header layout Animation do not affect scrollview. https://snack.expo.io/@wuchangming/bad-donut-x

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/21801?email_source=notifications&email_token=AMDLXR7PCPTSA7JG2ACPZWLPXSDWTA5CNFSM4F3TABE2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWKXCLQ#issuecomment-496333102, or mute the thread https://github.com/notifications/unsubscribe-auth/AMDLXR6HQNBPNOT544GQFSLPXSDWTANCNFSM4F3TABEQ .