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.

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

Animated native driver does not animate scaleX or scaleY #3493

Closed
Thristhart opened this issue Oct 22, 2019 · 0 comments · Fixed by #3829
Closed

Animated native driver does not animate scaleX or scaleY #3493

Thristhart opened this issue Oct 22, 2019 · 0 comments · Fixed by #3829
Labels
API: Completion Area: Animation bug Partner: Xbox (label may be applied by bot based on author)

Comments

@Thristhart
Copy link
Contributor

Thristhart commented Oct 22, 2019

Environment

  1. react-native -v:
react-native-cli: 2.0.1
react-native: 0.60.6
  1. npm ls rnpm-plugin-windows:
rnpm-plugin-windows@0.3.7
  1. npm ls react-native-windows:
react-native-windows@0.60.0-vnext.41
  1. node -v:
v10.15.0
  1. npm -v:
6.4.1
  • Target Platform Version(s): 10.0.18362
  • Target Device(s): Desktop, Xbox
  • Visual Studio Version: 2019
  • Build Configuration: Debug and Release

Steps to Reproduce

  1. Pass a style to an Animated.View that contains a transform scaleX or scaleY set to an Animated.Value
  2. Use Animated.timing to animate that Animated.Value to a new value, with useNativeDriver: true

image

Expected Behavior

The View would be scaled along its X or Y axis.
image

Actual Behavior

Nothing happens. The scale doesn't appear to apply at all.
image

Reproducible Demo

const ScaleAnimationRepro = () => {
  const scaleAnimated = useRef(new Animated.Value(1));

  const animatedStyle = {
    transform: [{scaleX: scaleAnimated.current}],
    width: 64,
    height: 64,
  };

  const onPress = () => {
    Animated.timing(scaleAnimated.current, {
      duration: 400,
      toValue: 2,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  };

  return (
    <>
      <Animated.View style={animatedStyle}>
        <Text>Scales up</Text>
      </Animated.View>
      <TouchableOpacity onPress={onPress}>
        <Text>Press to toggle animation.</Text>
      </TouchableOpacity>
    </>
  );
};

(Note that this min repro was written as a function component. See #3460 for an example of how to rewrite a function component as a class component).

Additional context

@ghost ghost added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Oct 22, 2019
@chrisglein chrisglein added this to the vNext Milestone 4 milestone Oct 28, 2019
@chrisglein chrisglein added Partner: Xbox (label may be applied by bot based on author) and removed Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) labels Oct 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
API: Completion Area: Animation bug Partner: Xbox (label may be applied by bot based on author)
Projects
None yet
2 participants