I have a divided screen by squares and need to change their colors by touching with a finger continuously with pan gesture.
At first, I thought I could do that by getting position of my finger by pan handler and find which element is located in that location, so that I could change it's color. But it didn't work as I thought. I am stucked at this problem and wondering about your opinions.
Provide a PanResponder for the parent View of those squares.
// define the constants
const rows = 10;
const columns = 5;
const {width, height} = Dimensions.get('window');
Inside onPanResponderMove write this logic.
onPanResponderMove: (evt, gestureState) => {
let i = 0;
let x = evt.nativeEvent.pageX;
let y = evt.nativeEvent.pageY;
let percentageX = Math.floor(x / (width / columns));
let percentageY = Math.floor(y / (height / rows));
i = percentageX + columns * percentageY;
this.onChangeItem(i); // <-- i will provide you the index of current touch
},
Inside onChangeItem function check when the index is changing while moving finger.
onChangeItem = (index) => {
if (this.index !== index) {
// do operations here with index.
}
};
....
Here is my Example code: PanhandlerAnimations
