back round 0 view raw

attempt 3 of slider android crash fix #15

merged

opened by

whey.party 1 week ago 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

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
       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

···

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

     

       1
       2
        
       import {type ViewStyle} from 'react-native'

     

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

     

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

     

       4
       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
       12
       -
         trackStyle?: ViewStyle

     

       13
       13
       -
         minimumTrackStyle?: ViewStyle

     

       14
       14
       -
         thumbStyle?: ViewStyle

     

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

     

       14
       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
       24
       -
         trackStyle,

     

       25
       25
       -
         minimumTrackStyle,

     

       26
       26
       -
         thumbStyle,

     

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

     

       23
       23
       +
         sliderStyle,

     

       28
       24
        
       }: SliderProps) {

     

       29
       25
        
         const t = useTheme()

     

       30
       26
        
       

     

       27
       27
       +
         const [localValue, setLocalValue] = useState(value)

     

       28
       28
       +
       

     

       29
       29
       +
         useEffect(() => {

     

       30
       30
       +
           setLocalValue(value)

     

       31
       31
       +
         }, [value])

     

       32
       32
       +
       

     

       33
       33
       +
         const throttledOnValueChange = useMemo(

     

       34
       34
       +
           () =>

     

       35
       35
       +
             throttle(

     

       36
       36
       +
               (val: number) => {

     

       37
       37
       +
                 onValueChange(val)

     

       38
       38
       +
               },

     

       39
       39
       +
               50,

     

       40
       40
       +
               {leading: true, trailing: true},

     

       41
       41
       +
             ),

     

       42
       42
       +
           [onValueChange],

     

       43
       43
       +
         )

     

       44
       44
       +
       

     

       45
       45
       +
         const handleValueChange = useCallback(

     

       46
       46
       +
           (val: number) => {

     

       47
       47
       +
             setLocalValue(val)

     

       48
       48
       +
             throttledOnValueChange(val)

     

       49
       49
       +
           },

     

       50
       50
       +
           [throttledOnValueChange],

     

       51
       51
       +
         )

     

       52
       52
       +
       

     

       53
       53
       +
         const handleSlidingComplete = useCallback(

     

       54
       54
       +
           (val: number) => {

     

       55
       55
       +
             throttledOnValueChange.cancel()

     

       56
       56
       +
             onValueChange(val)

     

       57
       57
       +
           },

     

       58
       58
       +
           [throttledOnValueChange, onValueChange],

     

       59
       59
       +
         )

     

       60
       60
       +
       

     

       31
       61
        
         return (

     

       32
       62
        
           <RNSlider

     

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

     

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

     

       63
       63
       +
             value={localValue}

     

       64
       64
       +
             onValueChange={handleValueChange}

     

       65
       65
       +
             onSlidingComplete={handleSlidingComplete}

     

       35
       66
        
             minimumValue={minimumValue}

     

       36
       67
        
             maximumValue={maximumValue}

     

       37
       68
        
             step={step}

     

       38
       38
       -
             trackStyle={{

     

       39
       39
       -
               height: 4,

     

       40
       40
       -
               borderRadius: 2,

     

       41
       41
       -
               backgroundColor: t.atoms.bg_contrast_50.backgroundColor,

     

       42
       42
       -
               ...trackStyle,

     

       43
       43
       -
             }}

     

       44
       44
       -
             minimumTrackStyle={{

     

       45
       45
       -
               height: 4,

     

       46
       46
       -
               borderRadius: 2,

     

       47
       47
       -
               backgroundColor: t.palette.primary_500,

     

       48
       48
       -
               ...minimumTrackStyle,

     

       49
       49
       -
             }}

     

       50
       50
       -
             thumbStyle={{

     

       51
       51
       -
               width: 24,

     

       52
       52
       -
               height: 24,

     

       53
       53
       -
               borderRadius: 12,

     

       54
       54
       -
               borderWidth: 1,

     

       55
       55
       -
               borderColor: t.atoms.border_contrast_low.borderColor,

     

       56
       56
       -
               backgroundColor: t.atoms.bg.backgroundColor,

     

       57
       57
       -
               shadowColor: '#000',

     

       58
       58
       -
               shadowOffset: {width: 0, height: 2},

     

       59
       59
       -
               shadowOpacity: 0.15,

     

       60
       60
       -
               shadowRadius: 4,

     

       61
       61
       -
               elevation: 3,

     

       62
       62
       -
               ...thumbStyle,

     

       63
       63
       -
             }}

     

       64
       64
       -
             thumbTouchSize={thumbTouchSize}

     

       69
       69
       +
             minimumTrackTintColor={t.palette.primary_500}

     

       70
       70
       +
             maximumTrackTintColor={t.atoms.bg_contrast_50.backgroundColor}

     

       71
       71
       +
             thumbTintColor={t.atoms.bg_contrast_500.backgroundColor}

     

       72
       72
       +
             thumbImage={undefined}

     

       73
       73
       +
             style={[

     

       74
       74
       +
               {

     

       75
       75
       +
                 height: 40,

     

       76
       76
       +
               },

     

       77
       77
       +
               sliderStyle,

     

       78
       78
       +
             ]}

     

       65
       79
        
           />

     

       66
       80
        
         )

     

       67
       81
        
       }

yarn.lock

···

       6185
       6185
        
         dependencies:

     

       6186
       6186
        
           merge-options "^3.0.4"

     

       6187
       6187
        
       

     

       6188
       6188
       +
       "@react-native-community/slider@^5.1.1":

     

       6189
       6189
       +
         version "5.1.1"

     

       6190
       6190
       +
         resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-5.1.1.tgz#321c37da565b264fd8f96a4edcb55d3fe78f26aa"

     

       6191
       6191
       +
         integrity sha512-W98If/LnTaziU3/0h5+G1LvJaRhMc6iLQBte6UWa4WBIHDMaDPglNBIFKcCXc9Dxp83W+f+5Wv22Olq9M2HJYA==

     

       6192
       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"