From faed4731bcb9fbaeece1e5ae1a54bd156f738be9 Mon Sep 17 00:00:00 2001
From: Stephen O'Brien <stepheno@gmail.com>
Date: Sun, 17 Dec 2017 23:20:08 +0000
Subject: [PATCH] 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
---
 .../__snapshots__/DrawerNavigator-test.js.snap         |  2 ++
 .../__snapshots__/StackNavigator-test.js.snap          |  2 ++
 .../__tests__/__snapshots__/TabNavigator-test.js.snap  |  1 +
 src/views/SafeAreaView.js                              | 10 +++++-----
 src/views/__tests__/__snapshots__/TabView-test.js.snap |  1 +
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap b/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
index 36f96f2e..1f5a0e1e 100644
--- a/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
+++ b/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 {
diff --git a/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap b/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
index 1b98f24e..ca6cc66f 100644
--- a/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap
+++ b/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 {
diff --git a/src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap b/src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap
index ab29f521..453a12fb 100644
--- a/src/navigators/__tests__/__snapshots__/TabNavigator-test.js.snap
+++ b/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 {
diff --git a/src/views/SafeAreaView.js b/src/views/SafeAreaView.js
index 95017005..7d044a30 100644
--- a/src/views/SafeAreaView.js
+++ b/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;
 
diff --git a/src/views/__tests__/__snapshots__/TabView-test.js.snap b/src/views/__tests__/__snapshots__/TabView-test.js.snap
index f8dad4af..41bf8a5f 100644
--- a/src/views/__tests__/__snapshots__/TabView-test.js.snap
+++ b/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 {