[Android]: Loses detection for long strokes in Modal

[abhishek0705]

During long strokes when used in Modal, it loses detection and registers only a single dot. This behavior occurs on Android but works fine on iOS. Any Suggestions.

[aamirmirza2999]

for android i am getting the issue in the rn-scratch-card for into popop i show the scratch card but while scratching the card brush width 50 is like taking whole view that why i put this condition for right now but its not the way to handle any update will comes or anyone can help me one more issue i am getting i am not able to load the image url into ScratchCard local images work but the URL not working

const handleScratch = useCallback((scratchPercentage: number) => {
console.log("------scratchPercentage---", scratchPercentage);

if (scratchPercentage > 5) {
  setShowScratchText(false);
}
const threshold = Platform.OS === 'ios' ? 50 : 15; // iOS: 50, Android: 20

if (scratchPercentage > threshold) {
  setCurrentStep((prevStep) => prevStep + 1);
}

}, []);

<Animated.View
style={{
flex: 1,
alignItems: 'center',
opacity: stepOpacity,
transform: [{scale: stepOpacity}],
}}>
<View
style={{
position: 'relative',
width: actuatedNormalize(262),
height: actuatedNormalize(272),
borderRadius: 17,
overflow: 'hidden',
}}>
{/* Background Image */}
<Image
source={require('../../assets/Game/scratch_forground.jpg')} // Replace with your background image
style={{
position: 'absolute',
width: '100%',
height: '100%',
}}
/>

          {/* Scratch Card */}
          {selectedImage && (
            <View style={{flex: 1, position: 'relative'}}>
              {/* Scratch Card */}
              <ScratchCard
                source={selectedImage} // Scratchable overlay image
                brushWidth={Platform.OS === 'ios' ? 50 : 20}
                onScratch={handleScratch}
                style={{
                  width: '100%',
                  height: '100%',
                  backgroundColor: 'transparent',
                }}
              />

              {/* Overlayed Text - Shown only if showScratchText is true */}
              {showScratchText && (
                <View
                  style={{
                    position: 'absolute',
                    top: '100%',
                    left: '55%',
                    transform: [{translateX: -50}, {translateY: -50}],
                  }}>
                  <Text
                    style={{
                      fontSize: fontSmallMedium,
                      fontFamily: Fonts.HSBC,
                      fontWeight: fontWeightMedium,
                      lineHeight: lineHeightSmallMedium,
                      color: theme.primarytextcolor4,
                    }}>
                    Scratch here
                  </Text>
                </View>
              )}
            </View>
          )}
        </View>
      </Animated.View>