title: React Native Animated component gets covered on panning
body: <p>Works fine on iOS:  <img src="https://i.imgur.com/MOmqPHs.gif" alt="">  </p>
  
  <p>Gets covered outside of box on Android:
  <img src="https://i.imgur.com/ye2FQTi.gif" alt=""></p>
  
  <p>I read somewhere that <code>zIndex</code> only affects sibling components, though this works on iOS.<br>
  How should I go about fixing it on Android?</p>
  
  <p><a href="https://snack.expo.io/@riwu/animated-zindex" rel="nofollow noreferrer">https://snack.expo.io/@riwu/animated-zindex</a></p>
  
  <pre><code>import React from 'react';
  import { View, Animated, PanResponder } from 'react-native';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        pos: new Animated.ValueXY(),
      };
  
      this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () =&gt; true,
        onPanResponderMove: Animated.event([
          null,
          {
            dx: this.state.pos.x,
            dy: this.state.pos.y,
          },
        ]),
      });
    }
  
    render() {
      return (
        &lt;View
          style={{
            marginTop: 20,
            borderWidth: 1,
            padding: 5,
            width: 50,
            height: 50,
          }}
        &gt;
          &lt;Animated.Image
            {...this.panResponder.panHandlers}
            style={[this.state.pos.getLayout(), { flex: 1, zIndex: 1 }]}
            source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  export default App;
  </code></pre>