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

Why am I getting Type error in React Native Typescript.??? Type 'Partial' has no properties in common with type 'Partial'

$
0
0

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.


Viewing all articles
Browse latest Browse all 6290

Trending Articles



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