0.0.75

[change] Touchable pass through props
Add support for web-specific props to improve accessibility, e.g., ARIA properties (and declarative links). Fix #65
2026-03-30 17:34:05 +08:00 · 2017-02-27 23:11:30 -08:00 · 2017-02-27 17:05:38 -08:00 · 2017-02-27 16:40:54 -08:00 · 2017-02-27 15:59:18 -08:00 · 2017-02-27 15:59:18 -08:00
34 changed files with 947 additions and 2324 deletions
--- a/examples/components/Touchable/TouchableExample.js
+++ b/examples/components/Touchable/TouchableExample.js
@@ -318,7 +318,6 @@ var TouchableDisabled = React.createClass({
        <TouchableHighlight
          activeOpacity={1}
          disabled={true}
-          animationVelocity={0}
          underlayColor="rgb(210, 230, 255)"
          style={[styles.row, styles.block]}
          onPress={action('TouchableHighlight')}>
@@ -329,7 +328,6 @@ var TouchableDisabled = React.createClass({

        <TouchableHighlight
          activeOpacity={1}
-          animationVelocity={0}
          underlayColor="rgb(210, 230, 255)"
          style={[styles.row, styles.block]}
          onPress={action('TouchableHighlight')}>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-native-web",
-  "version": "0.0.74",
+  "version": "0.0.75",
  "description": "React Native for Web",
  "main": "dist/index.js",
  "files": [
--- a/src/apis/AppRegistry/tests/snapshots/renderApplication-test.js.snap
+++ b/src/apis/AppRegistry/tests/snapshots/renderApplication-test.js.snap
@@ -1,52 +1,54 @@
 exports[`apis/AppRegistry/renderApplication getApplication 1`] = `
-"<style id=\"react-native-stylesheet\">
-/* React Native StyleSheet*/
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
-body{margin:0}
-button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
-input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}
-@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}}
-@keyframes rn-ProgressBar-animation{0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}100%{-webkit-transform: translateX(400%); transform: translateX(400%);}}
-.rn-pointerEvents\\:auto,.rn-pointerEvents\\:box-only,.rn-pointerEvents\\:box-none *{pointer-events:auto}.rn-pointerEvents\\:none,.rn-pointerEvents\\:box-only *,.rn-pointerEvents\\:box-none{pointer-events:none}
-.rn-bottom\\:0px{bottom:0px}
-.rn-left\\:0px{left:0px}
-.rn-position\\:absolute{position:absolute}
-.rn-right\\:0px{right:0px}
-.rn-top\\:0px{top:0px}
-.rn-alignItems\\:stretch{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
-.rn-backgroundColor\\:transparent{background-color:transparent}
-.rn-borderTopStyle\\:solid{border-top-style:solid}
-.rn-borderRightStyle\\:solid{border-right-style:solid}
-.rn-borderBottomStyle\\:solid{border-bottom-style:solid}
-.rn-borderLeftStyle\\:solid{border-left-style:solid}
-.rn-borderTopWidth\\:0px{border-top-width:0px}
-.rn-borderRightWidth\\:0px{border-right-width:0px}
-.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
-.rn-borderLeftWidth\\:0px{border-left-width:0px}
-.rn-boxSizing\\:border-box{box-sizing:border-box}
-.rn-color\\:inherit{color:inherit}
-.rn-display\\:flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
-.rn-flexShrink\\:0{-webkit-flex-shrink:0px;flex-shrink:0}
-.rn-flexBasis\\:auto{-webkit-flex-basis:auto;flex-basis:auto}
-.rn-flexDirection\\:column{-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
-.rn-font\\:inherit{font:inherit}
-.rn-listStyle\\:none{list-style:none}
-.rn-marginTop\\:0px{margin-top:0px}
-.rn-marginRight\\:0px{margin-right:0px}
-.rn-marginBottom\\:0px{margin-bottom:0px}
-.rn-marginLeft\\:0px{margin-left:0px}
-.rn-minHeight\\:0px{min-height:0px}
-.rn-minWidth\\:0px{min-width:0px}
-.rn-paddingTop\\:0px{padding-top:0px}
-.rn-paddingRight\\:0px{padding-right:0px}
-.rn-paddingBottom\\:0px{padding-bottom:0px}
-.rn-paddingLeft\\:0px{padding-left:0px}
-.rn-position\\:relative{position:relative}
-.rn-textAlign\\:inherit{text-align:inherit}
-.rn-textDecoration\\:none{text-decoration:none}
-.rn-pointerEvents\\:auto{pointer-events:auto}
-.rn-pointerEvents\\:box-none{pointer-events:box-none}
-.rn-pointerEvents\\:box-only{pointer-events:box-only}
-.rn-pointerEvents\\:none{pointer-events:none}
+"<style id=\"react-native-stylesheet-static\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};100%{-webkit-transform:translateX(400%);transform:translateX(400%)};}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\"react-native-stylesheet\">
+.rn-bottom-1p0dtai{bottom:0px}
+.rn-left-1d2f490{left:0px}
+.rn-position-u8s1d{position:absolute}
+.rn-position-bnwqim{position:relative}
+.rn-right-zchlnj{right:0px}
+.rn-top-ipm5af{top:0px}
+.rn-alignItems-1oszu61{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-backgroundColor-wib322{background-color:transparent}
+.rn-borderTopStyle-1efd50x{border-top-style:solid}
+.rn-borderRightStyle-14skgim{border-right-style:solid}
+.rn-borderBottomStyle-rull8r{border-bottom-style:solid}
+.rn-borderLeftStyle-mm0ijv{border-left-style:solid}
+.rn-borderTopWidth-13yce4e{border-top-width:0px}
+.rn-borderRightWidth-fnigne{border-right-width:0px}
+.rn-borderBottomWidth-ndvcnb{border-bottom-width:0px}
+.rn-borderLeftWidth-gxnn5r{border-left-width:0px}
+.rn-boxSizing-deolkf{box-sizing:border-box}
+.rn-color-homxoj{color:inherit}
+.rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
+.rn-flexShrink-1qe8dj5{-webkit-flex-shrink:0;flex-shrink:0}
+.rn-flexBasis-1mlwlqe{-webkit-flex-basis:auto;flex-basis:auto}
+.rn-flexDirection-eqz5dr{-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-font-1lw9tu2{font:inherit}
+.rn-listStyle-1ebb2ja{list-style:none}
+.rn-marginTop-1mnahxq{margin-top:0px}
+.rn-marginRight-61z16t{margin-right:0px}
+.rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginLeft-11wrixw{margin-left:0px}
+.rn-minHeight-ifefl9{min-height:0px}
+.rn-minWidth-bcqeeo{min-width:0px}
+.rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.rn-paddingLeft-gy4na3{padding-left:0px}
+.rn-textAlign-1ttztb7{text-align:inherit}
+.rn-textDecoration-bauka4{text-decoration:none}
 </style>"
 `;
--- a/src/apis/StyleSheet/StyleManager.js
+++ b/src/apis/StyleSheet/StyleManager.js
@@ -0,0 +1,127 @@
+import asap from 'asap';
+import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
+import generateCss from './generateCss';
+import hash from './hash';
+import staticCss from './staticCss';
+
+const emptyObject = {};
+const STYLE_ELEMENT_ID = 'react-native-stylesheet';
+
+const createClassName = (prop, value) => {
+  const hashed = hash(prop + value);
+  return process.env.NODE_ENV !== 'production' ? `rn-${prop}-${hashed}` : `rn-${hashed}`;
+};
+
+const createCssRule = (className, prop, value) => {
+  const css = generateCss({ [prop]: value });
+  const selector = `.${className}`;
+  return `${selector}{${css}}`;
+};
+
+const pointerEvents = {
+  auto: createClassName('pointerEvents', 'auto'),
+  boxNone: createClassName('pointerEvents', 'box-none'),
+  boxOnly: createClassName('pointerEvents', 'box-only'),
+  none: createClassName('pointerEvents', 'none')
+};
+
+const pointerEventsCss =
+  `.${pointerEvents.auto}{pointer-events:auto;}\n` +
+  `.${pointerEvents.boxNone}{pointer-events:none;}\n` +
+  `.${pointerEvents.boxNone} *{pointer-events:auto;}\n` +
+  `.${pointerEvents.boxOnly}{pointer-events:auto;}\n` +
+  `.${pointerEvents.boxOnly} *{pointer-events:none;}\n` +
+  `.${pointerEvents.none}{pointer-events:none;}`;
+
+class StyleManager {
+  constructor() {
+    // custom pointer event values are implemented using descendent selectors,
+    // so we manually create the CSS and pre-register the declarations
+    const pointerEventsPropName = 'pointerEvents';
+    this.cache = {
+      byClassName: {
+        [pointerEvents.auto]: { prop: pointerEventsPropName, value: 'auto' },
+        [pointerEvents.boxNone]: { prop: pointerEventsPropName, value: 'box-none' },
+        [pointerEvents.boxOnly]: { prop: pointerEventsPropName, value: 'box-only' },
+        [pointerEvents.none]: { prop: pointerEventsPropName, value: 'none' }
+      },
+      byProp: {
+        pointerEvents: {
+          'auto': pointerEvents.auto,
+          'box-none': pointerEvents.boxNone,
+          'box-only': pointerEvents.boxOnly,
+          'none': pointerEvents.none
+        }
+      }
+    };
+
+    // on the client we check for an existing style sheet before injecting style sheets
+    if (canUseDOM) {
+      const prerenderedStyleSheet = document.getElementById(STYLE_ELEMENT_ID);
+      if (prerenderedStyleSheet) {
+        this.mainSheet = prerenderedStyleSheet;
+      } else {
+        document.head.insertAdjacentHTML('afterbegin', this.getStyleSheetHtml());
+        this.mainSheet = document.getElementById(STYLE_ELEMENT_ID);
+      }
+    }
+  }
+
+  getClassName(prop, value) {
+    const cache = this.cache.byProp;
+    return cache[prop] && cache[prop].hasOwnProperty(value) && cache[prop][value];
+  }
+
+  getDeclaration(className) {
+    const cache = this.cache.byClassName;
+    return cache[className] || emptyObject;
+  }
+
+  getStyleSheetHtml() {
+    const cache = this.cache.byProp;
+
+    const mainSheetTextContext = Object.keys(cache).reduce((rules, prop) => {
+      if (prop !== 'pointerEvents') {
+        Object.keys(cache[prop]).forEach((value) => {
+          const className = this.getClassName(prop, value);
+          rules.push(createCssRule(className, prop, value));
+        });
+      }
+      return rules;
+    }, []).join('\n');
+
+    const staticSheet = `<style id="react-native-stylesheet-static">\n${staticCss}\n${pointerEventsCss}\n</style>`;
+    const mainSheet = `<style id="${STYLE_ELEMENT_ID}">\n${mainSheetTextContext}\n</style>`;
+    return `${staticSheet}\n${mainSheet}`;
+  }
+
+  setDeclaration(prop, value) {
+    let className = this.getClassName(prop, value);
+    if (!className) {
+      className = createClassName(prop, value);
+      this._addToCache(className, prop, value);
+      if (canUseDOM) {
+        asap(() => {
+          const sheet = this.mainSheet.sheet;
+          // avoid injecting if the rule already exists (e.g., server rendered, hot reload)
+          if (this.mainSheet.textContent.indexOf(className) === -1) {
+            const rule = createCssRule(className, prop, value);
+            sheet.insertRule(rule, sheet.cssRules.length);
+          }
+        });
+      }
+    }
+    return className;
+  }
+
+  _addToCache(className, prop, value) {
+    const cache = this.cache;
+    if (!cache.byProp[prop]) {
+      cache.byProp[prop] = {};
+    }
+    cache.byProp[prop][value] = className;
+    cache.byClassName[className] = { prop, value };
+  }
+}
+
+module.exports = StyleManager;
--- a/src/apis/StyleSheet/StyleRegistry.js
+++ b/src/apis/StyleSheet/StyleRegistry.js
@@ -0,0 +1,158 @@
+/**
+ * WARNING: changes to this file in particular can cause significant changes to
+ * the results of render performance benchmarks.
+ */
+import createReactDOMStyle from './createReactDOMStyle';
+import flattenArray from '../../modules/flattenArray';
+import flattenStyle from './flattenStyle';
+import I18nManager from '../I18nManager';
+import mapKeyValue from '../../modules/mapKeyValue';
+import prefixInlineStyles from './prefixInlineStyles';
+import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
+import StyleManager from './StyleManager';
+
+const createCacheKey = (id) => {
+  const prefix = I18nManager.isRTL ? 'rtl' : 'ltr';
+  return `${prefix}-${id}`;
+};
+
+const classListToString = (list) => list.join(' ').trim();
+
+class StyleRegistry {
+  constructor() {
+    this.cache = {};
+    this.styleManager = new StyleManager();
+  }
+
+  getStyleSheetHtml() {
+    return this.styleManager.getStyleSheetHtml();
+  }
+
+  /**
+   * Registers and precaches a React Native style object to HTML class names
+   */
+  register(flatStyle) {
+    const id = ReactNativePropRegistry.register(flatStyle);
+    const key = createCacheKey(id);
+    const style = createReactDOMStyle(flatStyle);
+    const classList = mapKeyValue(style, (prop, value) => {
+      if (value != null) {
+        return this.styleManager.setDeclaration(prop, value);
+      }
+    });
+    const className = classList.join(' ').trim();
+    this.cache[key] = { classList, className };
+    return id;
+  }
+
+  /**
+   * Resolves a React Native style object to DOM attributes
+   */
+  resolve(reactNativeStyle) {
+    if (!reactNativeStyle) {
+      return undefined;
+    }
+
+    // fast and cachable
+    if (typeof reactNativeStyle === 'number') {
+      const key = createCacheKey(reactNativeStyle);
+      return this._resolveStyleIfNeeded(key, reactNativeStyle);
+    }
+
+    // resolve a plain RN style object
+    if (!Array.isArray(reactNativeStyle)) {
+      return this._resolveStyle(reactNativeStyle);
+    }
+
+    // flatten the style array
+    // cache resolved props when all styles are registered
+    // otherwise fallback to resolving
+    const flatArray = flattenArray(reactNativeStyle);
+    let isArrayOfNumbers = true;
+    for (let i = 0; i < flatArray.length; i++) {
+      if (typeof flatArray[i] !== 'number') {
+        isArrayOfNumbers = false;
+        break;
+      }
+    }
+    const key = isArrayOfNumbers ? createCacheKey(flatArray.join('-')) : null;
+    return this._resolveStyleIfNeeded(key, flatArray);
+  }
+
+  /**
+   * Resolves a React Native style object to DOM attributes, accounting for
+   * the existing styles applied to the DOM node
+   */
+  resolveStateful(reactNativeStyle, domClassList) {
+    const previousReactNativeStyle = {};
+    const preservedClassNames = [];
+
+    // Convert the existing classList to a React Native style and preserve any
+    // unrecognized classNames.
+    domClassList.forEach((className) => {
+      const { prop, value } = this.styleManager.getDeclaration(className);
+      if (prop) {
+        previousReactNativeStyle[prop] = value;
+      } else {
+        preservedClassNames.push(className);
+      }
+    });
+
+    // Resolve the two React Native styles.
+    const { classList, style = {} } = this.resolve([ previousReactNativeStyle, reactNativeStyle ]);
+
+    // Because this is used in stateful operations we need to remove any
+    // existing inline styles that would override the classNames.
+    classList.forEach((className) => {
+      const { prop } = this.styleManager.getDeclaration(className);
+      style[prop] = null;
+    });
+
+    classList.push(preservedClassNames);
+
+    const className = classListToString(classList);
+    return { className, style };
+  }
+
+  /**
+   * Resolves a React Native style object
+   */
+  _resolveStyle(reactNativeStyle) {
+    const domStyle = createReactDOMStyle(flattenStyle(reactNativeStyle));
+
+    const props = Object.keys(domStyle).reduce((props, styleProp) => {
+      const value = domStyle[styleProp];
+      if (value != null) {
+        const className = this.styleManager.getClassName(styleProp, value);
+        if (className) {
+          props.classList.push(className);
+        } else {
+          // 4x slower render
+          props.style[styleProp] = value;
+        }
+      }
+      return props;
+    }, { classList: [], style: {} });
+
+    const style = prefixInlineStyles(props.style);
+    props.className = classListToString(props.classList);
+    props.style = style;
+    return props;
+  }
+
+  /**
+  * Caching layer over 'resolveStyle'
+   */
+  _resolveStyleIfNeeded(key, style) {
+    if (key) {
+      if (!this.cache[key]) {
+        // slow: convert style object to props and cache
+        this.cache[key] = this._resolveStyle(style);
+      }
+      return this.cache[key];
+    }
+    return this._resolveStyle(style);
+  }
+}
+
+module.exports = StyleRegistry;
--- a/src/apis/StyleSheet/tests/StyleManager-test.js
+++ b/src/apis/StyleSheet/tests/StyleManager-test.js
@@ -0,0 +1,28 @@
+/* eslint-env jasmine, jest */
+
+import StyleManager from '../StyleManager';
+
+let styleManager;
+
+describe('apis/StyleSheet/StyleManager', () => {
+  beforeEach(() => {
+    styleManager = new StyleManager();
+  });
+
+  test('getClassName', () => {
+    expect(styleManager.getClassName('pointerEvents', 'box-only')).toMatchSnapshot();
+    const className = styleManager.setDeclaration('width', '100px');
+    expect(styleManager.getClassName('width', '100px')).toEqual(className);
+  });
+
+  test('getDeclaration', () => {
+    const className = styleManager.setDeclaration('width', '100px');
+    expect(styleManager.getDeclaration(className)).toEqual({ prop: 'width', value: '100px' });
+  });
+
+  test('getStyleSheetHtml', () => {
+    expect(styleManager.getStyleSheetHtml()).toMatchSnapshot();
+    styleManager.setDeclaration('width', '100px');
+    expect(styleManager.getStyleSheetHtml()).toMatchSnapshot();
+  });
+});
--- a/src/apis/StyleSheet/tests/StyleRegistry-test.js
+++ b/src/apis/StyleSheet/tests/StyleRegistry-test.js
@@ -0,0 +1,68 @@
+/* eslint-env jasmine, jest */
+
+import StyleRegistry from '../StyleRegistry';
+
+let styleRegistry;
+
+describe('apis/StyleSheet/StyleRegistry', () => {
+  beforeEach(() => {
+    styleRegistry = new StyleRegistry();
+  });
+
+  test('register', () => {
+    const style = { opacity: 0 };
+    const id = styleRegistry.register(style);
+    expect(typeof id === 'number').toBe(true);
+  });
+
+  describe('resolve', () => {
+    const styleA = { borderWidth: 0, borderColor: 'red', width: 100 };
+    const styleB = { position: 'absolute', left: 50, pointerEvents: 'box-only' };
+    const styleC = { width: 200 };
+
+    const testResolve = (a, b, c) => {
+      // no common properties, different resolving order, same result
+      const resolve1 = styleRegistry.resolve([ a, b ]);
+      expect(resolve1).toMatchSnapshot();
+      const resolve2 = styleRegistry.resolve([ b, a ]);
+      expect(resolve1).toEqual(resolve2);
+
+      // common properties, different resolving order, different result
+      const resolve3 = styleRegistry.resolve([ a, b, c ]);
+      expect(resolve3).toMatchSnapshot();
+      const resolve4 = styleRegistry.resolve([ c, a, b ]);
+      expect(resolve4).toMatchSnapshot();
+      expect(resolve3).not.toEqual(resolve4);
+    };
+
+    test('with register, resolves to className', () => {
+      const a = styleRegistry.register(styleA);
+      const b = styleRegistry.register(styleB);
+      const c = styleRegistry.register(styleC);
+      testResolve(a, b, c);
+    });
+
+    test('with register, resolves to mixed', () => {
+      const a = styleA;
+      const b = styleRegistry.register(styleB);
+      const c = styleRegistry.register(styleC);
+      testResolve(a, b, c);
+    });
+
+    test('without register, resolves to inline styles', () => {
+      testResolve(styleA, styleB, styleC);
+    });
+  });
+
+  test('resolveStateful', () => {
+    // generate a classList to act as pre-existing DOM state
+    const mockStyle = styleRegistry.register({ borderWidth: 0, borderColor: 'red', width: 100 });
+    const { classList: domClassList } = styleRegistry.resolve(mockStyle);
+    domClassList.unshift('external-className');
+    expect(domClassList).toMatchSnapshot();
+
+    // test result
+    const result = styleRegistry.resolveStateful({ borderWidth: 1, opacity: 1 }, domClassList);
+    expect(result).toMatchSnapshot();
+  });
+});
--- a/src/apis/StyleSheet/tests/snapshots/StyleManager-test.js.snap
+++ b/src/apis/StyleSheet/tests/snapshots/StyleManager-test.js.snap
@@ -0,0 +1,41 @@
+exports[`apis/StyleSheet/StyleManager getClassName 1`] = `"rn-pointerEvents-ah5dr5"`;
+
+exports[`apis/StyleSheet/StyleManager getStyleSheetHtml 1`] = `
+"<style id=\"react-native-stylesheet-static\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};100%{-webkit-transform:translateX(400%);transform:translateX(400%)};}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\"react-native-stylesheet\">
+
+</style>"
+`;
+
+exports[`apis/StyleSheet/StyleManager getStyleSheetHtml 2`] = `
+"<style id=\"react-native-stylesheet-static\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};100%{-webkit-transform:translateX(400%);transform:translateX(400%)};}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\"react-native-stylesheet\">
+.rn-width-b8lwoo{width:100px}
+</style>"
+`;
--- a/src/apis/StyleSheet/tests/snapshots/StyleRegistry-test.js.snap
+++ b/src/apis/StyleSheet/tests/snapshots/StyleRegistry-test.js.snap
@@ -0,0 +1,227 @@
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 1`] = `
+Object {
+  "classList": Array [
+    "rn-borderTopColor-1gxhl28",
+    "rn-borderRightColor-knoah9",
+    "rn-borderBottomColor-1ani3fp",
+    "rn-borderLeftColor-ribj9x",
+    "rn-borderTopWidth-13yce4e",
+    "rn-borderRightWidth-fnigne",
+    "rn-borderBottomWidth-ndvcnb",
+    "rn-borderLeftWidth-gxnn5r",
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+    "rn-width-b8lwoo",
+  ],
+  "className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-b8lwoo",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 2`] = `
+Object {
+  "classList": Array [
+    "rn-borderTopColor-1gxhl28",
+    "rn-borderRightColor-knoah9",
+    "rn-borderBottomColor-1ani3fp",
+    "rn-borderLeftColor-ribj9x",
+    "rn-borderTopWidth-13yce4e",
+    "rn-borderRightWidth-fnigne",
+    "rn-borderBottomWidth-ndvcnb",
+    "rn-borderLeftWidth-gxnn5r",
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+    "rn-width-l0gwng",
+  ],
+  "className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-l0gwng",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to className 3`] = `
+Object {
+  "classList": Array [
+    "rn-borderTopColor-1gxhl28",
+    "rn-borderRightColor-knoah9",
+    "rn-borderBottomColor-1ani3fp",
+    "rn-borderLeftColor-ribj9x",
+    "rn-borderTopWidth-13yce4e",
+    "rn-borderRightWidth-fnigne",
+    "rn-borderBottomWidth-ndvcnb",
+    "rn-borderLeftWidth-gxnn5r",
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+    "rn-width-b8lwoo",
+  ],
+  "className": "rn-borderTopColor-1gxhl28 rn-borderRightColor-knoah9 rn-borderBottomColor-1ani3fp rn-borderLeftColor-ribj9x rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-b8lwoo",
+  "style": Object {},
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 1`] = `
+Object {
+  "classList": Array [
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+  ],
+  "className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 2`] = `
+Object {
+  "classList": Array [
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+    "rn-width-l0gwng",
+  ],
+  "className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d rn-width-l0gwng",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve with register, resolves to mixed 3`] = `
+Object {
+  "classList": Array [
+    "rn-left-1tsx3h3",
+    "rn-pointerEvents-ah5dr5",
+    "rn-position-u8s1d",
+  ],
+  "className": "rn-left-1tsx3h3 rn-pointerEvents-ah5dr5 rn-position-u8s1d",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 1`] = `
+Object {
+  "classList": Array [
+    "rn-pointerEvents-ah5dr5",
+  ],
+  "className": "rn-pointerEvents-ah5dr5",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "position": "absolute",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 2`] = `
+Object {
+  "classList": Array [
+    "rn-pointerEvents-ah5dr5",
+  ],
+  "className": "rn-pointerEvents-ah5dr5",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "position": "absolute",
+    "width": "200px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolve without register, resolves to inline styles 3`] = `
+Object {
+  "classList": Array [
+    "rn-pointerEvents-ah5dr5",
+  ],
+  "className": "rn-pointerEvents-ah5dr5",
+  "style": Object {
+    "borderBottomColor": "red",
+    "borderBottomWidth": "0px",
+    "borderLeftColor": "red",
+    "borderLeftWidth": "0px",
+    "borderRightColor": "red",
+    "borderRightWidth": "0px",
+    "borderTopColor": "red",
+    "borderTopWidth": "0px",
+    "left": "50px",
+    "position": "absolute",
+    "width": "100px",
+  },
+}
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolveStateful 1`] = `
+Array [
+  "external-className",
+  "rn-borderTopColor-1gxhl28",
+  "rn-borderRightColor-knoah9",
+  "rn-borderBottomColor-1ani3fp",
+  "rn-borderLeftColor-ribj9x",
+  "rn-borderTopWidth-13yce4e",
+  "rn-borderRightWidth-fnigne",
+  "rn-borderBottomWidth-ndvcnb",
+  "rn-borderLeftWidth-gxnn5r",
+  "rn-width-b8lwoo",
+]
+`;
+
+exports[`apis/StyleSheet/StyleRegistry resolveStateful 2`] = `
+Object {
+  "className": "rn-borderBottomColor-1ani3fp rn-borderBottomWidth-ndvcnb rn-borderLeftColor-ribj9x rn-borderLeftWidth-gxnn5r rn-borderRightColor-knoah9 rn-borderRightWidth-fnigne rn-borderTopColor-1gxhl28 rn-borderTopWidth-13yce4e rn-width-b8lwoo external-className",
+  "style": Object {
+    "borderBottomColor": null,
+    "borderBottomWidth": null,
+    "borderLeftColor": null,
+    "borderLeftWidth": null,
+    "borderRightColor": null,
+    "borderRightWidth": null,
+    "borderTopColor": null,
+    "borderTopWidth": null,
+    "opacity": 1,
+    "width": null,
+  },
+}
+`;
--- a/src/apis/StyleSheet/tests/snapshots/index-test.js.snap
+++ b/src/apis/StyleSheet/tests/snapshots/index-test.js.snap
@@ -1,14 +1,23 @@
 exports[`apis/StyleSheet renderToString 1`] = `
-"<style id=\"react-native-stylesheet\">
-.rn-borderTopColor\\:red{border-top-color:red}
-.rn-borderRightColor\\:red{border-right-color:red}
-.rn-borderBottomColor\\:red{border-bottom-color:red}
-.rn-borderLeftColor\\:red{border-left-color:red}
-.rn-borderTopWidth\\:0px{border-top-width:0px}
-.rn-borderRightWidth\\:0px{border-right-width:0px}
-.rn-borderBottomWidth\\:0px{border-bottom-width:0px}
-.rn-borderLeftWidth\\:0px{border-left-width:0px}
-.rn-left\\:50px{left:50px}
-.rn-position\\:absolute{position:absolute}
+"<style id=\"react-native-stylesheet-static\">
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
+body{margin:0;}
+button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
+input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
+@keyframes rn-ActivityIndicator-animation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
+@keyframes rn-ProgressBar-animation{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};100%{-webkit-transform:translateX(400%);transform:translateX(400%)};}
+.rn-pointerEvents-105ug2t{pointer-events:auto;}
+.rn-pointerEvents-12vffkv{pointer-events:none;}
+.rn-pointerEvents-12vffkv *{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5{pointer-events:auto;}
+.rn-pointerEvents-ah5dr5 *{pointer-events:none;}
+.rn-pointerEvents-633pao{pointer-events:none;}
+</style>
+<style id=\"react-native-stylesheet\">
+.rn-bottom-1p0dtai{bottom:0px}
+.rn-left-1d2f490{left:0px}
+.rn-position-u8s1d{position:absolute}
+.rn-right-zchlnj{right:0px}
+.rn-top-ipm5af{top:0px}
 </style>"
 `;
--- a/src/apis/StyleSheet/tests/snapshots/registry-test.js.snap
+++ b/src/apis/StyleSheet/tests/snapshots/registry-test.js.snap
@@ -1,179 +0,0 @@
-exports[`apis/StyleSheet/registry resolve with register, resolves to className 1`] = `
-Object {
-  "className": "
-rn-borderTopColor:red
-rn-borderRightColor:red
-rn-borderBottomColor:red
-rn-borderLeftColor:red
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-left:50px
-rn-pointerEvents:box-only
-rn-position:absolute
-rn-width:100px",
-  "style": Object {},
-}
-`;
-
-exports[`apis/StyleSheet/registry resolve with register, resolves to className 2`] = `
-Object {
-  "className": "
-rn-borderTopColor:red
-rn-borderRightColor:red
-rn-borderBottomColor:red
-rn-borderLeftColor:red
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-left:50px
-rn-pointerEvents:box-only
-rn-position:absolute
-rn-width:200px",
-  "style": Object {},
-}
-`;
-
-exports[`apis/StyleSheet/registry resolve with register, resolves to className 3`] = `
-Object {
-  "className": "
-rn-borderTopColor:red
-rn-borderRightColor:red
-rn-borderBottomColor:red
-rn-borderLeftColor:red
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-left:50px
-rn-pointerEvents:box-only
-rn-position:absolute
-rn-width:100px",
-  "style": Object {},
-}
-`;
-
-exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 1`] = `
-Object {
-  "className": "
-rn-left:50px
-rn-pointerEvents:box-only
-rn-position:absolute",
-  "style": Object {
-    "borderBottomColor": "red",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "red",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "red",
-    "borderRightWidth": "0px",
-    "borderTopColor": "red",
-    "borderTopWidth": "0px",
-    "width": "100px",
-  },
-}
-`;
-
-exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 2`] = `
-Object {
-  "className": "
-rn-left:50px
-rn-pointerEvents:box-only
-rn-position:absolute
-rn-width:200px",
-  "style": Object {
-    "borderBottomColor": "red",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "red",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "red",
-    "borderRightWidth": "0px",
-    "borderTopColor": "red",
-    "borderTopWidth": "0px",
-  },
-}
-`;
-
-exports[`apis/StyleSheet/registry resolve with register, resolves to mixed 3`] = `
-Object {
-  "className": "
-rn-left:50px
-rn-pointerEvents:box-only
-rn-position:absolute",
-  "style": Object {
-    "borderBottomColor": "red",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "red",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "red",
-    "borderRightWidth": "0px",
-    "borderTopColor": "red",
-    "borderTopWidth": "0px",
-    "width": "100px",
-  },
-}
-`;
-
-exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 1`] = `
-Object {
-  "className": "
-",
-  "style": Object {
-    "borderBottomColor": "red",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "red",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "red",
-    "borderRightWidth": "0px",
-    "borderTopColor": "red",
-    "borderTopWidth": "0px",
-    "left": "50px",
-    "pointerEvents": "box-only",
-    "position": "absolute",
-    "width": "100px",
-  },
-}
-`;
-
-exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 2`] = `
-Object {
-  "className": "
-",
-  "style": Object {
-    "borderBottomColor": "red",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "red",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "red",
-    "borderRightWidth": "0px",
-    "borderTopColor": "red",
-    "borderTopWidth": "0px",
-    "left": "50px",
-    "pointerEvents": "box-only",
-    "position": "absolute",
-    "width": "200px",
-  },
-}
-`;
-
-exports[`apis/StyleSheet/registry resolve without register, resolves to inline styles 3`] = `
-Object {
-  "className": "
-",
-  "style": Object {
-    "borderBottomColor": "red",
-    "borderBottomWidth": "0px",
-    "borderLeftColor": "red",
-    "borderLeftWidth": "0px",
-    "borderRightColor": "red",
-    "borderRightWidth": "0px",
-    "borderTopColor": "red",
-    "borderTopWidth": "0px",
-    "left": "50px",
-    "pointerEvents": "box-only",
-    "position": "absolute",
-    "width": "100px",
-  },
-}
-`;
--- a/src/apis/StyleSheet/tests/index-test.js
+++ b/src/apis/StyleSheet/tests/index-test.js
@@ -1,7 +1,6 @@
 /* eslint-env jasmine, jest */

 import StyleSheet from '..';
-import StyleRegistry from '../registry';

 const isPlainObject = (x) => {
  const toString = Object.prototype.toString;
@@ -15,10 +14,6 @@ const isPlainObject = (x) => {
 };

 describe('apis/StyleSheet', () => {
-  beforeEach(() => {
-    StyleRegistry.reset();
-  });
-
  test('absoluteFill', () => {
    expect(Number.isInteger(StyleSheet.absoluteFill) === true).toBeTruthy();
  });
@@ -29,7 +24,7 @@ describe('apis/StyleSheet', () => {

  describe('create', () => {
    test('replaces styles with numbers', () => {
-      const style = StyleSheet.create({ root: { opacity: 1 } });
+      const style = StyleSheet.create({ root: { position: 'absolute' } });
      expect(Number.isInteger(style.root) === true).toBeTruthy();
    });
  });
@@ -43,16 +38,6 @@ describe('apis/StyleSheet', () => {
  });

  test('renderToString', () => {
-    StyleSheet.create({
-      a: {
-        borderWidth: 0,
-        borderColor: 'red'
-      },
-      b: {
-        position: 'absolute',
-        left: 50
-      }
-    });
    expect(StyleSheet.renderToString()).toMatchSnapshot();
  });
 });
--- a/src/apis/StyleSheet/tests/injector.js
+++ b/src/apis/StyleSheet/tests/injector.js
@@ -1,22 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import injector from '../injector';
-
-describe('apis/StyleSheet/injector', () => {
-  beforeEach(() => {
-    document.head.insertAdjacentHTML('afterbegin', `
-      <style id="react-native-stylesheet">
-        .rn-alignItems\\:stretch{align-items:stretch;}
-        .rn-position\\:top{position:top;}
-      </style>
-    `);
-  });
-
-  test('hydrates from SSR', () => {
-    const classList = injector.getClassNames();
-    expect(classList).toEqual({
-      'rn-alignItems\\:stretch': true,
-      'rn-position\\:top': true
-    });
-  });
-});
--- a/src/apis/StyleSheet/tests/registry-test.js
+++ b/src/apis/StyleSheet/tests/registry-test.js
@@ -1,54 +0,0 @@
-/* eslint-env jasmine, jest */
-
-import StyleRegistry from '../registry';
-
-describe('apis/StyleSheet/registry', () => {
-  beforeEach(() => {
-    StyleRegistry.reset();
-  });
-
-  test('register', () => {
-    const style = { opacity: 0 };
-    const id = StyleRegistry.register(style);
-    expect(typeof id === 'number').toBe(true);
-  });
-
-  describe('resolve', () => {
-    const styleA = { borderWidth: 0, borderColor: 'red', width: 100 };
-    const styleB = { position: 'absolute', left: 50, pointerEvents: 'box-only' };
-    const styleC = { width: 200 };
-
-    const testResolve = (a, b, c) => {
-      // no common properties, different resolving order, same result
-      const resolve1 = StyleRegistry.resolve([ a, b ]);
-      expect(resolve1).toMatchSnapshot();
-      const resolve2 = StyleRegistry.resolve([ b, a ]);
-      expect(resolve1).toEqual(resolve2);
-
-      // common properties, different resolving order, different result
-      const resolve3 = StyleRegistry.resolve([ a, b, c ]);
-      expect(resolve3).toMatchSnapshot();
-      const resolve4 = StyleRegistry.resolve([ c, a, b ]);
-      expect(resolve4).toMatchSnapshot();
-      expect(resolve3).not.toEqual(resolve4);
-    };
-
-    test('with register, resolves to className', () => {
-      const a = StyleRegistry.register(styleA);
-      const b = StyleRegistry.register(styleB);
-      const c = StyleRegistry.register(styleC);
-      testResolve(a, b, c);
-    });
-
-    test('with register, resolves to mixed', () => {
-      const a = styleA;
-      const b = StyleRegistry.register(styleB);
-      const c = StyleRegistry.register(styleC);
-      testResolve(a, b, c);
-    });
-
-    test('without register, resolves to inline styles', () => {
-      testResolve(styleA, styleB, styleC);
-    });
-  });
-});
--- a/src/apis/StyleSheet/expandStyle.js
+++ b/src/apis/StyleSheet/expandStyle.js
@@ -60,7 +60,9 @@ const createReducer = (style, styleProps) => {
      }
      // ignore React Native styles
      case 'elevation':
-      case 'resizeMode': {
+      case 'overlayColor':
+      case 'resizeMode':
+      case 'tintColor': {
        break;
      }
      case 'flex': {
--- a/src/apis/StyleSheet/hash.js
+++ b/src/apis/StyleSheet/hash.js
@@ -0,0 +1,53 @@
+/* eslint-disable */
+/**
+ * JS Implementation of MurmurHash2
+ *
+ * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
+ * @see http://github.com/garycourt/murmurhash-js
+ * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
+ * @see http://sites.google.com/site/murmurhash/
+ *
+ * @param {string} str ASCII only
+ * @param {number} seed Positive integer only
+ * @return {number} 32-bit positive integer hash
+ */
+
+function murmurhash2_32_gc(str, seed) {
+  var
+    l = str.length,
+    h = seed ^ l,
+    i = 0,
+    k;
+
+  while (l >= 4) {
+    k =
+      ((str.charCodeAt(i) & 0xff)) |
+      ((str.charCodeAt(++i) & 0xff) << 8) |
+      ((str.charCodeAt(++i) & 0xff) << 16) |
+      ((str.charCodeAt(++i) & 0xff) << 24);
+
+    k = (((k & 0xffff) * 0x5bd1e995) + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16));
+    k ^= k >>> 24;
+    k = (((k & 0xffff) * 0x5bd1e995) + ((((k >>> 16) * 0x5bd1e995) & 0xffff) << 16));
+
+  h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16)) ^ k;
+
+    l -= 4;
+    ++i;
+  }
+
+  switch (l) {
+  case 3: h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+  case 2: h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+  case 1: h ^= (str.charCodeAt(i) & 0xff);
+          h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16));
+  }
+
+  h ^= h >>> 13;
+  h = (((h & 0xffff) * 0x5bd1e995) + ((((h >>> 16) * 0x5bd1e995) & 0xffff) << 16));
+  h ^= h >>> 15;
+
+  return h >>> 0;
+}
+
+module.exports = (str) => murmurhash2_32_gc(str, 1).toString(36);
--- a/src/apis/StyleSheet/hyphenate.js
+++ b/src/apis/StyleSheet/hyphenate.js
@@ -1,3 +1,12 @@
-const RE_1 = /([A-Z])/g;
-const RE_2 = /^ms-/;
-module.exports = (s) => s.replace(RE_1, '-$1').toLowerCase().replace(RE_2, '-ms-');
+const cache = {};
+const MS_REGEXP = /^ms-/;
+const UPPERCASE_REGEXP = /([A-Z])/g;
+
+const hyphenateStyleProp = (prop) => {
+  if (!cache.hasOwnProperty(prop)) {
+    cache[prop] = prop.replace(UPPERCASE_REGEXP, '-$&').toLowerCase().replace(MS_REGEXP, '-ms-');
+  }
+  return cache[prop];
+};
+
+module.exports = hyphenateStyleProp;
--- a/src/apis/StyleSheet/index.js
+++ b/src/apis/StyleSheet/index.js
@@ -1,14 +1,11 @@
 import flattenStyle from './flattenStyle';
-import initialize from './initialize';
-import injector from './injector';
 import StyleRegistry from './registry';

-initialize();
-
 const absoluteFillObject = { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 };
+const absoluteFill = StyleRegistry.register(absoluteFillObject);

 module.exports = {
-  absoluteFill: StyleRegistry.register(absoluteFillObject),
+  absoluteFill,
  absoluteFillObject,
  create(styles) {
    const result = {};
@@ -22,5 +19,7 @@ module.exports = {
  },
  hairlineWidth: 1,
  flatten: flattenStyle,
-  renderToString: injector.getStyleSheetHtml
+  renderToString() {
+    return StyleRegistry.getStyleSheetHtml();
+  }
 };
--- a/src/apis/StyleSheet/initialize.js
+++ b/src/apis/StyleSheet/initialize.js
@@ -1,39 +0,0 @@
-import injector from './injector';
-import StyleRegistry from './registry';
-
-const initialize = () => {
-  injector.addRule(
-    'reset',
-    '/* React Native StyleSheet*/\n' +
-    'html{' +
-      'font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;' +
-      '-webkit-tap-highlight-color:rgba(0,0,0,0)' +
-    '}\n' +
-    'body{margin:0}\n' +
-    'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}\n' +
-    'input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,' +
-    'input::-webkit-search-cancel-button,input::-webkit-search-decoration,' +
-    'input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}'
-  );
-  injector.addRule(
-    'keyframes',
-    '@keyframes rn-ActivityIndicator-animation{' +
-      '0%{-webkit-transform: rotate(0deg); transform: rotate(0deg);}' +
-      '100%{-webkit-transform: rotate(360deg); transform: rotate(360deg);}' +
-    '}\n' +
-    '@keyframes rn-ProgressBar-animation{' +
-      '0%{-webkit-transform: translateX(-100%); transform: translateX(-100%);}' +
-      '100%{-webkit-transform: translateX(400%); transform: translateX(400%);}' +
-    '}'
-  );
-  injector.addRule(
-    'pointer-events',
-    '.rn-pointerEvents\\:auto,.rn-pointerEvents\\:box-only,.rn-pointerEvents\\:box-none *{pointer-events:auto}' +
-    '.rn-pointerEvents\\:none,.rn-pointerEvents\\:box-only *,.rn-pointerEvents\\:box-none{pointer-events:none}'
-  );
-
-  const classNames = injector.getClassNames();
-  StyleRegistry.initialize(classNames);
-};
-
-export default initialize;
--- a/src/apis/StyleSheet/injector.js
+++ b/src/apis/StyleSheet/injector.js
@@ -1,106 +0,0 @@
-/**
- * Based on
- * https://github.com/lelandrichardson/react-primitives/blob/master/src/StyleSheet/injector.js
- */
-
-import asap from 'asap';
-
-const emptyObject = {};
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
-const CLASSNAME_REXEP = /\.rn-([^{;\s]+)/g;
-const STYLE_ELEMENT_ID = 'react-native-stylesheet';
-
-let registry = {};
-let isDirty = false;
-
-/**
- * Registers a rule and requests an update to the style sheet
- */
-const addRule = (key, rule) => {
-  if (!registry[key]) {
-    registry[key] = rule;
-    isDirty = true;
-    if (global.document) {
-      asap(frame);
-    }
-  }
-};
-
-/**
- * Returns a string of the registered rules
- */
-const getStyleText = () => {
-  /* eslint prefer-template:0 */
-  let result = '\n';
-  for (const key in registry) {
-    if (hasOwnProperty.call(registry, key)) {
-      result += registry[key] + '\n';
-    }
-  }
-  return result;
-};
-
-/**
- * Returns an HTML string for server rendering
- */
-const getStyleSheetHtml = () => `<style id="${STYLE_ELEMENT_ID}">${getStyleText()}</style>`;
-
-const reset = () => { registry = {}; };
-
-/**
- * Finds or injects the style sheet when in a browser environment
- */
-let styleNode = null;
-const getStyleNode = () => {
-  if (global.document) {
-    if (!styleNode) {
-      // look for existing style sheet (could also be server-rendered)
-      styleNode = document.getElementById(STYLE_ELEMENT_ID);
-      if (!styleNode) {
-        // if there is no existing stylesheet, inject it style sheet
-        document.head.insertAdjacentHTML('afterbegin', getStyleSheetHtml());
-        styleNode = document.getElementById(STYLE_ELEMENT_ID);
-      }
-    }
-    return styleNode;
-  }
-};
-
-/**
- * Determines which classes are available in the existing document. Doesn't
- * rely on the registry so it can be used to read class names from a SSR style
- * sheet.
- */
-const getClassNames = () => {
-  const styleNode = getStyleNode();
-  if (styleNode) {
-    const text = styleNode.textContent;
-    const matches = text.match(CLASSNAME_REXEP);
-    if (matches) {
-      return matches.map((name) => name.slice(1)).reduce((classMap, className) => {
-        classMap[className] = true;
-        return classMap;
-      }, {});
-    }
-  }
-  return emptyObject;
-};
-
-const frame = () => {
-  if (!isDirty || !global.document) { return; }
-  isDirty = false;
-
-  const styleNode = getStyleNode();
-  if (styleNode) {
-    const css = getStyleText();
-    styleNode.textContent = css;
-  }
-};
-
-module.exports = {
-  addRule,
-  getClassNames,
-  getStyleSheetHtml,
-  reset
-};
--- a/src/apis/StyleSheet/registry.js
+++ b/src/apis/StyleSheet/registry.js
@@ -1,202 +1,3 @@
-/**
- * WARNING: changes to this file in particular can cause significant changes to
- * the results of render performance benchmarks.
- */
-
-import createReactDOMStyle from './createReactDOMStyle';
-import flattenArray from '../../modules/flattenArray';
-import flattenStyle from './flattenStyle';
-import generateCss from './generateCss';
-import I18nManager from '../I18nManager';
-import injector from './injector';
-import mapKeyValue from '../../modules/mapKeyValue';
-import prefixInlineStyles from './prefixInlineStyles';
-import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry';
-
-const SPACE_REGEXP = /\s/g;
-const ESCAPE_SELECTOR_CHARS_REGEXP = /[(),":?.%\\$#*]/g;
-
-const createCacheKey = (id) => {
-  const prefix = I18nManager.isRTL ? 'rtl' : 'ltr';
-  return `${prefix}-${id}`;
-};
-
-/**
- * Creates an HTML class name for use on elements
- */
-const createClassName = (prop, value) => {
-  const val = `${value}`.replace(SPACE_REGEXP, '-');
-  return `rn-${prop}:${val}`;
-};
-
-/**
- * Formatting improves debugging in devtools and snapshot
- */
-const mapDeclarationsToClassName = (style, fn) => {
-  const result = mapKeyValue(style, fn).join('\n').trim();
-  return `\n${result}`;
-};
-
-/**
- * Inject a CSS rule for a given declaration and record the availability of the
- * resulting class name.
- */
-let injectedClassNames = {};
-const injectClassNameIfNeeded = (prop, value) => {
-  const className = createClassName(prop, value);
-  if (!injectedClassNames[className]) {
-    // create a valid CSS selector for a given HTML class name
-    const selector = className.replace(ESCAPE_SELECTOR_CHARS_REGEXP, '\\$&');
-    const body = generateCss({ [prop]: value });
-    const css = `.${selector}{${body}}`;
-    // this adds the rule to the buffer to be injected into the document
-    injector.addRule(className, css);
-    injectedClassNames[className] = true;
-  }
-
-  return className;
-};
-
-/**
- * Converts a React Native style object to HTML class names
- */
-let resolvedPropsCache = {};
-const registerStyle = (id, flatStyle) => {
-  const style = createReactDOMStyle(flatStyle);
-  const className = mapDeclarationsToClassName(style, (prop, value) => {
-    if (value != null) {
-      return injectClassNameIfNeeded(prop, value);
-    }
-  });
-
-  const key = createCacheKey(id);
-  resolvedPropsCache[key] = { className };
-
-  return id;
-};
-
-/**
- * Resolves a React Native style object to DOM props
- */
-const resolveProps = (reactNativeStyle) => {
-  const flatStyle = flattenStyle(reactNativeStyle);
-  const domStyle = createReactDOMStyle(flatStyle);
-  const style = {};
-
-  const className = mapDeclarationsToClassName(domStyle, (prop, value) => {
-    if (value != null) {
-      const singleClassName = createClassName(prop, value);
-      if (injectedClassNames[singleClassName]) {
-        return singleClassName;
-      } else {
-        // 4x slower render
-        style[prop] = value;
-      }
-    }
-  });
-
-  const props = {
-    className,
-    style: prefixInlineStyles(style)
-  };
-
-  /*
-  if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) {
-    console.groupCollapsed('[StyleSheet] resolving uncached styles');
-    console.log(
-      'Slow operation. Resolving style objects (uncached result). ' +
-      'Occurs on first render and when using styles not registered with "StyleSheet.create"'
-    );
-    console.log('source => \n', reactNativeStyle);
-    console.log('flatten => \n', flatStyle);
-    console.log('resolve => \n', props);
-    console.groupEnd();
-  }
-  */
-
-  return props;
-};
-
-/**
- * Caching layer over 'resolveProps'
- */
-const resolvePropsIfNeeded = (key, style) => {
-  if (key) {
-    if (!resolvedPropsCache[key]) {
-      // slow: convert style object to props and cache
-      resolvedPropsCache[key] = resolveProps(style);
-    }
-    return resolvedPropsCache[key];
-  }
-  return resolveProps(style);
-};
-
-/**
- * Web style registry
- */
-const StyleRegistry = {
-  initialize(classNames) {
-    injectedClassNames = classNames;
-
-    /*
-    if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) {
-      if (global.__REACT_NATIVE_DEBUG_ENABLED__styleRegistryTimer) {
-        clearInterval(global.__REACT_NATIVE_DEBUG_ENABLED__styleRegistryTimer);
-      }
-      global.__REACT_NATIVE_DEBUG_ENABLED__styleRegistryTimer = setInterval(() => {
-        const entryCount = Object.keys(resolvedPropsCache).length;
-        console.groupCollapsed('[StyleSheet] resolved props cache snapshot:', entryCount, 'entries');
-        console.log(resolvedPropsCache);
-        console.groupEnd();
-      }, 30000);
-    }
-    */
-  },
-
-  reset() {
-    injectedClassNames = {};
-    resolvedPropsCache = {};
-    injector.reset();
-  },
-
-  register(style) {
-    const id = ReactNativePropRegistry.register(style);
-    return registerStyle(id, style);
-  },
-
-  resolve(reactNativeStyle) {
-    if (!reactNativeStyle) {
-      return undefined;
-    }
-
-    // fast and cachable
-    if (typeof reactNativeStyle === 'number') {
-      const key = createCacheKey(reactNativeStyle);
-      return resolvePropsIfNeeded(key, reactNativeStyle);
-    }
-
-    // convert a RN style object to DOM props
-    if (!Array.isArray(reactNativeStyle)) {
-      return resolveProps(reactNativeStyle);
-    }
-
-    // flatten the array
-    // [ 1, [ 2, 3 ], { prop: value }, 4, 5 ] => [ 1, 2, 3, { prop: value }, 4, 5 ];
-    const flatArray = flattenArray(reactNativeStyle);
-
-    let isArrayOfNumbers = true;
-    for (let i = 0; i < flatArray.length; i++) {
-      if (typeof flatArray[i] !== 'number') {
-        isArrayOfNumbers = false;
-        break;
-      }
-    }
-
-    // cache resolved props when all styles are registered
-    const key = isArrayOfNumbers ? createCacheKey(flatArray.join('-')) : null;
-
-    return resolvePropsIfNeeded(key, flatArray);
-  }
-};
-
-module.exports = StyleRegistry;
+import StyleRegistry from './StyleRegistry';
+const registry = new StyleRegistry();
+module.exports = registry;
--- a/src/apis/StyleSheet/staticCss.js
+++ b/src/apis/StyleSheet/staticCss.js
@@ -0,0 +1,21 @@
+module.exports =
+  // css reset
+  'html{' +
+    'font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;' +
+    '-webkit-tap-highlight-color:rgba(0,0,0,0);' +
+  '}\n' +
+  'body{margin:0;}\n' +
+  'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}\n' +
+  'input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,' +
+  'input::-webkit-search-cancel-button,input::-webkit-search-decoration,' +
+  'input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}\n' +
+
+  '@keyframes rn-ActivityIndicator-animation{' +
+    '0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}' +
+    '100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}' +
+  '}\n' +
+
+  '@keyframes rn-ProgressBar-animation{' +
+    '0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)};' +
+    '100%{-webkit-transform:translateX(400%);transform:translateX(400%)};' +
+  '}';
--- a/src/components/ActivityIndicator/tests/snapshots/index-test.js.snap
+++ b/src/components/ActivityIndicator/tests/snapshots/index-test.js.snap
@@ -2,80 +2,11 @@ exports[`components/ActivityIndicator default render 1`] = `
 <div
  aria-valuemax="1"
  aria-valuemin="0"
-  className="
-rn-alignItems:center
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-justifyContent:center
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1awozwy rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-justifyContent-1777fci rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
  role="progressbar"
  style={Object {}}>
  <div
-    className="
-  rn-alignItems:stretch
-  rn-animationDuration:0.75s
-  rn-animationIterationCount:infinite
-  rn-animationName:rn-ActivityIndicator-animation
-  rn-animationTimingFunction:linear
-  rn-backgroundColor:transparent
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-height:20px
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-width:20px"
+    className="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-z80fyv rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-width-19wmn03"
    style={Object {}}>
    <svg
      height="100%"
@@ -115,81 +46,11 @@ exports[`components/ActivityIndicator other render 1`] = `
 <div
  aria-valuemax="1"
  aria-valuemin="0"
-  className="
-rn-alignItems:center
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-justifyContent:center
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1awozwy rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-justifyContent-1777fci rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
  role="progressbar"
  style={Object {}}>
  <div
-    className="
-  rn-alignItems:stretch
-  rn-animationDuration:0.75s
-  rn-animationIterationCount:infinite
-  rn-animationName:rn-ActivityIndicator-animation
-  rn-animationPlayState:paused
-  rn-animationTimingFunction:linear
-  rn-backgroundColor:transparent
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-height:36px
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-width:36px"
+    className="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1r8g8re rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-width-1acpoxo"
    style={Object {}}>
    <svg
      height="100%"
--- a/src/components/Image/ImageStylePropTypes.js
+++ b/src/components/Image/ImageStylePropTypes.js
@@ -6,7 +6,8 @@ import { PropTypes } from 'react';
 import ShadowPropTypes from '../../propTypes/ShadowPropTypes';
 import TransformPropTypes from '../../propTypes/TransformPropTypes';

-const hiddenOrVisible = PropTypes.oneOf([ 'hidden', 'visible' ]);
+const { number, oneOf, string } = PropTypes;
+const hiddenOrVisible = oneOf([ 'hidden', 'visible' ]);

 module.exports = {
  ...BorderPropTypes,
@@ -15,15 +16,17 @@ module.exports = {
  ...TransformPropTypes,
  backfaceVisibility: hiddenOrVisible,
  backgroundColor: ColorPropType,
-  resizeMode: PropTypes.oneOf(Object.keys(ImageResizeMode)),
-  /**
-   * @platform web
-   */
-  boxShadow: PropTypes.string,
-  opacity: PropTypes.number,
+  opacity: number,
  overflow: hiddenOrVisible,
+  resizeMode: oneOf(Object.keys(ImageResizeMode)),
+  /**
+   * @platform unsupported
+   */
+  overlayColor: string,
+  tintColor: ColorPropType,
  /**
   * @platform web
   */
+  boxShadow: string,
  visibility: hiddenOrVisible
 };
--- a/src/components/Image/tests/snapshots/index-test.js.snap
+++ b/src/components/Image/tests/snapshots/index-test.js.snap
@@ -1,41 +1,6 @@
 exports[`components/Image passes other props through to underlying View 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  onResponderGrant={[Function]}
  style={Object {}} />
 `;
@@ -43,125 +8,20 @@ rn-zIndex:0"
 exports[`components/Image prop "accessibilityLabel" 1`] = `
 <div
  aria-label="accessibilityLabel"
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;

 exports[`components/Image prop "accessible" 1`] = `
 <div
  aria-hidden={true}
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;

 exports[`components/Image prop "children" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}}>
  <div
    className="unique" />
@@ -170,42 +30,7 @@ rn-zIndex:0"

 exports[`components/Image prop "defaultSource" does not override "height" and "width" styles 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={
    Object {
      "backgroundImage": "url(\"https://google.com/favicon.ico\")",
@@ -214,16 +39,7 @@ rn-zIndex:0"
    }
  }>
  <img
-    className="
-  rn-bottom:0px
-  rn-height:100%
-  rn-left:0px
-  rn-opacity:0
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%
-  rn-zIndex:-1"
+    className="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
    src="https://google.com/favicon.ico"
    style={Object {}} />
 </div>
@@ -231,42 +47,7 @@ rn-zIndex:0"

 exports[`components/Image prop "defaultSource" sets "height" and "width" styles if missing 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={
    Object {
      "backgroundImage": "url(\"https://google.com/favicon.ico\")",
@@ -275,16 +56,7 @@ rn-zIndex:0"
    }
  }>
  <img
-    className="
-  rn-bottom:0px
-  rn-height:100%
-  rn-left:0px
-  rn-opacity:0
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%
-  rn-zIndex:-1"
+    className="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
    src="https://google.com/favicon.ico"
    style={Object {}} />
 </div>
@@ -292,58 +64,14 @@ rn-zIndex:0"

 exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={
    Object {
      "backgroundImage": "url(\"https://google.com/favicon.ico\")",
    }
  }>
  <img
-    className="
-  rn-bottom:0px
-  rn-height:100%
-  rn-left:0px
-  rn-opacity:0
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%
-  rn-zIndex:-1"
+    className="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
    src="https://google.com/favicon.ico"
    style={Object {}} />
 </div>
@@ -351,58 +79,14 @@ rn-zIndex:0"

 exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={
    Object {
      "backgroundImage": "url(\"https://google.com/favicon.ico\")",
    }
  }>
  <img
-    className="
-  rn-bottom:0px
-  rn-height:100%
-  rn-left:0px
-  rn-opacity:0
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%
-  rn-zIndex:-1"
+    className="rn-bottom-1p0dtai rn-height-1pi2tsx rn-left-1d2f490 rn-opacity-1272l3b rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu rn-zIndex-1wyyakw"
    src="https://google.com/favicon.ico"
    style={Object {}} />
 </div>
@@ -410,329 +94,49 @@ rn-zIndex:0"

 exports[`components/Image prop "resizeMode" value "contain" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:contain
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-ehq7j7 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;

 exports[`components/Image prop "resizeMode" value "cover" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;

 exports[`components/Image prop "resizeMode" value "none" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:auto
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-1sxrcry rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;

 exports[`components/Image prop "resizeMode" value "stretch" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:100%-100%
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-x3cy2q rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;

 exports[`components/Image prop "resizeMode" value "undefined" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;

 exports[`components/Image prop "style" correctly supports "resizeMode" property 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:contain
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-ehq7j7 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;

 exports[`components/Image prop "testID" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  data-testid="testID"
  style={Object {}} />
 `;

 exports[`components/Image sets correct accessibility role" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-backgroundPosition:center
-rn-backgroundRepeat:no-repeat
-rn-backgroundSize:cover
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-zIndex:0"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-backgroundPosition-vvn4in rn-backgroundRepeat-u6sd8q rn-backgroundSize-4gszlv rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-zIndex-1lgpqti"
  style={Object {}} />
 `;
--- a/src/components/Switch/tests/snapshots/index-test.js.snap
+++ b/src/components/Switch/tests/snapshots/index-test.js.snap
@@ -1,39 +1,6 @@
 exports[`components/Switch disabled when "false" a default checkbox is rendered 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-cursor:pointer
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-userSelect:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-userSelect-lrvibr"
  style={
    Object {
      "height": "20px",
@@ -41,44 +8,7 @@ rn-userSelect:none"
    }
  }>
  <div
-    className="
-  rn-alignItems:stretch
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-bottom:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-height:70%
-  rn-left:0px
-  rn-listStyle:none
-  rn-marginTop:auto
-  rn-marginRight:auto
-  rn-marginBottom:auto
-  rn-marginLeft:auto
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-top:0px
-  rn-transitionDuration:0.1s
-  rn-width:90%"
+    className="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1dernwh rn-left-1d2f490 rn-listStyle-1ebb2ja rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
    style={
      Object {
        "backgroundColor": "#939393",
@@ -89,46 +19,7 @@ rn-userSelect:none"
      }
    } />
  <div
-    className="
-  rn-alignItems:stretch
-  rn-alignSelf:flex-start
-  rn-borderTopLeftRadius:100%
-  rn-borderTopRightRadius:100%
-  rn-borderBottomRightRadius:100%
-  rn-borderBottomLeftRadius:100%
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5)
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-left:0%
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-transform:translateZ(0px)
-  rn-transitionDuration:0.1s"
+    className="rn-alignItems-1oszu61 rn-alignSelf-k200y rn-borderTopLeftRadius-jt3ufn rn-borderTopRightRadius-1e868j9 rn-borderBottomRightRadius-ujv9e3 rn-borderBottomLeftRadius-1hakmuk rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxShadow-1ewcgjf rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-left-1fe0xdi rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-transform-emqnss rn-transitionDuration-13tjlyg"
    style={
      Object {
        "backgroundColor": "#FAFAFA",
@@ -138,24 +29,7 @@ rn-userSelect:none"
    } />
  <input
    checked={false}
-    className="
-  rn-bottom:0px
-  rn-cursor:inherit
-  rn-height:100%
-  rn-left:0px
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-opacity:0
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%"
+    className="rn-bottom-1p0dtai rn-cursor-1ei5mc7 rn-height-1pi2tsx rn-left-1d2f490 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-opacity-1272l3b rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu"
    disabled={false}
    onBlur={[Function]}
    onChange={[Function]}
@@ -167,40 +41,7 @@ rn-userSelect:none"

 exports[`components/Switch disabled when "true" a disabled checkbox is rendered 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-cursor:default
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-userSelect:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-7q8q6z rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-userSelect-lrvibr"
  style={
    Object {
      "height": "20px",
@@ -208,45 +49,7 @@ rn-userSelect:none"
    }
  }>
  <div
-    className="
-  rn-alignItems:stretch
-  rn-backgroundColor:#D5D5D5
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-bottom:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-height:70%
-  rn-left:0px
-  rn-listStyle:none
-  rn-marginTop:auto
-  rn-marginRight:auto
-  rn-marginBottom:auto
-  rn-marginLeft:auto
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-top:0px
-  rn-transitionDuration:0.1s
-  rn-width:90%"
+    className="rn-alignItems-1oszu61 rn-backgroundColor-1i8mn1y rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1dernwh rn-left-1d2f490 rn-listStyle-1ebb2ja rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
    style={
      Object {
        "borderBottomLeftRadius": "10px",
@@ -256,47 +59,7 @@ rn-userSelect:none"
      }
    } />
  <div
-    className="
-  rn-alignItems:stretch
-  rn-alignSelf:flex-start
-  rn-backgroundColor:#BDBDBD
-  rn-borderTopLeftRadius:100%
-  rn-borderTopRightRadius:100%
-  rn-borderBottomRightRadius:100%
-  rn-borderBottomLeftRadius:100%
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5)
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-left:0%
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-transform:translateZ(0px)
-  rn-transitionDuration:0.1s"
+    className="rn-alignItems-1oszu61 rn-alignSelf-k200y rn-backgroundColor-1jvdyr1 rn-borderTopLeftRadius-jt3ufn rn-borderTopRightRadius-1e868j9 rn-borderBottomRightRadius-ujv9e3 rn-borderBottomLeftRadius-1hakmuk rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxShadow-1ewcgjf rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-left-1fe0xdi rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-transform-emqnss rn-transitionDuration-13tjlyg"
    style={
      Object {
        "height": "20px",
@@ -305,24 +68,7 @@ rn-userSelect:none"
    } />
  <input
    checked={false}
-    className="
-  rn-bottom:0px
-  rn-cursor:inherit
-  rn-height:100%
-  rn-left:0px
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-opacity:0
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%"
+    className="rn-bottom-1p0dtai rn-cursor-1ei5mc7 rn-height-1pi2tsx rn-left-1d2f490 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-opacity-1272l3b rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu"
    disabled={true}
    onBlur={[Function]}
    onChange={[Function]}
@@ -334,40 +80,7 @@ rn-userSelect:none"

 exports[`components/Switch value when "false" an unchecked checkbox is rendered 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-cursor:pointer
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-userSelect:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-userSelect-lrvibr"
  style={
    Object {
      "height": "20px",
@@ -375,44 +88,7 @@ rn-userSelect:none"
    }
  }>
  <div
-    className="
-  rn-alignItems:stretch
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-bottom:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-height:70%
-  rn-left:0px
-  rn-listStyle:none
-  rn-marginTop:auto
-  rn-marginRight:auto
-  rn-marginBottom:auto
-  rn-marginLeft:auto
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-top:0px
-  rn-transitionDuration:0.1s
-  rn-width:90%"
+    className="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1dernwh rn-left-1d2f490 rn-listStyle-1ebb2ja rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
    style={
      Object {
        "backgroundColor": "#939393",
@@ -423,46 +99,7 @@ rn-userSelect:none"
      }
    } />
  <div
-    className="
-  rn-alignItems:stretch
-  rn-alignSelf:flex-start
-  rn-borderTopLeftRadius:100%
-  rn-borderTopRightRadius:100%
-  rn-borderBottomRightRadius:100%
-  rn-borderBottomLeftRadius:100%
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5)
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-left:0%
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-transform:translateZ(0px)
-  rn-transitionDuration:0.1s"
+    className="rn-alignItems-1oszu61 rn-alignSelf-k200y rn-borderTopLeftRadius-jt3ufn rn-borderTopRightRadius-1e868j9 rn-borderBottomRightRadius-ujv9e3 rn-borderBottomLeftRadius-1hakmuk rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxShadow-1ewcgjf rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-left-1fe0xdi rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-transform-emqnss rn-transitionDuration-13tjlyg"
    style={
      Object {
        "backgroundColor": "#FAFAFA",
@@ -472,24 +109,7 @@ rn-userSelect:none"
    } />
  <input
    checked={false}
-    className="
-  rn-bottom:0px
-  rn-cursor:inherit
-  rn-height:100%
-  rn-left:0px
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-opacity:0
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%"
+    className="rn-bottom-1p0dtai rn-cursor-1ei5mc7 rn-height-1pi2tsx rn-left-1d2f490 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-opacity-1272l3b rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu"
    disabled={false}
    onBlur={[Function]}
    onChange={[Function]}
@@ -501,40 +121,7 @@ rn-userSelect:none"

 exports[`components/Switch value when "true" a checked checkbox is rendered 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-cursor:pointer
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none
-rn-userSelect:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-cursor-1loqt21 rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-userSelect-lrvibr"
  style={
    Object {
      "height": "20px",
@@ -542,44 +129,7 @@ rn-userSelect:none"
    }
  }>
  <div
-    className="
-  rn-alignItems:stretch
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-bottom:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-height:70%
-  rn-left:0px
-  rn-listStyle:none
-  rn-marginTop:auto
-  rn-marginRight:auto
-  rn-marginBottom:auto
-  rn-marginLeft:auto
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-top:0px
-  rn-transitionDuration:0.1s
-  rn-width:90%"
+    className="rn-alignItems-1oszu61 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-bottom-1p0dtai rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-height-1dernwh rn-left-1d2f490 rn-listStyle-1ebb2ja rn-marginTop-1t01tom rn-marginRight-lchren rn-marginBottom-1qahzrx rn-marginLeft-1jj8364 rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-top-ipm5af rn-transitionDuration-13tjlyg rn-width-e7q0ms"
    style={
      Object {
        "backgroundColor": "#A3D3CF",
@@ -590,45 +140,7 @@ rn-userSelect:none"
      }
    } />
  <div
-    className="
-  rn-alignItems:stretch
-  rn-alignSelf:flex-start
-  rn-borderTopLeftRadius:100%
-  rn-borderTopRightRadius:100%
-  rn-borderBottomRightRadius:100%
-  rn-borderBottomLeftRadius:100%
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxShadow:0px-1px-3px-rgba(0,0,0,0.5)
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-left:100%
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none
-  rn-transform:translateZ(0px)
-  rn-transitionDuration:0.1s"
+    className="rn-alignItems-1oszu61 rn-alignSelf-k200y rn-borderTopLeftRadius-jt3ufn rn-borderTopRightRadius-1e868j9 rn-borderBottomRightRadius-ujv9e3 rn-borderBottomLeftRadius-1hakmuk rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxShadow-1ewcgjf rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-left-7b7h2f rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4 rn-transform-emqnss rn-transitionDuration-13tjlyg"
    style={
      Object {
        "backgroundColor": "#009688",
@@ -639,24 +151,7 @@ rn-userSelect:none"
    } />
  <input
    checked={true}
-    className="
-  rn-bottom:0px
-  rn-cursor:inherit
-  rn-height:100%
-  rn-left:0px
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-opacity:0
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:absolute
-  rn-right:0px
-  rn-top:0px
-  rn-width:100%"
+    className="rn-bottom-1p0dtai rn-cursor-1ei5mc7 rn-height-1pi2tsx rn-left-1d2f490 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-opacity-1272l3b rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-u8s1d rn-right-zchlnj rn-top-ipm5af rn-width-13qz1uu"
    disabled={false}
    onBlur={[Function]}
    onChange={[Function]}
--- a/src/components/Text/tests/snapshots/index-test.js.snap
+++ b/src/components/Text/tests/snapshots/index-test.js.snap
@@ -1,24 +1,6 @@
 exports[`components/Text prop "children" 1`] = `
 <span
-  className="
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-color:inherit
-rn-display:inline
-rn-font:inherit
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-textDecoration:none
-rn-whiteSpace:pre-wrap
-rn-wordWrap:break-word"
+  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
  dir="auto">
  children
 </span>
@@ -26,26 +8,7 @@ rn-wordWrap:break-word"

 exports[`components/Text prop "onPress" 1`] = `
 <span
-  className="
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-color:inherit
-rn-cursor:pointer
-rn-display:inline
-rn-font:inherit
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-textDecoration:none
-rn-whiteSpace:pre-wrap
-rn-wordWrap:break-word"
+  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-cursor-1loqt21 rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
  dir="auto"
  onClick={[Function]}
  onKeyDown={[Function]}
@@ -55,50 +18,13 @@ rn-wordWrap:break-word"

 exports[`components/Text prop "selectable" 1`] = `
 <span
-  className="
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-color:inherit
-rn-display:inline
-rn-font:inherit
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-textDecoration:none
-rn-whiteSpace:pre-wrap
-rn-wordWrap:break-word"
+  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
  dir="auto" />
 `;

 exports[`components/Text prop "selectable" 2`] = `
 <span
-  className="
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-color:inherit
-rn-display:inline
-rn-font:inherit
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-textDecoration:none
-rn-userSelect:none
-rn-whiteSpace:pre-wrap
-rn-wordWrap:break-word"
+  className="rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-color-homxoj rn-display-1471scf rn-font-1lw9tu2 rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-textDecoration-bauka4 rn-userSelect-lrvibr rn-whiteSpace-q42fyq rn-wordWrap-qvutc0"
  dir="auto"
  style={Object {}} />
 `;
--- a/src/components/Touchable/TouchableHighlight.js
+++ b/src/components/Touchable/TouchableHighlight.js
@@ -231,17 +231,30 @@ var TouchableHighlight = React.createClass({
  },

  render: function() {
+    const {
+      /* eslint-disable */
+      activeOpacity,
+      onHideUnderlay,
+      onShowUnderlay,
+      underlayColor,
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      pressRetentionOffset,
+      /* eslint-enable */
+      ...other
+    } = this.props;
+
    return (
      <View
-        accessible={true}
-        accessibilityLabel={this.props.accessibilityLabel}
-        accessibilityRole={this.props.accessibilityRole}
-        disabled={this.props.disabled}
-        hitSlop={this.props.hitSlop}
+        {...other}
        onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
        onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
        onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
-        onLayout={this.props.onLayout}
        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
        onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
        onResponderGrant={this.touchableHandleResponderGrant}
@@ -255,7 +268,7 @@ var TouchableHighlight = React.createClass({
          this.state.underlayStyle
        ]}
        tabIndex={this.props.disabled ? null : '0'}
-        testID={this.props.testID}>
+      >
        {React.cloneElement(
          React.Children.only(this.props.children),
          {
--- a/src/components/Touchable/TouchableOpacity.js
+++ b/src/components/Touchable/TouchableOpacity.js
@@ -163,20 +163,30 @@ var TouchableOpacity = React.createClass({
  },

  render: function() {
+    const {
+      /* eslint-disable */
+      activeOpacity,
+      focusedOpacity,
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      pressRetentionOffset,
+      /* eslint-enable */
+      ...other
+    } = this.props;
+
    return (
      <View
-        accessible={this.props.accessible !== false}
-        accessibilityLabel={this.props.accessibilityLabel}
-        accessibilityRole={this.props.accessibilityRole}
-        disabled={this.props.disabled}
+        {...other}
        style={[
          styles.root,
          this.props.disabled && styles.disabled,
          this.props.style
        ]}
-        testID={this.props.testID}
-        onLayout={this.props.onLayout}
-        hitSlop={this.props.hitSlop}
        onKeyDown={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressIn) }}
        onKeyPress={(e) => { this._onKeyEnter(e, this.touchableHandlePress) }}
        onKeyUp={(e) => { this._onKeyEnter(e, this.touchableHandleActivePressOut) }}
@@ -187,9 +197,7 @@ var TouchableOpacity = React.createClass({
        onResponderRelease={this.touchableHandleResponderRelease}
        onResponderTerminate={this.touchableHandleResponderTerminate}
        tabIndex={this.props.disabled ? null : '0'}
-      >
-        {this.props.children}
-      </View>
+      />
    );
  },
 });
--- a/src/components/Touchable/TouchableWithoutFeedback.js
+++ b/src/components/Touchable/TouchableWithoutFeedback.js
@@ -145,6 +145,21 @@ const TouchableWithoutFeedback = React.createClass({
  },

  render: function(): React.Element<any> {
+    const {
+      /* eslint-disable */
+      delayLongPress,
+      delayPressIn,
+      delayPressOut,
+      onLongPress,
+      onPress,
+      onPressIn,
+      onPressOut,
+      pressRetentionOffset,
+      /* eslint-enable */
+      ...other
+    } = this.props;
+
+
    // Note(avik): remove dynamic typecast once Flow has been upgraded
    const child = React.Children.only(this.props.children);
    let children = child.props.children;
@@ -166,13 +181,7 @@ const TouchableWithoutFeedback = React.createClass({
        child.props.style
      ];
    return (React: any).cloneElement(child, {
-      accessible: this.props.accessible !== false,
-      accessibilityLabel: this.props.accessibilityLabel,
-      accessibilityRole: this.props.accessibilityRole,
-      disabled: this.props.disabled,
-      testID: this.props.testID,
-      onLayout: this.props.onLayout,
-      hitSlop: this.props.hitSlop,
+      ...other,
      onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
      onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
      onResponderGrant: this.touchableHandleResponderGrant,
--- a/src/components/View/ViewStylePropTypes.js
+++ b/src/components/View/ViewStylePropTypes.js
@@ -21,6 +21,10 @@ module.exports = {
  opacity: number,
  overflow: autoOrHiddenOrVisible,
  zIndex: number,
+  /**
+   * @platform unsupported
+   */
+  elevation: number,
  /*
   * @platform web
   */
--- a/src/components/View/tests/snapshots/index-test.js.snap
+++ b/src/components/View/tests/snapshots/index-test.js.snap
@@ -1,216 +1,29 @@
 exports[`components/View prop "children" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none">
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4">
  <div
-    className="
-  rn-alignItems:stretch
-  rn-backgroundColor:transparent
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none"
+    className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
    data-testid="1" />
 </div>
 `;

 exports[`components/View prop "pointerEvents" 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-pointerEvents:box-only
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-pointerEvents-ah5dr5 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
  style={Object {}} />
 `;

 exports[`components/View rendered element is a "div" by default 1`] = `
 <div
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none" />
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4" />
 `;

 exports[`components/View rendered element is a "span" when inside <View accessibilityRole="button" /> 1`] = `
 <button
-  className="
-rn-alignItems:stretch
-rn-backgroundColor:transparent
-rn-borderTopStyle:solid
-rn-borderRightStyle:solid
-rn-borderBottomStyle:solid
-rn-borderLeftStyle:solid
-rn-borderTopWidth:0px
-rn-borderRightWidth:0px
-rn-borderBottomWidth:0px
-rn-borderLeftWidth:0px
-rn-boxSizing:border-box
-rn-color:inherit
-rn-display:flex
-rn-flexShrink:0
-rn-flexBasis:auto
-rn-flexDirection:column
-rn-font:inherit
-rn-listStyle:none
-rn-marginTop:0px
-rn-marginRight:0px
-rn-marginBottom:0px
-rn-marginLeft:0px
-rn-minHeight:0px
-rn-minWidth:0px
-rn-paddingTop:0px
-rn-paddingRight:0px
-rn-paddingBottom:0px
-rn-paddingLeft:0px
-rn-position:relative
-rn-textAlign:inherit
-rn-textDecoration:none"
+  className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4"
  role="button"
  type="button">
  <span
-    className="
-  rn-alignItems:stretch
-  rn-backgroundColor:transparent
-  rn-borderTopStyle:solid
-  rn-borderRightStyle:solid
-  rn-borderBottomStyle:solid
-  rn-borderLeftStyle:solid
-  rn-borderTopWidth:0px
-  rn-borderRightWidth:0px
-  rn-borderBottomWidth:0px
-  rn-borderLeftWidth:0px
-  rn-boxSizing:border-box
-  rn-color:inherit
-  rn-display:flex
-  rn-flexShrink:0
-  rn-flexBasis:auto
-  rn-flexDirection:column
-  rn-font:inherit
-  rn-listStyle:none
-  rn-marginTop:0px
-  rn-marginRight:0px
-  rn-marginBottom:0px
-  rn-marginLeft:0px
-  rn-minHeight:0px
-  rn-minWidth:0px
-  rn-paddingTop:0px
-  rn-paddingRight:0px
-  rn-paddingBottom:0px
-  rn-paddingLeft:0px
-  rn-position:relative
-  rn-textAlign:inherit
-  rn-textDecoration:none" />
+    className="rn-alignItems-1oszu61 rn-backgroundColor-wib322 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-color-homxoj rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-font-1lw9tu2 rn-listStyle-1ebb2ja rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-textAlign-1ttztb7 rn-textDecoration-bauka4" />
 </button>
 `;
--- a/src/modules/NativeMethodsMixin/index.js
+++ b/src/modules/NativeMethodsMixin/index.js
@@ -10,19 +10,6 @@ import findNodeHandle from '../findNodeHandle';
 import StyleRegistry from '../../apis/StyleSheet/registry';
 import UIManager from '../../apis/UIManager';

-const emptyObject = {};
-const REGEX_CLASSNAME_SPLIT = /\s+/;
-const REGEX_STYLE_PROP = /rn-(.*):.*/;
-
-const classNameFilter = (className) => { return className !== ''; };
-const classNameToList = (className = '') => className.split(REGEX_CLASSNAME_SPLIT).filter(classNameFilter);
-const getStyleProp = (className) => {
-  const match = className.match(REGEX_STYLE_PROP);
-  if (match) {
-    return match[1];
-  }
-};
-
 const NativeMethodsMixin = {
  /**
   * Removes focus from an input or view. This is the opposite of `focus()`.
@@ -81,41 +68,10 @@ const NativeMethodsMixin = {
  setNativeProps(nativeProps: Object) {
    // DOM state
    const node = findNodeHandle(this);
-    const domClassList = [ ...node.classList ];
+    const classList = [ ...node.classList ];

-    // Resolved state
-    const resolvedProps = StyleRegistry.resolve(nativeProps.style) || emptyObject;
-    const resolvedClassList = classNameToList(resolvedProps.className);
-
-    // Merged state
-    const classList = [];
-    const style = { ...resolvedProps.style };
-
-    // The node has class names that we need to override.
-    // Only pass on a class name when the style is unchanged.
-    domClassList.forEach((c) => {
-      const prop = getStyleProp(c);
-      const className = resolvedProps.className;
-      if (!className || className.indexOf(prop) === -1) {
-        classList.push(c);
-      }
-    });
-
-    // The node has styles that we need to override.
-    // Remove any inline style that may collide with a new class name.
-    resolvedClassList.forEach((c) => {
-      const prop = getStyleProp(c);
-      classList.push(c);
-      style[prop] = null;
-    });
-
-    const className = `\n${classList.sort().join('\n')}`;
-
-    const props = {
-      ...nativeProps,
-      className,
-      style
-    };
+    const { className, style } = StyleRegistry.resolveStateful(nativeProps.style, classList);
+    const props = { ...nativeProps, className, style };

    UIManager.updateView(node, props, this);
  }
--- a/src/modules/modality/index.js
+++ b/src/modules/modality/index.js
@@ -45,10 +45,13 @@ const modality = () => {
  /**
   * Disable the focus ring by default
   */
-  const id = 'modality__';
-  const style = `<style id="${id}">:focus { outline: none; }</style>`;
-  document.head.insertAdjacentHTML('afterbegin', style);
-  const styleElement = document.getElementById(id);
+  const id = 'react-native-modality';
+  let styleElement = document.getElementById(id);
+  if (!styleElement) {
+    const style = `<style id="${id}">:focus { outline: none; }</style>`;
+    document.head.insertAdjacentHTML('afterbegin', style);
+    styleElement = document.getElementById(id);
+  }

  const disableFocus = () => {
    if (styleElement) {
Author	SHA1	Message	Date
Nicolas Gallagher	26bc8173f0	0.0.75	2017-02-27 23:11:30 -08:00
Nicolas Gallagher	ecae52ccc5	[change] Touchable pass through props Add support for web-specific props to improve accessibility, e.g., ARIA properties (and declarative links). Fix #65	2017-02-27 17:05:38 -08:00
Nicolas Gallagher	997653863f	[fix] ignore unsupported style prop types Fix #347 Close #371	2017-02-27 16:40:54 -08:00
Nicolas Gallagher	5dc692719f	Update snapshots after StyleSheet refactor	2017-02-27 15:59:18 -08:00
Nicolas Gallagher	0361845537	[change] StyleSheet refactor * HTML class names are now hashes of the corresponding declaration * Simplifies 'setNativeProps' logic * Fixes use of server-rendered style sheet * Fixes duplicate insertion of style sheets with hot-reloading No significant change to the benchmark results	2017-02-27 15:59:18 -08:00