Flatten styles in test snapshots

2026-01-12 22:51:09 +08:00 · 2017-10-19 12:15:02 -07:00
parent ba96e457b4
commit 9a5b932139
10 changed files with 384 additions and 147 deletions
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,4 +6,3 @@ before_script:
  - sh -e /etc/init.d/xvfb start
 script:
  - yarn lint
-  - yarn test:ci
--- a/jest-setup-framework.js
+++ b/jest-setup-framework.js
@@ -1,4 +1,9 @@
-import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import createSerializer from './jest/createSerializer';
+import Enzyme from 'enzyme';
+import { StyleSheet } from './src';
+
+const serializer = createSerializer(StyleSheet);

 Enzyme.configure({ adapter: new Adapter() });
+expect.addSnapshotSerializer(serializer);
--- a/jest/tests/serializer-test.js
+++ b/jest/tests/serializer-test.js
@@ -4,12 +4,9 @@
 import { mount, render, shallow } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
-import serializer from '../serializer';
-import { StyleSheet, Text, View } from '../../dist';
+import { StyleSheet, Text, View } from '../../src';
 import toJson from 'enzyme-to-json';

-expect.addSnapshotSerializer(serializer);
-
 /**
 * Fixtures
 */
--- a/jest/createSerializer.js
+++ b/jest/createSerializer.js
@@ -0,0 +1,56 @@
+const React = require('react');
+
+function createSerializer(styleSheet) {
+  function flattenNodeStyles(node) {
+    if (node && node.props) {
+      // check for React elements in any props
+      const nextProps = Object.keys(node.props).reduce((acc, curr) => {
+        const value = node.props[curr];
+        if (React.isValidElement(value)) {
+          acc[curr] = flattenNodeStyles(value);
+        }
+        return acc;
+      }, {});
+
+      // flatten styles and avoid empty objects in snapshots
+      if (node.props.style) {
+        const style = styleSheet.flatten(node.props.style);
+        if (Object.keys(style).length > 0) {
+          nextProps.style = style;
+        } else {
+          delete nextProps.style;
+        }
+      }
+
+      const args = [node, nextProps];
+
+      // recurse over children too
+      const children = node.children || node.props.children;
+      if (children) {
+        if (Array.isArray(children)) {
+          children.forEach(child => {
+            args.push(flattenNodeStyles(child));
+          });
+        } else {
+          args.push(flattenNodeStyles(children));
+        }
+      }
+
+      return React.cloneElement.apply(React.cloneElement, args);
+    }
+
+    return node;
+  }
+
+  function test(value) {
+    return !!value && value.$$typeof === Symbol.for('react.test.json');
+  }
+
+  function print(value, serializer) {
+    return serializer(flattenNodeStyles(value));
+  }
+
+  return { test, print };
+}
+
+module.exports = createSerializer;
--- a/jest/serializer.js
+++ b/jest/serializer.js
@@ -1,61 +1,6 @@
-const React = require('react');
+const createSerializer = require('./createSerializer');
 const { StyleSheet } = require('../dist');

-function createSerializer(styleSheet) {
-  function flattenNodeStyles(node) {
-    if (node && node.props) {
-      // check for React elements in any props
-      const nextProps = Object.keys(node.props).reduce((acc, curr) => {
-        const value = node.props[curr];
-        if (React.isValidElement(value)) {
-          acc[curr] = flattenNodeStyles(value);
-        }
-        return acc;
-      }, {});
-
-      // flatten styles and avoid empty objects in snapshots
-      if (node.props.style) {
-        const style = styleSheet.flatten(node.props.style);
-        if (Object.keys(style).length > 0) {
-          nextProps.style = style;
-        } else {
-          delete nextProps.style;
-        }
-      }
-
-      const args = [node, nextProps];
-
-      // recurse over children too
-      const children = node.children || node.props.children;
-      if (children) {
-        if (Array.isArray(children)) {
-          children.forEach(child => {
-            args.push(flattenNodeStyles(child));
-          });
-        } else {
-          args.push(flattenNodeStyles(children));
-        }
-      }
-
-      return React.cloneElement.apply(React.cloneElement, args);
-    }
-
-    return node;
-  }
-
-  function test(value) {
-    return !!value && value.$$typeof === Symbol.for('react.test.json');
-  }
-
-  function print(value, serializer) {
-    return serializer(flattenNodeStyles(value));
-  }
-
-  return { test, print };
-}
-
 const serializer = createSerializer(StyleSheet);
-createSerializer.test = serializer.test;
-createSerializer.print = serializer.print;

-module.exports = createSerializer;
+module.exports = serializer;
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
  ],
  "scripts": {
    "benchmark": "cd benchmarks && yarn && webpack && open index.html",
-    "build": "yarn compile && webpack --config webpack.config.js --sort-assets-by --progress",
+    "build": "yarn clean-dist && yarn compile && webpack --config webpack.config.js --sort-assets-by --progress",
    "clean-dist": "del ./dist && mkdir dist",
    "compile": "babel src -d dist --ignore *-test.js",
    "docs:build": "cd docs && yarn build",
@@ -26,9 +26,8 @@
    "lint": "yarn lint:cmd -- babel benchmarks docs jest src",
    "lint:cmd": "eslint --ignore-path .gitignore --fix",
    "precommit": "lint-staged",
-    "release": "yarn clean-dist && yarn lint && yarn build && yarn test && npm publish",
-    "test": "flow && jest",
-    "test:ci": "yarn clean-dist && yarn compile && yarn test"
+    "release": "yarn lint && yarn test && yarn build && npm publish",
+    "test": "flow && jest"
  },
  "babel": {
    "presets": [
@@ -85,9 +84,9 @@
    "babel-preset-react-native": "^4.0.0",
    "caniuse-api": "^2.0.0",
    "del-cli": "^1.1.0",
-    "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.0",
-    "enzyme-to-json": "^3.0.1",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.2",
+    "enzyme-to-json": "^3.1.4",
    "eslint": "^4.6.1",
    "eslint-config-prettier": "^2.6.0",
    "eslint-plugin-promise": "^3.5.0",
--- a/src/apis/AppRegistry/tests/snapshots/renderApplication-test.js.snap
+++ b/src/apis/AppRegistry/tests/snapshots/renderApplication-test.js.snap
@@ -26,19 +26,31 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
 exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
 "<style id=\\"react-native-stylesheet\\">.rn-bottom-1p0dtai{bottom:0px}
 .rn-left-1d2f490{left:0px}
+.rn-left-1fe0xdi{left:0%}
+.rn-left-7b7h2f{left:100%}
 .rn-position-u8s1d{position:absolute}
 .rn-position-bnwqim{position:relative}
 .rn-right-zchlnj{right:0px}
 .rn-top-ipm5af{top:0px}
 .rn-cursor-1loqt21{cursor:pointer}
+.rn-cursor-7q8q6z{cursor:default}
+.rn-cursor-1ei5mc7{cursor:inherit}
 .rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
 .rn-backgroundColor-wib322{background-color:transparent}
+.rn-backgroundColor-8ndhhv{background-color:rgba(33,150,243,1)}
+.rn-backgroundColor-15al3ab{background-color:rgba(223,223,223,1)}
+.rn-backgroundColor-1hj8efq{background-color:rgba(213,213,213,1)}
+.rn-backgroundColor-1bgzomc{background-color:rgba(189,189,189,1)}
 .rn-color-homxoj{color:inherit}
+.rn-color-1qtguxu{color:rgba(255,255,255,1)}
+.rn-color-istcb5{color:rgba(161,161,161,1)}
 .rn-font-1lw9tu2{font:inherit}
 .rn-textAlign-1ttztb7{text-align:inherit}
+.rn-textAlign-q4m81j{text-align:center}
 .rn-textDecoration-bauka4{text-decoration:none}
 .rn-listStyle-1ebb2ja{list-style:none}
 .rn-alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-alignItems-1awozwy{-ms-flex-align:center;-webkit-align-items:center;-webkit-box-align:center;align-items:center}
 .rn-borderTopStyle-1efd50x{border-top-style:solid}
 .rn-borderRightStyle-14skgim{border-right-style:solid}
 .rn-borderBottomStyle-rull8r{border-bottom-style:solid}
@@ -50,22 +62,101 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
 .rn-boxSizing-deolkf{box-sizing:border-box}
 .rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
 .rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}
+.rn-display-1471scf{display:inline}
 .rn-flexShrink-1pxmb3b{-ms-flex-negative:0 !important;-webkit-flex-shrink:0 !important;flex-shrink:0 !important}
 .rn-flexShrink-1awmn5t{-ms-flex-negative:1 !important;-webkit-flex-shrink:1 !important;flex-shrink:1 !important}
 .rn-flexBasis-7vfszb{-ms-flex-preferred-size:auto !important;-webkit-flex-basis:auto !important;flex-basis:auto !important}
 .rn-flexDirection-eqz5dr{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-flexDirection-18u37iz{-ms-flex-direction:row;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row}
 .rn-marginTop-1mnahxq{margin-top:0px}
+.rn-marginTop-1t01tom{margin-top:auto}
 .rn-marginRight-61z16t{margin-right:0px}
+.rn-marginRight-lchren{margin-right:auto}
 .rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginBottom-1qahzrx{margin-bottom:auto}
 .rn-marginLeft-11wrixw{margin-left:0px}
+.rn-marginLeft-1jj8364{margin-left:auto}
 .rn-minHeight-ifefl9{min-height:0px}
 .rn-minWidth-bcqeeo{min-width:0px}
 .rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingTop-tskmnb{padding-top:8px}
 .rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingRight-1pyaxff{padding-right:8px}
 .rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.rn-paddingBottom-xd6kpl{padding-bottom:8px}
 .rn-paddingLeft-gy4na3{padding-left:0px}
+.rn-paddingLeft-1m04atk{padding-left:8px}
 .rn-zIndex-1lgpqti{z-index:0}
 .rn-zIndex-1wyyakw{z-index:-1}
+.rn-backgroundPosition-vvn4in{background-position:center}
+.rn-backgroundRepeat-u6sd8q{background-repeat:no-repeat}
+.rn-backgroundRepeat-17leim2{background-repeat:repeat}
+.rn-backgroundSize-4gszlv{background-size:cover}
+.rn-backgroundSize-1sxrcry{background-size:auto}
+.rn-backgroundSize-ehq7j7{background-size:contain}
+.rn-backgroundSize-x3cy2q{background-size:100% 100%}
+.rn-height-1pi2tsx{height:100%}
+.rn-height-z80fyv{height:20px}
+.rn-height-1r8g8re{height:36px}
+.rn-height-4v7adb{height:5px}
+.rn-height-1dernwh{height:70%}
+.rn-opacity-1272l3b{opacity:0}
+.rn-opacity-6dt33c{opacity:1}
+.rn-width-13qz1uu{width:100%}
+.rn-width-19wmn03{width:20px}
+.rn-width-1acpoxo{width:36px}
+.rn-touchAction-19z077z{-ms-touch-action:none;touch-action:none}
+.rn-touchAction-1gvxusu{-ms-touch-action:manipulate;touch-action:manipulate}
+.rn-WebkitOverflowScrolling-150rngu{-webkit-overflow-scrolling:touch}
 .rn-flex-13awgt0{-ms-flex:1;-webkit-flex:1;flex:1}
-.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important}</style>"
+.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important}
+.rn-overflowX-11yh6sk{overflow-x:hidden}
+.rn-overflowX-lltvgl{overflow-x:auto}
+.rn-overflowY-1rnoaur{overflow-y:auto}
+.rn-overflowY-buy8e9{overflow-y:hidden}
+.rn-transform-emqnss{-webkit-transform:translateZ(0px);transform:translateZ(0px)}
+.rn-fontFamily-10u92zi{font-family:-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif}
+.rn-fontFamily-poiln3{font-family:inherit}
+.rn-fontSize-1b43r93{font-size:14px}
+.rn-fontSize-7cikom{font-size:inherit}
+.rn-whiteSpace-q42fyq{white-space:pre-wrap}
+.rn-whiteSpace-irrty{white-space:inherit}
+.rn-whiteSpace-3s2u2q{white-space:nowrap}
+.rn-wordWrap-qvutc0{word-wrap:break-word}
+.rn-userSelect-lrvibr{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
+.rn-maxWidth-dnmrzs{max-width:100%}
+.rn-textOverflow-1udbk01{text-overflow:ellipsis}
+.rn-justifyContent-1777fci{-ms-flex-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}
+.rn-visibility-11j9u27{visibility:hidden}
+.rn-animationDuration-17bb2tj{-webkit-animation-duration:0.75s;animation-duration:0.75s}
+.rn-animationDuration-1ay1djp{-webkit-animation-duration:1s;animation-duration:1s}
+.rn-animationIterationCount-1muvv40{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
+.rn-animationName-dozj4v{-webkit-animation-name:rn-ActivityIndicator-animation;animation-name:rn-ActivityIndicator-animation}
+.rn-animationName-141g9a{-webkit-animation-name:rn-ProgressBar-animation;animation-name:rn-ProgressBar-animation}
+.rn-animationTimingFunction-1ldzwu0{-webkit-animation-timing-function:linear;animation-timing-function:linear}
+.rn-animationPlayState-1abnn5w{-webkit-animation-play-state:paused;animation-play-state:paused}
+.rn-transitionDuration-eafdt9{-webkit-transition-duration:0.15s;transition-duration:0.15s}
+.rn-transitionDuration-13tjlyg{-webkit-transition-duration:0.1s;transition-duration:0.1s}
+.rn-transitionProperty-1i6wzkk{-moz-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity}
+.rn-borderTopLeftRadius-1iymjk7{border-top-left-radius:2px}
+.rn-borderTopLeftRadius-jt3ufn{border-top-left-radius:100%}
+.rn-borderTopLeftRadius-ou6ah9{border-top-left-radius:0px}
+.rn-borderTopRightRadius-s2skl2{border-top-right-radius:2px}
+.rn-borderTopRightRadius-1e868j9{border-top-right-radius:100%}
+.rn-borderTopRightRadius-t12b5v{border-top-right-radius:0px}
+.rn-borderBottomRightRadius-l5bh9y{border-bottom-right-radius:2px}
+.rn-borderBottomRightRadius-ujv9e3{border-bottom-right-radius:100%}
+.rn-borderBottomRightRadius-zmljjp{border-bottom-right-radius:0px}
+.rn-borderBottomLeftRadius-101sy47{border-bottom-left-radius:2px}
+.rn-borderBottomLeftRadius-1hakmuk{border-bottom-left-radius:100%}
+.rn-borderBottomLeftRadius-pm2fo{border-bottom-left-radius:0px}
+.rn-fontWeight-majxgm{font-weight:500}
+.rn-textTransform-tsynxw{text-transform:uppercase}
+.rn-alignSelf-k200y{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start}
+.rn-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5)}
+.rn-borderTopColor-kqr9px{border-top-color:black}
+.rn-borderRightColor-q0dj5p{border-right-color:black}
+.rn-borderBottomColor-1ah7hsa{border-bottom-color:black}
+.rn-borderLeftColor-137uh4u{border-left-color:black}
+.rn-resize-1dz5y72{resize:none}</style>"
 `;
--- a/src/apis/StyleSheet/tests/snapshots/index-test.js.snap
+++ b/src/apis/StyleSheet/tests/snapshots/index-test.js.snap
@@ -21,9 +21,139 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
    "id": "react-native-stylesheet",
    "textContent": ".rn-bottom-1p0dtai{bottom:0px}
 .rn-left-1d2f490{left:0px}
+.rn-left-1fe0xdi{left:0%}
+.rn-left-7b7h2f{left:100%}
 .rn-position-u8s1d{position:absolute}
+.rn-position-bnwqim{position:relative}
 .rn-right-zchlnj{right:0px}
-.rn-top-ipm5af{top:0px}",
+.rn-top-ipm5af{top:0px}
+.rn-cursor-1loqt21{cursor:pointer}
+.rn-cursor-7q8q6z{cursor:default}
+.rn-cursor-1ei5mc7{cursor:inherit}
+.rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none}
+.rn-backgroundColor-wib322{background-color:transparent}
+.rn-backgroundColor-8ndhhv{background-color:rgba(33,150,243,1)}
+.rn-backgroundColor-15al3ab{background-color:rgba(223,223,223,1)}
+.rn-backgroundColor-1hj8efq{background-color:rgba(213,213,213,1)}
+.rn-backgroundColor-1bgzomc{background-color:rgba(189,189,189,1)}
+.rn-color-homxoj{color:inherit}
+.rn-color-1qtguxu{color:rgba(255,255,255,1)}
+.rn-color-istcb5{color:rgba(161,161,161,1)}
+.rn-font-1lw9tu2{font:inherit}
+.rn-textAlign-1ttztb7{text-align:inherit}
+.rn-textAlign-q4m81j{text-align:center}
+.rn-textDecoration-bauka4{text-decoration:none}
+.rn-listStyle-1ebb2ja{list-style:none}
+.rn-alignItems-1oszu61{-ms-flex-align:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch}
+.rn-alignItems-1awozwy{-ms-flex-align:center;-webkit-align-items:center;-webkit-box-align:center;align-items:center}
+.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-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
+.rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}
+.rn-display-1471scf{display:inline}
+.rn-flexShrink-1pxmb3b{-ms-flex-negative:0 !important;-webkit-flex-shrink:0 !important;flex-shrink:0 !important}
+.rn-flexShrink-1awmn5t{-ms-flex-negative:1 !important;-webkit-flex-shrink:1 !important;flex-shrink:1 !important}
+.rn-flexBasis-7vfszb{-ms-flex-preferred-size:auto !important;-webkit-flex-basis:auto !important;flex-basis:auto !important}
+.rn-flexDirection-eqz5dr{-ms-flex-direction:column;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column}
+.rn-flexDirection-18u37iz{-ms-flex-direction:row;-webkit-box-direction:normal;-webkit-box-orient:horizontal;-webkit-flex-direction:row;flex-direction:row}
+.rn-marginTop-1mnahxq{margin-top:0px}
+.rn-marginTop-1t01tom{margin-top:auto}
+.rn-marginRight-61z16t{margin-right:0px}
+.rn-marginRight-lchren{margin-right:auto}
+.rn-marginBottom-p1pxzi{margin-bottom:0px}
+.rn-marginBottom-1qahzrx{margin-bottom:auto}
+.rn-marginLeft-11wrixw{margin-left:0px}
+.rn-marginLeft-1jj8364{margin-left:auto}
+.rn-minHeight-ifefl9{min-height:0px}
+.rn-minWidth-bcqeeo{min-width:0px}
+.rn-paddingTop-wk8lta{padding-top:0px}
+.rn-paddingTop-tskmnb{padding-top:8px}
+.rn-paddingRight-9aemit{padding-right:0px}
+.rn-paddingRight-1pyaxff{padding-right:8px}
+.rn-paddingBottom-1mdbw0j{padding-bottom:0px}
+.rn-paddingBottom-xd6kpl{padding-bottom:8px}
+.rn-paddingLeft-gy4na3{padding-left:0px}
+.rn-paddingLeft-1m04atk{padding-left:8px}
+.rn-zIndex-1lgpqti{z-index:0}
+.rn-zIndex-1wyyakw{z-index:-1}
+.rn-backgroundPosition-vvn4in{background-position:center}
+.rn-backgroundRepeat-u6sd8q{background-repeat:no-repeat}
+.rn-backgroundRepeat-17leim2{background-repeat:repeat}
+.rn-backgroundSize-4gszlv{background-size:cover}
+.rn-backgroundSize-1sxrcry{background-size:auto}
+.rn-backgroundSize-ehq7j7{background-size:contain}
+.rn-backgroundSize-x3cy2q{background-size:100% 100%}
+.rn-height-1pi2tsx{height:100%}
+.rn-height-z80fyv{height:20px}
+.rn-height-1r8g8re{height:36px}
+.rn-height-4v7adb{height:5px}
+.rn-height-1dernwh{height:70%}
+.rn-opacity-1272l3b{opacity:0}
+.rn-opacity-6dt33c{opacity:1}
+.rn-width-13qz1uu{width:100%}
+.rn-width-19wmn03{width:20px}
+.rn-width-1acpoxo{width:36px}
+.rn-touchAction-19z077z{-ms-touch-action:none;touch-action:none}
+.rn-touchAction-1gvxusu{-ms-touch-action:manipulate;touch-action:manipulate}
+.rn-WebkitOverflowScrolling-150rngu{-webkit-overflow-scrolling:touch}
+.rn-flex-13awgt0{-ms-flex:1;-webkit-flex:1;flex:1}
+.rn-flexGrow-1m1wadx{-ms-flex-positive:1 !important;-webkit-flex-grow:1 !important;flex-grow:1 !important}
+.rn-overflowX-11yh6sk{overflow-x:hidden}
+.rn-overflowX-lltvgl{overflow-x:auto}
+.rn-overflowY-1rnoaur{overflow-y:auto}
+.rn-overflowY-buy8e9{overflow-y:hidden}
+.rn-transform-emqnss{-webkit-transform:translateZ(0px);transform:translateZ(0px)}
+.rn-fontFamily-10u92zi{font-family:-apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif}
+.rn-fontFamily-poiln3{font-family:inherit}
+.rn-fontSize-1b43r93{font-size:14px}
+.rn-fontSize-7cikom{font-size:inherit}
+.rn-whiteSpace-q42fyq{white-space:pre-wrap}
+.rn-whiteSpace-irrty{white-space:inherit}
+.rn-whiteSpace-3s2u2q{white-space:nowrap}
+.rn-wordWrap-qvutc0{word-wrap:break-word}
+.rn-userSelect-lrvibr{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
+.rn-maxWidth-dnmrzs{max-width:100%}
+.rn-textOverflow-1udbk01{text-overflow:ellipsis}
+.rn-justifyContent-1777fci{-ms-flex-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}
+.rn-visibility-11j9u27{visibility:hidden}
+.rn-animationDuration-17bb2tj{-webkit-animation-duration:0.75s;animation-duration:0.75s}
+.rn-animationDuration-1ay1djp{-webkit-animation-duration:1s;animation-duration:1s}
+.rn-animationIterationCount-1muvv40{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
+.rn-animationName-dozj4v{-webkit-animation-name:rn-ActivityIndicator-animation;animation-name:rn-ActivityIndicator-animation}
+.rn-animationName-141g9a{-webkit-animation-name:rn-ProgressBar-animation;animation-name:rn-ProgressBar-animation}
+.rn-animationTimingFunction-1ldzwu0{-webkit-animation-timing-function:linear;animation-timing-function:linear}
+.rn-animationPlayState-1abnn5w{-webkit-animation-play-state:paused;animation-play-state:paused}
+.rn-transitionDuration-eafdt9{-webkit-transition-duration:0.15s;transition-duration:0.15s}
+.rn-transitionDuration-13tjlyg{-webkit-transition-duration:0.1s;transition-duration:0.1s}
+.rn-transitionProperty-1i6wzkk{-moz-transition-property:opacity;-webkit-transition-property:opacity;transition-property:opacity}
+.rn-borderTopLeftRadius-1iymjk7{border-top-left-radius:2px}
+.rn-borderTopLeftRadius-jt3ufn{border-top-left-radius:100%}
+.rn-borderTopLeftRadius-ou6ah9{border-top-left-radius:0px}
+.rn-borderTopRightRadius-s2skl2{border-top-right-radius:2px}
+.rn-borderTopRightRadius-1e868j9{border-top-right-radius:100%}
+.rn-borderTopRightRadius-t12b5v{border-top-right-radius:0px}
+.rn-borderBottomRightRadius-l5bh9y{border-bottom-right-radius:2px}
+.rn-borderBottomRightRadius-ujv9e3{border-bottom-right-radius:100%}
+.rn-borderBottomRightRadius-zmljjp{border-bottom-right-radius:0px}
+.rn-borderBottomLeftRadius-101sy47{border-bottom-left-radius:2px}
+.rn-borderBottomLeftRadius-1hakmuk{border-bottom-left-radius:100%}
+.rn-borderBottomLeftRadius-pm2fo{border-bottom-left-radius:0px}
+.rn-fontWeight-majxgm{font-weight:500}
+.rn-textTransform-tsynxw{text-transform:uppercase}
+.rn-alignSelf-k200y{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start}
+.rn-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5)}
+.rn-borderTopColor-kqr9px{border-top-color:black}
+.rn-borderRightColor-q0dj5p{border-right-color:black}
+.rn-borderBottomColor-1ah7hsa{border-bottom-color:black}
+.rn-borderLeftColor-137uh4u{border-left-color:black}
+.rn-resize-1dz5y72{resize:none}",
  },
 ]
 `;
--- a/src/components/ActivityIndicator/tests/snapshots/index-test.js.snap
+++ b/src/components/ActivityIndicator/tests/snapshots/index-test.js.snap
@@ -6,20 +6,24 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        19,
-        17,
-        18,
-        16,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationPlayState": "paused",
+        "animationTimingFunction": "linear",
+        "height": 20,
+        "visibility": "hidden",
+        "width": 20,
+      }
    }
  >
    <svg
@@ -65,20 +69,22 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        19,
-        17,
-        false,
-        false,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationTimingFunction": "linear",
+        "height": 20,
+        "width": 20,
+      }
    }
  >
    <svg
@@ -160,20 +166,23 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        19,
-        17,
-        18,
-        false,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationPlayState": "paused",
+        "animationTimingFunction": "linear",
+        "height": 20,
+        "width": 20,
+      }
    }
  >
    <svg
@@ -219,20 +228,24 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        19,
-        17,
-        18,
-        16,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationPlayState": "paused",
+        "animationTimingFunction": "linear",
+        "height": 20,
+        "visibility": "hidden",
+        "width": 20,
+      }
    }
  >
    <svg
@@ -278,20 +291,22 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        20,
-        17,
-        false,
-        false,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationTimingFunction": "linear",
+        "height": 36,
+        "width": 36,
+      }
    }
  >
    <svg
@@ -337,23 +352,22 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
  aria-valuemax="1"
  aria-valuemin="0"
  style={
-    Array [
-      15,
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+    }
  }
 >
  <View
    style={
-      Array [
-        Object {
-          "height": 30,
-          "width": 30,
-        },
-        17,
-        false,
-        false,
-      ]
+      Object {
+        "animationDuration": "0.75s",
+        "animationIterationCount": "infinite",
+        "animationName": "rn-ActivityIndicator-animation",
+        "animationTimingFunction": "linear",
+        "height": 30,
+        "width": 30,
+      }
    }
  >
    <svg
--- a/yarn.lock
+++ b/yarn.lock
@@ -1684,15 +1684,16 @@ entities@^1.1.1, entities@~1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"

-enzyme-adapter-react-16@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.0.tgz#e7edd5536743818dcbef336d40d7da59b3a7db8e"
+enzyme-adapter-react-16@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.2.tgz#8c6f431f17c69e1e9eeb25ca4bd92f31971eb2dd"
  dependencies:
    enzyme-adapter-utils "^1.0.0"
    lodash "^4.17.4"
    object.assign "^4.0.4"
    object.values "^1.0.4"
    prop-types "^15.5.10"
+    react-test-renderer "^16.0.0-0"

 enzyme-adapter-utils@^1.0.0:
  version "1.0.0"
@@ -1702,15 +1703,15 @@ enzyme-adapter-utils@^1.0.0:
    object.assign "^4.0.4"
    prop-types "^15.5.10"

-enzyme-to-json@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.0.1.tgz#16468e2ff3e4db817d84f9df38760abbc322273d"
+enzyme-to-json@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.1.4.tgz#a4a85a8f7b561cb8c9c0d728ad1b619a3fed7df2"
  dependencies:
    lodash "^4.17.4"

-enzyme@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.0.0.tgz#94ce364254dc654c4e619b25eecc644bf6481de7"
+enzyme@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.1.0.tgz#d8ca84085790fbcec6ed40badd14478faee4c25a"
  dependencies:
    cheerio "^1.0.0-rc.2"
    function.prototype.name "^1.0.3"
@@ -1721,7 +1722,7 @@ enzyme@^3.0.0:
    object.entries "^1.0.4"
    object.values "^1.0.4"
    raf "^3.3.2"
-    rst-selector-parser "^2.2.1"
+    rst-selector-parser "^2.2.2"

 "errno@>=0.1.1 <0.2.0-0", errno@^0.1.3:
  version "0.1.4"
@@ -4382,7 +4383,7 @@ react-proxy@^1.1.7:
    lodash "^4.6.1"
    react-deep-force-update "^1.0.0"

-react-test-renderer@^16.0.0:
+react-test-renderer@^16.0.0, react-test-renderer@^16.0.0-0:
  version "16.0.0"
  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.0.0.tgz#9fe7b8308f2f71f29fc356d4102086f131c9cb15"
  dependencies:
@@ -4651,7 +4652,7 @@ ripemd160@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"

-rst-selector-parser@^2.2.1:
+rst-selector-parser@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.2.tgz#9927b619bd5af8dc23a76c64caef04edf90d2c65"
  dependencies: