diff --git a/src/core/ReactNativeComponent.js b/src/core/ReactNativeComponent.js index f888385e57..07371b2c8f 100644 --- a/src/core/ReactNativeComponent.js +++ b/src/core/ReactNativeComponent.js @@ -247,7 +247,8 @@ ReactNativeComponent.Mixin = { if (lastProp) { // Unset styles on `lastProp` but not on `nextProp`. for (styleName in lastProp) { - if (lastProp.hasOwnProperty(styleName) && !nextProp[styleName]) { + if (lastProp.hasOwnProperty(styleName) && + !nextProp.hasOwnProperty(styleName)) { styleUpdates = styleUpdates || {}; styleUpdates[styleName] = ''; } diff --git a/src/core/__tests__/ReactNativeComponent-test.js b/src/core/__tests__/ReactNativeComponent-test.js index 66fb845610..55e5f13ec6 100644 --- a/src/core/__tests__/ReactNativeComponent-test.js +++ b/src/core/__tests__/ReactNativeComponent-test.js @@ -70,7 +70,7 @@ describe('ReactNativeComponent', function() { }); it("should update styles when mutating style object", function() { - var styles = { display: 'none', fontFamily: 'Arial' }; + var styles = { display: 'none', fontFamily: 'Arial', opacity: 0 }; var stub = ReactTestUtils.renderIntoDocument(
); var stubStyle = stub.getDOMNode().style; @@ -82,12 +82,21 @@ describe('ReactNativeComponent', function() { stub.receiveProps({ style: styles }, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.fontFamily).toEqual('Arial'); + expect(stubStyle.opacity).toEqual('0'); styles.fontFamily = 'Helvetica'; stub.receiveProps({ style: styles }, transaction); expect(stubStyle.display).toEqual('block'); expect(stubStyle.fontFamily).toEqual('Helvetica'); + expect(stubStyle.opacity).toEqual('0'); + + styles.opacity = 0.5; + + stub.receiveProps({ style: styles }, transaction); + expect(stubStyle.display).toEqual('block'); + expect(stubStyle.fontFamily).toEqual('Helvetica'); + expect(stubStyle.opacity).toEqual('0.5'); }); it("should update styles if initially null", function() { diff --git a/src/dom/CSSPropertyOperations.js b/src/dom/CSSPropertyOperations.js index a7d5673dc1..ab46485f36 100644 --- a/src/dom/CSSPropertyOperations.js +++ b/src/dom/CSSPropertyOperations.js @@ -74,8 +74,10 @@ var CSSPropertyOperations = { if (!styles.hasOwnProperty(styleName)) { continue; } - var styleValue = styles[styleName]; - if (!styleValue) { + var styleValue = dangerousStyleValue(styleName, styles[styleName]); + if (styleValue) { + style[styleName] = styleValue; + } else { var expansion = CSSProperty.shorthandPropertyExpansions[styleName]; if (expansion) { // Shorthand property that IE8 won't like unsetting, so unset each @@ -86,8 +88,6 @@ var CSSPropertyOperations = { } else { style[styleName] = ''; } - } else { - style[styleName] = dangerousStyleValue(styleName, styleValue); } } }