attempt 3 of slider android crash fix

package.json

···
     "@miblanchard/react-native-slider": "^2.6.0",
     "@mozzius/expo-dynamic-app-icon": "^1.8.0",
     "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/slider": "^5.1.1",
     "@react-navigation/bottom-tabs": "^7.3.13",
     "@react-navigation/drawer": "^7.3.12",
     "@react-navigation/native": "^7.1.9",

src/components/forms/Slider.tsx

···
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {type ViewStyle} from 'react-native'
-import {Slider as RNSlider} from '@miblanchard/react-native-slider'
+import RNSlider from '@react-native-community/slider'
+import {throttle} from 'lodash'
 
 import {useTheme} from '#/alf'
 
···
   minimumValue?: number
   maximumValue?: number
   step?: number
-  trackStyle?: ViewStyle
-  minimumTrackStyle?: ViewStyle
-  thumbStyle?: ViewStyle
-  thumbTouchSize?: {width: number; height: number}
+  sliderStyle?: ViewStyle
 }
 
 export function Slider({
···
   minimumValue = 0,
   maximumValue = 1,
   step = 1,
-  trackStyle,
-  minimumTrackStyle,
-  thumbStyle,
-  thumbTouchSize = {width: 40, height: 40},
+  sliderStyle,
 }: SliderProps) {
   const t = useTheme()
 
+  const [localValue, setLocalValue] = useState(value)
+
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
+  const throttledOnValueChange = useMemo(
+    () =>
+      throttle(
+        (val: number) => {
+          onValueChange(val)
+        },
+        50,
+        {leading: true, trailing: true},
+      ),
+    [onValueChange],
+  )
+
+  const handleValueChange = useCallback(
+    (val: number) => {
+      setLocalValue(val)
+      throttledOnValueChange(val)
+    },
+    [throttledOnValueChange],
+  )
+
+  const handleSlidingComplete = useCallback(
+    (val: number) => {
+      throttledOnValueChange.cancel()
+      onValueChange(val)
+    },
+    [throttledOnValueChange, onValueChange],
+  )
+
   return (
     <RNSlider
-      value={[value]} // always an array
-      onValueChange={values => onValueChange(values[0])}
+      value={localValue}
+      onValueChange={handleValueChange}
+      onSlidingComplete={handleSlidingComplete}
       minimumValue={minimumValue}
       maximumValue={maximumValue}
       step={step}
-      trackStyle={{
-        height: 4,
-        borderRadius: 2,
-        backgroundColor: t.atoms.bg_contrast_50.backgroundColor,
-        ...trackStyle,
-      }}
-      minimumTrackStyle={{
-        height: 4,
-        borderRadius: 2,
-        backgroundColor: t.palette.primary_500,
-        ...minimumTrackStyle,
-      }}
-      thumbStyle={{
-        width: 24,
-        height: 24,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: t.atoms.border_contrast_low.borderColor,
-        backgroundColor: t.atoms.bg.backgroundColor,
-        shadowColor: '#000',
-        shadowOffset: {width: 0, height: 2},
-        shadowOpacity: 0.15,
-        shadowRadius: 4,
-        elevation: 3,
-        ...thumbStyle,
-      }}
-      thumbTouchSize={thumbTouchSize}
+      minimumTrackTintColor={t.palette.primary_500}
+      maximumTrackTintColor={t.atoms.bg_contrast_50.backgroundColor}
+      thumbTintColor={t.atoms.bg_contrast_500.backgroundColor}
+      thumbImage={undefined}
+      style={[
+        {
+          height: 40,
+        },
+        sliderStyle,
+      ]}
     />
   )
 }

yarn.lock

···
   dependencies:
     merge-options "^3.0.4"
 
+"@react-native-community/slider@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-5.1.1.tgz#321c37da565b264fd8f96a4edcb55d3fe78f26aa"
+  integrity sha512-W98If/LnTaziU3/0h5+G1LvJaRhMc6iLQBte6UWa4WBIHDMaDPglNBIFKcCXc9Dxp83W+f+5Wv22Olq9M2HJYA==
+
 "@react-native/assets-registry@0.81.5":
   version "0.81.5"
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.81.5.tgz#d22c924fa6f6d4a463c5af34ce91f38756c0fa7d"