React Native: Animate stacked views separately (tinder swipe mimic)

Question

I currently have a loop that generates some Animated.Views on top of one another (like in a ZStack). With my code as is, all the views move together on a single swipe rather than one by one on separate swipes. I feel that it has to do with the loop itself but I'm not quite sure what the fix is. Any thoughts?

swipeMainPage.tsx:

{...} from '../../components/ui-components';
import { Swipe } from './swipe';
const SwipeMainPage = () => {
 const dummyData = [
 [...],
 [...],
 [...],
 ];
 
 return (
 const { onTouchStart, onTouchEnd, onTouchMove } = Swipe(
 onSwipeLeft,
 onSwipeRight,
 onSwipeUp
 );
 <Animated.ScrollView
 style={{...}}
 onTouchStart={onTouchStart}
 onTouchEnd={onTouchEnd}
 onTouchMove={onTouchMove}
 >
 {dummyData.map((data, index) => (
 <Animated.View
 key={index}
 style={{
 position: 'absolute',
 width: windowWidth,
 opacity: opacity,
 transform: [
 { translateX: translateX },
 { rotate: rotate },
 { translateY: translateY },
 ],
 }}
 >
 <SwipeCandidateBadge data={data} />
 </Animated.View>
 ))}
 </Animated.ScrollView>
</View>
);
};
export default SwipeMainPage;

swipe.tsx:

import { windowHeight, windowWidth } from '../../components/ui-components';
//reference: https://stackoverflow.com/questions/45854450/detect-swipe-left-in-react-native
export function Swipe(
 swipeLeft?: any,
 swipeRight?: any,
 swipeUp?: any,
 rangeOffset = 10
) {
 let firstTouch = 0;
 function onTouchStart(e: any) {
 firstTouch = e.nativeEvent.pageX;
 }
 function onTouchEnd(e: any) {
 const positionX = e.nativeEvent.pageX;
 const range = windowWidth / rangeOffset;
 if (positionX - firstTouch > range) {
 swipeRight && swipeRight();
 } else if (firstTouch - positionX > range) {
 swipeLeft && swipeLeft();
 }
 }
 function onTouchMove(e: any) {
 const positionY = e.nativeEvent.pageY;
 const range = windowHeight / 2;
 if (positionY - firstTouch < range) {
 swipeUp && swipeUp();
 }
 }
 return { onTouchStart, onTouchEnd, onTouchMove };
}

• Sébastien Guarnay: There is no corresponding tag for your closing </View> in your first file swipeMainPage.tsx.