Merge branch 'andrew_testing' into fix/types-in-styles-quickfix-with-…

…regex

packages/ui/src/RSkeleton/RSkeleton.tsx

@@ -0,0 +1,22 @@
+import { Animated, Text } from 'react-native';
+import { useSkeletonAnimation } from './useSkeletonAnimation';
+
+export const RSkeleton = ({ style }) => {
+  const fadeAnim = useSkeletonAnimation();
+
+  return (
+    <Animated.View
+      style={{
+        opacity: fadeAnim,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#e2e1eb',
+        width: '100%',
+        borderRadius: '4px',
+        ...style,
+      }}
+    >
+      <Text style={{ fontSize: '24px' }}> </Text>
+    </Animated.View>
+  );
+};

packages/ui/src/RSkeleton/index.tsx

@@ -1,44 +1 @@
-import { useState, useEffect } from 'react';
-import { Animated, Text } from 'react-native';
-
-const RSkeleton = ({style}) => {
-  const [fadeAnim] = useState(new Animated.Value(1)); // Initial opacity set to 0
-
-  useEffect(() => {
-    const startAnimation = () => {
-      Animated.loop(
-        Animated.sequence([
-          Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: 1000,
-            useNativeDriver: false, // Add this if you encounter any issues with native driver
-          }),
-          Animated.timing(fadeAnim, {
-            toValue: 1,
-            duration: 1000,
-            useNativeDriver: false, // Add this if you encounter any issues with native driver
-          }),
-        ]),
-      ).start();
-    };
-    startAnimation();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View
-      style={{
-        opacity: fadeAnim,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#e2e1eb',
-        width: "100%",
-        borderRadius: "4px",
-        ...style
-      }}
-    >
-      <Text style={{fontSize: "24px"}}>{' '}</Text>
-    </Animated.View>
-  );
-};
-
-export default RSkeleton;
+export { RSkeleton } from './RSkeleton';

packages/ui/src/RSkeleton/useSkeletonAnimation.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+
+export const useSkeletonAnimation = () => {
+  const fadeAnim = useRef(new Animated.Value(1));
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(fadeAnim.current, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: false, // Add this if you encounter any issues with native driver
+        }),
+        Animated.timing(fadeAnim.current, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: false, // Add this if you encounter any issues with native driver
+        }),
+      ]),
+    ).start();
+  }, []);
+
+  return fadeAnim.current;
+};

packages/ui/src/index.tsx

@@ -6,7 +6,6 @@ import RParagraph from './Rparagraph';
 import RInput from './RInput';
 import RImage from './RImage';
 import RScrollView from './RScrollview';
-import RSkeleton from './RSkeleton';
 import RSwitch from './RSwitch';
 import RIconButton from './RIconButton';
 import RSeparator from './RSeparator';
@@ -27,6 +26,8 @@ import XStack from './XStack';
 import YStack from './YStack';
 import RButton from './RButton';
 
+export { RSkeleton } from './RSkeleton';
+
 export {
   RH1,
   RH2,
@@ -52,7 +53,6 @@ export {
   RIconButton,
   RImage,
   RScrollView,
-  RSkeleton,
   XStack,
   YStack,
   RButton,
@@ -71,7 +71,6 @@ export * from './Rparagraph';
 export * from './RInput';
 export * from './RImage';
 export * from './RScrollview';
-export * from './Skeleton';
 export * from './XStack';
 export * from './YStack';