back round 0 view raw
possible slider android crash fix #12

merged
opened by
whey.party 1 week ago targeting main
sorry react native reanimated is scary stuff
options
unified split
Changed files
+14 -8
src
components
forms
Slider.tsx
+14 -8
src/components/forms/Slider.tsx
···

       1
       1
       -
       import {useCallback, useEffect, useRef, useState} from 'react'

     

       1
       1
       +
       import {useCallback, useEffect, useRef} from 'react' // Removed useState

     

       2
       2
        
       import {type StyleProp, View, type ViewStyle} from 'react-native'

     

       3
       3
        
       import {Gesture, GestureDetector} from 'react-native-gesture-handler'

     

       4
       4
        
       import Animated, {

     
···

       38
       38
        
         const playHaptic = useHaptics()

     

       39
       39
        
         const timerRef = useRef<NodeJS.Timeout | undefined>(undefined)

     

       40
       40
        
       

     

       41
       41
       -
         const [width, setWidth] = useState(0)

     

       41
       41
       +
         const width = useSharedValue(0)

     

       42
       42
        
       

     

       43
       43
        
         const progress = useSharedValue(0)

     

       44
       44
        
         const isPressed = useSharedValue(false)

     
···

       90
       90
        
           .onBegin(e => {

     

       91
       91
        
             isPressed.value = true

     

       92
       92
        
       

     

       93
       93
       -
             if (width > 0) {

     

       94
       94
       -
               const newProgress = Math.min(Math.max(e.x / width, 0), 1)

     

       93
       93
       +
             // FIX 2: Access width.value instead of width

     

       94
       94
       +
             if (width.value > 0) {

     

       95
       95
       +
               const newProgress = Math.min(Math.max(e.x / width.value, 0), 1)

     

       95
       96
        
               progress.value = newProgress

     

       96
       97
        
               handleValueChange(newProgress)

     

       97
       98
        
             }

     

       98
       99
        
           })

     

       99
       100
        
           .onUpdate(e => {

     

       100
       100
       -
             if (width === 0) return

     

       101
       101
       -
             const newProgress = Math.min(Math.max(e.x / width, 0), 1)

     

       101
       101
       +
             // FIX 3: Access width.value instead of width

     

       102
       102
       +
             if (width.value === 0) return

     

       103
       103
       +
             const newProgress = Math.min(Math.max(e.x / width.value, 0), 1)

     

       102
       104
        
             progress.value = newProgress

     

       103
       105
        
             handleValueChange(newProgress)

     

       104
       106
        
           })

     
···

       108
       110
        
           })

     

       109
       111
        
       

     

       110
       112
        
         const thumbAnimatedStyle = useAnimatedStyle(() => {

     

       111
       111
       -
           const translateX = progress.value * width

     

       113
       113
       +
           // FIX 4: Access width.value for calculations

     

       114
       114
       +
           const translateX = progress.value * width.value

     

       112
       115
        
           return {

     

       113
       116
        
             transform: [

     

       114
       117
        
               {translateX: translateX - 12},

     
···

       134
       137
        
               <View

     

       135
       138
        
                 style={[a.flex_1, a.justify_center, {cursor: 'pointer'}]}

     

       136
       139
        
                 // @ts-ignore web-only style

     

       137
       137
       -
                 onLayout={e => setWidth(e.nativeEvent.layout.width)}>

     

       140
       140
       +
                 // FIX 5: Update width.value directly on layout

     

       141
       141
       +
                 onLayout={e => {

     

       142
       142
       +
                   width.value = e.nativeEvent.layout.width

     

       143
       143
       +
                 }}>

     

       138
       144
        
                 <View

     

       139
       145
        
                   style={[

     

       140
       146
        
                     a.w_full,