0.0.32

[fix] support for Animated transform styles (part 2)
Only add 'px' to numeric translate values
2026-04-01 22:42:19 +08:00 · 2016-07-06 18:50:25 -07:00 · 2016-07-06 18:48:53 -07:00 · 2016-07-06 18:33:12 -07:00 · 2016-07-06 17:16:55 -07:00
3 changed files with 20 additions and 4 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-native-web",
-  "version": "0.0.30",
+  "version": "0.0.32",
  "description": "React Native for Web",
  "main": "dist/index.js",
  "files": [
--- a/src/apis/StyleSheet/tests/processTransform-test.js
+++ b/src/apis/StyleSheet/tests/processTransform-test.js
@@ -8,13 +8,14 @@ suite('apis/StyleSheet/processTransform', () => {
    const style = {
      transform: [
        { scaleX: 20 },
+        { translateX: 20 },
        { rotate: '20deg' }
      ]
    }

    assert.deepEqual(
      processTransform(style),
-      { transform: 'scaleX(20) rotate(20deg)' }
+      { transform: 'scaleX(20) translateX(20px) rotate(20deg)' }
    )
  })

--- a/src/apis/StyleSheet/processTransform.js
+++ b/src/apis/StyleSheet/processTransform.js
@@ -1,7 +1,22 @@
+const translateProperties = {
+  translateX: true,
+  translateY: true,
+  translateZ: true
+}
+
+const processTransformValue = (key, value) => {
+  if (translateProperties[key] && typeof value === 'number') {
+    value += 'px';
+  }
+  return value;
+}
+
 // { scale: 2 } => 'scale(2)'
+// { translateX: 20 } => 'translateX(20px)'
 const mapTransform = (transform) => {
-  var key = Object.keys(transform)[0]
-  return `${key}(${transform[key]})`
+  const type = Object.keys(transform)[0]
+  const value = processTransformValue(type, transform[type])
+  return `${type}(${value})`
 }

 // [1,2,3,4,5,6] => 'matrix3d(1,2,3,4,5,6)'
Author	SHA1	Message	Date
Nicolas Gallagher	3564bbf840	0.0.32	2016-07-06 18:50:25 -07:00
Nicolas Gallagher	297b2e5afb	[fix] support for Animated transform styles (part 2) Only add 'px' to numeric translate values	2016-07-06 18:48:53 -07:00
Nicolas Gallagher	215697234e	0.0.31	2016-07-06 18:33:12 -07:00
Nicolas Gallagher	9efa7e94bd	[fix] support for Animated transform styles Animated uses 'setNativeProps' to update styles. This mutates the DOM without using React. But the code path was not adding 'px' units to transform values and browsers were ignoring the style. Fix #129	2016-07-06 17:16:55 -07:00