jollywhoppers.com
whey.party
+1
package.json
+1
package.json
···
97
97
"@miblanchard/react-native-slider": "^2.6.0",
98
98
"@mozzius/expo-dynamic-app-icon": "^1.8.0",
99
99
"@react-native-async-storage/async-storage": "2.2.0",
100
+
"@react-native-community/slider": "^5.1.1",
100
101
"@react-navigation/bottom-tabs": "^7.3.13",
101
102
"@react-navigation/drawer": "^7.3.12",
102
103
"@react-navigation/native": "^7.1.9",
+52
-38
src/components/forms/Slider.tsx
+52
-38
src/components/forms/Slider.tsx
···
1
+
import {useCallback, useEffect, useMemo, useState} from 'react'
1
2
import {type ViewStyle} from 'react-native'
2
-
import {Slider as RNSlider} from '@miblanchard/react-native-slider'
3
+
import RNSlider from '@react-native-community/slider'
4
+
import {throttle} from 'lodash'
3
5
4
6
import {useTheme} from '#/alf'
5
7
···
9
11
minimumValue?: number
10
12
maximumValue?: number
11
13
step?: number
12
-
trackStyle?: ViewStyle
13
-
minimumTrackStyle?: ViewStyle
14
-
thumbStyle?: ViewStyle
15
-
thumbTouchSize?: {width: number; height: number}
14
+
sliderStyle?: ViewStyle
16
15
}
17
16
18
17
export function Slider({
···
21
20
minimumValue = 0,
22
21
maximumValue = 1,
23
22
step = 1,
24
-
trackStyle,
25
-
minimumTrackStyle,
26
-
thumbStyle,
27
-
thumbTouchSize = {width: 40, height: 40},
23
+
sliderStyle,
28
24
}: SliderProps) {
29
25
const t = useTheme()
30
26
27
+
const [localValue, setLocalValue] = useState(value)
28
+
29
+
useEffect(() => {
30
+
setLocalValue(value)
31
+
}, [value])
32
+
33
+
const throttledOnValueChange = useMemo(
34
+
() =>
35
+
throttle(
36
+
(val: number) => {
37
+
onValueChange(val)
38
+
},
39
+
50,
40
+
{leading: true, trailing: true},
41
+
),
42
+
[onValueChange],
43
+
)
44
+
45
+
const handleValueChange = useCallback(
46
+
(val: number) => {
47
+
setLocalValue(val)
48
+
throttledOnValueChange(val)
49
+
},
50
+
[throttledOnValueChange],
51
+
)
52
+
53
+
const handleSlidingComplete = useCallback(
54
+
(val: number) => {
55
+
throttledOnValueChange.cancel()
56
+
onValueChange(val)
57
+
},
58
+
[throttledOnValueChange, onValueChange],
59
+
)
60
+
31
61
return (
32
62
<RNSlider
33
-
value={[value]} // always an array
34
-
onValueChange={values => onValueChange(values[0])}
63
+
value={localValue}
64
+
onValueChange={handleValueChange}
65
+
onSlidingComplete={handleSlidingComplete}
35
66
minimumValue={minimumValue}
36
67
maximumValue={maximumValue}
37
68
step={step}
38
-
trackStyle={{
39
-
height: 4,
40
-
borderRadius: 2,
41
-
backgroundColor: t.atoms.bg_contrast_50.backgroundColor,
42
-
...trackStyle,
43
-
}}
44
-
minimumTrackStyle={{
45
-
height: 4,
46
-
borderRadius: 2,
47
-
backgroundColor: t.palette.primary_500,
48
-
...minimumTrackStyle,
49
-
}}
50
-
thumbStyle={{
51
-
width: 24,
52
-
height: 24,
53
-
borderRadius: 12,
54
-
borderWidth: 1,
55
-
borderColor: t.atoms.border_contrast_low.borderColor,
56
-
backgroundColor: t.atoms.bg.backgroundColor,
57
-
shadowColor: '#000',
58
-
shadowOffset: {width: 0, height: 2},
59
-
shadowOpacity: 0.15,
60
-
shadowRadius: 4,
61
-
elevation: 3,
62
-
...thumbStyle,
63
-
}}
64
-
thumbTouchSize={thumbTouchSize}
69
+
minimumTrackTintColor={t.palette.primary_500}
70
+
maximumTrackTintColor={t.atoms.bg_contrast_50.backgroundColor}
71
+
thumbTintColor={t.atoms.bg_contrast_500.backgroundColor}
72
+
thumbImage={undefined}
73
+
style={[
74
+
{
75
+
height: 40,
76
+
},
77
+
sliderStyle,
78
+
]}
65
79
/>
66
80
)
67
81
}
+5
yarn.lock
+5
yarn.lock
···
6185
6185
dependencies:
6186
6186
merge-options "^3.0.4"
6187
6187
6188
+
"@react-native-community/slider@^5.1.1":
6189
+
version "5.1.1"
6190
+
resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-5.1.1.tgz#321c37da565b264fd8f96a4edcb55d3fe78f26aa"
6191
+
integrity sha512-W98If/LnTaziU3/0h5+G1LvJaRhMc6iLQBte6UWa4WBIHDMaDPglNBIFKcCXc9Dxp83W+f+5Wv22Olq9M2HJYA==
6192
+
6188
6193
"@react-native/assets-registry@0.81.5":
6189
6194
version "0.81.5"
6190
6195
resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.81.5.tgz#d22c924fa6f6d4a463c5af34ce91f38756c0fa7d"