I’m looking for assistance with implementing drag-and-drop functionality, including an extra condition for dropping items onto specific locations. While I’ve made progress, I believe there’s room for improvement. Any guidance you can offer would be greatly appreciated as I work towards completing this screen. Thank you in advance.
import { View, Text, SafeAreaView, ImageBackground,StatusBar,Image,Dimensions, TouchableOpacity,ScrollView, FlatList, Animated, PanResponder } from 'react-native'
import React,{useState,useContext, useRef} from 'react'
import themeContext from '../theme/themeContex';
import { useNavigation } from '@react-navigation/native';
import BackButton from './Componants/BackButton';
import Header from './Componants/Header';
import {DraxView, DraxProvider } from 'react-native-drax';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
const width =Dimensions.get('screen').width
const height = Dimensions.get('screen').height
export default function VowelSounds() {
const theme = useContext(themeContext);
const navigation= useNavigation();
const [darkMode,setDarkMode] = useState(false)
const [animatedValue] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
const handleDrop = (payload, gestureState) => {
console.log('Drop event triggered with payload:', payload, gestureState);
// Update the animated position on drop
if (gestureState) {
const { moveX, moveY } = gestureState;
// Update the animated position on drop
Animated.spring(animatedValue, {
toValue: { x:-19, y: -210.53425 },
useNativeDriver: true,
}).start();
}
};
const [animatedValue2] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
const handleDrop2 = (payload, gestureState) => {
console.log('Drop event triggered with payload:', payload, gestureState);
// Update the animated position on drop
if (gestureState) {
const { moveX, moveY } = gestureState;
// Update the animated position on drop
Animated.spring(animatedValue2, {
toValue: { x:-170, y: -270.53425 },
useNativeDriver: true,
}).start();
}
};
const [animatedValue3] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
const handleDrop3 = (payload, gestureState) => {
console.log('Drop event triggered with payload:', payload, gestureState);
// Update the animated position on drop
if (gestureState) {
const { moveX, moveY } = gestureState;
// Update the animated position on drop
Animated.spring(animatedValue3, {
toValue: { x:-20, y: -180.53425 },
useNativeDriver: true,
}).start();
}
};
const [animatedValue4] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
const handleDrop4 = (payload, gestureState) => {
console.log('Drop event triggered with payload:', payload, gestureState);
// Update the animated position on drop
if (gestureState) {
const { moveX, moveY } = gestureState;
// Update the animated position on drop
Animated.spring(animatedValue4, {
toValue: { x:-10, y: -130.53425 },
useNativeDriver: true,
}).start();
}
};
const [animatedValue5] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
const handleDrop5 = (payload, gestureState) => {
console.log('Drop event triggered with payload:', payload, gestureState);
// Update the animated position on drop
if (gestureState) {
const { moveX, moveY } = gestureState;
// Update the animated position on drop
Animated.spring(animatedValue5, {
toValue: { x:10, y: -270.53425 },
useNativeDriver: true,
}).start();
}
};
const [animatedValue6] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
const handleDrop6 = (payload, gestureState) => {
console.log('Drop event triggered with payload:', payload, gestureState);
// Update the animated position on drop
if (gestureState) {
const { moveX, moveY } = gestureState;
// Update the animated position on drop
Animated.spring(animatedValue6, {
toValue: { x:95, y: -210.53425 },
useNativeDriver: true,
}).start();
}
};
const [animatedValue7] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
const handleDrop7 = (payload, gestureState) => {
console.log('Drop event triggered with payload:', payload, gestureState);
// Update the animated position on drop
if (gestureState) {
const { moveX, moveY } = gestureState;
// Update the animated position on drop
Animated.spring(animatedValue7, {
toValue: { x:-70, y: -130.53425 },
useNativeDriver: true,
}).start();
}
};
const [animatedValue8] = useState(new Animated.ValueXY({ x: 0, y: 0 }));
const handleDrop8 = (payload, gestureState) => {
console.log('Drop event triggered with payload:', payload, gestureState);
// Update the animated position on drop
if (gestureState) {
const { moveX, moveY } = gestureState;
// Update the animated position on drop
Animated.spring(animatedValue8, {
toValue: { x:175, y: -190.53425 },
useNativeDriver: true,
}).start();
}
};
return (
<GestureHandlerRootView style={{flex:1}}>
<SafeAreaView style={{flex:1, paddingTop:25}}>
<ImageBackground source={require('../../assets/image/read.png')}
style={{flex:1}}>
<StatusBar backgroundColor={"#C2EEFF"} translucent={true}/>
<Header />
<ScrollView>
<View style={{paddingHorizontal:20}}>
<Text style={{fontFamily:'BADABB', fontSize:21, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21,}}>Level 01</Text>
<Text style={{fontFamily:'BADABB', fontSize:21, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21, marginBottom:15,}}>Aa and Ee Vowel Sounds</Text>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Match the pictures of these vowels to their correct words and boxes! </Text>
</View>
<DraxProvider>
<View style={{flexDirection:'row', justifyContent:'space-between', paddingHorizontal:20, marginTop:25,}}>
<View style={{width:'47%', }} >
<ImageBackground style={{paddingHorizontal:15, paddingVertical:20,}} source={require('../../assets/image/vs.png')} resizeMode='stretch'>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Short Aa</Text>
<View style={{flexDirection:'row', justifyContent:'space-around', flexWrap:'wrap', marginTop:10}}>
<View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5, marginBottom:5}}>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Cat</Text>
{/* <Image source={require('../../assets/image/cat2.png')} style={{alignSelf:'center'}}/> */}
<DraxView
style={{height:60,}}
payloadTarget={['cat']}
onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop(payload, gestureState)}
>
</DraxView>
</View>
<View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5, marginBottom:5}}>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Fan</Text>
<DraxView
style={{height:60,}}
payloadTarget={['fan']}
onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop2(payload, gestureState)}
>
</DraxView>
</View>
<View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5}}>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Jam</Text>
<DraxView
style={{height:60,}}
payloadTarget={['jam']}
onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop3(payload, gestureState)}
>
</DraxView>
</View>
<View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5}}>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Bat</Text>
<DraxView
style={{height:60,}}
payloadTarget={['bat']}
onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop4(payload, gestureState)}
>
</DraxView>
</View>
</View>
</ImageBackground>
</View>
<View style={{width:'47%', }} >
<ImageBackground style={{paddingHorizontal:15, paddingVertical:20,}} source={require('../../assets/image/vs.png')} resizeMode='stretch'>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Long Aa</Text>
<View style={{flexDirection:'row', justifyContent:'space-around', flexWrap:'wrap', marginTop:10}}>
<View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5, marginBottom:5}}>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Drain</Text>
<DraxView
style={{height:60,}}
payloadTarget={['drain']}
onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop5(payload, gestureState)}
>
</DraxView>
</View>
<View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5, marginBottom:5}}>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Cake</Text>
<DraxView
style={{height:60,}}
payloadTarget={['cake']}
onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop6(payload, gestureState)}
>
</DraxView>
</View>
<View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5}}>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Rain</Text>
<DraxView
style={{height:60,}}
payloadTarget={['rain']}
onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop7(payload, gestureState)}
>
</DraxView>
</View>
<View style={{width:'46%', borderWidth:1, borderColor:'#000', height:80, padding:5}}>
<Text style={{fontFamily:'Cheesecake', fontSize:14, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:14,}}>Lake</Text>
<DraxView
style={{height:60,}}
payloadTarget={['lake']}
onReceiveDragDrop={({ dragged: { payload }, ...gestureState }) => handleDrop8(payload, gestureState)}
>
</DraxView>
</View>
</View>
</ImageBackground>
</View>
</View>
<View style={{paddingHorizontal:20, marginTop:35,}}>
<ImageBackground style={{ paddingVertical:25, paddingHorizontal:20}} source={require('../../assets/image/vs2.png')} resizeMode='stretch' >
<View style={{flexDirection:'row', justifyContent:'space-around', flexWrap:'wrap', marginTop:10}}>
<View style={{width:'23%', alignContent:'center', alignItems:'center', height:55, padding:5, marginBottom:5}}>
<DraxView onDragStart={() => console.log('Cat drag started')} payload="cat" style={{position: 'absolute',
transform: [{ translateX: animatedValue.x }, { translateY: animatedValue.y }]}} >
<Image source={require('../../assets/image/cat2.png')} />
</DraxView>
</View>
<View style={{width:'23%', alignContent:'center', alignItems:'center', height:55, padding:5, marginBottom:5}}>
<DraxView onDragStart={() => console.log('Bat drag started')} payload="bat" style={{position: 'absolute',
transform: [{ translateX: animatedValue4.x }, { translateY: animatedValue4.y }]}}>
<Image source={require('../../assets/image/bat.png')} />
</DraxView>
</View>
<View style={{width:'25%', alignContent:'center', alignItems:'center', height:55, padding:5}}>
<DraxView onDragStart={() => console.log('Cake drag started')} payload="cake" style={{position: 'absolute',
transform: [{ translateX: animatedValue6.x }, { translateY: animatedValue6.y }]}}>
<Image source={require('../../assets/image/cake.png')} />
</DraxView>
</View>
<View style={{width:'23%', alignContent:'center', alignItems:'center', height:55, padding:5}}>
<DraxView onDragStart={() => console.log('Rain drag started')} payload="rain" style={{position: 'absolute',
transform: [{ translateX: animatedValue7.x }, { translateY: animatedValue7.y }]}}>
<Image source={require('../../assets/image/rain.png')} />
</DraxView>
</View>
<View style={{width:'23%', alignContent:'center', alignItems:'center', height:55, padding:5, marginBottom:5}}>
<DraxView onDragStart={() => console.log('Jam drag started')} payload="jam" style={{position: 'absolute',
transform: [{ translateX: animatedValue3.x }, { translateY: animatedValue3.y }]}}>
<Image source={require('../../assets/image/jam.png')} />
</DraxView>
</View>
<View style={{width:'23%', alignContent:'center', alignItems:'center', height:55, padding:5, marginBottom:5}}>
<DraxView onDragStart={() => console.log('Lake drag started')} payload="lake" style={{position: 'absolute',
transform: [{ translateX: animatedValue8.x }, { translateY: animatedValue8.y }]}}>
<Image source={require('../../assets/image/lake.png')} />
</DraxView>
</View>
<View style={{width:'23%', alignContent:'center', alignItems:'center', height:55, padding:5}}>
<DraxView onDragStart={() => console.log('Drain drag started')} payload="drain" style={{position: 'absolute',
transform: [{ translateX: animatedValue5.x }, { translateY: animatedValue5.y }]}}>
<Image source={require('../../assets/image/drain.png')} />
</DraxView>
</View>
<View style={{width:'23%', alignContent:'center', alignItems:'center', height:55, padding:5}}>
<DraxView onDragStart={() => console.log('Fan drag started')} payload="fan" style={{position: 'absolute',
transform: [{ translateX: animatedValue2.x }, { translateY: animatedValue2.y }]}}>
<Image source={require('../../assets/image/fan.png')} />
</DraxView>
</View>
</View>
</ImageBackground>
</View>
</DraxProvider>
</ScrollView>
<View style={{flex:1, paddingHorizontal:20, marginBottom:30}}>
</View>
<BackButton style={{width:'100%',}}/>
</ImageBackground>
</SafeAreaView>
</GestureHandlerRootView>
)
}