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

Incorrect visual initialization of transform scale 0 #6278

Closed
Cryszon opened this issue Mar 3, 2016 · 19 comments

Comments

Projects
None yet
@Cryszon
Copy link

commented Mar 3, 2016

Initializing a component with transform: [{scale: 0}] visually initializes it as transfrom: [{scale: 1}]. However, when animating the component it animates as if the initial value was actually 0. Using a float (0.0) doesn't work either.

The example code below demonstrates this problem. Tested on Android using React Native 0.21.

Initially pressing "Animate to 0" doesn't animate the first box at all because its "real" scale is 0. Pressing the other two texts makes it jump to 0 and animate to x from there.

The example also shows how normal components look visually identical when given scales of 0 and 1.

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

export default class TransformExample extends Component {
  constructor() {
    super(arguments[0]);
    this.state = {
      value1: new Animated.Value(0),
      value2: new Animated.Value(0.5),
      value3: new Animated.Value(1),
    }
  }

  animateTo(val) {
    Animated.spring(this.state.value1, {toValue: val}).start();
    Animated.spring(this.state.value2, {toValue: val}).start();
    Animated.spring(this.state.value3, {toValue: val}).start();
  };

  render() {
    const boxStyle = {
      width: 150,
      height: 50,
      backgroundColor: "#3fc6ae",
      margin: 10,
    }

    return (
      <View style={{alignItems: "center"}}>
        <Text onPress={() => this.animateTo(0)}>Animate to 0</Text>
        <Text onPress={() => this.animateTo(1)}>Animate to 1</Text>
        <Text onPress={() => this.animateTo(1.2)}>Animate to 1.2</Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value1}]}
        ]}>
          Initial scale: 0
        </Animated.Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value2}]}
        ]}>
          Initial scale: 0.5
        </Animated.Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value3}]}
        ]}>
          Initial scale: 1
        </Animated.Text>

        <Text style={[
          boxStyle,
          {transform: [{scale: 0}]}
        ]}>
          Fixed scale: 0
        </Text>

        <Text style={[
          boxStyle,
          {transform: [{scale: 1}]}
        ]}>
          Fixed scale: 1
        </Text>
      </View>
    )
  }
}
@brentvatne

This comment has been minimized.

Copy link
Collaborator

commented Mar 6, 2016

@facebook-github-bot label Android

@brentvatne

This comment has been minimized.

Copy link
Collaborator

commented Mar 6, 2016

This works as expected on iOS, but indeed appears to be broken on Android.

iOS

screen shot 2016-03-06 at 3 06 34 pm

Android

screen shot 2016-03-06 at 3 06 15 pm

See: https://rnplay.org/apps/-NwWMw
@grabbou

This comment has been minimized.

Copy link
Collaborator

commented Mar 10, 2016

Also, same for height: 0 to height: 40 animation on Android, works normally on iOS. See http://stackoverflow.com/questions/35926051/why-does-rn-animated-timing-tovalue-of-0-not-animate for reference.

@9mm

This comment has been minimized.

Copy link

commented Mar 10, 2016

Have you found any workarounds? Setting it to 0.01 is the only thing I can find.

@grabbou

This comment has been minimized.

Copy link
Collaborator

commented Apr 22, 2016

The issue might lay somewhere deeper - height: 0 on a <View /> also does not seem to work (See closed #7133)

@m3vaz

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2016

Still an issue as of 0.31

m3vaz added a commit to usful/react-native-swipe-selector that referenced this issue Aug 12, 2016

@m3vaz

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2016

Setting scale to 0 seems to strip the component of other applied styles/transforms.
Modifying the original example:

import React, { Component } from 'react';
import {
  Animated,
  Easing,
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class TransformExample extends Component {
  constructor() {
    super(arguments[0]);
    this.state = {
      value1: new Animated.Value(0),
      value2: new Animated.Value(0.5),
      value3: new Animated.Value(1),
    }
  }

  animateTo(val) {
    Animated.timing(this.state.value1, {fromValue: 0, toValue: val, easing: Easing.linear}).start();
    Animated.timing(this.state.value2, {toValue: val}).start();
    Animated.timing(this.state.value3, {toValue: val}).start();
  };

  render() {
    const boxStyle = {
      width: 150,
      height: 50,
      backgroundColor: "#3fc6ae",
      margin: 10,
    }

    return (
      <View style={{alignItems: "center"}}>
        <Text onPress={() => this.animateTo(0)}>Animate to 0</Text>
        <Text onPress={() => this.animateTo(1)}>Animate to 1</Text>
        <Text onPress={() => this.animateTo(1.2)}>Animate to 1.2</Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value1}]}
        ]}>
          Initial scale: 0
        </Animated.Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value2}]}
        ]}>
          Initial scale: 0.5
        </Animated.Text>

        <Animated.Text style={[
          boxStyle,
          {transform: [{scale: this.state.value3}]}
        ]}>
          Initial scale: 1
        </Animated.Text>

        <Text style={[
          boxStyle,
          {transform: [{scale: 0}, {translateX: -50}, {rotate: '90deg'}]}
        ]}>
          Fixed scale: 0
        </Text>

        <Text style={[
          boxStyle,
          {transform: [{scale: 1}, {translateX: -50}, {rotate:'90deg'}]}
        ]}>
          Fixed scale: 1
        </Text>
      </View>
    )
  }
}
@LeoBakerHytch

This comment has been minimized.

Copy link

commented Oct 20, 2016

Still an issue as of 0.35

@funkysoul

This comment has been minimized.

Copy link

commented Jan 17, 2017

I'm experiencing a similar issue, bit different though.
I have an Image which I want to scale from 1 to 0 using an interpolation value on transform:[{scale:value}].

The scale animation runs through but as soon as it hits 0 the image is fully scaled again (back to scale: 1)

But setting the end value (0) to 0.0001 works fine.

This happens to me on Android and iOS with RN 0.40

@sreejithr sreejithr referenced this issue Jan 31, 2017

Closed

Fab Toolbar #99

4 of 4 tasks complete
@bsonntag

This comment has been minimized.

Copy link

commented Feb 8, 2017

Here is another example that doesn't even use Animated:

https://rnplay.org/apps/4O316Q

When a node has a scale set to 0, it seems to use it's last sibling's scale value.
As other people said, using values close to zero (e.g. 0.001), works fine.

Running the above example in the emulators has the same result:

iOS on the left, Android on the right:

ios-screenshot android-screenshot

@hramos

This comment has been minimized.

Copy link
Contributor

commented Jul 20, 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@hramos hramos added the Icebox label Jul 20, 2017

@hramos hramos closed this Jul 20, 2017

@dantman

This comment has been minimized.

Copy link
Contributor

commented Jul 21, 2017

It's been inactive because no-one has fixed it, the issue hasn't gone away! This is a big error that results from something simple and straightforward being done. Closing it makes no sense.

@hramos

This comment has been minimized.

Copy link
Contributor

commented Jul 21, 2017

Would you like to volunteer and provide a fix?

@dantman

This comment has been minimized.

Copy link
Contributor

commented Jul 21, 2017

How am I supposed to fix it? I have no clue where React Native implements low level transform style handling or how to debug it.

This is a bug that needs someone well versed in React Native's internals to fix.

@GibranPolonsky

This comment has been minimized.

Copy link

commented Aug 24, 2017

Thanks @9mm, your solution worked as we expected, but we still don't know why this is happening as it.

@peterjuras

This comment has been minimized.

Copy link
Contributor

commented Oct 30, 2017

Still an issue with react-native v0.49.3.

I think the issue should be reopened.

@hramos

This comment has been minimized.

Copy link
Contributor

commented Oct 30, 2017

Instead of re-opening, I recommend filing a new issue and filling out the template.

@rachelyao

This comment has been minimized.

Copy link

commented Mar 26, 2018

Still an issue with react-native v0.51.

@brentvatne

This comment has been minimized.

Copy link
Collaborator

commented Apr 3, 2018

Instead of re-opening, I recommend filing a new issue and filling out the template.

👍

@facebook facebook locked and limited conversation to collaborators Apr 3, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.