back round 0 view raw

Revert "attempt 3 of slider android crash fix" #16

merged

opened by

whey.party 1 week ago targeting main

https://tangled.org/jollywhoppers.com/witchsky.app/pulls/15#comment-1009

options

unified split

Changed files

+38 -58

package.json

src

components

forms

Slider.tsx

yarn.lock

-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
       100
       -
           "@react-native-community/slider": "^5.1.1",

     

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

     

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

     

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

+38 -52

src/components/forms/Slider.tsx

···

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

     

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

     

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

     

       4
       4
       -
       import {throttle} from 'lodash'

     

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

     

       5
       3
        
       

     

       6
       4
        
       import {useTheme} from '#/alf'

     

       7
       5
        
       

     
···

       11
       9
        
         minimumValue?: number

     

       12
       10
        
         maximumValue?: number

     

       13
       11
        
         step?: number

     

       14
       14
       -
         sliderStyle?: ViewStyle

     

       12
       12
       +
         trackStyle?: ViewStyle

     

       13
       13
       +
         minimumTrackStyle?: ViewStyle

     

       14
       14
       +
         thumbStyle?: ViewStyle

     

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

     

       15
       16
        
       }

     

       16
       17
        
       

     

       17
       18
        
       export function Slider({

     
···

       20
       21
        
         minimumValue = 0,

     

       21
       22
        
         maximumValue = 1,

     

       22
       23
        
         step = 1,

     

       23
       23
       -
         sliderStyle,

     

       24
       24
       +
         trackStyle,

     

       25
       25
       +
         minimumTrackStyle,

     

       26
       26
       +
         thumbStyle,

     

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

     

       24
       28
        
       }: SliderProps) {

     

       25
       29
        
         const t = useTheme()

     

       26
       30
        
       

     

       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
       -
       

     

       61
       31
        
         return (

     

       62
       32
        
           <RNSlider

     

       63
       63
       -
             value={localValue}

     

       64
       64
       -
             onValueChange={handleValueChange}

     

       65
       65
       -
             onSlidingComplete={handleSlidingComplete}

     

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

     

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

     

       66
       35
        
             minimumValue={minimumValue}

     

       67
       36
        
             maximumValue={maximumValue}

     

       68
       37
        
             step={step}

     

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

     

       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}

     

       79
       65
        
           />

     

       80
       66
        
         )

     

       81
       67
        
       }

-5

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
       -
       

     

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

     

       6194
       6189
        
         version "0.81.5"

     

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