ibitcy / react-native-hole-view

✂️ React-Native component to cut a touch-through holes anywhere you want. Perfect solution for tutorial overlay
364 stars 20 forks source link

borderRadius is not animated (and it's jarring) in some circumstances #29

Open dcorbin opened 7 months ago

dcorbin commented 7 months ago

I'm using borderRadius to make circular holes. However, when the diameter of the circle is reduced, it's quite jarring even when animated. I believe the border radius not animated.

1) Make large circular hole. 2) Replace it with a smaller circular hole and animate the change.

The visual jumps from a large circle to a large square with small rounded corners.

Note: this only happens when making the circle smaller. Not when making it larger. This suggests that my immediate problem could be solved by choosing when to update borderRadius bases on the whether it's increasing or decreasing, but I can image other edge cases where this might not be as good as proper animation.

Example: https://github.com/dcorbin/RNHoleViewBug/tree/borderRadius_bug