PanResponder uses location of current component

[GuglielmoFelici]

PanResponder uses location of current component

[GuglielmoFelici]

Thanks a lot for taking the time to look into this. I will try to run your test app and see how it goes, perhaps I have some outdated package.

[kolking]

@GuglielmoFelici, @finejuice thank you guys for pointing the issue to me. Just published v1.3.0 with a fix. I'd appreciate if you could test the new version and let me know if it works for you as well.

[GuglielmoFelici]

@kolking thanks a lot for looking into this. Sorry for the late reply but I've been abroad the past week. I'll reopen the issue if I encounter it again.
Thanks and good job!

[kolking]

Hey Guglielmo! Thanks for writing the issue. It seems that I can't reproduce the bug, for me it works normal when the touch goes over the boundaries. When I move over the left edge it resets the value - this is the expected behaviour, when I move over the right edge it holds until the touch released - this is also the expected behaviour.

Screen.recording.mov

This is the full code of my test:

import React, { useCallback, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Rating } from '@kolking/react-native-rating';

const App = () => {
  const [rating1, setRating1] = useState(3.5);
  const [liveRating1, setLiveRating1] = useState(0);

  const handleChange1 = useCallback(
    (value: number) => {
      setRating1(Math.round((rating1 + value) * 5) / 10);
      setLiveRating1(0);
    },
    [rating1],
  );

  const [rating2, setRating2] = useState(3.5);
  const [liveRating2, setLiveRating2] = useState(0);

  const handleChange2 = useCallback(
    (value: number) => {
      setRating2(Math.round((rating2 + value) * 5) / 10);
      setLiveRating2(0);
    },
    [rating2],
  );

  return (
    <View style={styles.root}>
      <View style={styles.frame}>
        <Rating size={22} rating={rating1} onMove={setLiveRating1} onChange={handleChange1} />
        <Text style={styles.text}>{liveRating1 || rating1} out of 5</Text>
      </View>
      <View style={styles.frame}>
        <Rating size={22} rating={rating2} onMove={setLiveRating2} onChange={handleChange2} />
        <Text style={styles.text}>{liveRating2 || rating2} out of 5</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  frame: {
    padding: 10,
    borderWidth: 1,
    borderColor: 'red',
    alignItems: 'center',
  },
  text: {
    fontSize: 15,
    marginTop: 10,
  },
});

export default App;

[GuglielmoFelici]

I tried to run your exact code in an Expo app, and I'm still getting the issue:

video_2024-01-07_16-55-04.mp4

This is on expo 49 and RN 0.72.6

I wonder if this has to do with the android implementation. How did you run your code?

[kolking]

Probably it's an Android thing then, because I've tested on iOS. Unfortunately, I can't run it on Android now, will do my best to reproduce at the next week.

[GuglielmoFelici]

Thanks! I don't have an iPhone nor a Mac at hand so I cannot test it on iOS. Let me know if you manage to reproduce on Android (no rush)

[finejuice]

Probably it's an Android thing then, because I've tested on iOS. Unfortunately, I can't run it on Android now, will do my best to reproduce at the next week.

Yeah, this is an Android specific issue, quite annoying, I encountered the same several days ago.

It's pretty easy to reproduce, just move your finger onto another touchable element, then you will find that locationX and locationY are all messed up 😅

Hope this will help you.

[kolking]

I believe the issue is fixed now. Feel free to reopen it if not.