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

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 6
  • Comments: 26 (1 by maintainers)

Most upvoted comments

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>
+46
dested on Dec 19, 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>
(...)
+5
bpampuch on Dec 1, 2019

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

+4
mattmattvanvoorst on Dec 18, 2019

@dested , saved my day, thanks!!!

+3
githuboftigran on Jan 19, 2020

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

+3
xqin on Oct 25, 2019

Same issue with rotate

react: 16.9.0
react-native: 0.61.5
+2
moh3n9595 on Mar 20, 2020

@dested u are my god.

+1
yoursinger on May 12, 2022

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.

+1
stale[bot] on Dec 25, 2020

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! 👍

+1
johannesschirrmeister on Feb 14, 2020

I can confirm translateY has the same issue.

+1
yuanfux on Feb 4, 2020

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

+1
betoharres on Oct 31, 2019
Read more comments on GitHub
← react-native: React Native (0.60.4) Android app crashes after splash screen when Hermes is enabled
react-native: React Native 0.62.* [TypeError: Network request failed] on file upload →