whey.party
sorry react native reanimated is scary stuff
+14
-8
src/components/forms/Slider.tsx
+14
-8
src/components/forms/Slider.tsx
···
1
-
import {useCallback, useEffect, useRef, useState} from 'react'
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
-
const [width, setWidth] = useState(0)
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
-
if (width > 0) {
94
-
const newProgress = Math.min(Math.max(e.x / width, 0), 1)
93
+
// FIX 2: Access width.value instead of width
94
+
if (width.value > 0) {
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
-
if (width === 0) return
101
-
const newProgress = Math.min(Math.max(e.x / width, 0), 1)
101
+
// FIX 3: Access width.value instead of width
102
+
if (width.value === 0) return
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
-
const translateX = progress.value * width
113
+
// FIX 4: Access width.value for calculations
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
-
onLayout={e => setWidth(e.nativeEvent.layout.width)}>
140
+
// FIX 5: Update width.value directly on layout
141
+
onLayout={e => {
142
+
width.value = e.nativeEvent.layout.width
143
+
}}>
138
144
<View
139
145
style={[
140
146
a.w_full,