Merge pull request #469 from gluestack/feat/animated-svg-components

feat: animated svg components in driver

packages/animation-legend-motion-driver/src/index.tsx

@@ -9,6 +9,8 @@ import {
   AnimatePresence as MotionAnimatePresence,
   createMotionAnimatedComponent,
 } from '@legendapp/motion';
+import { MotionSvg } from '@legendapp/motion/svg';
+import { propertyTokenMap } from './propertyTokenMap';
 import { Pressable } from 'react-native';
 
 function getVariantProps(props: any, theme: any) {
@@ -93,9 +95,17 @@ const AnimatePresence = React.forwardRef(
 const AnimatedPressable = createMotionAnimatedComponent(
   Pressable
 ) as React.ComponentType<typeof Pressable>;
+
+const MotionComponents = {
+  ...Motion,
+  ...MotionSvg,
+  Pressable: AnimatedPressable,
+  AnimatePresence,
+};
+
 export class MotionAnimationDriver implements IAnimationDriverPlugin {
   name: 'MotionAnimationDriver';
-  engine = { ...Motion, Pressable: AnimatedPressable, AnimatePresence };
+  engine = MotionComponents;
   config = {
     aliases: {
       ':animate': 'animate',

packages/animation-moti-driver/src/index.tsx

@@ -13,6 +13,32 @@ import {
   MotiProgressBar,
   AnimatePresence,
 } from 'moti';
+import {
+  Svg as RNSvg,
+  Rect as RNRect,
+  Circle as RNCircle,
+  Ellipse as RNEllipse,
+  Line as RNLine,
+  Polyline as RNPolyline,
+  Path as RNPath,
+  TSpan as RNTSpan,
+  TextPath as RNTextPath,
+  G as RNG,
+  ClipPath as RNClipPath,
+} from 'react-native-svg';
+import { motifySvg } from 'moti/svg';
+
+const Svg = motifySvg(RNSvg);
+const Rect = motifySvg(RNRect);
+const Circle = motifySvg(RNCircle);
+const Ellipse = motifySvg(RNEllipse);
+const Line = motifySvg(RNLine);
+const Polyline = motifySvg(RNPolyline);
+const Path = motifySvg(RNPath);
+const TSpan = motifySvg(RNTSpan);
+const TextPath = motifySvg(RNTextPath);
+const G = motifySvg(RNG);
+const ClipPath = motifySvg(RNClipPath);
 
 let Moti = {
   Image: MotiImage,
@@ -21,6 +47,17 @@ let Moti = {
   ScrollView: MotiScrollView,
   SafeAreaView: MotiSafeAreaView,
   ProgressBar: MotiProgressBar,
+  Svg,
+  Rect,
+  Circle,
+  Ellipse,
+  Line,
+  Polyline,
+  Path,
+  TSpan,
+  TextPath,
+  G,
+  ClipPath,
   AnimatePresence,
 };
 export class MotiAnimationDriver implements IAnimationDriverPlugin {

packages/animation-resolver/src/AnimatedComponents/index.tsx

@@ -9,10 +9,23 @@ import type {
   FlatListProps,
   SectionListProps,
 } from 'react-native';
+import type {
+  SvgProps,
+  GProps,
+  ClipPathProps,
+  RectProps,
+  PolylineProps,
+  CircleProps,
+  EllipseProps,
+  LineProps,
+  PathProps,
+  TSpanProps,
+  TextPathProps,
+} from 'react-native-svg';
 
 const getAnimationResolverPlugin: any = (plugins: any[]) => {
   let pluginData;
-  plugins.forEach((plugin) => {
+  plugins?.forEach((plugin) => {
     if (plugin.name === 'AnimationResolver') {
       pluginData = plugin;
     }
@@ -94,6 +107,95 @@ const AnimatedSectionList = (
   const Component = animatedComponent('SectionList', props);
   return <Component {...props} />;
 };
+
+const AnimatedSvg = (
+  props: SvgProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('Svg', props);
+  return <Component {...props} />;
+};
+const AnimatedRect = (
+  props: RectProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('Rect', props);
+  return <Component {...props} />;
+};
+const AnimatedCircle = (
+  props: CircleProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('Circle', props);
+  return <Component {...props} />;
+};
+const AnimatedEllipse = (
+  props: EllipseProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('Ellipse', props);
+  return <Component {...props} />;
+};
+const AnimatedLine = (
+  props: LineProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('Line', props);
+  return <Component {...props} />;
+};
+const AnimatedPolyline = (
+  props: PolylineProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('Polyline', props);
+  return <Component {...props} />;
+};
+const AnimatedPath = (
+  props: PathProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('Path', props);
+  return <Component {...props} />;
+};
+const AnimatedTSpan = (
+  props: TSpanProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('TSpan', props);
+  return <Component {...props} />;
+};
+const AnimatedTextPath = (
+  props: TextPathProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('TextPath', props);
+  return <Component {...props} />;
+};
+const AnimatedG = (
+  props: GProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('G', props);
+  return <Component {...props} />;
+};
+const AnimatedClipPath = (
+  props: ClipPathProps & {
+    animationComponentGluestack: true;
+  }
+) => {
+  const Component = animatedComponent('ClipPath', props);
+  return <Component {...props} />;
+};
 const AnimatePresence = animatedComponent('AnimatePresence', {});
 
 AnimatedText.displayName = 'Gluestack-AnimatedResolver-AnimatedText';
@@ -109,6 +211,17 @@ AnimatedSectionList.displayName =
   'Gluestack-AnimatedResolver-AnimatedSectionList';
 AnimatePresence.displayName =
   'Gluestack-AnimatedResolver-AnimatedAnimatePresence';
+AnimatedSvg.displayName = 'Gluestack-AnimatedResolver-AnimatedSvg';
+AnimatedRect.displayName = 'Gluestack-AnimatedResolver-AnimatedRect';
+AnimatedCircle.displayName = 'Gluestack-AnimatedResolver-AnimatedCircle';
+AnimatedEllipse.displayName = 'Gluestack-AnimatedResolver-AnimatedEllipse';
+AnimatedLine.displayName = 'Gluestack-AnimatedResolver-AnimatedLine';
+AnimatedPolyline.displayName = 'Gluestack-AnimatedResolver-AnimatedPolyline';
+AnimatedPath.displayName = 'Gluestack-AnimatedResolver-AnimatedPath';
+AnimatedTSpan.displayName = 'Gluestack-AnimatedResolver-AnimatedTSpan';
+AnimatedTextPath.displayName = 'Gluestack-AnimatedResolver-AnimatedTextPath';
+AnimatedG.displayName = 'Gluestack-AnimatedResolver-AnimatedG';
+AnimatedClipPath.displayName = 'Gluestack-AnimatedResolver-AnimatedClipPath';
 
 export {
   AnimatedText,
@@ -120,4 +233,15 @@ export {
   AnimatedFlatList,
   AnimatedSectionList,
   AnimatePresence,
+  AnimatedSvg,
+  AnimatedRect,
+  AnimatedCircle,
+  AnimatedEllipse,
+  AnimatedLine,
+  AnimatedPolyline,
+  AnimatedPath,
+  AnimatedTSpan,
+  AnimatedTextPath,
+  AnimatedG,
+  AnimatedClipPath,
 };