react-native >=0.61.0-rc.0 can not update View Component style translateX

Created on 25 Oct 2019  ·  17Comments  ·  Source: facebook/react-native

React Native version:

bad version of react-native info:

info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 1.60 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 21, 27
      Build Tools: 26.0.2, 27.0.3
  IDEs:
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.0-rc.0 => 0.61.0-rc.0 
  npmGlobalPackages:
    react-native-cli: 2.0.1

bad version of react-native info with react-native v0.61.2:

info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 915.73 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 21, 27
      Build Tools: 26.0.2, 27.0.3
  IDEs:
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1

good version of react-native info:

info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 1.97 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
    Yarn: 1.13.0 - ~/.nvm/versions/node/v8.9.4/bin/yarn
    npm: 5.7.1 - ~/.nvm/versions/node/v8.9.4/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 21, 27
      Build Tools: 26.0.2, 27.0.3
  IDEs:
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.6 => 0.60.6 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

clone follow repo and run the code.

POC:
bad version: https://github.com/xqin/react-native-view-transform-bad
bad version with react-native v0.61.2: https://github.com/xqin/react-native-view-transform-bad-v0.61.2
good version: https://github.com/xqin/react-native-view-transform-good

App.js

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      c: 60,
    }

    let n = 1;

    setInterval(() => {
      let { c } = this.state;

      c += n;

      if (c > 150) {
        n = -1;
      } else if (c < 60) {
        n = 1;
      }

      this.setState({c})
    }, 16)
  }

  render () {
    const { c } = this.state;

    return (
      <Fragment>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
            <Header />
            <View style={styles.body}>
                <View style={[styles.container, { backgroundColor: '#F00'}]}>
                  <View style={[styles.inner, {transform: [{translateX: c}]}]}>
                    <Text style={styles.welcome}>X: {c}</Text>
                  </View>
                </View>
                <View style={[styles.container, { backgroundColor: '#0F0'}]}>
                  <View style={[styles.inner, {transform: [{translateX: c}, {translateY: 0}]}]}>
                    <Text style={styles.welcome}>X: {c}, Y: 0</Text>
                  </View>
                </View>
                <View style={[styles.container, { backgroundColor: '#00F'}]}>
                  <View style={[styles.inner, {left: c}]}>
                    <Text style={styles.welcome}>Left: {c}</Text>
                  </View>
                </View>
              </View>
          </ScrollView>
        </SafeAreaView>
      </Fragment>
    );
  }
};

screenshot

image

Describe what you expected to happen:

The red block always stay in translateX: 60 since react-native version >=0.61.0-rc.0.

But in the previous version, its behavior was correct.

All version i have tested has been marked.

"0.61.2": "2019-10-02T19:07:56.322Z",        bad
"0.61.1": "2019-09-25T09:41:00.827Z",
"0.61.0": "2019-09-24T19:41:03.466Z",        bad
"0.60.6": "2019-09-24T15:21:26.986Z",        good
"0.61.0-rc.3": "2019-09-10T17:13:38.854Z",
"0.61.0-rc.2": "2019-09-04T16:09:03.174Z",   bad
"0.61.0-rc.0": "2019-08-27T14:41:13.822Z",   bad
"0.60.5": "2019-08-13T17:26:20.325Z",        good
"0.60.4": "2019-07-18T12:59:22.263Z",        good
"0.60.3": "2019-07-11T18:40:32.917Z",
"0.60.2": "2019-07-11T16:23:46.215Z",
"0.60.1": "2019-07-11T15:57:55.193Z",
"0.60.0": "2019-07-03T13:01:09.729Z",        good
Bug
Source
picture xqin
👍6

Most helpful comment

No idea what happened here, or why transforms don't work when they're based on state changes, but my hacky workaround is to just set a key on the view based on the changing state value. This forces a layout (which may not be ideal in all cases, but fine for mine).

<View
  key={this.state.results.length} // <~~~the "fix"
  style={{
    transform: [
      {
        translateY: this.state.results.length * 100,
      },
    ],
  }}
></View>
picture dested on 3 Dec 2019
👍20 🎉6 😄5 🚀4 ❤2 👎1

All 17 comments

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

The "Resolution: 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.

react-native-bot picture react-native-bot on 25 Oct 2019

@react-native-bot NO.
I do not think you understand my description.

xqin picture xqin on 25 Oct 2019
😄3

@xqin don't worry about the bot, your description is fine.

radko93 picture radko93 on 25 Oct 2019

I have this issue with translateY :( it broke after upgrading from 0.59 to 0.60

betoharres picture betoharres on 31 Oct 2019
👍1

same problem in 0.61.4
After update style translateX, the view's appear is no change

kufufu9 picture kufufu9 on 12 Nov 2019

@xqin - This bug is really annoying.

Since I had no issues with translations (also under RN 0.60+) when I animated transforms using react-native-reanimated, I wondered if switching from RN View to Reanimated View would help

And it turns out it works, so you can treat this as a temporal workaround

import Animated from 'react-native-reanimated';
(...)

<Animated.View style={[styles.inner, {transform: [{translateX: c}]}]}>
    <Text style={styles.welcome}>X: {c}</Text>
</Animated.View>
(...)
bpampuch picture bpampuch on 1 Dec 2019
👍3 🎉1 👎1

No idea what happened here, or why transforms don't work when they're based on state changes, but my hacky workaround is to just set a key on the view based on the changing state value. This forces a layout (which may not be ideal in all cases, but fine for mine).

<View
  key={this.state.results.length} // <~~~the "fix"
  style={{
    transform: [
      {
        translateY: this.state.results.length * 100,
      },
    ],
  }}
></View>
dested picture dested on 3 Dec 2019
👍20 🎉6 😄5 🚀4 ❤2 👎1

@dested 's comment doesn't nearly have the amount of likes it deserves. This cost me 2 hours of my life.

mattmattvanvoorst picture mattmattvanvoorst on 18 Dec 2019
❤3

@dested , saved my day, thanks!!!

githuboftigran picture githuboftigran on 19 Jan 2020
❤2

I can confirm translateY has the same issue.

yuanfux picture yuanfux on 4 Feb 2020
👍1

Experiencing the same issue with rotate. Setting the key was not an option for me as it resetted drawings on a rotated canvas, but @bpampuch's workaround (<Animated.View />) was a great help, thank you! 👍

johannesschirrmeister picture johannesschirrmeister on 14 Feb 2020
👍1

Same issue with rotate

react: 16.9.0
react-native: 0.61.5
moh3n9595 picture moh3n9595 on 20 Mar 2020
👍1

I had a similar issue when trying to apply dynamic rotation after migrating to RN 61+.

Using Animated.View from react-native-reanimated fixed it for me.

dimgrav picture dimgrav on 13 May 2020

I can confirm: on iOS the bug is present, on Android it works like expected.

react: 16.11.0
react-native: 0.62.2

Bug Scenario: passing a prop that define the animation state
The component renders correctly the state name in a Text component and the animation is triggered. But the animation/transition does not take place on the screen. It only gets executed when I tap the screen.

const statePosition = {
  preview: 120,
  open: 160,
  closed: 0,
};
// viewState can be 'preview', 'open', or 'closed'
const AnimationTestPreview = ({viewState}) => {
  const positionRef = useRef(new Animated.Value(statePosition.closed)).current;
  useEffect(() => {
    Animated.spring(positionRef, {
      toValue: statePosition[viewState],
      useNativeDriver: true,
    }).start();
  }, [viewState]);

  return (
    <Animated.View
      style={{
        position: 'absolute',
        height: 100,
        transform: [
          {
            translateY: positionRef,
          },
        ],
      }}>
      <Text>{viewState}</Text>
    </Animated.View>
  );
};

I don't know if it's related, but I leave this info here:
If viewState is changed by a setInterval the animation works fine. If it's changed by an async call (in my case I retrieve data from a remote source) it is causing the bug.

3plusalpha picture 3plusalpha on 29 May 2020

Update: apparently when I use debugging the bug appears, when I turn of debugging it works as expected

3plusalpha picture 3plusalpha on 30 May 2020

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

stale[bot] picture stale[bot] on 29 Aug 2020

Discussion

On Sat, Aug 29, 2020 at 17:01 stale[bot] notifications@github.com wrote:

>
>

Hey there, it looks like there has been no activity on this issue
recently. Has the issue been fixed, or does it still require the
community's attention? This issue may be closed if no further activity
occurs. You may also label this issue as a "Discussion" or add it to the
"Backlog" and I will leave it open. Thank you for your contributions.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/27003#issuecomment-683261173,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAJVBYC4NLDJ33T6XDGHHSTSDC7UXANCNFSM4JFAV3GQ
.

xqin picture xqin on 29 Aug 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  ·  3Comments
arunabha picture arunabha  ·  3Comments
grabbou picture grabbou  ·  3Comments
josev55 picture josev55  ·  3Comments
madwed picture madwed  ·  3Comments