How to avoid not trigger ripple when scroll sectionList in react native?

Yukino 0
Viewed 23

I'm using sectionList with pressable items. It may like this:

<SectionList
  data={list}
  renderItem={(item) => {
    return <Pressable android_ripple={{ color: gray, borderless: true }} />
  }}
/>

The ripple give a simple way to realize user effect after press, but I find it will trigger when scroll. That's quite not pretty. Is there any way to avoid it?

react-native-sectionlist ios react-native android
1 Answers

If you dont need to use onPressIn or onPressOut, I would recommend going with TouchableOpacity. Its animation wont be triggered by scrolling. If you need to use Pressable, you could start off by removing the ripple effect while scrolling:

const [isScrolling, setIsScrolling] = useState(false)

return (
  <SectionList
    data={list}
    renderItem={(item) => {
      return (
        <Pressable
          android_ripple={!isScrolling &&{ color: gray, borderless: true }}
        />
      )
    }}
   onScrollBeginDrag={()=>{
     console.log('Scroll started')
     setIsScrolling(true)
   }}
   onScrollEndDrag={()=>{
     console.log('Scroll ended')
     setIsScrolling(false)
   }}
   unstable_pressDelay={200}
  />
)

The problem with this approach is that sometimes the Pressable onPressIn event fires before isScrolling is updated, and the ripple effect occurs anyway. I am using unstable_pressDelay to delay long enough for the update

PhantomSpooks0
Related