移除骨架屏组件

Strides-APP/app/components/VbeSkeleton.js

@@ -1,135 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
-import Animated, {
-  useSharedValue,
-  withRepeat,
-  withTiming,
-  useAnimatedReaction,
-  useDerivedValue,
-  useAnimatedStyle,
-  Easing,
-} from 'react-native-reanimated';
-import { useLayout, useGetBones } from '../skeleton/hooks';
-import TextView from './TextView';
-
-export const ANIMATION_TYPE = {
-  NONE: "none",
-  SHIVER: "shiver",
-  PULSE: "pulse"
-}
-
-export const ANIMATION_DIRECTION = {
-  HORIZONTAL_LEFT: "horizontalLeft",
-  HORIZONTAL_RIGHT: "horizontalRight",
-  VERTICAL_TOP: "verticalTop",
-  VERTICAL_DOWN: "verticalDown",
-  DIAGONAL_DOWN_LEFT: "diagonalDownLeft",
-  DIAGONAL_DOWN_RIGHT: "diagonalDownRight",
-  DIAGONAL_TOP_LEFT: "diagonalTopLeft",
-  DIAGONAL_TOP_RIGHT: "diagonalTopRight"
-}
-
-const VbeSkeleton = ({
-  style=styles.container,
-  viewStyle=styles.viewStyle,
-  textStyle={},
-  text,
-  duration=1200,
-  layout=[],
-  numberOfLines,
-  animationType=ANIMATION_TYPE.SHIVER,
-  animationDirection=ANIMATION_DIRECTION.HORIZONTAL_LEFT,
-  easing=Easing.bezier(0.5, 0, 0.25, 1),
-  isLoading=true,
-  boneColor='#eeeeee',
-  highlightColor='#f6f6f6',
-  hasFadeIn=false,
-  children
-}) => {
-  const animationValue = useSharedValue(0);
-  const loadingValue = useSharedValue(0);
-  const shiverValue = useSharedValue(animationType === 'shiver' ? 1 : 0);
-  const [componentSize, onLayout] = useLayout();
-  const generalStyles = useMemo(
-    () => ({
-      animationDirection,
-      animationType,
-      boneColor,
-      animationValue,
-      highlightColor,
-    }),
-    [
-      animationDirection,
-      animationType,
-      animationValue,
-      boneColor,
-      highlightColor,
-    ],
-  );
-
-  const getBones = useGetBones(componentSize);
-
-  useAnimatedReaction(
-    () => ({ isLoading, loadingValue }),
-    () => {
-      if (isLoading && loadingValue.value !== 1) {
-        /* NOTE: Reset behaviour to ensure animation always starts from the beginning */
-        animationValue.value = 0;
-
-        animationValue.value =
-          shiverValue.value === 1
-            ? withRepeat(withTiming(1, { duration, easing }), -1, false)
-            : withRepeat(
-                withTiming(1, { duration: duration / 2, easing }),
-                -1,
-                true,
-              );
-      }
-    },
-    [isLoading, shiverValue],
-  );
-
-  const opacity = useDerivedValue(() => {
-    if (!isLoading) {
-      return withTiming(1, { duration: 250 });
-    }
-
-    return 0;
-  });
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-  }));
-
-  return (
-    <View style={style} onLayout={onLayout}>
-      {isLoading ? (
-        getBones({
-          bonesLayout: layout,
-          children,
-          generalStyles,
-        })
-      ) : (
-        <Animated.View style={[viewStyle, hasFadeIn ? animatedStyle : {}]}>
-          { text
-          ? <TextView style={textStyle} numberOfLines={numberOfLines}>{text}</TextView>
-          : children
-          }
-        </Animated.View>
-      )}
-    </View>
-  );
-};
-
-export default memo(VbeSkeleton);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  viewStyle: {
-    alignItems: 'center'
-  }
-});

Strides-APP/app/skeleton/ShiverBone.tsx

@@ -1,120 +0,0 @@
-import React, { memo } from 'react';
-import { View, StyleSheet } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import Animated, {
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import { useGetGradientTransform } from './hooks';
-import {
-  useGetBoneStyles,
-  useGetGradientSize,
-  useGetGradientEndDirection,
-} from './hooks/index.js';
-import type {
-  ISkeletonProps,
-  ICustomViewStyle,
-  IComponentSize,
-} from './constants';
-
-type ShiverBoneProps = Pick<
-  ISkeletonProps,
-  'boneColor' | 'highlightColor' | 'animationType' | 'animationDirection'
-> & {
-  componentSize: IComponentSize;
-  boneLayout: ICustomViewStyle;
-  animationValue: SharedValue<number>;
-  index?: number | string;
-};
-
-/**
- * ShiverBone is a component that renders a rectangle with a gradient animation.
- * @componentSize is the size of the component.
- * @boneLayout is the layout of the bone.
- * @boneColor is the color of the bone.
- * @highlightColor is the color of the highlight.
- * @animationDirection is the direction of the animation.
- * @animationValue is the value of the animation.
- * @animationType is the type of the animation.
- * @index is the index of the bone.
- */
-const ShiverBone: React.FC<ShiverBoneProps> = ({
-  componentSize,
-  boneLayout,
-  boneColor,
-  highlightColor,
-  animationDirection,
-  animationValue,
-  animationType,
-  index,
-}) => {
-  const transform = useGetGradientTransform({
-    componentSize,
-    boneLayout,
-    animationDirection,
-    animationValue,
-  });
-
-  const getBoneStyles = useGetBoneStyles(componentSize);
-  const getGradientSize = useGetGradientSize(componentSize);
-  const getGradientEndDirection = useGetGradientEndDirection(componentSize);
-
-  const gradientSize = getGradientSize({ animationDirection, boneLayout });
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    ...gradientSize,
-    transform: [
-      {
-        translateX: transform.value.translateX ?? 0,
-      },
-      {
-        translateY: transform.value.translateY ?? 0,
-      },
-      {
-        rotate: transform.value.rotate ?? '0deg',
-      },
-    ],
-  }));
-
-  return (
-    <View
-      key={index}
-      style={getBoneStyles({
-        animationDirection,
-        animationType,
-        boneLayout,
-        boneColor,
-      })}
-    >
-      <Animated.View style={[styles.absoluteGradient, animatedStyle]}>
-        <LinearGradient
-          colors={[
-            boneColor as string | number,
-            highlightColor as string | number,
-            boneColor as string | number,
-          ]}
-          start={{ x: 0, y: 0 }}
-          end={getGradientEndDirection({
-            animationType,
-            animationDirection,
-            boneLayout,
-          })}
-          style={styles.gradientChild}
-        />
-      </Animated.View>
-    </View>
-  );
-};
-
-export default memo(ShiverBone);
-
-const styles = StyleSheet.create({
-  absoluteGradient: {
-    height: '100%',
-    position: 'absolute',
-    width: '100%',
-  },
-  gradientChild: {
-    flex: 1
-  }
-});

Strides-APP/app/skeleton/StaticBone.tsx

@@ -1,70 +0,0 @@
-import React, { memo } from 'react';
-import Animated, {
-  SharedValue,
-  useAnimatedStyle,
-  interpolateColor,
-} from 'react-native-reanimated';
-import { useGetBoneStyles } from './hooks';
-import type {
-  ICustomViewStyle,
-  ISkeletonProps,
-  IComponentSize,
-} from './constants';
-
-type StaticBoneProps = Pick<
-  ISkeletonProps,
-  'boneColor' | 'highlightColor' | 'animationType' | 'animationDirection'
-> & {
-  componentSize: IComponentSize;
-  boneLayout: ICustomViewStyle;
-  animationValue: SharedValue<number>;
-  index?: number | string;
-};
-
-/**
- * StaticBone is a component that renders a rectangle with a static color.
- * @boneLayout is the layout of the bone.
- * @boneColor is the color of the bone.
- * @highlightColor is the color of the highlight.
- * @animationDirection is the direction of the animation.
- * @animationValue is the value of the animation.
- * @animationType is the type of the animation.
- * @index is the index of the bone.
- * @componentSize is the size of the component.
- */
-const StaticBone: React.FC<StaticBoneProps> = ({
-  boneLayout,
-  index,
-  componentSize,
-  highlightColor,
-  animationValue,
-  animationDirection,
-  animationType,
-  boneColor,
-}) => {
-  const getBoneStyles = useGetBoneStyles(componentSize);
-
-  const boneStyle = getBoneStyles({
-    animationDirection,
-    animationType,
-    boneLayout,
-    boneColor,
-  });
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(
-      animationValue.value,
-      [0, 1],
-      [boneColor as string, highlightColor as string],
-    ),
-  }));
-
-  return (
-    <Animated.View
-      key={index}
-      style={[boneStyle, animationType === 'none' ? {} : animatedStyle]}
-    />
-  );
-};
-
-export default memo(StaticBone);

Strides-APP/app/skeleton/constants.ts

@@ -1,63 +0,0 @@
-import React from "react"
-import { StyleProp, ViewStyle } from 'react-native';
-import { Easing, SharedValue, EasingFn } from 'react-native-reanimated';
-
-type _animationType = 'none' | 'shiver' | 'pulse' | undefined;
-type _animationDirection =
-  | 'horizontalLeft'
-  | 'horizontalRight'
-  | 'verticalTop'
-  | 'verticalDown'
-  | 'diagonalDownLeft'
-  | 'diagonalDownRight'
-  | 'diagonalTopLeft'
-  | 'diagonalTopRight'
-  | undefined;
-
-export interface ICustomViewStyle extends ViewStyle {
-  children?: ICustomViewStyle[];
-  key?: number | string;
-}
-
-export interface ISkeletonProps {
-  isLoading: boolean;
-  layout?: ICustomViewStyle[];
-  duration?: number;
-  containerStyle?: StyleProp<ViewStyle>;
-  animationType?: _animationType;
-  animationDirection?: _animationDirection;
-  boneColor?: string | undefined;
-  hasFadeIn?: boolean;
-  highlightColor?: string | undefined;
-  easing?: { factory: () => EasingFn };
-  children?: React.ReactNode;
-}
-
-export interface IComponentSize {
-  width: number;
-  height: number;
-}
-
-export interface IGeneralStyles {
-  animationDirection: _animationDirection;
-  animationType: _animationType;
-  boneColor: string;
-  highlightColor: string;
-  animationValue: SharedValue<number>;
-}
-
-export interface IDirection {
-  x: number;
-  y: number;
-}
-
-export const DEFAULT_CONFIG = {
-  BORDER_RADIUS: 3,
-  DURATION: 1200,
-  ANIMATION_TYPE: 'shiver' as _animationType,
-  ANIMATION_DIRECTION: 'horizontalLeft' as _animationDirection,
-  BONE_COLOR: '#E1E9EE',
-  HIGHLIGHT_COLOR: '#F2F8FC',
-  EASING: Easing.bezier(0.5, 0, 0.25, 1),
-  LOADING: true,
-};

Strides-APP/app/skeleton/hooks/index.js

@@ -1,9 +0,0 @@
-export { useGetBones } from './useGetBones';
-export { useGetGradientEndDirection } from './useGetGradientEndDirection';
-export { useGetGradientSize } from './useGetGradientSize';
-export { useRenderBone } from './useRenderBone';
-export { useLayout } from './useLayout';
-export { useGetBoneStyles } from './useGetBoneStyles';
-export { useGetGradientTransform } from './useGetGradientTransform';
-export { useGetPositionRange } from './useGetPositionRange';
-export { useGetBoneDimensions } from './useGetBoneDimensions';

Strides-APP/app/skeleton/hooks/useGetBoneDimensions.ts

@@ -1,21 +0,0 @@
-import { useCallback } from 'react';
-import type { ICustomViewStyle, IComponentSize } from '../constants';
-
-export const useGetBoneDimensions = (componentSize: IComponentSize) =>
-  useCallback(
-    (boneLayout: ICustomViewStyle) => {
-      'worklet';
-
-      return {
-        width:
-          typeof boneLayout.width === 'string'
-            ? componentSize.width
-            : boneLayout.width ?? 0,
-        height:
-          typeof boneLayout.height === 'string'
-            ? componentSize.height
-            : boneLayout.height ?? 0,
-      } as { width: number; height: number };
-    },
-    [componentSize],
-  );

Strides-APP/app/skeleton/hooks/useGetBoneStyles.ts

@@ -1,56 +0,0 @@
-import { useCallback } from 'react';
-import { useGetBoneDimensions } from '../hooks';
-import {
-  ICustomViewStyle,
-  ISkeletonProps,
-  IComponentSize,
-  DEFAULT_CONFIG,
-} from '../constants';
-
-type UseGetBoneStylesProps = Pick<
-  ISkeletonProps,
-  'animationType' | 'animationDirection' | 'boneColor'
-> & {
-  boneLayout: ICustomViewStyle;
-};
-
-export const useGetBoneStyles = (componentSize: IComponentSize) => {
-  const getBoneDimensions = useGetBoneDimensions(componentSize);
-
-  return useCallback(
-    ({
-      animationDirection,
-      animationType,
-      boneLayout,
-      boneColor,
-    }: UseGetBoneStylesProps) => {
-      const { backgroundColor, borderRadius } = boneLayout;
-      const { width, height } = getBoneDimensions(boneLayout);
-
-      const boneStyle: ICustomViewStyle = {
-        width,
-        height,
-        borderRadius: borderRadius || DEFAULT_CONFIG.BORDER_RADIUS,
-        ...boneLayout,
-      };
-
-      if (animationType !== 'pulse') {
-        boneStyle.overflow = 'hidden';
-        boneStyle.backgroundColor = backgroundColor || boneColor;
-      }
-
-      if (
-        animationDirection === 'diagonalDownRight' ||
-        animationDirection === 'diagonalDownLeft' ||
-        animationDirection === 'diagonalTopRight' ||
-        animationDirection === 'diagonalTopLeft'
-      ) {
-        boneStyle.justifyContent = 'center';
-        boneStyle.alignItems = 'center';
-      }
-
-      return boneStyle;
-    },
-    [getBoneDimensions],
-  );
-};

Strides-APP/app/skeleton/hooks/useGetBones.tsx

@@ -1,92 +0,0 @@
-import React, { Children, useCallback } from 'react';
-import { View } from 'react-native';
-import { useRenderBone } from './useRenderBone';
-import StaticBone from '../StaticBone';
-import ShiverBone from '../ShiverBone';
-import type {
-  ICustomViewStyle,
-  IGeneralStyles,
-  IComponentSize,
-} from '../constants';
-
-interface UseGetBonesProps {
-  bonesLayout: ICustomViewStyle[];
-  children: React.ReactNode;
-  prefix?: string | number;
-  generalStyles: IGeneralStyles;
-}
-
-/**
- * This hook is used to get the bones based on the layout prop.
- * @componentSize is the size of the component.
- */
-export const useGetBones = (componentSize: IComponentSize) => {
-  const renderBone = useRenderBone(componentSize);
-
-  const renderNestedBones = useCallback(
-    (
-      bones: ICustomViewStyle[],
-      prefix: string | number | undefined,
-      generalStyles: IGeneralStyles,
-    ) => {
-      return bones.map((bone, index) => {
-        const keyIndex = prefix ? `${prefix}_${index}` : index;
-
-        const { children: childBones, ...layoutStyle } = bone;
-
-        if (childBones?.length) {
-          return (
-            <View key={keyIndex} style={layoutStyle}>
-              {renderNestedBones(childBones, keyIndex, generalStyles)}
-            </View>
-          );
-        }
-
-        return renderBone({
-          generalStyles,
-          bonesLayout: bones,
-          index,
-          keyIndex,
-        });
-      });
-    },
-    [renderBone],
-  );
-
-  return useCallback(
-    ({ bonesLayout, children, prefix, generalStyles }: UseGetBonesProps) => {
-      if (bonesLayout && bonesLayout.length > 0) {
-        return renderNestedBones(bonesLayout, prefix, generalStyles);
-      }
-
-      return Children.map(children, (child, i) => {
-        const styling = child.props.style || {};
-
-        if (
-          generalStyles.animationType === 'pulse' ||
-          generalStyles.animationType === 'none'
-        ) {
-          return (
-            <StaticBone
-              key={prefix ? `${prefix}_${i}` : i}
-              index={i}
-              boneLayout={styling}
-              componentSize={componentSize}
-              {...generalStyles}
-            />
-          );
-        }
-
-        return (
-          <ShiverBone
-            index={prefix ? `${prefix}_${i}` : i}
-            componentSize={componentSize}
-            boneLayout={styling}
-            {...generalStyles}
-          />
-        );
-      });
-    },
-    [componentSize, renderNestedBones],
-  );
-};

Strides-APP/app/skeleton/hooks/useGetGradientEndDirection.ts

@@ -1,53 +0,0 @@
-import { useCallback } from 'react';
-import { useGetBoneDimensions } from './useGetBoneDimensions';
-import type {
-  ISkeletonProps,
-  ICustomViewStyle,
-  IComponentSize,
-} from '../constants';
-
-type UseGetGradientEndDirectionProps = Pick<
-  ISkeletonProps,
-  'animationType' | 'animationDirection'
-> & {
-  boneLayout: ICustomViewStyle;
-};
-
-export const useGetGradientEndDirection = (componentSize: IComponentSize) => {
-  const getBoneDimensions = useGetBoneDimensions(componentSize);
-
-  return useCallback(
-    ({
-      animationType,
-      animationDirection,
-      boneLayout,
-    }: UseGetGradientEndDirectionProps) => {
-      let direction = { x: 0, y: 0 };
-
-      if (animationType === 'shiver') {
-        switch (animationDirection) {
-          case 'horizontalLeft':
-          case 'horizontalRight':
-            direction = { x: 1, y: 0 };
-            break;
-          case 'verticalTop':
-          case 'verticalDown':
-            direction = { x: 0, y: 1 };
-            break;
-          case 'diagonalTopRight':
-          case 'diagonalDownRight':
-          case 'diagonalDownLeft':
-          case 'diagonalTopLeft': {
-            const { height, width } = getBoneDimensions(boneLayout);
-            return width && height && width > height
-              ? { x: 0, y: 1 }
-              : { x: 1, y: 0 };
-          }
-        }
-      }
-
-      return direction;
-    },
-    [getBoneDimensions],
-  );
-};

Strides-APP/app/skeleton/hooks/useGetGradientSize.ts

@@ -1,41 +0,0 @@
-import { useCallback } from 'react';
-import { useGetBoneDimensions } from './useGetBoneDimensions';
-import type {
-  ICustomViewStyle,
-  ISkeletonProps,
-  IComponentSize,
-} from '../constants';
-
-type UseGetGradientSizeProps = Pick<ISkeletonProps, 'animationDirection'> & {
-  boneLayout: ICustomViewStyle;
-};
-
-export const useGetGradientSize = (componentSize: IComponentSize) => {
-  const getBoneDimensions = useGetBoneDimensions(componentSize);
-
-  return useCallback(
-    ({ animationDirection, boneLayout }: UseGetGradientSizeProps) => {
-      const { width, height } = getBoneDimensions(boneLayout);
-      const gradientStyle: ICustomViewStyle = {};
-
-      if (
-        animationDirection === 'diagonalDownRight' ||
-        animationDirection === 'diagonalDownLeft' ||
-        animationDirection === 'diagonalTopRight' ||
-        animationDirection === 'diagonalTopLeft'
-      ) {
-        gradientStyle.width = width as number;
-        gradientStyle.height = height as number;
-
-        if (height >= width) {
-          gradientStyle.height *= 1.5;
-        } else {
-          gradientStyle.width *= 1.5;
-        }
-      }
-
-      return gradientStyle;
-    },
-    [getBoneDimensions],
-  );
-};

Strides-APP/app/skeleton/hooks/useGetGradientTransform.ts

@@ -1,135 +0,0 @@
-import {
-  SharedValue,
-  interpolate,
-  useDerivedValue,
-} from 'react-native-reanimated';
-import { useGetPositionRange } from './useGetPositionRange';
-import { useGetBoneDimensions } from './useGetBoneDimensions';
-import type {
-  ICustomViewStyle,
-  IComponentSize,
-  ISkeletonProps,
-} from '../constants';
-
-type UseGetGradientTransformProps = Pick<
-  ISkeletonProps,
-  'animationDirection'
-> & {
-  componentSize: IComponentSize;
-  boneLayout: ICustomViewStyle;
-  animationValue: SharedValue<number>;
-};
-
-/**
- * Provides the animation values for the gradient transform
- * @componentSize is the size of the component
- * @boneLayout is the layout of the bone
- * @animationDirection is the direction of the animation
- * @animationValue is the value of the animation
- */
-export const useGetGradientTransform = ({
-  componentSize,
-  boneLayout,
-  animationDirection,
-  animationValue,
-}: UseGetGradientTransformProps): SharedValue<{
-  translateX?: number;
-  translateY?: number;
-  rotate?: string;
-}> => {
-  const getBoneDimensions = useGetBoneDimensions(componentSize);
-  const getPositionRange = useGetPositionRange(componentSize);
-
-  return useDerivedValue(() => {
-    let transform = {};
-    const { width, height } = getBoneDimensions(boneLayout);
-
-    if (
-      animationDirection === 'verticalTop' ||
-      animationDirection === 'verticalDown' ||
-      animationDirection === 'horizontalLeft' ||
-      animationDirection === 'horizontalRight'
-    ) {
-      const interpolatedPosition = interpolate(
-        animationValue.value,
-        [0, 1],
-        getPositionRange({ animationDirection, boneLayout }),
-      );
-
-      if (
-        animationDirection === 'verticalTop' ||
-        animationDirection === 'verticalDown'
-      ) {
-        transform = { translateY: interpolatedPosition };
-      } else {
-        transform = { translateX: interpolatedPosition };
-      }
-    } else if (
-      animationDirection === 'diagonalDownRight' ||
-      animationDirection === 'diagonalTopRight' ||
-      animationDirection === 'diagonalDownLeft' ||
-      animationDirection === 'diagonalTopLeft'
-    ) {
-      const diagonal = Math.sqrt(height * height + width * width);
-      const mainDimension = Math.max(height, width);
-      const oppositeDimension = mainDimension === width ? height : width;
-      const diagonalAngle = Math.acos(mainDimension / diagonal);
-      let rotateAngle =
-        animationDirection === 'diagonalDownRight' ||
-        animationDirection === 'diagonalTopLeft'
-          ? Math.PI / 2 - diagonalAngle
-          : Math.PI / 2 + diagonalAngle;
-      const additionalRotate =
-        animationDirection === 'diagonalDownRight' ||
-        animationDirection === 'diagonalTopLeft'
-          ? 2 * diagonalAngle
-          : -2 * diagonalAngle;
-      const distanceFactor = (diagonal + oppositeDimension) / 2;
-      if (mainDimension === width && width !== height)
-        rotateAngle += additionalRotate;
-      const sinComponent = Math.sin(diagonalAngle) * distanceFactor;
-      const cosComponent = Math.cos(diagonalAngle) * distanceFactor;
-      let xOutputRange: number[];
-      let yOutputRange: number[];
-      if (
-        animationDirection === 'diagonalDownRight' ||
-        animationDirection === 'diagonalTopLeft'
-      ) {
-        xOutputRange =
-          animationDirection === 'diagonalDownRight'
-            ? [-sinComponent, sinComponent]
-            : [sinComponent, -sinComponent];
-        yOutputRange =
-          animationDirection === 'diagonalDownRight'
-            ? [-cosComponent, cosComponent]
-            : [cosComponent, -cosComponent];
-      } else {
-        xOutputRange =
-          animationDirection === 'diagonalDownLeft'
-            ? [-sinComponent, sinComponent]
-            : [sinComponent, -sinComponent];
-        yOutputRange =
-          animationDirection === 'diagonalDownLeft'
-            ? [cosComponent, -cosComponent]
-            : [-cosComponent, cosComponent];
-        if (mainDimension === height && width !== height) {
-          xOutputRange.reverse();
-          yOutputRange.reverse();
-        }
-      }
-
-      let translateX = interpolate(animationValue.value, [0, 1], xOutputRange);
-      let translateY = interpolate(animationValue.value, [0, 1], yOutputRange);
-
-      // swapping the translates if width is the main dim
-      if (mainDimension === width) {
-        [translateX, translateY] = [translateY, translateX];
-      }
-
-      const rotate = `${rotateAngle}rad`;
-      transform = { translateX, translateY, rotate };
-    }
-
-    return transform;
-  });
-};

Strides-APP/app/skeleton/hooks/useGetPositionRange.ts

@@ -1,39 +0,0 @@
-import { useCallback } from 'react';
-import { useGetBoneDimensions } from './useGetBoneDimensions';
-import { ICustomViewStyle } from '../constants';
-import type { ISkeletonProps, IComponentSize } from '../constants';
-
-type UseGetPositionRangeProps = Pick<ISkeletonProps, 'animationDirection'> & {
-  boneLayout: ICustomViewStyle;
-};
-
-export const useGetPositionRange = (componentSize: IComponentSize) => {
-  const getBoneDimensions = useGetBoneDimensions(componentSize);
-
-  return useCallback(
-    ({ animationDirection, boneLayout }: UseGetPositionRangeProps) => {
-      'worklet';
-
-      const outputRange: number[] = [];
-      const { width, height } = getBoneDimensions(boneLayout);
-
-      switch (animationDirection) {
-        case 'horizontalRight':
-          outputRange.push(-width, +width);
-          break;
-        case 'horizontalLeft':
-          outputRange.push(+width, -width);
-          break;
-        case 'verticalDown':
-          outputRange.push(-height, +height);
-          break;
-        case 'verticalTop':
-          outputRange.push(+height, -height);
-          break;
-      }
-
-      return outputRange;
-    },
-    [getBoneDimensions],
-  );
-};

Strides-APP/app/skeleton/hooks/useLayout.ts

@@ -1,20 +0,0 @@
-import { useState, useCallback } from 'react';
-import { LayoutChangeEvent } from 'react-native';
-
-type Size = {
-  width: number;
-  height: number;
-};
-
-type UseLayoutReturnType = [Size, (event: LayoutChangeEvent) => void];
-
-export const useLayout = (): UseLayoutReturnType => {
-  const [size, setSize] = useState({ width: 0, height: 0 });
-
-  const onLayout = useCallback((event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    setSize({ width, height });
-  }, []);
-
-  return [size, onLayout];
-};

Strides-APP/app/skeleton/hooks/useRenderBone.tsx

@@ -1,49 +0,0 @@
-import React, { useCallback } from 'react';
-import ShiverBone from '../ShiverBone';
-import StaticBone from '../StaticBone';
-import type {
-  ICustomViewStyle,
-  IGeneralStyles,
-  IComponentSize,
-} from '../constants';
-
-interface UseRenderBoneProps {
-  generalStyles: IGeneralStyles;
-  bonesLayout: ICustomViewStyle[];
-  keyIndex: string | number;
-  index: number;
-}
-
-/**
- * Renders the bone based on the animation type.
- * @componentSize is the size of the component.
- */
-export const useRenderBone = (componentSize: IComponentSize) =>
-  useCallback(
-    ({ generalStyles, bonesLayout, keyIndex, index }: UseRenderBoneProps) => {
-      if (
-        generalStyles.animationType === 'pulse' ||
-        generalStyles.animationType === 'none'
-      ) {
-        return (
-          <StaticBone
-            key={keyIndex}
-            componentSize={componentSize}
-            index={index}
-            boneLayout={bonesLayout[index] ?? {}}
-            {...generalStyles}
-          />
-        );
-      }
-
-      return (
-        <ShiverBone
-          key={keyIndex}
-          componentSize={componentSize}
-          boneLayout={bonesLayout[index] ?? {}}
-          {...generalStyles}
-        />
-      );
-    },
-    [componentSize],
-  );