Repository: callstack/react-native-paper
Pull request #780 (2019-01-29 14:52:01)

fix: animated icon change
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Motivation

This PR introduces a new property `animated` on `IconButton` which determines whether an icon change is animated or not. For example, for `ToggleButton` we do not want to have an animation but for `Appbar.Action` we want it (i.e. for contextual appbar). This will fix https://github.com/callstack/react-native-paper/issues/764.

### Test plan

See examples app.


callstack-bot: Hey @jaulz, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://7410-71323749-gh.circle-artifacts.com/0/docs/index.html). Please remember to update Typescript types if you changed API.

Patch:
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8764975ec..25da8037f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -25,7 +25,7 @@ We prefix our commit messages with one of the following to signify the kind of c
 * `refactor`: code/structure refactor, e.g. new structure folder for components.
 * `docs`: changes into documentation, e.g. add usage example for Button.
 * `test`: adding or updating tests, eg unit, snapshot testing.
-* `chore`: tooling changes, e.g. change circle ci config.
+* `chore`: tooling changes, e.g. change circleci config.
 * `BREAKING`: for changes that break existing usage, e.g. change API of a component.
 
 Our pre-commit hooks verify that your commit message matches this format when committing.
@@ -57,13 +57,15 @@ When you're working on a component:
 
 ### Running the example
 
-The example app uses [Expo](https://expo.io/). You will need to install the Expo app for [Android](https://play.google.com/store/apps/details?id=host.exp.exponent) and [iOS](https://itunes.apple.com/app/apple-store/id982107779) to start developing.
+The example app uses [Expo](https://expo.io/) for the React Native example. You will need to install the Expo app for [Android](https://play.google.com/store/apps/details?id=host.exp.exponent) and [iOS](https://itunes.apple.com/app/apple-store/id982107779) to start developing.
 
-After you're done, you can run `yarn start` or `expo start` in the `example/` folder and scan the QR code to launch it on your device.
+After you're done, you can run `yarn example start` in the project root (or `expo start` in the `example/` folder) and scan the QR code to launch it on your device.
+
+To run the example on web, run `yarn example web` in the project root.
 
 ### Working on documentation
 
-The documentation is automatically generated from the [flowtype](https://flowtype.org) annotations in the components. You can add comments above the type annotations to add descriptions. To preview the generated documentation, run `yarn start` in the `docs/` folder.
+The documentation is automatically generated from the [flowtype](https://flowtype.org) annotations in the components. You can add comments above the type annotations to add descriptions. To preview the generated documentation, run `yarn docs start` in the project root.
 
 ### Publishing a release
 
diff --git a/example/App.web.js b/example/App.web.js
index 5abb0b051..a166b002b 100644
--- a/example/App.web.js
+++ b/example/App.web.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render } from 'react-dom';
 import App from './src/index';
+import './assets/styles/fonts.css';
 
 render(<App />, document.getElementById('root'));
diff --git a/example/assets/styles/fonts.css b/example/assets/styles/fonts.css
new file mode 100644
index 000000000..1b282d638
--- /dev/null
+++ b/example/assets/styles/fonts.css
@@ -0,0 +1,47 @@
+@font-face {
+    font-family: 'Roboto-Thin';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 100;
+    src:
+        local('Roboto Thin '),
+        local('Roboto-Thin'),
+        url('~typeface-roboto/files/roboto-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
+        url('~typeface-roboto/files/roboto-latin-100.woff') format('woff'); /* Modern Browsers */
+}
+  
+@font-face {
+    font-family: 'Roboto-Light';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 300;
+    src:
+        local('Roboto Light '),
+        local('Roboto-Light'),
+        url('~typeface-roboto/files/roboto-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+        url('~typeface-roboto/files/roboto-latin-300.woff') format('woff'); /* Modern Browsers */
+}
+  
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400;
+    src:
+        local('Roboto Regular '),
+        local('Roboto-Regular'),
+        url('~typeface-roboto/files/roboto-latin-400.woff2') format('woff2'), /* Super Modern Browsers */
+        url('~typeface-roboto/files/roboto-latin-400.woff') format('woff'); /* Modern Browsers */
+}
+  
+@font-face {
+    font-family: 'Roboto-Medium';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 500;
+    src:
+        local('Roboto Medium '),
+        local('Roboto-Medium'),
+        url('~typeface-roboto/files/roboto-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+        url('~typeface-roboto/files/roboto-latin-500.woff') format('woff'); /* Modern Browsers */
+}
\ No newline at end of file
diff --git a/example/package.json b/example/package.json
index 6bad67ed4..0c71b33f4 100644
--- a/example/package.json
+++ b/example/package.json
@@ -23,7 +23,8 @@
     "react-lifecycles-compat": "^3.0.4",
     "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",
     "react-native-web": "^0.10.0-alpha.3",
-    "react-navigation": "^2.18.2"
+    "react-navigation": "^2.18.2",
+    "typeface-roboto": "^0.0.54"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.3.0",
@@ -34,7 +35,9 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-preset-expo": "^5.0.0",
+    "css-loader": "^2.1.0",
     "expo-cli": "^2.3.8",
+    "style-loader": "^0.23.1",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14"
diff --git a/example/public/index.html b/example/public/index.html
index ef9e686e2..62cc885b4 100644
--- a/example/public/index.html
+++ b/example/public/index.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
 
   <title>App</title>
-  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500" rel="stylesheet">
   <style>
     html, body, #root {
       height: 100%;
diff --git a/example/webpack.config.js b/example/webpack.config.js
index 512a68360..2e581e91b 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -48,6 +48,10 @@ module.exports = {
         test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
         loader: 'file-loader',
       },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   devServer: {
diff --git a/example/yarn.lock b/example/yarn.lock
index ee6007f60..ac646ff3b 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -2938,6 +2938,15 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
@@ -3500,6 +3509,22 @@ css-in-js-utils@^2.0.0:
     hyphenate-style-name "^1.0.2"
     isobject "^3.0.1"
 
+css-loader@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.0.tgz#42952ac22bca5d076978638e9813abce49b8f0cc"
+  integrity sha512-MoOu+CStsGrSt5K2OeZ89q3Snf+IkxRfAIt9aAKg4piioTrhtP1iEFPu+OVn3Ohz24FO6L+rw9UJxBILiSBw5Q==
+  dependencies:
+    icss-utils "^4.0.0"
+    loader-utils "^1.2.1"
+    lodash "^4.17.11"
+    postcss "^7.0.6"
+    postcss-modules-extract-imports "^2.0.0"
+    postcss-modules-local-by-default "^2.0.3"
+    postcss-modules-scope "^2.0.0"
+    postcss-modules-values "^2.0.0"
+    postcss-value-parser "^3.3.0"
+    schema-utils "^1.0.0"
+
 css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -3510,11 +3535,25 @@ css-select@~1.2.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
+css-selector-tokenizer@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz#a177271a8bca5019172f4f891fc6eed9cbf68d5d"
+  integrity sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==
+  dependencies:
+    cssesc "^0.1.0"
+    fastparse "^1.1.1"
+    regexpu-core "^1.0.0"
+
 css-what@2.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
   integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==
 
+cssesc@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+  integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=
+
 cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@@ -4653,6 +4692,11 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
   integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
 
+fastparse@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -5593,6 +5637,18 @@ iconv-lite@0.4.23, iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
+
+icss-utils@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.0.0.tgz#d52cf4bcdcfa1c45c2dbefb4ffdf6b00ef608098"
+  integrity sha512-bA/xGiwWM17qjllIs9X/y0EjsB7e0AV08F3OL8UPsoNkNRibIuu8f1eKTnQ8QO1DteKKTxTUAn+IEWUToIwGOA==
+  dependencies:
+    postcss "^7.0.5"
+
 idx@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/idx/-/idx-2.3.0.tgz#4ae3fe3fca4c1baeccf2dde83d9d8b50b47cc465"
@@ -6412,7 +6468,7 @@ loader-runner@^2.3.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.1:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -6572,7 +6628,7 @@ lodash@4.17.5:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
   integrity sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==
 
-lodash@4.x, lodash@^4.13.1, lodash@^4.14.1, lodash@^4.2.1:
+lodash@4.x, lodash@^4.13.1, lodash@^4.14.1, lodash@^4.17.11, lodash@^4.2.1:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -8019,6 +8075,52 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-modules-extract-imports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
+  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
+  dependencies:
+    postcss "^7.0.5"
+
+postcss-modules-local-by-default@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.4.tgz#a000bb07e4f57f412ba35c904d035cfd4a7b9446"
+  integrity sha512-WvuSaTKXUqYJbnT7R3YrsNrHv/C5vRfr5VglS4bFOk0MYT4CLBfc/xgExA+x2RftlYgiBDvWmVs191Xv8S8gZQ==
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^7.0.6"
+    postcss-value-parser "^3.3.1"
+
+postcss-modules-scope@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.0.1.tgz#2c0f2394cde4cd09147db054c68917e38f6d43a4"
+  integrity sha512-7+6k9c3/AuZ5c596LJx9n923A/j3nF3ormewYBF1RrIQvjvjXe1xE8V8A1KFyFwXbvnshT6FBZFX0k/F1igneg==
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^7.0.6"
+
+postcss-modules-values@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64"
+  integrity sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w==
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^7.0.6"
+
+postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
+  integrity sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 pouchdb-collections@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz#fe63a17da977611abef7cb8026cb1a9553fd8359"
@@ -8716,7 +8818,7 @@ regenerate-unicode-properties@^7.0.0:
   dependencies:
     regenerate "^1.4.0"
 
-regenerate@^1.4.0:
+regenerate@^1.2.1, regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
@@ -8776,6 +8878,15 @@ regexp-tree@^0.1.0:
     colors "^1.1.2"
     yargs "^10.0.3"
 
+regexpu-core@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+  integrity sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=
+  dependencies:
+    regenerate "^1.2.1"
+    regjsgen "^0.2.0"
+    regjsparser "^0.1.4"
+
 regexpu-core@^4.1.3:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.2.0.tgz#a3744fa03806cffe146dea4421a3e73bdcc47b1d"
@@ -8815,6 +8926,11 @@ registry-url@^3.1.0:
   dependencies:
     rc "^1.0.1"
 
+regjsgen@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7"
+  integrity sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=
+
 regjsgen@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.4.0.tgz#c1eb4c89a209263f8717c782591523913ede2561"
@@ -8825,6 +8941,13 @@ regjsgen@^0.5.0:
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.0.tgz#a7634dc08f89209c2049adda3525711fb97265dd"
   integrity sha512-RnIrLhrXCX5ow/E5/Mh2O4e/oa1/jW0eaBKTSy3LaCj+M3Bqvm97GWDp2yUtzIs4LEn65zR2yiYGFqb2ApnzDA==
 
+regjsparser@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c"
+  integrity sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=
+  dependencies:
+    jsesc "~0.5.0"
+
 regjsparser@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.3.0.tgz#3c326da7fcfd69fa0d332575a41c8c0cdf588c96"
@@ -9706,6 +9829,14 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+style-loader@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
+  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+
 subscriptions-transport-ws@0.9.8:
   version "0.9.8"
   resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.8.tgz#3a26ab96e06f78cf4ace8d083f6227fa55970947"
@@ -9760,6 +9891,13 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 symbol-observable@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
@@ -10047,6 +10185,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typeface-roboto@^0.0.54:
+  version "0.0.54"
+  resolved "https://registry.yarnpkg.com/typeface-roboto/-/typeface-roboto-0.0.54.tgz#8f02c9a18d1cfa7f49381a6ff0d21ff061f38ad2"
+  integrity sha512-sOFA1FXgP0gOgBYlS6irwq6hHYA370KE3dPlgYEJHL3PJd5X8gQE0RmL79ONif6fL5JZuGDj+rtOrFeOqz5IZQ==
+
 ua-parser-js@^0.7.18:
   version "0.7.19"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
diff --git a/package.json b/package.json
index a6c63a5aa..b510690e6 100644
--- a/package.json
+++ b/package.json
@@ -36,8 +36,10 @@
     "lint": "eslint .",
     "test": "jest",
     "prepare": "node ./scripts/generate-mappings",
+    "release": "release-it",
     "bootstrap": "yarn && yarn --cwd example && yarn --cwd docs",
-    "release": "release-it"
+    "docs": "yarn --cwd docs",
+    "example": "yarn --cwd example"
   },
   "husky": {
     "hooks": {
diff --git a/src/components/Appbar/AppbarAction.js b/src/components/Appbar/AppbarAction.js
index 211b01b06..bc11ae06a 100644
--- a/src/components/Appbar/AppbarAction.js
+++ b/src/components/Appbar/AppbarAction.js
@@ -64,6 +64,7 @@ export default class AppbarAction extends React.Component<Props> {
         icon={icon}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
+        animated
         {...rest}
       />
     );
diff --git a/src/components/IconButton.js b/src/components/IconButton.js
index 8f6426e4d..71a5088e3 100644
--- a/src/components/IconButton.js
+++ b/src/components/IconButton.js
@@ -5,6 +5,7 @@ import { View, StyleSheet } from 'react-native';
 import color from 'color';
 
 import TouchableRipple from './TouchableRipple';
+import Icon from './Icon';
 import CrossFadeIcon from './CrossFadeIcon';
 import { withTheme } from '../core/theming';
 import type { IconSource } from './Icon';
@@ -27,6 +28,10 @@ type Props = $RemoveChildren<typeof TouchableRipple> & {|
    * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
    */
   disabled?: boolean,
+  /**
+   * Whether an icon change is animated.
+   */
+  animated?: boolean,
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
@@ -80,6 +85,7 @@ const IconButton = ({
   accessibilityLabel,
   disabled,
   onPress,
+  animated = false,
   theme,
   style,
   ...rest
@@ -90,6 +96,7 @@ const IconButton = ({
     .alpha(0.32)
     .rgb()
     .string();
+  const IconComponent = animated ? CrossFadeIcon : Icon;
 
   return (
     <TouchableRipple
@@ -111,7 +118,7 @@ const IconButton = ({
       {...rest}
     >
       <View>
-        <CrossFadeIcon color={iconColor} source={icon} size={size} />
+        <IconComponent color={iconColor} source={icon} size={size} />
       </View>
     </TouchableRipple>
   );
diff --git a/src/styles/fonts.js b/src/styles/fonts.js
index 0ba28471a..b94518cbd 100644
--- a/src/styles/fonts.js
+++ b/src/styles/fonts.js
@@ -2,10 +2,12 @@ import { Platform } from 'react-native';
 
 const fonts = Platform.select({
   web: {
-    regular: 'Roboto',
-    medium: 'Roboto-Medium',
-    light: 'Roboto-Light',
-    thin: 'Roboto-Thin',
+    regular: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    medium:
+      'Roboto-Medium, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    light:
+      'Roboto-Light, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
+    thin: 'Roboto-Thin, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
   },
   ios: {
     regular: 'Helvetica Neue',
diff --git a/src/styles/shadow.js b/src/styles/shadow.js
index 6e2d030d7..ef0c31687 100644
--- a/src/styles/shadow.js
+++ b/src/styles/shadow.js
@@ -1,22 +1,37 @@
 /* @flow */
 
 import * as Colors from './colors';
+import { Animated } from 'react-native';
 
-export default function shadow(elevation: number) {
+export default function shadow(elevation: number | Animated.Value) {
   let height, radius;
-  switch (elevation) {
-    case 1:
-      height = 0.5;
-      radius = 0.75;
-      break;
-    case 2:
-      height = 0.75;
-      radius = 1.5;
-      break;
-    default:
-      height = elevation - 1;
-      radius = elevation;
+
+  if (elevation instanceof Animated.Value) {
+    height = elevation.interpolate({
+      inputRange: [0, 1, 2, 3, 8, 24],
+      outputRange: [0, 0.5, 0.75, 2, 7, 23],
+    });
+
+    radius = elevation.interpolate({
+      inputRange: [0, 1, 2, 3, 8, 24],
+      outputRange: [0, 0.75, 1.5, 3, 8, 24],
+    });
+  } else {
+    switch (elevation) {
+      case 1:
+        height = 0.5;
+        radius = 0.75;
+        break;
+      case 2:
+        height = 0.75;
+        radius = 1.5;
+        break;
+      default:
+        height = elevation - 1;
+        radius = elevation;
+    }
   }
+
   return {
     shadowColor: Colors.black,
     shadowOffset: {
diff --git a/typings/components/IconButton.d.ts b/typings/components/IconButton.d.ts
index 930b6d5c4..cad3f4449 100644
--- a/typings/components/IconButton.d.ts
+++ b/typings/components/IconButton.d.ts
@@ -6,6 +6,7 @@ export interface IconButtonProps extends TouchableRipplePropsWithoutChildren {
   icon: IconSource;
   color?: string;
   size?: number;
+  animated?: boolean;
 }
 
 export declare class IconButton extends React.Component<IconButtonProps> {}


Test patch:
diff --git a/src/components/__tests__/IconButton.test.js b/src/components/__tests__/IconButton.test.js
index 67c8d6277..9a4427e99 100644
--- a/src/components/__tests__/IconButton.test.js
+++ b/src/components/__tests__/IconButton.test.js
@@ -34,3 +34,11 @@ it('renders disabled icon button', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders icon change animated', () => {
+  const tree = renderer
+    .create(<IconButton icon="add-a-photo" animated />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
index ee192bf5b..a640ed5fc 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -181,7 +181,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
             "minWidth": "auto",
             "shadowColor": "#000000",
             "shadowOffset": Object {
-              "height": NaN,
+              "height": 0,
               "width": 0,
             },
             "shadowOpacity": 0.24,
@@ -334,7 +334,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
             "minWidth": "auto",
             "shadowColor": "#000000",
             "shadowOffset": Object {
-              "height": NaN,
+              "height": 0,
               "width": 0,
             },
             "shadowOpacity": 0.24,
@@ -416,7 +416,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
             "minWidth": "auto",
             "shadowColor": "#000000",
             "shadowOffset": Object {
-              "height": NaN,
+              "height": 0,
               "width": 0,
             },
             "shadowOpacity": 0.24,
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index 4793677bf..d6364056a 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -13,7 +13,7 @@ exports[`renders button with color 1`] = `
       "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
-        "height": NaN,
+        "height": 0,
         "width": 0,
       },
       "shadowOpacity": 0.24,
@@ -95,7 +95,7 @@ exports[`renders button with icon 1`] = `
       "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
-        "height": NaN,
+        "height": 0,
         "width": 0,
       },
       "shadowOpacity": 0.24,
@@ -221,11 +221,11 @@ exports[`renders contained contained with mode 1`] = `
       "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
-        "height": NaN,
+        "height": 0.75,
         "width": 0,
       },
       "shadowOpacity": 0.24,
-      "shadowRadius": 2,
+      "shadowRadius": 1.5,
     }
   }
 >
@@ -383,7 +383,7 @@ exports[`renders loading button 1`] = `
       "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
-        "height": NaN,
+        "height": 0,
         "width": 0,
       },
       "shadowOpacity": 0.24,
@@ -478,7 +478,7 @@ exports[`renders outlined button with mode 1`] = `
       "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
-        "height": NaN,
+        "height": 0,
         "width": 0,
       },
       "shadowOpacity": 0.24,
@@ -560,7 +560,7 @@ exports[`renders text button by default 1`] = `
       "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
-        "height": NaN,
+        "height": 0,
         "width": 0,
       },
       "shadowOpacity": 0.24,
@@ -642,7 +642,7 @@ exports[`renders text button with mode 1`] = `
       "minWidth": 64,
       "shadowColor": "#000000",
       "shadowOffset": Object {
-        "height": NaN,
+        "height": 0,
         "width": 0,
       },
       "shadowOpacity": 0.24,
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
index 42db18293..a64841767 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -231,73 +231,40 @@ exports[`renders data table pagination 1`] = `
     <View
       style={null}
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "alignItems": "center",
-              "justifyContent": "center",
+              "color": "#000000",
+              "fontSize": 24,
             },
+            Array [
+              Object {
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              Object {
+                "backgroundColor": "transparent",
+              },
+            ],
             Object {
-              "height": 24,
-              "width": 24,
+              "fontFamily": "Material Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
             },
+            Object {},
           ]
         }
       >
-        <View
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": Array [
-                Object {
-                  "rotate": "0deg",
-                },
-              ],
-            }
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            allowFontScaling={false}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontSize": 24,
-                },
-                Array [
-                  Object {
-                    "transform": Array [
-                      Object {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  Object {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-                Object {
-                  "fontFamily": "Material Icons",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                Object {},
-              ]
-            }
-          >
-            
-          </Text>
-        </View>
-      </View>
+        
+      </Text>
     </View>
   </View>
   <View
@@ -336,73 +303,40 @@ exports[`renders data table pagination 1`] = `
     <View
       style={null}
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "alignItems": "center",
-              "justifyContent": "center",
+              "color": "#000000",
+              "fontSize": 24,
             },
+            Array [
+              Object {
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              Object {
+                "backgroundColor": "transparent",
+              },
+            ],
             Object {
-              "height": 24,
-              "width": 24,
+              "fontFamily": "Material Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
             },
+            Object {},
           ]
         }
       >
-        <View
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": Array [
-                Object {
-                  "rotate": "0deg",
-                },
-              ],
-            }
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            allowFontScaling={false}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontSize": 24,
-                },
-                Array [
-                  Object {
-                    "transform": Array [
-                      Object {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  Object {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-                Object {
-                  "fontFamily": "Material Icons",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                Object {},
-              ]
-            }
-          >
-            
-          </Text>
-        </View>
-      </View>
+        
+      </Text>
     </View>
   </View>
 </View>
@@ -482,73 +416,40 @@ exports[`renders data table pagination with label 1`] = `
     <View
       style={null}
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "alignItems": "center",
-              "justifyContent": "center",
+              "color": "#000000",
+              "fontSize": 24,
             },
+            Array [
+              Object {
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              Object {
+                "backgroundColor": "transparent",
+              },
+            ],
             Object {
-              "height": 24,
-              "width": 24,
+              "fontFamily": "Material Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
             },
+            Object {},
           ]
         }
       >
-        <View
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": Array [
-                Object {
-                  "rotate": "0deg",
-                },
-              ],
-            }
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            allowFontScaling={false}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontSize": 24,
-                },
-                Array [
-                  Object {
-                    "transform": Array [
-                      Object {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  Object {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-                Object {
-                  "fontFamily": "Material Icons",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                Object {},
-              ]
-            }
-          >
-            
-          </Text>
-        </View>
-      </View>
+        
+      </Text>
     </View>
   </View>
   <View
@@ -587,73 +488,40 @@ exports[`renders data table pagination with label 1`] = `
     <View
       style={null}
     >
-      <View
+      <Text
+        accessibilityElementsHidden={true}
+        allowFontScaling={false}
+        importantForAccessibility="no-hide-descendants"
+        pointerEvents="none"
         style={
           Array [
             Object {
-              "alignItems": "center",
-              "justifyContent": "center",
+              "color": "#000000",
+              "fontSize": 24,
             },
+            Array [
+              Object {
+                "transform": Array [
+                  Object {
+                    "scaleX": 1,
+                  },
+                ],
+              },
+              Object {
+                "backgroundColor": "transparent",
+              },
+            ],
             Object {
-              "height": 24,
-              "width": 24,
+              "fontFamily": "Material Icons",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
             },
+            Object {},
           ]
         }
       >
-        <View
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "transform": Array [
-                Object {
-                  "rotate": "0deg",
-                },
-              ],
-            }
-          }
-        >
-          <Text
-            accessibilityElementsHidden={true}
-            allowFontScaling={false}
-            importantForAccessibility="no-hide-descendants"
-            pointerEvents="none"
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontSize": 24,
-                },
-                Array [
-                  Object {
-                    "transform": Array [
-                      Object {
-                        "scaleX": 1,
-                      },
-                    ],
-                  },
-                  Object {
-                    "backgroundColor": "transparent",
-                  },
-                ],
-                Object {
-                  "fontFamily": "Material Icons",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                Object {},
-              ]
-            }
-          >
-            
-          </Text>
-        </View>
-      </View>
+        
+      </Text>
     </View>
   </View>
 </View>
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.js.snap b/src/components/__tests__/__snapshots__/IconButton.test.js.snap
index 9acc4f86e..2c3287312 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.js.snap
@@ -44,73 +44,40 @@ exports[`renders disabled icon button 1`] = `
   <View
     style={null}
   >
-    <View
+    <Text
+      accessibilityElementsHidden={true}
+      allowFontScaling={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "justifyContent": "center",
+            "color": "#000000",
+            "fontSize": 24,
           },
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            Object {
+              "backgroundColor": "transparent",
+            },
+          ],
           Object {
-            "height": 24,
-            "width": 24,
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
           },
+          Object {},
         ]
       }
     >
-      <View
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 1,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": Array [
-              Object {
-                "rotate": "0deg",
-              },
-            ],
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
-                "color": "#000000",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-    </View>
+      
+    </Text>
   </View>
 </View>
 `;
@@ -152,73 +119,40 @@ exports[`renders icon button by default 1`] = `
   <View
     style={null}
   >
-    <View
+    <Text
+      accessibilityElementsHidden={true}
+      allowFontScaling={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "justifyContent": "center",
+            "color": "#000000",
+            "fontSize": 24,
           },
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            Object {
+              "backgroundColor": "transparent",
+            },
+          ],
           Object {
-            "height": 24,
-            "width": 24,
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
           },
+          Object {},
         ]
       }
     >
-      <View
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 1,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": Array [
-              Object {
-                "rotate": "0deg",
-              },
-            ],
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
-                "color": "#000000",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-    </View>
+      
+    </Text>
   </View>
 </View>
 `;
@@ -260,78 +194,120 @@ exports[`renders icon button with color 1`] = `
   <View
     style={null}
   >
-    <View
+    <Text
+      accessibilityElementsHidden={true}
+      allowFontScaling={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "justifyContent": "center",
+            "color": "#e91e63",
+            "fontSize": 24,
           },
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            Object {
+              "backgroundColor": "transparent",
+            },
+          ],
           Object {
-            "height": 24,
-            "width": 24,
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
           },
+          Object {},
         ]
       }
     >
-      <View
-        style={
+      
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`renders icon button with size 1`] = `
+<View
+  accessibilityRole="button"
+  accessible={true}
+  hitSlop={
+    Object {
+      "bottom": 6,
+      "left": 6,
+      "right": 6,
+      "top": 6,
+    }
+  }
+  isTVSelectable={true}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderRadius": 18,
+        "height": 36,
+        "justifyContent": "center",
+        "margin": 6,
+        "width": 36,
+      },
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <View
+    style={null}
+  >
+    <Text
+      accessibilityElementsHidden={true}
+      allowFontScaling={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+      style={
+        Array [
           Object {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 1,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": Array [
-              Object {
-                "rotate": "0deg",
-              },
-            ],
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
-                "color": "#e91e63",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
+            "color": "#000000",
+            "fontSize": 30,
+          },
+          Array [
+            Object {
+              "transform": Array [
                 Object {
-                  "backgroundColor": "transparent",
+                  "scaleX": 1,
                 },
               ],
-              Object {
-                "fontFamily": "Material Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-    </View>
+            },
+            Object {
+              "backgroundColor": "transparent",
+            },
+          ],
+          Object {
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
+          },
+          Object {},
+        ]
+      }
+    >
+      
+    </Text>
   </View>
 </View>
 `;
 
-exports[`renders icon button with size 1`] = `
+exports[`renders icon change animated 1`] = `
 <View
   accessibilityRole="button"
   accessible={true}
@@ -376,8 +352,8 @@ exports[`renders icon button with size 1`] = `
             "justifyContent": "center",
           },
           Object {
-            "height": 30,
-            "width": 30,
+            "height": 24,
+            "width": 24,
           },
         ]
       }
@@ -408,7 +384,7 @@ exports[`renders icon button with size 1`] = `
             Array [
               Object {
                 "color": "#000000",
-                "fontSize": 30,
+                "fontSize": 24,
               },
               Array [
                 Object {
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index 8e05adf4d..b3f6e0a9a 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -152,7 +152,7 @@ exports[`renders snackbar with action button 1`] = `
           "minWidth": "auto",
           "shadowColor": "#000000",
           "shadowOffset": Object {
-            "height": NaN,
+            "height": 0,
             "width": 0,
           },
           "shadowOpacity": 0.24,
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
index ac57eacb4..3f5c015a9 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -56,73 +56,40 @@ exports[`renders disabled toggle button 1`] = `
   <View
     style={null}
   >
-    <View
+    <Text
+      accessibilityElementsHidden={true}
+      allowFontScaling={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "justifyContent": "center",
+            "color": "#000000",
+            "fontSize": 24,
           },
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            Object {
+              "backgroundColor": "transparent",
+            },
+          ],
           Object {
-            "height": 24,
-            "width": 24,
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
           },
+          Object {},
         ]
       }
     >
-      <View
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 1,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": Array [
-              Object {
-                "rotate": "0deg",
-              },
-            ],
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
-                "color": "#000000",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-    </View>
+      
+    </Text>
   </View>
 </View>
 `;
@@ -176,73 +143,40 @@ exports[`renders toggle button 1`] = `
   <View
     style={null}
   >
-    <View
+    <Text
+      accessibilityElementsHidden={true}
+      allowFontScaling={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "justifyContent": "center",
+            "color": "#000000",
+            "fontSize": 24,
           },
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            Object {
+              "backgroundColor": "transparent",
+            },
+          ],
           Object {
-            "height": 24,
-            "width": 24,
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
           },
+          Object {},
         ]
       }
     >
-      <View
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 1,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": Array [
-              Object {
-                "rotate": "0deg",
-              },
-            ],
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
-                "color": "#000000",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-    </View>
+      
+    </Text>
   </View>
 </View>
 `;
@@ -303,73 +237,40 @@ exports[`renders unchecked toggle button 1`] = `
   <View
     style={null}
   >
-    <View
+    <Text
+      accessibilityElementsHidden={true}
+      allowFontScaling={false}
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
       style={
         Array [
           Object {
-            "alignItems": "center",
-            "justifyContent": "center",
+            "color": "#000000",
+            "fontSize": 24,
           },
+          Array [
+            Object {
+              "transform": Array [
+                Object {
+                  "scaleX": 1,
+                },
+              ],
+            },
+            Object {
+              "backgroundColor": "transparent",
+            },
+          ],
           Object {
-            "height": 24,
-            "width": 24,
+            "fontFamily": "Material Icons",
+            "fontStyle": "normal",
+            "fontWeight": "normal",
           },
+          Object {},
         ]
       }
     >
-      <View
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "opacity": 1,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": Array [
-              Object {
-                "rotate": "0deg",
-              },
-            ],
-          }
-        }
-      >
-        <Text
-          accessibilityElementsHidden={true}
-          allowFontScaling={false}
-          importantForAccessibility="no-hide-descendants"
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
-                "color": "#000000",
-                "fontSize": 24,
-              },
-              Array [
-                Object {
-                  "transform": Array [
-                    Object {
-                      "scaleX": 1,
-                    },
-                  ],
-                },
-                Object {
-                  "backgroundColor": "transparent",
-                },
-              ],
-              Object {
-                "fontFamily": "Material Icons",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              Object {},
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-    </View>
+      
+    </Text>
   </View>
 </View>
 `;