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'
2
import {type StyleProp, View, type ViewStyle} from 'react-native'
3
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
4
import Animated, {
···
38
const playHaptic = useHaptics()
39
const timerRef = useRef<NodeJS.Timeout | undefined>(undefined)
40
41
-
const [width, setWidth] = useState(0)
42
43
const progress = useSharedValue(0)
44
const isPressed = useSharedValue(false)
···
90
.onBegin(e => {
91
isPressed.value = true
92
93
-
if (width > 0) {
94
-
const newProgress = Math.min(Math.max(e.x / width, 0), 1)
95
progress.value = newProgress
96
handleValueChange(newProgress)
97
}
98
})
99
.onUpdate(e => {
100
-
if (width === 0) return
101
-
const newProgress = Math.min(Math.max(e.x / width, 0), 1)
102
progress.value = newProgress
103
handleValueChange(newProgress)
104
})
···
108
})
109
110
const thumbAnimatedStyle = useAnimatedStyle(() => {
111
-
const translateX = progress.value * width
112
return {
113
transform: [
114
{translateX: translateX - 12},
···
134
<View
135
style={[a.flex_1, a.justify_center, {cursor: 'pointer'}]}
136
// @ts-ignore web-only style
137
-
onLayout={e => setWidth(e.nativeEvent.layout.width)}>
138
<View
139
style={[
140
a.w_full,
···
1
+
import {useCallback, useEffect, useRef} from 'react' // Removed useState
2
import {type StyleProp, View, type ViewStyle} from 'react-native'
3
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
4
import Animated, {
···
38
const playHaptic = useHaptics()
39
const timerRef = useRef<NodeJS.Timeout | undefined>(undefined)
40
41
+
const width = useSharedValue(0)
42
43
const progress = useSharedValue(0)
44
const isPressed = useSharedValue(false)
···
90
.onBegin(e => {
91
isPressed.value = true
92
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)
96
progress.value = newProgress
97
handleValueChange(newProgress)
98
}
99
})
100
.onUpdate(e => {
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)
104
progress.value = newProgress
105
handleValueChange(newProgress)
106
})
···
110
})
111
112
const thumbAnimatedStyle = useAnimatedStyle(() => {
113
+
// FIX 4: Access width.value for calculations
114
+
const translateX = progress.value * width.value
115
return {
116
transform: [
117
{translateX: translateX - 12},
···
137
<View
138
style={[a.flex_1, a.justify_center, {cursor: 'pointer'}]}
139
// @ts-ignore web-only style
140
+
// FIX 5: Update width.value directly on layout
141
+
onLayout={e => {
142
+
width.value = e.nativeEvent.layout.width
143
+
}}>
144
<View
145
style={[
146
a.w_full,