[fix] React@15: remove inline-style fallback values

React 15 has no way to handle fallback CSS values (for example, vendor
prefixed 'display:flex' values) in inline styles. This patch drops all
fallback values for inline styles at the cost of regressing browser
support (those without standard flexbox support will not layout React
Native components correctly).

Fix #131

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "babel-runtime": "^6.9.2",
     "fbjs": "^0.8.1",
-    "inline-style-prefix-all": "1.0.5",
+    "inline-style-prefix-all": "^2.0.2",
     "lodash": "^4.13.1",
     "react-textarea-autosize": "^4.0.2",
     "react-timer-mixin": "^0.13.3"

src/apis/Dimensions/index.js

@@ -6,7 +6,7 @@
  * @flow
  */
 
-import debounce from 'lodash.debounce'
+import debounce from 'lodash/debounce'
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'
 import invariant from 'fbjs/lib/invariant'
 

src/apis/StyleSheet/StyleSheetRegistry.js

@@ -26,7 +26,14 @@ const createCssDeclarations = (style) => {
   return Object.keys(style).map((prop) => {
     const property = hyphenate(prop)
     const value = style[prop]
-    return `${property}:${value};`
+    if (Array.isArray(value)) {
+      return value.reduce((acc, curr) => {
+        acc += `${property}:${curr};`
+        return acc
+      }, '')
+    } else {
+      return `${property}:${value};`
+    }
   }).sort().join('')
 }
 
@@ -91,9 +98,20 @@ class StyleSheetRegistry {
       }
     }
 
+    /**
+     * React 15 removed undocumented support for fallback values in
+     * inline-styles. For now, pick the last value and regress browser support
+     * for CSS features like flexbox.
+     */
+    const finalStyle = Object.keys(prefixAll(style)).reduce((acc, prop) => {
+      const value = style[prop]
+      acc[prop] = Array.isArray(value) ? value[value.length - 1] : value
+      return acc
+    }, {})
+
     return {
       className: classList.join(' '),
-      style: prefixAll(style)
+      style: finalStyle
     }
   }
 }