So I have an AnimatedSlider
, which changes color by getting a useSharedValue
. And I use a useAnimatedProps
to update the colors.
const AnimatedSlider = Animated.createAnimatedComponent(Slider);... const pickedColor = useSharedValue<string | number>(COLORS[COLORS.length]); const animatedProps = useAnimatedProps(() => ({ minimumTrackTintColor: pickedColor.value, thumbTintColor: pickedColor.value }));...return (<AnimatedSlider style={{ width: 250, height: 40 }} minimumValue={0} maximumValue={1} // minimumTrackTintColor={`#${color}`} // thumbTintColor={`#${color}`} animatedProps={animatedProps} maximumTrackTintColor="#fff" value={1} onSlidingStart={() => setSliding('Sliding')} onValueChange={value => setRange(value)} onSlidingComplete={() => setSliding('Inactive')} />)....
But useAnimatedProps
of the AnimatedSlider
throws the following error message:
property) animatedProps?: Partial<Animated.AnimateProps<SliderProps>>Type 'Partial<{ minimumTrackTintColor: string | number; thumbTintColor: string | number;}>' is not assignable to type 'Partial<AnimateProps<SliderProps>>'. Types of property 'minimumTrackTintColor' are incompatible. Type 'string | number' is not assignable to type 'string | AnimatedNode<string>'. Type 'number' is not assignable to type 'string | AnimatedNode<string>'.ts(2322)react-native-reanimated.d.ts(163, 7): The expected type comes from property'animatedProps' which is declared here on type 'IntrinsicAttributes &IntrinsicClassAttributes<Component<AnimateProps<SliderProps>, any, any>> & Readonly<...>& Readonly<...>'I tried setting `<string | number | Partial<AnimateProps<SliderProps>>>` in useSharedValue and in useAnimatedProps, but I got more errors.Thanks!