Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Error with types when using AnimatedSlider and useAnimatedProps

$
0
0

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!

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>