Safe area view: support animated style values (#3124)

* Use Animated.View instead of View in SafeAreaView

This allows passing animated style properties in certain contexts, as previously supported.

* Update some test snapshots

src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap

@@ -137,6 +137,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
           }
         >
           <View
+            collapsable={undefined}
             onLayout={[Function]}
             style={
               Object {
@@ -182,6 +183,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
                 tvParallaxProperties={undefined}
               >
                 <View
+                  collapsable={undefined}
                   onLayout={[Function]}
                   style={
                     Object {

src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

@@ -124,6 +124,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
       transitionConfig={undefined}
     >
       <View
+        collapsable={undefined}
         onLayout={[Function]}
         style={
           Object {
@@ -354,6 +355,7 @@ exports[`StackNavigator renders successfully 1`] = `
       transitionConfig={undefined}
     >
       <View
+        collapsable={undefined}
         onLayout={[Function]}
         style={
           Object {

src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap

@@ -69,6 +69,7 @@ exports[`TabNavigator renders successfully 1`] = `
     style={undefined}
   >
     <View
+      collapsable={undefined}
       onLayout={[Function]}
       style={
         Object {

src/views/SafeAreaView.js

@@ -7,7 +7,7 @@ import {
   Platform,
   SafeAreaView,
   StyleSheet,
-  View,
+  Animated,
 } from 'react-native';
 import withOrientation from './withOrientation';
 
@@ -101,19 +101,19 @@ class SafeView extends Component {
     const { forceInset = false, isLandscape, children, style } = this.props;
 
     if (Platform.OS !== 'ios') {
-      return <View style={style}>{this.props.children}</View>;
+      return <Animated.View style={style}>{this.props.children}</Animated.View>;
     }
 
     const safeAreaStyle = this._getSafeAreaStyle();
 
     return (
-      <View
+      <Animated.View
         ref={c => (this.view = c)}
         onLayout={this._onLayout}
         style={safeAreaStyle}
       >
         {this.props.children}
-      </View>
+      </Animated.View>
     );
   }
 
@@ -130,7 +130,7 @@ class SafeView extends Component {
     const WIDTH = isLandscape ? X_HEIGHT : X_WIDTH;
     const HEIGHT = isLandscape ? X_WIDTH : X_HEIGHT;
 
-    this.view.measureInWindow((winX, winY, winWidth, winHeight) => {
+    this.view._component.measureInWindow((winX, winY, winWidth, winHeight) => {
       let realY = winY;
       let realX = winX;
 

src/views/__tests__/__snapshots__/TabView-test.js.snap

@@ -25,6 +25,7 @@ exports[`TabBarBottom renders successfully 1`] = `
     style={undefined}
   >
     <View
+      collapsable={undefined}
       onLayout={[Function]}
       style={
         Object {