back round 0 view raw

attempt 3 of slider android crash fix #15

merged
opened by whey.party targeting main

uses @react-native-community/slider instead of @miblanchard/react-native-slider which i hope doesnt crash android

options
unified split
Changed files
+58 -38
package.json
src
components
forms
Slider.tsx
yarn.lock
+1
package.json 
···

       
97

       
 

       
    "@miblanchard/react-native-slider": "^2.6.0",


     

       
98

       
 

       
    "@mozzius/expo-dynamic-app-icon": "^1.8.0",


     

       
99

       
 

       
    "@react-native-async-storage/async-storage": "2.2.0",


     

       

       

       
     

       
100

       
 

       
    "@react-navigation/bottom-tabs": "^7.3.13",


     

       
101

       
 

       
    "@react-navigation/drawer": "^7.3.12",


     

       
102

       
 

       
    "@react-navigation/native": "^7.1.9",


     
···

       
97

       
 

       
    "@miblanchard/react-native-slider": "^2.6.0",


     

       
98

       
 

       
    "@mozzius/expo-dynamic-app-icon": "^1.8.0",


     

       
99

       
 

       
    "@react-native-async-storage/async-storage": "2.2.0",


     

       
100

       
+

       
    "@react-native-community/slider": "^5.1.1",


     

       
101

       
 

       
    "@react-navigation/bottom-tabs": "^7.3.13",


     

       
102

       
 

       
    "@react-navigation/drawer": "^7.3.12",


     

       
103

       
 

       
    "@react-navigation/native": "^7.1.9",
+52 -38
src/components/forms/Slider.tsx 
···

       

       

       
     

       
1

       
 

       
import {type ViewStyle} from 'react-native'


     

       
2

       
-

       
import {Slider as RNSlider} from '@miblanchard/react-native-slider'


     

       

       

       
     

       
3

       
 

       



     

       
4

       
 

       
import {useTheme} from '#/alf'


     

       
5

       
 

       



     
···

       
9

       
 

       
  minimumValue?: number


     

       
10

       
 

       
  maximumValue?: number


     

       
11

       
 

       
  step?: number


     

       
12

       
-

       
  trackStyle?: ViewStyle


     

       
13

       
-

       
  minimumTrackStyle?: ViewStyle


     

       
14

       
-

       
  thumbStyle?: ViewStyle


     

       
15

       
-

       
  thumbTouchSize?: {width: number; height: number}


     

       
16

       
 

       
}


     

       
17

       
 

       



     

       
18

       
 

       
export function Slider({


     
···

       
21

       
 

       
  minimumValue = 0,


     

       
22

       
 

       
  maximumValue = 1,


     

       
23

       
 

       
  step = 1,


     

       
24

       
-

       
  trackStyle,


     

       
25

       
-

       
  minimumTrackStyle,


     

       
26

       
-

       
  thumbStyle,


     

       
27

       
-

       
  thumbTouchSize = {width: 40, height: 40},


     

       
28

       
 

       
}: SliderProps) {


     

       
29

       
 

       
  const t = useTheme()


     

       
30

       
 

       



     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       
31

       
 

       
  return (


     

       
32

       
 

       
    <RNSlider


     

       
33

       
-

       
      value={[value]} // always an array


     

       
34

       
-

       
      onValueChange={values => onValueChange(values[0])}


     

       

       

       
     

       
35

       
 

       
      minimumValue={minimumValue}


     

       
36

       
 

       
      maximumValue={maximumValue}


     

       
37

       
 

       
      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}


     

       
65

       
 

       
    />


     

       
66

       
 

       
  )


     

       
67

       
 

       
}


     
···

       
1

       
+

       
import {useCallback, useEffect, useMemo, useState} from 'react'


     

       
2

       
 

       
import {type ViewStyle} from 'react-native'


     

       
3

       
+

       
import RNSlider from '@react-native-community/slider'


     

       
4

       
+

       
import {throttle} from 'lodash'


     

       
5

       
 

       



     

       
6

       
 

       
import {useTheme} from '#/alf'


     

       
7

       
 

       



     
···

       
11

       
 

       
  minimumValue?: number


     

       
12

       
 

       
  maximumValue?: number


     

       
13

       
 

       
  step?: number


     

       
14

       
+

       
  sliderStyle?: ViewStyle


     

       

       

       
     

       

       

       
     

       

       

       
     

       
15

       
 

       
}


     

       
16

       
 

       



     

       
17

       
 

       
export function Slider({


     
···

       
20

       
 

       
  minimumValue = 0,


     

       
21

       
 

       
  maximumValue = 1,


     

       
22

       
 

       
  step = 1,


     

       
23

       
+

       
  sliderStyle,


     

       

       

       
     

       

       

       
     

       

       

       
     

       
24

       
 

       
}: SliderProps) {


     

       
25

       
 

       
  const t = useTheme()


     

       
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

       
+

       



     

       
61

       
 

       
  return (


     

       
62

       
 

       
    <RNSlider


     

       
63

       
+

       
      value={localValue}


     

       
64

       
+

       
      onValueChange={handleValueChange}


     

       
65

       
+

       
      onSlidingComplete={handleSlidingComplete}


     

       
66

       
 

       
      minimumValue={minimumValue}


     

       
67

       
 

       
      maximumValue={maximumValue}


     

       
68

       
 

       
      step={step}


     

       
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

       
+

       
      ]}


     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       
79

       
 

       
    />


     

       
80

       
 

       
  )


     

       
81

       
 

       
}
+5
yarn.lock 
···

       
6185

       
 

       
  dependencies:


     

       
6186

       
 

       
    merge-options "^3.0.4"


     

       
6187

       
 

       



     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       

       

       
     

       
6188

       
 

       
"@react-native/assets-registry@0.81.5":


     

       
6189

       
 

       
  version "0.81.5"


     

       
6190

       
 

       
  resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.81.5.tgz#d22c924fa6f6d4a463c5af34ce91f38756c0fa7d"


     
···

       
6185

       
 

       
  dependencies:


     

       
6186

       
 

       
    merge-options "^3.0.4"


     

       
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

       
+

       



     

       
6193

       
 

       
"@react-native/assets-registry@0.81.5":


     

       
6194

       
 

       
  version "0.81.5"


     

       
6195

       
 

       
  resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.81.5.tgz#d22c924fa6f6d4a463c5af34ce91f38756c0fa7d"