Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Android: Animated.View opacity does not animate from 1 when using the native driver #25318

Closed
guiccbr opened this issue Jun 19, 2019 · 8 comments
Closed

Android: Animated.View opacity does not animate from 1 when using the native driver #25318

guiccbr opened this issue Jun 19, 2019 · 8 comments
Labels
API: Animated Bug Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@guiccbr
Copy link

guiccbr commented Jun 19, 2019

Hello

For some reason, it seems that an Animated.View does not animate opacity when the animated value starts from 1 when using the native driver. When using 1.1 or 0.9 (instead of exactly 1) - or when not using the native driver - the animation works fine.

Steps To Reproduce

  1. Have an animated value that goes from 1 to 0, as in the code below:
...
this.anim = new Animated.Value(1);
...
Animated.timing(this.anim, {
    duration: Constants.animation.duration,
    toValue: 0,
    useNativeDriver: true,
}).start();
  1. Use the animated value as the opacity of an Animated.View. Something like:
<Animated.View style={{ opacity: this.anim }}>
  <Text>{text}</Text>
</Animated.View>

I'd expect the Animated View to fade out when the animation runs, but no opacity change happens.

If a number larger or smaller than 1 is used, the animation works. Not reproducible on iOS.

Snack:

https://snack.expo.io/H1jsre_kB

React Native version:

info
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
      Memory: 91.55 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 26.0.0, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.2, 28.0.3
        System Images: android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
@guiccbr guiccbr added the Bug label Jun 19, 2019
@cabelitos cabelitos mentioned this issue Jun 22, 2019
Closed
@cabelitos
Copy link
Contributor

Hey guys, I created a PR to fix this bug. Comments/suggestions would be appreciated.
#25361
Thank you.

@guiccbr
Copy link
Author

guiccbr commented Jun 24, 2019 •
edited
Loading

Huge thanks for that, @cabelitos .

@sintylapse
Copy link

@guiccbr @cabelitos
So, this should be reopened since #25361 is reverted now

cc: @cpojer

@sintylapse
Copy link

@guiccbr have you created another issue already? If not, I can create it

@guiccbr
Copy link
Author

guiccbr commented Aug 27, 2019

@sintylapse, no, I haven't, can you please create then? tks.

@vdmtrv
Copy link
Contributor

vdmtrv commented Oct 7, 2019

@guiccbr @sintylapse @cabelitos has anyone looked into this recently? It still seems to be a bug on 0.60.4 and hardcoding the value of collapsable to false in the core isn't really an option.

@dajaffe
Copy link

dajaffe commented Dec 28, 2019

Just ran across this issue - has this been re-fixed yet in a later version?

M-i-k-e-l pushed a commit to M-i-k-e-l/react-native that referenced this issue Mar 10, 2020
@cabelitos @M-i-k-e-l
Set collapse property before starting an animation that uses the nati…
537ddb6 
…ve driver (facebook#25361)

Summary:
Depending on the style props of an Animated.View it may be optimised away
by the NativeViewHierarchyOptimizer, which will make the animation to
fail, because the native view is virtual (it does not exists
in the native view hierarchy).
Although the createAnimatedComponent already sets the collapsable property
based on the this._propsAnimated.__isNative flag, it won't work on all
cases, since the __isNative flag is only set when one starts the animation.
Which won't cause a re-render to occuor, thus not setting the collapsable
property to false.
In order to prevent this issue the HOC will just set the collapsable property
to false.

## Changelog
[Javascript] [Fixed] - Properly set collapsable to false before starting a nativeDriver animation
Pull Request resolved: facebook#25361

Test Plan:
### **Without this patch:**
Run the following App on an Android device without this patch and click start.
Outcome: The animation **will not** make the text invisible.

### **With this patch:**

Run the following App on an Android device with this patch and click start.
Outcome: The animation **will** make the text invisible.

```javascript
import React, { Component, ReactNode } from 'react';
import { View, Text, TouchableOpacity, Animated, StyleSheet, Easing } from 'react-native';

interface Props { }

const Constants = {
  animation: {
    duration: 500,
  },
};

const text =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed orci erat. Suspendisse feugiat elit gravida elit consequat ultrices. Sed sollicitudin ullamcorper molestie. Mauris a diam neque. Vivamus in lectus.';

class App extends Component<Props> {
  anim: any;

  constructor(props: Props) {
    super(props);
    this.anim = new Animated.Value(0);
  }

  handleStartPress = () => {
    this.anim.setValue(0);
    console.log('start');
    Animated.timing(this.anim, {
      duration: Constants.animation.duration,
      toValue: 1,
      easing: Easing.linear(),
      useNativeDriver: true,
    }).start();
  };

  render(): ReactNode {
    return (
      <View style={styles.container}>
        <Animated.View
          style={{
            opacity: this.anim.interpolate({
              inputRange: [0, 1],
              outputRange: [1, 0],
            }),
          }}>
          <Text>{text}</Text>
        </Animated.View>
        <TouchableOpacity
          style={styles.startButton}
          onPress={this.handleStartPress}>
          <Text style={styles.startButtonText}>START</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: 'white',
    flex: 1,
  },
  description: {
    marginTop: 20,
    paddingHorizontal: 10,
  },
  startButton: {
    alignItems: 'center',
    aspectRatio: 1,
    backgroundColor: 'yellow',
    borderRadius: 100,
    height: 50,
    justifyContent: 'center',
  },
  startButtonText: {
    fontSize: 10,
    fontWeight: 'bold',
  },
});

export default App;
```

Closes facebook#25318

Differential Revision: D15983822

Pulled By: cpojer

fbshipit-source-id: 1d790fbddc3103a2e34e114db956fa1fb465c1c9
@przpgo
Copy link

przpgo commented Jun 9, 2020

issue definitely happening to me as well, only in Android, ios works fine

@facebook facebook locked as resolved and limited conversation to collaborators Jun 28, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jun 28, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
API: Animated Bug Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
7 participants
@cabelitos @vdmtrv @guiccbr @dajaffe @sintylapse @react-native-bot @przpgo