Feat Animation plugin new drivers

example/storybook/.ondevice/storybook.requires.js

@@ -7,7 +7,8 @@ import {
   addArgsEnhancer,
   clearDecorators,
 } from '@storybook/react-native';
-
+import { config } from '../src/components/nb.config';
+console.log(Object.keys(config));
 global.STORIES = [
   {
     titlePrefix: '',
@@ -52,8 +53,8 @@ const getStories = () => {
     // "./src/api/AsForwarder/AsForwarder.stories.tsx": require("../src/api/AsForwarder/AsForwarder.stories.tsx"),
     // "./src/api/ColorModeBasedStyles/ColorMode.stories.tsx": require("../src/api/ColorModeBasedStyles/ColorMode.stories.tsx"),
     // "./src/api/CompoundVariants/CompoundVarinats.stories.tsx": require("../src/api/CompoundVariants/CompoundVarinats.stories.tsx"),
-    './src/api/createStyled/createStyled.stories.tsx': require('../src/api/createStyled/createStyled.stories.tsx'),
-    './src/api/DescendantsStyles/ContextBasedStyles.stories.tsx': require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'),
+    // './src/api/createStyled/createStyled.stories.tsx': require('../src/api/createStyled/createStyled.stories.tsx'),
+    // './src/api/DescendantsStyles/ContextBasedStyles.stories.tsx': require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'),
     // "./src/api/MultipleProvder/MultipleProvider.stories.tsx": require("../src/api/MultipleProvder/MultipleProvider.stories.tsx"),
     // "./src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx": require("../src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx"),
     // "./src/api/PropertyResolver/PropertyResolver.stories.tsx": require("../src/api/PropertyResolver/PropertyResolver.stories.tsx"),
@@ -65,7 +66,7 @@ const getStories = () => {
     // "./src/api/Typescript/Typescript.stories.tsx": require("../src/api/Typescript/Typescript.stories.tsx"),
     // "./src/api/UtilityFunctions/UtilityFunctions.stories.tsx": require("../src/api/UtilityFunctions/UtilityFunctions.stories.tsx"),
     // "./src/api/Variants/BaseStyleVariantSizes.stories.tsx": require("../src/api/Variants/BaseStyleVariantSizes.stories.tsx"),
-    // "./src/plugins/AnimationPlugin/Animation.stories.tsx": require("../src/plugins/AnimationPlugin/Animation.stories.tsx"),
+    './src/plugins/AnimationPlugin/Animation.stories.tsx': require('../src/plugins/AnimationPlugin/Animation.stories.tsx'),
     // "./src/plugins/CSSVariables/CSSVariables.stories.tsx": require("../src/plugins/CSSVariables/CSSVariables.stories.tsx"),
     // "./src/plugins/FontsPlugin/FontsPlugin.stories.tsx": require("../src/plugins/FontsPlugin/FontsPlugin.stories.tsx"),
   };

example/storybook/babel.config.js

@@ -5,6 +5,7 @@ module.exports = function (api) {
   return {
     presets: ['babel-preset-expo'],
     plugins: [
+      'react-native-reanimated/plugin',
       process.env.NODE_ENV !== 'production'
         ? [
             'module-resolver',
@@ -15,14 +16,18 @@ module.exports = function (api) {
                   __dirname,
                   '../../packages/react/src'
                 ),
-                ['@gluestack-style/animation-plugin']: path.join(
+                ['@gluestack-style/legend-motion-animation-driver']: path.join(
                   __dirname,
-                  '../../packages/animation-plugin/src'
+                  '../../packages/animation-legend-motion-driver/src'
+                ),
+                ['@gluestack-style/moti-driver']: path.join(
+                  __dirname,
+                  '../../packages/animation-moti-animation-driver/src'
+                ),
+                ['@gluestack-style/animation-resolver']: path.join(
+                  __dirname,
+                  '../../packages/animation-resolver/src'
                 ),
-                // ['@gluestack-style/animation-plugin']: path.join(
-                //   __dirname,
-                //   '../../packages/animation-plugin/src'
-                // ),
                 // ['@dank-style/react']: path.join(
                 //   __dirname,
                 //   '../../packages/react/src'

example/storybook/package.json

@@ -23,7 +23,6 @@
   },
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
-    "@gluestack-style/animation-plugin": "latest",
     "@gluestack-style/react": "^0.2.11-alpha.0",
     "@gluestack-ui/actionsheet": "^0.2.16",
     "@gluestack-ui/alert-dialog": "^0.1.14",
@@ -53,8 +52,11 @@
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
     "lucide-react-native": "^0.236.0",
+    "moti": "^0.26.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
+    "react-native-gesture-handler": "^2.13.1",
+    "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",
     "react-native-web": "^0.19.7",
@@ -95,6 +97,9 @@
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
+    "@gluestack-style/legend-motion-animation-driver": "*",
+    "@gluestack-style/moti-animation-driver": "*",
+    "@gluestack-style/animation-resolver": "*",
     "react": "*",
     "react-dom": "*",
     "react-native": "*",

example/storybook/src/api/DescendantsStyles/ContextBasedStyles.tsx

@@ -11,16 +11,14 @@ import {
   Pressable as RNPressable,
   Text as RNText,
   StyleSheet,
-  Switch,
   View,
 } from 'react-native';
 import {
   AsForwarder,
   createStyled,
-  styled,
+  styled1,
   Theme,
   useBreakpointValue,
-  useColorMode,
   useStyled,
   useToken,
 } from '@gluestack-style/react';
@@ -30,7 +28,6 @@ import { AddIcon, Box, Icon } from '@gluestack/design-system';
 import { AlertCircle, Circle, Sun } from 'lucide-react-native';
 
 import { AnimationResolver } from '@gluestack-style/animation-plugin';
-import { ScrollView } from 'react-native';
 
 const styleshet = StyleSheet.create({
   style: {
@@ -43,16 +40,6 @@ const Pressable = styled(
   {
     bg: '$red200',
     p: '$2',
-    props: {
-      variant: 'solid',
-    },
-    variants: {
-      variant: {
-        solid: {
-          bg: '$red400',
-        },
-      },
-    },
   },
   {
     componentName: 'Pressable',
@@ -196,53 +183,10 @@ const Text1 = styled(
   },
   { ancestorStyle: ['_text'], componentName: 'TEXT' }
 );
-
-const StyledSwitch = styled(ScrollView, {});
-
 export function ContextBasedStyles() {
-  const [state, setState] = useState(false);
-
   return (
-    <Wrapper colorMode={state ? 'dark' : 'light'}>
-      <Pressable
-        onPress={() => {
-          setState(!state);
-        }}
-      >
-        <Text>color mode: {state ? 'dark' : 'light'}</Text>
-      </Pressable>
-
-      <StyledSwitch
-        height={200}
-        width={200}
-        sx={{
-          props: {
-            contentContainerStyle: {
-              // backgroundColor: 'blue',
-            },
-          },
-        }}
-
-        // trackColor={{ false: '$green500', true: '$primary600' }}
-        // thumbColor="$red500"
-        // sx={{
-        //   props: { trackColor: { false: '$blue500', true: '$primary600' } },
-        // }}
-      >
-        <View
-          style={{ height: 100, width: 100, backgroundColor: 'red' }}
-        ></View>
-      </StyledSwitch>
-
-      {/* 
-      <StyledSwitch
-        // trackColor={{ false: '$green500', true: '$primary600' }}
-        thumbColor="$red500"
-        sx={{
-          props: { trackColor: { false: '$blue500', true: '$primary600' } },
-        }}
-      ></StyledSwitch> */}
-
+    <Wrapper colorMode="dark">
+      <MyIcon as={Sun} size={32}></MyIcon>
       <ContextBasedStylesContent></ContextBasedStylesContent>
       {/* <Pressable></Pressable> */}
       {/* <Box1
@@ -285,12 +229,10 @@ export function ContextBasedStylesContent() {
     setTabName(tabName);
   };
 
-  const value = useBreakpointValue({
-    base: true,
-    sm: false,
-  });
+  const value = useToken('colors', 'red500');
 
   console.log(value, 'value here');
+
   // const color = tabName ? '$red500' : '$green500';
   // return (
   //   <>
@@ -357,12 +299,6 @@ export function ContextBasedStylesContent() {
 const renderItem = (item: any) => (
   <Pressable
     key={item}
-    variant="solid"
-    sx={{
-      props: {
-        variant: 'solid',
-      },
-    }}
     // sx={{
     //   bg: '$amber400',
     // }}

example/storybook/src/components/nb.config.ts

@@ -1,4 +1,6 @@
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { AnimationResolver } from '@gluestack-style/animation-resolver';
+import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
+// import { MotiAnimationDriver } from '@gluestack-style/moti-animation-driver';
 import { createConfig } from '@gluestack-style/react';
 
 export const config = createConfig({
@@ -715,6 +717,7 @@ export const config = createConfig({
       // },
     },
   },
+  plugins: [new AnimationResolver(MotionAnimationDriver)],
   components: {
     Box: {
       theme: {

example/storybook/src/plugins/AnimationPlugin/AnimationPlugin.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Wrapper } from '../../components/Wrapper';
-import { Motion } from '@legendapp/motion';
-import { Pressable, View } from 'react-native';
-import { FontResolver, styled } from '@gluestack-style/react';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+import { Pressable, View, Text } from 'react-native';
+import { styled } from '@gluestack-style/react';
+import {
+  AnimatedImage,
+  AnimatedAnimatePresence,
+} from '@gluestack-style/animation-resolver';
 
 const images = [require('./1.png'), require('./2.png'), require('./3.png')];
-
 const Box = styled(View, {});
-
 const StyledMotionImage = styled(
-  Motion.Image,
+  AnimatedImage,
   {
     ':animate': {
       zIndex: 1,
@@ -19,9 +19,7 @@ const StyledMotionImage = styled(
     },
   },
   {},
-  {
-    plugins: [new AnimationResolver({})],
-  }
+  {}
 );
 
 export function AnimationPlugin() {
@@ -42,18 +40,19 @@ export function AnimationPlugin() {
           'aspectRatio': 1 * 1.4,
         }}
       >
-        {/* @ts-ignore */}
-        <StyledMotionImage.AnimatePresence>
+        <AnimatedAnimatePresence>
           <StyledMotionImage
             style={{
               width: '100%',
               height: '100%',
               position: 'absolute',
             }}
+            // For Mobile
+            // source={images[imageIndex]}
+            // For Web
             source={{ uri: images[imageIndex] }}
             key={`image-${imageIndex}-${Math.random()}`}
             sx={{
-              // @ts-ignore
               ':initial': {
                 x: xPosition,
                 opacity: 0,
@@ -64,12 +63,15 @@ export function AnimationPlugin() {
                 opacity: 0,
               },
               ':transition': {
-                x: { type: 'spring', stiffness: 200, damping: 23 },
+                x: {
+                  type: 'spring',
+                  stiffness: 200,
+                  damping: 23,
+                },
               },
             }}
           />
-          {/* @ts-ignore */}
-        </StyledMotionImage.AnimatePresence>
+        </AnimatedAnimatePresence>
       </Box>
       <Pressable
         accessibilityRole="button"
@@ -89,7 +91,7 @@ export function AnimationPlugin() {
           setImageIndex((prev) => (prev + 1) % images.length);
         }}
       >
-        {'‣'}
+        <Text>{'‣'}</Text>
       </Pressable>
       <Pressable
         accessibilityRole="button"
@@ -110,7 +112,7 @@ export function AnimationPlugin() {
           setImageIndex((prev) => (prev - 1 + images.length) % images.length);
         }}
       >
-        {'‣'}
+        <Text>{'‣'}</Text>
       </Pressable>
     </Wrapper>
   );

example/storybook/tsconfig.json

@@ -4,8 +4,14 @@
     "baseUrl": ".",
     "paths": {
       "@gluestack-style/react": ["../../packages/react/src"],
-      "@gluestack-style/animation-plugin": [
-        "../../packages/animation-plugin/src"
+      "@gluestack-style/legend-motion-animation-driver": [
+        "../../packages/animation-legend-motion-driver/src"
+      ],
+      "@gluestack-style/moti-animation-driver": [
+        "../../packages/animation-moti-driver/src"
+      ],
+      "@gluestack-style/animation-resolver": [
+        "../../packages/animation-resolver/src"
       ],
       "react-native": ["./node_modules/react-native-web"]
     },

example/ui-examples-babel/App.tsx

@@ -1,29 +1,30 @@
+// @ts-nocheck
 import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
+  // useCallback,
+  // useEffect,
+  // useLayoutEffect,
+  // useMemo,
+  // useRef,
   useState,
 } from 'react';
 
 import {
-  Pressable as RNPressable,
-  Text as RNText,
-  StyleSheet,
+  // Pressable as RNPressable,
+  // Text as RNText,
+  // StyleSheet,
   View,
   Pressable,
   Text,
 } from 'react-native';
 import {
-  AsForwarder,
+  // AsForwarder,
   styled,
-  Theme,
+  // Theme,
   StyledProvider,
 } from '@gluestack-style/react';
 import { config } from './gluestack-ui.config';
-import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
-import { AnimationResolver } from '@gluestack-style/animation-plugin';
+// import { createMotionAnimatedComponent, Motion } from '@legendapp/motion';
+// import { AnimationResolver } from '@gluestack-style/animation-plugin';
 
 const Box = styled(View, {
   bg: '$yellow500',