title: FlatList child items with absolute position does not work?
body: <p>I am making Tinder swipe in my app. I am using <code>FlatList</code> to render deck of cards like Tinder. I have assigned <code>position:absolute</code> to the root view of renderItems in my <code>FlatList</code> so that each <code>FlatList</code> items are behind each other and I can swipe to see the next item. Each of the card in my <code>FlatList</code> is very complex so I have to use <code>scrollview</code> for vertical scrolling of each card and I have disabled the flat list scrolling as I don't want the flatlist to scroll as items are placed behind one another. Now <code>position:absolute</code> works fine on iOS but does not work on android. I tired assigning <code>left, top,right and bottom</code> properties to the parent view but still it won't work. I tried <code>elevation</code> as well. I can use map instead of flatlist but then the performance is really bad as there are lot of item in the array and keeping <code>position:absolute</code> when using map works on android and ios. I tried using <a href="https://github.com/alexbrillant/react-native-deck-swiper" rel="nofollow noreferrer">https://github.com/alexbrillant/react-native-deck-swiper</a> and <a href="https://github.com/archriss/react-native-snap-carousel" rel="nofollow noreferrer">https://github.com/archriss/react-native-snap-carousel</a> but they don't really work for me due to the complexity of my UI.</p>
  <p>Following is a simple example of each item in the Flatlist</p>
  <pre><code>return (
      &lt;Animated.View
        {...panResponder.panHandlers}
        style={[
          rotateAndTranslate,
          {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            position: &quot;absolute&quot;,
            elevation: 1000,
          },
        ]}
      &gt;
          &lt;Text&gt;{index}&lt;/Text&gt;
      &lt;/Animated.View&gt;
    );
  </code></pre>
  <p>My actual items in flatlist are much more complex than the above code. I tried reading different GitHub issues on this as well as stack overflow questions but they don't seem to work for me.</p>
  <p>I am referring this repo <a href="https://github.com/PlatypusIndustries/RNCardStack" rel="nofollow noreferrer">https://github.com/PlatypusIndustries/RNCardStack</a> as a sample eg for Tinder Swiping</p>
  <p>How to make position as absolute for each item of FlatList in Android?</p>
  <p><strong>Edit:</strong></p>
  <p>I was able to display items in Android by adding the following property to my FlatList <code>contentContainerStyle={{flexGrow:1,borderWidth:1}}</code> but the pan responder of each item in my <code>FlatList</code> won't work on Android as the position of each item is absolute. I tried adding <code>elevation,zIndex,top,left,right,bottom</code> properties as well. I tried wrapping <code>Animated.View</code> inside a <code>View</code> and applying position to that view but still won't work in Android. I tried wrapping it inside <code>TouchableOpacity</code> and <code>TouchableWithoutFeedback</code> but it won't work. I tried <code>TouchableOpacity</code> and <code>TouchableWithoutFeedback</code> both from <code>react-native</code> as well as <code>react-native-gesture-handler</code>. My Pan responder code works when I remove <code>position:absolute</code> so no issue there</p>
  <p>Here is my pan responder code</p>
  <pre><code>let position = useRef(new Animated.ValueXY()).current;
    // const [currentIndex, setCurrentIndex] = useState(0);
  
    let rotate = position.x.interpolate({
      inputRange: [-width / 2, 0, width / 2],
      outputRange: [&quot;-30deg&quot;, &quot;0deg&quot;, &quot;10deg&quot;],
      extrapolate: &quot;clamp&quot;,
    });
  
    let rotateAndTranslate = {
      transform: [
        {
          rotate: rotate,
        },
        ...position.getTranslateTransform(),
      ],
    };
  
    let likeOpacity = position.x.interpolate({
      inputRange: [-width / 2, 0, width / 2],
      outputRange: [0, 0, 1],
      extrapolate: &quot;clamp&quot;,
    });
    let dislikeOpacity = position.x.interpolate({
      inputRange: [-width / 2, 0, width / 2],
      outputRange: [1, 0, 0],
      extrapolate: &quot;clamp&quot;,
    });
  
    const panResponder = PanResponder.create({
      // onShouldBlockNativeResponder: () =&gt; true,
      onMoveShouldSetPanResponderCapture: (event, gestureState) =&gt; {
        // console.log(gestureState.dx);
        if (gestureState.dx === 0 || gestureState.dy === 0) {
          return false;
        }
  
        return true;
      },
      onPanResponderTerminationRequest: () =&gt; false,
      onStartShouldSetPanResponderCapture: () =&gt; false,
      onStartShouldSetPanResponder: (evt, gestureState) =&gt; false,
      onPanResponderMove: (evt, gestureState) =&gt; {
        // console.log(gestureState.dx);
        // console.log(&quot;here &quot; + width * 0.1);
        if (gestureState.dx &lt; width * 0.1 &amp;&amp; gestureState.dx &gt; -width * 0.1) {
          return true;
        }
  
        position.setValue({ x: gestureState.dx, y: gestureState.dy });
      },
      onPanResponderRelease: (evt, gestureState) =&gt; {
        // console.log(gestureState.dx);
        if (gestureState.dx &gt; 120) {
          // console.log(gestureState.dy);
  
          Animated.spring(position, {
            toValue: {
              x: width + 100,
              y: gestureState.dy,
            },
            useNativeDriver: true,
          }).start(() =&gt; {
            handleRemove(index);
          });
        } else if (gestureState.dx &lt; -120) {
          // console.log(gestureState.dy);
  
          Animated.spring(position, {
            toValue: { x: -width - 180, y: gestureState.dy },
            useNativeDriver: true,
          }).start(() =&gt; {
            handleRemove(index);
          });
        } else {
          Animated.spring(position, {
            toValue: { x: 0, y: 0 },
            friction: 10,
            useNativeDriver: true,
          }).start();
        }
      },
    });
  </code></pre>