Complete Error: Type 'Partial<{ strokeDashOffset: number; }>' has no properties in common with type 'Partial<AnimateProps>'.
ERROR IMAGE LINK: https://ibb.co/M1FYN4Y
I am trying to replicate an animation by William Candillon in React Native which uses React Native SVG - Path & React Native Reanimated.
const fPath = '{MY SVG PATH WHICH I'VE REMOVED IT WAS TOO LONG FOR THIS POST}' export default function App() { const progress = useSharedValue(0); let length = 592; const AnimatedPath = Animated.createAnimatedComponent(Path); const strokeAnimation = useAnimatedProps(() => ({ strokeDashOffset: length - length * progress.value, })); useEffect(() => { progress.value = withTiming(1, { duration: 4000, easing: Easing.linear, }); }, [progress]); return (<SafeAreaProvider style={styles.container}><Animated.View><Svg height="150" width="301" viewBox="0 0 102 192"><AnimatedPath animatedProps={strokeAnimation} d={fPath} stroke="white" strokeWidth={4} strokeDasharray={length} strokeDashoffset={length - length * 0.55} /></Svg></Animated.View></SafeAreaProvider> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#20144A', alignItems: 'center', justifyContent: 'center', }, });
I am trying to implement a react native animation for svg path with a reference to William Candillon video. The animation is an F letter being written in animated style.
Video Link of William Candillon Animation: https://youtu.be/oZHIwKJHrq0Timestamp: 9:00 minutes he begins with animation logic.
In his video he has used multiple files to implement the animation. But to keep it simple I have kept every thing in the same file and modified the animation.
In his video William has used
Interface AnimatedProps { progress: Animated.SharedValue<number>; }
This above part of code in at Timestamp: 16:46 and this is where I feel like error is arising from.
I feel like I am missing some logic of type definition in Typescript as I am new to the language.
Please Help as there are very few tutorials for reference.