alantoa / react-native-awesome-slider

🚀 An anwesome <Slider/> that supports various features haptic, lottie, animation, ballon, etc.
MIT License
263 stars 30 forks source link

Android animation lag #74

Open xuergo opened 3 months ago

xuergo commented 3 months ago

Android https://github.com/alantoa/react-native-awesome-slider/assets/46159623/32e0bd08-d499-44a4-975c-279e624f0e80

ios https://github.com/alantoa/react-native-awesome-slider/assets/46159623/7e50b6bf-c5d3-4b9d-b8db-b65e6d5fd805

Hello, Android animation lag。Here is my code. Where did I write it? Is there a problem? Thank you

import { View, Text } from 'react-native'
import React, { useState } from 'react'
import { Slider } from 'react-native-awesome-slider'
import { useSharedValue } from 'react-native-reanimated'

const index = () => {
  const progressSharedValue = useSharedValue(0)  
  const minSharedValue = useSharedValue(0) 
  const maxSharedValue = useSharedValue(100)  
  const isScrubbing = useSharedValue(true)

  const [text, setText] = useState('0')

  const onValueChange = (value: number) => {
    setText(value.toString())
  }

  return (
    <View>

      <Slider
        isScrubbing={isScrubbing}
        panHitSlop={{
          top: 10,
          left: 10,
          bottom: 10,
          right: 10
        }}
        style={{
          marginTop: 200,
          bottom: 6,
          width: '100%'
        }}
        onValueChange={onValueChange}
        progress={progressSharedValue}
        minimumValue={minSharedValue}
        maximumValue={maxSharedValue}
      />
      <Text className='text-primary-dark text-2xl'>{text}</Text>
    </View>
  )
}

export default index
xuergo commented 3 months ago

I solved this problem using anti-shake, but it may not be the best answer

const debouncedSetDisplayValue = useCallback(
      debounce((value) => {
        const text = formatTime(value.toString())
        setProgressTimeText(text)
      }, 1),  
      []
    )