@hoddy-ui/core 1.0.15 → 1.0.17

package/index.ts

@@ -9,6 +9,7 @@ export { default as Button } from "./src/Components/Button";
 export * from "./src/Components/Checkbox";
 export * from "./src/Components/FlashMessage";
 export * from "./src/Components/Grid";
+export * from "./src/Components/Animator";
 export * from "./src/Components/Locator";
 export * from "./src/Components/Popup";
 export * from "./src/Components/SafeAreaView";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/Animator.tsx

@@ -0,0 +1,43 @@
+import { useFocusEffect } from "@react-navigation/native";
+import React, { FC, useCallback, useState } from "react";
+import { LayoutAnimation, View } from "react-native";
+import { ScaledSheet } from "react-native-size-matters";
+import { AnimatorProps } from "../types";
+
+export const Animator: FC<AnimatorProps> = ({
+  style = {},
+  duration = 500,
+  children,
+  delay = 100,
+  animationType = "easeInEaseOut",
+  type = "fade",
+}) => {
+  const [play, setPlay] = useState(false);
+  const toggleAnimation = () => {
+    setPlay(false);
+
+    setTimeout(() => {
+      LayoutAnimation.configureNext({
+        ...LayoutAnimation.Presets[animationType],
+        duration,
+      });
+      setPlay(true);
+    }, delay);
+  };
+  const styles = ScaledSheet.create({
+    root: {
+      opacity: play ? 1 : 0,
+      left: type === "slideInLeft" ? (!play ? -200 : 0) : undefined,
+      right: type === "slideInRight" ? (!play ? -200 : 0) : undefined,
+      bottom: type === "slideInUp" ? (!play ? -100 : 0) : undefined,
+      top: type === "slideInDown" ? (!play ? -100 : 0) : undefined,
+      ...style,
+    },
+  });
+  useFocusEffect(
+    useCallback(() => {
+      toggleAnimation();
+    }, [])
+  );
+  return <View style={styles.root}>{play && children}</View>;
+};

package/src/types.ts

@@ -75,7 +75,14 @@ export interface AvatarProps {
   size?: number;
   style?: ViewStyle;
 }
-
+export interface AnimatorProps {
+  style?: ViewStyle;
+  duration?: number;
+  children: ReactNode;
+  delay?: number;
+  animationType?: "easeInEaseOut" | "linear" | "spring";
+  type?: "fade" | "slideInLeft" | "slideInRight" | "slideInUp" | "slideInDown";
+}
 export interface ButtonProps {
   color?: colorTypes;
   variant?: "text" | "outlined" | "contained";