I'm trying to select multiple elements inside the pan component. I seacrhed a lot and now I can get the scrool coordinates, but with this x and y coordinate values I can't understand which one is selected.
HourComponent.js (so simple just one text)
<View
height={35}
marginVertical={8}
width={Dimensions.get("window").width / 3 }
borderRadius={10}
alignItems="center"
justifyContent="center"
bg={this.props.isSelected ? "green" : "#F0F2F6"}
marginHorizontal={6}
>
<Text>{this.props.hourText}</Text>
</View>;
constructor
constructor(props) {
super(props);
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (event, gesture) => {
var witdh = 110;// I find that with console.log ,the component box sizes
var height = 30;
var x = gesture.moveX / witdh;
var y = gesture.moveY / height;
console.log('gesture.moveY', gesture.moveY);
console.log('x: ' + x + ' y: ' + y);
},
});
this.state = {
hours: [
{isSelected: false, hourText: '10:00'},
{isSelected: false, hourText: '10:20'},
{isSelected: false, hourText: '10:40'},
{isSelected: false, hourText: '11:00'},
{isSelected: false, hourText: '11:20'},
{isSelected: false, hourText: '11:40'},
{isSelected: false, hourText: '12:00'},
{isSelected: false, hourText: '12:20'},
{isSelected: false, hourText: '12:40'},
],
panResponder,
};
}
In render section
<Box
flex={1}
mt={20}
alignItems={"flex-start"}
justifyContent={"center"}
flexDirection={"row"}
flexWrap={"wrap"}
flexDirection="row"
>
{this.state.hours.map((hours, index) => {
return (
<View
style={{
backgroundColor: "red",
}}
{...this.state.panResponder.panHandlers}
>
<TouchableOpacity
style={{ backgroundColor: "blue" }}
onPress={() => {
this.hourSelect(hours, index);
}}
>
<HoursComponent
hoursText={hours.hoursText}
isSelected={hours.isSelected}
hours={hours}
/>
</TouchableOpacity>
</View>
);
})}
</Box>;
My problem is how to get selected component.I can't make it with coordinates .Thank you
I can't get the selected values ,just can get coordiantes I'm still having this problem