Repository: callstack/react-native-paper
Pull request #557 (2018-09-26 19:02:18)

fix: Surface View to Animated.View
<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Motivation
As @satya164  mentioned [here](https://github.com/callstack/react-native-paper/pull/485#discussion_r219710052)
<!-- What existing problem does the pull request solve? Can you solve the issue with a different approach? -->

### Test plan

<!-- List the steps with which we can test this change. Provide screenshots if this changes anything visual. -->


callstack-bot: Hey @iyadthayyil, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://4878-71323749-gh.circle-artifacts.com/0/docs/index.html).

Patch:
diff --git a/src/components/BottomNavigation.js b/src/components/BottomNavigation.js
index 37a07a6b0..328b91d5f 100644
--- a/src/components/BottomNavigation.js
+++ b/src/components/BottomNavigation.js
@@ -22,7 +22,6 @@ import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
-const AnimatedSurface = Animated.createAnimatedComponent(Surface);
 
 type Route = $Shape<{
   key: string,
@@ -571,7 +570,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
             );
           })}
         </View>
-        <AnimatedSurface style={[styles.bar, barStyle, { backgroundColor }]}>
+        <Surface style={[styles.bar, barStyle, { backgroundColor }]}>
           <SafeAreaView
             style={[styles.items, { maxWidth: maxTabWidth * routes.length }]}
           >
@@ -774,7 +773,7 @@ class BottomNavigation<T: *> extends React.Component<Props<T>, State> {
               );
             })}
           </SafeAreaView>
-        </AnimatedSurface>
+        </Surface>
       </View>
     );
   }
diff --git a/src/components/Button.js b/src/components/Button.js
index a1f0c9d91..965d79770 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -12,8 +12,6 @@ import { withTheme } from '../core/theming';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
-const AnimatedSurface = Animated.createAnimatedComponent(Surface);
-
 type Props = {
   /**
    * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
@@ -214,7 +212,7 @@ class Button extends React.Component<Props, State> {
     const elevation = disabled ? 0 : this.state.elevation;
 
     return (
-      <AnimatedSurface
+      <Surface
         {...rest}
         style={[
           styles.button,
@@ -269,7 +267,7 @@ class Button extends React.Component<Props, State> {
             </Text>
           </View>
         </TouchableRipple>
-      </AnimatedSurface>
+      </Surface>
     );
   }
 }
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
index 1d6d8d83c..3722fd8dd 100644
--- a/src/components/Card/Card.js
+++ b/src/components/Card/Card.js
@@ -14,8 +14,6 @@ import Surface from '../Surface';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 
-const AnimatedSurface = Animated.createAnimatedComponent(Surface);
-
 type Props = {
   /**
    * Resting elevation of the card which controls the drop shadow.
@@ -119,7 +117,7 @@ class Card extends React.Component<Props, State> {
           : null
     );
     return (
-      <AnimatedSurface style={[{ borderRadius: roundness, elevation }, style]}>
+      <Surface style={[{ borderRadius: roundness, elevation }, style]}>
         <TouchableWithoutFeedback
           delayPressIn={0}
           disabled={!(onPress || onLongPress)}
@@ -142,7 +140,7 @@ class Card extends React.Component<Props, State> {
             )}
           </View>
         </TouchableWithoutFeedback>
-      </AnimatedSurface>
+      </Surface>
     );
   }
 }
diff --git a/src/components/Chip.js b/src/components/Chip.js
index 679123aa8..a37305c09 100644
--- a/src/components/Chip.js
+++ b/src/components/Chip.js
@@ -18,8 +18,6 @@ import { black, white } from '../styles/colors';
 import type { Theme } from '../types';
 import type { IconSource } from './Icon';
 
-const AnimatedSurface = Animated.createAnimatedComponent(Surface);
-
 type Props = {
   /**
    * Mode of the chip.
@@ -184,7 +182,7 @@ class Chip extends React.Component<Props, State> {
     }
 
     return (
-      <AnimatedSurface
+      <Surface
         style={[
           styles.container,
           {
@@ -266,7 +264,7 @@ class Chip extends React.Component<Props, State> {
             ) : null}
           </View>
         </TouchableRipple>
-      </AnimatedSurface>
+      </Surface>
     );
   }
 }
diff --git a/src/components/Dialog/Dialog.js b/src/components/Dialog/Dialog.js
index f5532586a..f933b797a 100644
--- a/src/components/Dialog/Dialog.js
+++ b/src/components/Dialog/Dialog.js
@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import { StyleSheet, Platform, Animated } from 'react-native';
+import { StyleSheet, Platform } from 'react-native';
 import Modal from '../Modal';
 import Surface from '../Surface';
 import DialogContent from './DialogContent';
@@ -11,8 +11,6 @@ import DialogScrollArea from './DialogScrollArea';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 
-const AnimatedSurface = Animated.createAnimatedComponent(Surface);
-
 type Props = {
   /**
    * Determines whether clicking outside the dialog dismiss it.
@@ -111,7 +109,7 @@ class Dialog extends React.Component<Props, void> {
 
     return (
       <Modal dismissable={dismissable} onDismiss={onDismiss} visible={visible}>
-        <AnimatedSurface
+        <Surface
           style={[styles.container, { borderRadius: theme.roundness }, style]}
         >
           {React.Children.toArray(children)
@@ -130,7 +128,7 @@ class Dialog extends React.Component<Props, void> {
 
               return child;
             })}
-        </AnimatedSurface>
+        </Surface>
       </Modal>
     );
   }
diff --git a/src/components/FAB/FAB.js b/src/components/FAB/FAB.js
index 69b6f1046..bab38fc27 100644
--- a/src/components/FAB/FAB.js
+++ b/src/components/FAB/FAB.js
@@ -2,7 +2,7 @@
 
 import color from 'color';
 import * as React from 'react';
-import { Animated, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import FABGroup from './FABGroup';
 import Surface from '../Surface';
 import CrossFadeIcon from '../CrossFadeIcon';
@@ -13,8 +13,6 @@ import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 import type { IconSource } from './../Icon';
 
-const AnimatedSurface = Animated.createAnimatedComponent(Surface);
-
 type Props = {
   /**
    * Icon to display for the `FAB`.
@@ -123,7 +121,7 @@ class FAB extends React.Component<Props> {
       .string();
 
     return (
-      <AnimatedSurface
+      <Surface
         {...rest}
         style={[
           { backgroundColor },
@@ -164,7 +162,7 @@ class FAB extends React.Component<Props> {
             ) : null}
           </View>
         </TouchableRipple>
-      </AnimatedSurface>
+      </Surface>
     );
   }
 }
diff --git a/src/components/Surface.js b/src/components/Surface.js
index ceb8f1c47..01f0c963b 100644
--- a/src/components/Surface.js
+++ b/src/components/Surface.js
@@ -1,10 +1,9 @@
 /* @flow */
 
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { Animated, StyleSheet } from 'react-native';
 import shadow from '../styles/shadow';
 import { withTheme } from '../core/theming';
-import * as Colors from '../styles/colors';
 import type { Theme } from '../types';
 
 type Props = {
@@ -62,10 +61,9 @@ class Surface extends React.Component<Props> {
     const { elevation } = flattenedStyles;
 
     return (
-      <View
+      <Animated.View
         {...rest}
         style={[
-          styles.surface,
           { backgroundColor: theme.colors.surface },
           elevation && shadow(elevation),
           style,
@@ -76,9 +74,3 @@ class Surface extends React.Component<Props> {
 }
 
 export default withTheme(Surface);
-
-const styles = StyleSheet.create({
-  surface: {
-    backgroundColor: Colors.white,
-  },
-});


Test patch:
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 32d00e6e9..5723c1b83 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -56,29 +56,19 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 7,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 8,
-        },
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#6200ee",
-          "elevation": 8,
-          "overflow": "hidden",
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#6200ee",
+        "elevation": 8,
+        "overflow": "hidden",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 7,
+          "width": 0,
         },
-      ]
+        "shadowOpacity": 0.24,
+        "shadowRadius": 8,
+      }
     }
   >
     <RCTSafeAreaView
@@ -594,29 +584,19 @@ exports[`hides labels in shifting bottom navigation 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 7,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 8,
-        },
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "rgba(98, 0, 238, 1)",
-          "elevation": 8,
-          "overflow": "hidden",
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "rgba(98, 0, 238, 1)",
+        "elevation": 8,
+        "overflow": "hidden",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 7,
+          "width": 0,
         },
-      ]
+        "shadowOpacity": 0.24,
+        "shadowRadius": 8,
+      }
     }
   >
     <RCTSafeAreaView
@@ -1152,29 +1132,19 @@ exports[`renders custom icon and label in non-shifting bottom navigation 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 7,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 8,
-        },
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#6200ee",
-          "elevation": 8,
-          "overflow": "hidden",
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#6200ee",
+        "elevation": 8,
+        "overflow": "hidden",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 7,
+          "width": 0,
         },
-      ]
+        "shadowOpacity": 0.24,
+        "shadowRadius": 8,
+      }
     }
   >
     <RCTSafeAreaView
@@ -1624,29 +1594,19 @@ exports[`renders custom icon and label in shifting bottom navigation 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 7,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 8,
-        },
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "rgba(98, 0, 238, 1)",
-          "elevation": 8,
-          "overflow": "hidden",
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "rgba(98, 0, 238, 1)",
+        "elevation": 8,
+        "overflow": "hidden",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 7,
+          "width": 0,
         },
-      ]
+        "shadowOpacity": 0.24,
+        "shadowRadius": 8,
+      }
     }
   >
     <RCTSafeAreaView
@@ -2282,29 +2242,19 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
   </View>
   <View
     style={
-      Array [
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 7,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 8,
-        },
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#E96A82",
-          "elevation": 8,
-          "overflow": "hidden",
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#E96A82",
+        "elevation": 8,
+        "overflow": "hidden",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 7,
+          "width": 0,
         },
-      ]
+        "shadowOpacity": 0.24,
+        "shadowRadius": 8,
+      }
     }
   >
     <RCTSafeAreaView
@@ -3192,29 +3142,19 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
   </View>
   <View
     style={
-      Array [
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 7,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 8,
-        },
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "rgba(233, 106, 130, 1)",
-          "elevation": 8,
-          "overflow": "hidden",
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "rgba(233, 106, 130, 1)",
+        "elevation": 8,
+        "overflow": "hidden",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 7,
+          "width": 0,
         },
-      ]
+        "shadowOpacity": 0.24,
+        "shadowRadius": 8,
+      }
     }
   >
     <RCTSafeAreaView
@@ -3945,29 +3885,19 @@ exports[`renders non-shifting bottom navigation 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 7,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 8,
-        },
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "#6200ee",
-          "elevation": 8,
-          "overflow": "hidden",
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#6200ee",
+        "elevation": 8,
+        "overflow": "hidden",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 7,
+          "width": 0,
         },
-      ]
+        "shadowOpacity": 0.24,
+        "shadowRadius": 8,
+      }
     }
   >
     <RCTSafeAreaView
@@ -4855,29 +4785,19 @@ exports[`renders shifting bottom navigation 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "backgroundColor": "#ffffff",
-        },
-        Object {
-          "shadowColor": "#000000",
-          "shadowOffset": Object {
-            "height": 7,
-            "width": 0,
-          },
-          "shadowOpacity": 0.24,
-          "shadowRadius": 8,
-        },
-        Object {
-          "alignItems": "center",
-          "backgroundColor": "rgba(98, 0, 238, 1)",
-          "elevation": 8,
-          "overflow": "hidden",
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "rgba(98, 0, 238, 1)",
+        "elevation": 8,
+        "overflow": "hidden",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 7,
+          "width": 0,
         },
-      ]
+        "shadowOpacity": 0.24,
+        "shadowRadius": 8,
+      }
     }
   >
     <RCTSafeAreaView
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index dde3c1810..f155eaad8 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -3,24 +3,22 @@
 exports[`renders button with color 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      0,
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "elevation": 0,
-        "minWidth": 88,
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "elevation": 0,
+      "minWidth": 88,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": NaN,
+        "width": 0,
       },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
+    }
   }
 >
   <View
@@ -114,24 +112,22 @@ exports[`renders button with color 1`] = `
 exports[`renders button with icon 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "elevation": 0,
+      "minWidth": 88,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": NaN,
+        "width": 0,
       },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      0,
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "elevation": 0,
-        "minWidth": 88,
-      },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
+    }
   }
 >
   <View
@@ -270,32 +266,22 @@ exports[`renders button with icon 1`] = `
 exports[`renders contained contained with mode 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
+    Object {
+      "backgroundColor": "#6200ee",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "elevation": 2,
+      "minWidth": 88,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": NaN,
+        "width": 0,
       },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "shadowColor": "#000000",
-        "shadowOffset": Object {
-          "height": 0.75,
-          "width": 0,
-        },
-        "shadowOpacity": 0.24,
-        "shadowRadius": 1.5,
-      },
-      Object {
-        "backgroundColor": "#6200ee",
-        "borderColor": "transparent",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "elevation": 2,
-        "minWidth": 88,
-      },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 2,
+    }
   }
 >
   <View
@@ -389,24 +375,15 @@ exports[`renders contained contained with mode 1`] = `
 exports[`renders disabled button 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      0,
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "elevation": 0,
-        "minWidth": 88,
-      },
-    ]
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "elevation": 0,
+      "minWidth": 88,
+    }
   }
 >
   <View
@@ -505,24 +482,22 @@ exports[`renders disabled button 1`] = `
 exports[`renders loading button 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "elevation": 0,
+      "minWidth": 88,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": NaN,
+        "width": 0,
       },
-      0,
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "elevation": 0,
-        "minWidth": 88,
-      },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
+    }
   }
 >
   <View
@@ -629,24 +604,22 @@ exports[`renders loading button 1`] = `
 exports[`renders outlined button with mode 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "rgba(0, 0, 0, 0.29)",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0.5,
+      "elevation": 0,
+      "minWidth": 88,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": NaN,
+        "width": 0,
       },
-      0,
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "rgba(0, 0, 0, 0.29)",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 0.5,
-        "elevation": 0,
-        "minWidth": 88,
-      },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
+    }
   }
 >
   <View
@@ -740,24 +713,22 @@ exports[`renders outlined button with mode 1`] = `
 exports[`renders text button by default 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "elevation": 0,
+      "minWidth": 88,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": NaN,
+        "width": 0,
       },
-      0,
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "elevation": 0,
-        "minWidth": 88,
-      },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
+    }
   }
 >
   <View
@@ -851,24 +822,22 @@ exports[`renders text button by default 1`] = `
 exports[`renders text button with mode 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
+    Object {
+      "backgroundColor": "transparent",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "elevation": 0,
+      "minWidth": 88,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": NaN,
+        "width": 0,
       },
-      0,
-      Object {
-        "backgroundColor": "transparent",
-        "borderColor": "transparent",
-        "borderRadius": 4,
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "elevation": 0,
-        "minWidth": 88,
-      },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 0,
+    }
   }
 >
   <View
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
index f69e3bb95..79f3c7448 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -3,23 +3,14 @@
 exports[`renders chip with icon 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      0,
-      Object {
-        "backgroundColor": "#ebebeb",
-        "borderColor": "#ebebeb",
-        "borderRadius": 16,
-        "borderStyle": "solid",
-        "borderWidth": 0.5,
-        "elevation": 0,
-      },
-    ]
+    Object {
+      "backgroundColor": "#ebebeb",
+      "borderColor": "#ebebeb",
+      "borderRadius": 16,
+      "borderStyle": "solid",
+      "borderWidth": 0.5,
+      "elevation": 0,
+    }
   }
 >
   <View
@@ -160,23 +151,14 @@ exports[`renders chip with icon 1`] = `
 exports[`renders chip with onPress 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      0,
-      Object {
-        "backgroundColor": "#ebebeb",
-        "borderColor": "#ebebeb",
-        "borderRadius": 16,
-        "borderStyle": "solid",
-        "borderWidth": 0.5,
-        "elevation": 0,
-      },
-    ]
+    Object {
+      "backgroundColor": "#ebebeb",
+      "borderColor": "#ebebeb",
+      "borderRadius": 16,
+      "borderStyle": "solid",
+      "borderWidth": 0.5,
+      "elevation": 0,
+    }
   }
 >
   <View
@@ -271,23 +253,14 @@ exports[`renders chip with onPress 1`] = `
 exports[`renders deletable chip 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      0,
-      Object {
-        "backgroundColor": "#ebebeb",
-        "borderColor": "#ebebeb",
-        "borderRadius": 16,
-        "borderStyle": "solid",
-        "borderWidth": 0.5,
-        "elevation": 0,
-      },
-    ]
+    Object {
+      "backgroundColor": "#ebebeb",
+      "borderColor": "#ebebeb",
+      "borderRadius": 16,
+      "borderStyle": "solid",
+      "borderWidth": 0.5,
+      "elevation": 0,
+    }
   }
 >
   <View
@@ -428,23 +401,14 @@ exports[`renders deletable chip 1`] = `
 exports[`renders outlined disabled chip 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      0,
-      Object {
-        "backgroundColor": "#ffffff",
-        "borderColor": "rgba(0, 0, 0, 0.29)",
-        "borderRadius": 16,
-        "borderStyle": "solid",
-        "borderWidth": 0.5,
-        "elevation": 0,
-      },
-    ]
+    Object {
+      "backgroundColor": "#ffffff",
+      "borderColor": "rgba(0, 0, 0, 0.29)",
+      "borderRadius": 16,
+      "borderStyle": "solid",
+      "borderWidth": 0.5,
+      "elevation": 0,
+    }
   }
 >
   <View
@@ -540,23 +504,14 @@ exports[`renders outlined disabled chip 1`] = `
 exports[`renders selected chip 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      0,
-      Object {
-        "backgroundColor": "rgba(0, 0, 0, 0.24)",
-        "borderColor": "#ebebeb",
-        "borderRadius": 16,
-        "borderStyle": "solid",
-        "borderWidth": 0.5,
-        "elevation": 0,
-      },
-    ]
+    Object {
+      "backgroundColor": "rgba(0, 0, 0, 0.24)",
+      "borderColor": "#ebebeb",
+      "borderRadius": 16,
+      "borderStyle": "solid",
+      "borderWidth": 0.5,
+      "elevation": 0,
+    }
   }
 >
   <View
diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.js.snap
index bfaf5d4c5..929953548 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.js.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.js.snap
@@ -3,28 +3,18 @@
 exports[`renders extended FAB 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "shadowColor": "#000000",
-        "shadowOffset": Object {
-          "height": 5,
-          "width": 0,
-        },
-        "shadowOpacity": 0.24,
-        "shadowRadius": 6,
-      },
-      Object {
-        "backgroundColor": "#03dac4",
-        "borderRadius": 28,
-        "elevation": 6,
+    Object {
+      "backgroundColor": "#03dac4",
+      "borderRadius": 28,
+      "elevation": 6,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 5,
+        "width": 0,
       },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 6,
+    }
   }
 >
   <View
@@ -186,28 +176,18 @@ exports[`renders extended FAB 1`] = `
 exports[`renders normal FAB 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "shadowColor": "#000000",
-        "shadowOffset": Object {
-          "height": 5,
-          "width": 0,
-        },
-        "shadowOpacity": 0.24,
-        "shadowRadius": 6,
+    Object {
+      "backgroundColor": "#03dac4",
+      "borderRadius": 28,
+      "elevation": 6,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 5,
+        "width": 0,
       },
-      Object {
-        "backgroundColor": "#03dac4",
-        "borderRadius": 28,
-        "elevation": 6,
-      },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 6,
+    }
   }
 >
   <View
@@ -319,28 +299,18 @@ exports[`renders normal FAB 1`] = `
 exports[`renders small FAB 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-      },
-      Object {
-        "backgroundColor": "#ffffff",
+    Object {
+      "backgroundColor": "#03dac4",
+      "borderRadius": 28,
+      "elevation": 6,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 5,
+        "width": 0,
       },
-      Object {
-        "shadowColor": "#000000",
-        "shadowOffset": Object {
-          "height": 5,
-          "width": 0,
-        },
-        "shadowOpacity": 0.24,
-        "shadowRadius": 6,
-      },
-      Object {
-        "backgroundColor": "#03dac4",
-        "borderRadius": 28,
-        "elevation": 6,
-      },
-    ]
+      "shadowOpacity": 0.24,
+      "shadowRadius": 6,
+    }
   }
 >
   <View
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index 5ad964892..19be7b666 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -235,26 +235,24 @@ exports[`renders snackbar with action button 1`] = `
       </Text>
       <View
         style={
-          Array [
-            Object {
-              "backgroundColor": "#ffffff",
-            },
-            Object {
-              "backgroundColor": "#ffffff",
-            },
-            0,
-            Object {
-              "backgroundColor": "transparent",
-              "borderColor": "transparent",
-              "borderRadius": 4,
-              "borderStyle": "solid",
-              "borderWidth": 0,
-              "elevation": 0,
-              "marginHorizontal": 8,
-              "marginVertical": 6,
-              "minWidth": 64,
+          Object {
+            "backgroundColor": "transparent",
+            "borderColor": "transparent",
+            "borderRadius": 4,
+            "borderStyle": "solid",
+            "borderWidth": 0,
+            "elevation": 0,
+            "marginHorizontal": 8,
+            "marginVertical": 6,
+            "minWidth": 64,
+            "shadowColor": "#000000",
+            "shadowOffset": Object {
+              "height": NaN,
+              "width": 0,
             },
-          ]
+            "shadowOpacity": 0.24,
+            "shadowRadius": 0,
+          }
         }
       >
         <View