@hoddy-ui/core 1.0.14 → 1.0.16

package/package.json

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

package/src/Components/Animator.tsx

@@ -0,0 +1,45 @@
+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";
+
+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>;
+};
+
+export default Animator;

package/src/Components/Locator.tsx

@@ -1,5 +1,5 @@
 import { Ionicons } from "@expo/vector-icons";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Alert, TouchableOpacity, View } from "react-native";
 import { ListItem } from "./List";
 import TextField from "./TextField";
@@ -16,16 +16,16 @@ import Typography from "./Typography";
 const { GOOGLE_MAP_API_KEY } = getApiKey();
 
 if (GOOGLE_MAP_API_KEY) Location.setGoogleApiKey(GOOGLE_MAP_API_KEY);
-else
-  console.error(
-    "Google map api key needs to be set to use this component \nMake sure to run initialize() with a valid google map api key"
-  );
 
 type predictionType = {
   id: string;
   description: string;
 };
 export const getPredictionsFromCoords = async (coords: any) => {
+  if (!GOOGLE_MAP_API_KEY)
+    console.error(
+      "Google map api key needs to be set to use this component \nMake sure to run initialize() with a valid google map api key"
+    );
   if (!coords) return [];
   const res = await (
     await fetch(
@@ -150,6 +150,13 @@ export const Locator: React.FC<LocatorProps> = ({
     setPrediction([]);
   };
 
+  useEffect(() => {
+    if (!GOOGLE_MAP_API_KEY)
+      console.error(
+        "Google map api key needs to be set to use this component \nMake sure to run initialize() with a valid google map api key"
+      );
+  }, [GOOGLE_MAP_API_KEY]);
+
   return (
     <View style={{ zIndex: 100 }}>
       {renderInput ? (

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";