rn-toastify 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Mukesh Prajapati
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.MD

@@ -0,0 +1,29 @@
+
+# react-native-toast
+
+
+## Demo
+
+Animated toast message component for React Native.
+![Demo GIF](https://github.com/muku534/react-native-toast/blob/master/docs/Toast.gif)
+
+
+
+## Features
+
+- 🚀 Imperative API
+- 🎨 Customizable layouts
+- 🔧 Flexible config
+- 📅 Promise Handling
+- 📍 Position Control
+
+
+
+## Documentation
+
+This is the Documentation for react-native-toast
+
+- [Quick start](https://github.com/muku534/react-native-toast)
+- [API](https://github.com/muku534/react-native-toast)
+- [Create custom layouts](https://github.com/muku534/react-native-toast)
+

package/assets/animated_Icon/ErrorAnimation.json

@@ -0,0 +1 @@
+{"v":"5.5.8","fr":30,"ip":0,"op":60,"w":600,"h":600,"nm":"X","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 147","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-166.707,"ix":10},"p":{"a":0,"k":[306.662,303.115,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[60,60,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[108,-171],[-84,176]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.2353,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":70,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":24,"s":[0]},{"t":35,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":24,"op":60,"st":24,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-69.001,"ix":10},"p":{"a":0,"k":[296.019,306.184,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[60,60,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[108,-171],[-84,176]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.2353,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":70,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":17,"s":[0]},{"t":28,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":17,"op":63,"st":17,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Circle2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":19,"s":[161]},{"t":43.0001953125,"s":[270]}],"ix":10},"p":{"a":0,"k":[300,300,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[21.701,21.701,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[1900,1900],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.2353,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":180,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0]},{"t":50.0001953125,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0]},{"t":50.0001953125,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":18.2,"op":60,"st":-134.2,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Circle1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0.2,"s":[180]},{"t":25.0001953125,"s":[270]}],"ix":10},"p":{"a":0,"k":[300,300,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[21.701,21.701,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[1900,1900],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.2353,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":150,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0.2,"s":[0]},{"t":42.200390625,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0.2,"op":60,"st":-152.2,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Background","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":28,"s":[20]},{"t":40,"s":[20]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[293,305,0],"ix":2},"a":{"a":0,"k":[5,-6,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.671,0.671,0.671],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.048,0.048,0.415]},"t":28,"s":[43,43,100]},{"t":40,"s":[685.86,685.86,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[84,84],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.2353,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[6,-7],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":28,"op":67,"st":28,"bm":0}],"markers":[]}

package/assets/animated_Icon/SuccessAnimation.json

@@ -0,0 +1 @@
+{"v":"5.7.4","fr":29.9700012207031,"ip":0,"op":30.0000012219251,"w":250,"h":250,"nm":"Succes 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[89,88.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":2,"ty":"el","s":{"a":0,"k":[72,72],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.341176480055,0.788235366344,0.180392161012,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":5,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":0,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[36,36.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[277.728,277.728],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.669],"y":[1]},"o":{"x":[0.848],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.245],"y":[1]},"o":{"x":[0.13],"y":[0]},"t":12,"s":[15]},{"t":27.0000010997325,"s":[87]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":12.00000048877,"s":[77]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Checklist","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[139.5,104.5,0],"ix":2,"l":2},"a":{"a":0,"k":[125.5,100.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-75,0],[-25,50],[75,-50]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.341176470588,0.788235353956,0.180392156863,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":20,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[125.494,100.519],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.086],"y":[1]},"o":{"x":[0.693],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.453],"y":[1]},"o":{"x":[0.977],"y":[0]},"t":10,"s":[33]},{"t":29.0000011811942,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 5 Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.689],"y":[1]},"o":{"x":[0.898],"y":[0]},"t":0,"s":[0]},{"t":29.0000011811942,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[124.5,124.5,0],"ix":2,"l":2},"a":{"a":0,"k":[100.5,100.5,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.488,0.488,0.667],"y":[1,1,1]},"o":{"x":[0.896,0.896,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":29.0000011811942,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-55.229],[55.229,0],[0,55.229],[-55.229,0]],"o":[[0,55.229],[-55.229,0],[0,-55.229],[55.229,0]],"v":[[100,0],[0,100],[-100,0],[0,-100]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.819607902976,0.976470648074,0.674509803922,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[100.5,100.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0}],"markers":[]}

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: [
+      ...
+      'react-native-reanimated/plugin',
+    ],
+  };

package/index.js

@@ -0,0 +1,6 @@
+export { toast as default } from './src/Toast';
+export { SuccessToast } from './src/components/SuccessToast';
+export { CustomeToast } from './src/components/CustomeToast';
+export { EmojiToast } from './src/components/EmojiToast';
+export { ErrorToast } from './src/components/ErrorToast';
+export { LoadingToast } from './src/components/LoadingToast';

package/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    preset: 'react-native',
+    testEnvironment: 'node',
+    collectCoverage: true,
+    collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+    setupFilesAfterEnv: [
+        '@testing-library/jest-native/extend-expect',
+        './jest.setup.js'
+    ],
+    transformIgnorePatterns: [
+        'node_modules/(?!(jest-)?react-native|@react-native|@react-navigation|@react-native-community|@expo)',
+    ],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package/jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-native/extend-expect';

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "rn-toastify",
+  "version": "1.0.0",
+  "description": "A simple toast notification library for React Native",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "toast",
+    "notification",
+    "library"
+  ],
+  "author": "Mukesh Prajapati",
+  "license": "MIT",
+  "dependencies": {
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.5.2",
+    "@types/jest": "^28.1.0",
+    "@types/react-native": "^0.67.3",
+    "events": "^3.3.0",
+    "jest": "^28.1.0",
+    "lottie-react-native": "^6.7.2",
+    "react": "18.2.0",
+    "react-native": "0.74.3",
+    "react-native-reanimated": "^3.14.0",
+    "react-test-renderer": "^17.0.2"
+  }
+}

package/src/Toast.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useMemo } from 'react';
+import { PanResponder, StyleSheet, Text } from 'react-native';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from './utils/Pixel/Index';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSpring, runOnJS } from 'react-native-reanimated';
+
+const Toast = ({ visible, duration, position, children, onHide, style }) => {
+    const opacity = useSharedValue(0);
+    const translateY = useSharedValue(-50);
+    const translateX = useSharedValue(0);
+    const scale = useSharedValue(0.9); // Start with a slightly smaller scale
+
+    const positionStyle = useMemo(() => {
+        return position === 'top' ? styles.top : styles.bottom;
+    }, [position]);
+
+    useEffect(() => {
+        if (visible) {
+            opacity.value = withTiming(1, { duration: 300 });
+            translateY.value = withSpring(0, { damping: 8, stiffness: 110 });
+            scale.value = withSpring(1, { damping: 8, stiffness: 110 });
+
+            if (duration !== Infinity) {
+                const hideTimeout = setTimeout(() => {
+                    opacity.value = withTiming(0, { duration: 300 });
+                    translateY.value = withTiming(-50, { duration: 300 });
+                    runOnJS(onHide)();
+                }, duration);
+
+                return () => clearTimeout(hideTimeout);
+            }
+        } else {
+            opacity.value = withTiming(0, { duration: 300 });
+            translateY.value = withTiming(-50, { duration: 300 });
+            runOnJS(onHide)();
+        }
+    }, [visible, duration, onHide]);
+
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            opacity: opacity.value,
+            transform: [
+                { translateY: translateY.value },
+                { translateX: translateX.value },
+                { scale: scale.value },
+            ],
+        };
+    });
+
+    // Set up PanResponder for swipe gestures
+    const panResponder = useMemo(() =>
+        PanResponder.create({
+            onMoveShouldSetPanResponder: (evt, gestureState) => {
+                return Math.abs(gestureState.dx) > 20; // Swipe detection threshold
+            },
+            onPanResponderMove: (evt, gestureState) => {
+                translateX.value = gestureState.dx; // Update translateX as the user swipes
+            },
+            onPanResponderRelease: (evt, gestureState) => {
+                if (Math.abs(gestureState.dx) > 100) { // If the swipe distance is more than 100 pixels, remove the toast
+                    opacity.value = withTiming(0, { duration: 200 });
+                    runOnJS(onHide)();
+                } else {
+                    // If the swipe is less than the threshold, reset the position
+                    translateX.value = withSpring(0);
+                }
+            },
+        }), [translateX, opacity, onHide]);
+
+
+    if (!visible) return null;
+
+    return (
+        <Animated.View
+            {...panResponder.panHandlers}
+            style={[
+                styles.container,
+                animatedStyle,
+                positionStyle,
+                style,
+            ]}
+        >
+            <Animated.View style={[styles.toast, { opacity }]}>
+                {typeof children === 'string' ? <Text>{children}</Text> : children}
+            </Animated.View>
+        </Animated.View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 9999,
+    },
+    top: {
+        top: 0,
+    },
+    bottom: {
+        bottom: 50,
+    },
+    toast: {
+        marginTop: hp(1),
+        // padding: 10,
+        backgroundColor: 'white',
+        borderRadius: wp(4),
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 }, // Adjust to spread the shadow more
+        shadowOpacity: 0.5, // Adjust for the desired darkness
+        shadowRadius: 10, // Increase for a more spread-out shadow
+        elevation: 20, // Higher elevation for Android shadow
+    },
+});
+
+export default React.memo(Toast);

package/src/__tests__/Toast.test.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, act } from '@testing-library/react-native';
+import Toast from '../Toast'; // Adjust the import path as needed
+
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); // Mock for animated
+
+describe('Toast Component', () => {
+    jest.useFakeTimers();
+
+    it('should render and show toast', () => {
+        const { getByText } = render(
+            <Toast visible={true} duration={2000} position="bottom">
+                Test Toast
+            </Toast>
+        );
+
+        expect(getByText('Test Toast')).toBeTruthy();
+    });
+
+    it('should hide toast after duration', () => {
+        const onHideMock = jest.fn();
+
+        const { queryByText } = render(
+            <Toast visible={true} duration={2000} position="bottom" onHide={onHideMock}>
+                Test Toast
+            </Toast>
+        );
+
+        act(() => {
+            jest.advanceTimersByTime(2000);
+        });
+
+        expect(queryByText('Test Toast')).toBeNull();
+        expect(onHideMock).toHaveBeenCalled();
+    });
+
+    it('should apply correct styles based on position', () => {
+        const { getByText, rerender } = render(
+            <Toast visible={true} duration={2000} position="top">
+                Test Toast
+            </Toast>
+        );
+
+        expect(getByText('Test Toast').parent.parent.props.style).toContainEqual({ top: 0 });
+
+        rerender(
+            <Toast visible={true} duration={2000} position="bottom">
+                Test Toast
+            </Toast>
+        );
+
+        expect(getByText('Test Toast').parent.parent.props.style).toContainEqual({ bottom: 50 });
+    });
+});

package/src/animations/customeAnimations.js

@@ -0,0 +1,31 @@
+import { Animated } from 'react-native';
+
+export const customEnterAnimation = (opacity, translateY) => {
+    return Animated.parallel([
+        Animated.timing(opacity, {
+            toValue: 1,
+            duration: 1000,
+            useNativeDriver: true,
+        }),
+        Animated.spring(translateY, {
+            toValue: 0,
+            friction: 5,
+            useNativeDriver: true,
+        }),
+    ]);
+};
+
+export const customExitAnimation = (opacity, translateY) => {
+    return Animated.parallel([
+        Animated.timing(opacity, {
+            toValue: 0,
+            duration: 1000,
+            useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+            toValue: -50,
+            duration: 1000,
+            useNativeDriver: true,
+        }),
+    ]);
+};

package/src/animations/fadeInDown.js

@@ -0,0 +1,16 @@
+import { Animated } from 'react-native';
+
+export const fadeInDown = (opacity, translateY) => {
+    return Animated.parallel([
+        Animated.timing(opacity, {
+            toValue: 1,
+            duration: 500,
+            useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+            toValue: 0,
+            duration: 500,
+            useNativeDriver: true,
+        }),
+    ]);
+};

package/src/animations/fadeOutUp.js

@@ -0,0 +1,16 @@
+import { Animated } from 'react-native';
+
+export const fadeOutUp = (opacity, translateY) => {
+    return Animated.parallel([
+        Animated.timing(opacity, {
+            toValue: 0,
+            duration: 500,
+            useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+            toValue: -50,
+            duration: 500,
+            useNativeDriver: true,
+        }),
+    ]);
+};

package/src/components/CustomeToast.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+
+const CustomToast = ({ content }) => {
+    return (
+        <View style={styles.customToast}>
+            {content}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    customToast: {
+        padding: wp(1),
+        borderRadius: wp(2),
+        backgroundColor: 'white',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+});
+
+export default CustomToast;

package/src/components/EmojiToast.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+
+const EmojiToast = ({ message, emoji }) => {
+    return (
+        <View style={styles.emojiToast}>
+            <Text style={styles.text}>{emoji} {message}</Text>
+        </View>
+    );
+}
+const styles = StyleSheet.create({
+    emojiToast: {
+        width: wp(72),
+        height: hp(5.5),
+        paddingHorizontal: wp(4),
+        borderRadius: wp(4),
+        backgroundColor: 'white',
+        flexDirection: 'row',
+        alignItems: 'center',
+
+    },
+    text: {
+        fontSize: hp(2.2),
+        color: 'black',
+        paddingHorizontal: wp(1.5)
+    },
+});
+
+export default EmojiToast;

package/src/components/ErrorToast.js

@@ -0,0 +1,47 @@
+import LottieView from 'lottie-react-native';
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+
+const ErrorToast = ({ message }) => {
+    return (
+        <View style={styles.container}>
+            <LottieView
+                source={require('../../assets/animated_Icon/ErrorAnimation.json')}  // Replace with your success Lottie animation path
+                autoPlay
+                loop={false}
+                speed={1.5}
+                style={styles.lottie}
+            />
+            <Text style={styles.text}>{message}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: wp(72),
+        height: hp(5.5),
+        paddingHorizontal: wp(4),
+        borderRadius: wp(4),
+        // backgroundColor: '#f8c4c4',  // Success color (green)
+        backgroundColor: 'white',
+        alignItems: 'center',
+        flexDirection: 'row'
+
+    },
+    text: {
+        fontSize: hp(2.1),
+        color: 'black',
+        paddingHorizontal: wp(1.5)
+    },
+    lottie: {
+        width: wp(8.5),
+        height: hp(4.5),
+    },
+});
+
+export default ErrorToast;

package/src/components/LoadingToast.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+
+const LoadingToast = ({ message }) => {
+    return (
+        <View style={styles.toast}>
+            <ActivityIndicator size="large" color={'#a9a9a9'} />
+            {/** <Text style={styles.text}>{message}</Text>  */}
+        </View>
+    );
+}
+const styles = StyleSheet.create({
+    toast: {
+        padding: wp(1),
+        borderRadius: wp(10),
+        backgroundColor: 'white',
+    },
+    text: {
+        fontSize: hp(2.2),
+        color: 'black',
+    },
+});
+
+export default LoadingToast;

package/src/components/SuccessToast.js

@@ -0,0 +1,47 @@
+import LottieView from 'lottie-react-native';
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import {
+    heightPercentageToDP as hp,
+    widthPercentageToDP as wp,
+} from '../utils/Pixel/Index';
+
+const SuccessToast = ({ message }) => {
+    return (
+        <View style={styles.container}>
+            <LottieView
+                source={require('../../assets/animated_Icon/SuccessAnimation.json')}  // Replace with your success Lottie animation path
+                autoPlay
+                loop={false}
+                style={styles.lottie}
+                speed={1.2}
+            />
+            <Text style={styles.text}>{message}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: wp(72),
+        height: hp(5.5),
+        paddingHorizontal: wp(4),
+        borderRadius: wp(4),
+        backgroundColor: '#d2f7d2',  // Success color (green)
+        // backgroundColor: 'white',  // Success color (green)
+        alignItems: 'center',
+        flexDirection: 'row',
+
+    },
+    text: {
+        fontSize: hp(2.2),
+        color: 'black',
+        paddingHorizontal: wp(1.5)
+    },
+    lottie: {
+        width: wp(8),
+        height: hp(4),
+    },
+});
+
+export default SuccessToast;

package/src/context/ToastContainer.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Toast from '../Toast';
+import toastManagerInstance from './ToastManager';
+
+
+const ToastContainer = () => {
+    const [toasts, setToasts] = useState([]);
+
+    useEffect(() => {
+        const handleShow = (toast) => {
+            setToasts((prevToasts) => [...prevToasts, toast]);
+        };
+
+        const handleRemove = (id) => {
+            setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+        };
+
+        toastManagerInstance.on('show', handleShow);
+        toastManagerInstance.on('remove', handleRemove);
+
+        return () => {
+            toastManagerInstance.off('show', handleShow);
+            toastManagerInstance.off('remove', handleRemove);
+        };
+    }, []);
+
+    return (
+        <View style={styles.container}>
+            {toasts.map((toast, index) => (
+                <Toast
+                    key={toast.id}
+                    visible={true}
+                    duration={toast.options.duration}
+                    position={toast.options.position}
+                    style={[toast.options.style, { top: 0 + index * 60 }]}
+                    onHide={() => toastManagerInstance.remove(toast.id)}
+                >
+                    {toast.content}
+                </Toast>
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 9999,
+        pointerEvents: 'box-none',
+    },
+});
+
+export default React.memo(ToastContainer);

package/src/context/ToastManager.js

@@ -0,0 +1,33 @@
+import { EventEmitter } from 'events';
+
+class ToastManager extends EventEmitter {
+    show(content, options = {}) {
+        const id = Date.now().toString();
+        const defaultOptions = {
+            duration: 1000,
+            position: 'bottom',
+            style: {},
+        };
+        this.emit('show', { id, content, options: { ...defaultOptions, ...options } });
+    }
+
+    remove(id) {
+        this.emit('remove', id);
+    }
+
+    async promise(promise, { loading, success, error }) {
+        const id = Date.now().toString();
+        this.show(loading, { duration: Infinity, position: 'top' });
+        try {
+            await promise;
+            this.remove(id);
+            this.show(success, { duration: 1000, position: 'top' });
+        } catch (err) {
+            this.remove(id);
+            this.show(error, { duration: 1000, position: 'top' });
+        }
+    }
+}
+
+const toastManagerInstance = new ToastManager();
+export default toastManagerInstance;

package/src/hooks/useToast.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import toastManagerInstance from '../context/ToastManager';
+import LoadingToast from '../components/LoadingToast';
+import SuccessToast from '../components/SuccessToast';
+import ErrorToast from '../components/ErrorToast';
+import CustomToast from '../components/CustomeToast';
+import EmojiToast from '../components/EmojiToast';
+
+
+const useToast = () => {
+    const show = (content, options) => {
+        toastManagerInstance.show(content, options);
+    };
+
+    const success = (message, options) => {
+        show(<SuccessToast message={message} />, options);
+    };
+
+    const error = (message, options) => {
+        show(<ErrorToast message={message} />, options);
+    };
+
+    const promise = (promise, { loading, success, error }) => {
+        toastManagerInstance.promise(promise, {
+            loading: <LoadingToast message={loading} />,
+            success: <SuccessToast message={success} />,
+            error: <ErrorToast message={error} />,
+        });
+    };
+
+    const custom = (content, options) => {
+        show(<CustomToast content={content} />, options);
+    };
+
+    const emoji = (message, emoji, options) => {
+        show(<EmojiToast message={message} emoji={emoji} />, options);
+    };
+
+    return {
+        show,
+        success,
+        error,
+        promise,
+        custom,
+        emoji,
+    };
+};
+
+export default useToast;

package/src/utils/Pixel/Index.js

@@ -0,0 +1,28 @@
+import {Dimensions, PixelRatio} from 'react-native';
+let {width, height} = Dimensions.get('window');
+const widthPercentageToDP = widthPercent => {
+  const elemWidth =
+    widthPercent === 'number' ? widthPercent : parseFloat(widthPercent);
+
+  return PixelRatio.roundToNearestPixel((width * elemWidth) / 100);
+};
+
+const heightPercentageToDP = heightPercent => {
+  const elemHeight =
+    heightPercent === 'number' ? heightPercent : parseFloat(heightPercent);
+
+  return PixelRatio.roundToNearestPixel((height * elemHeight) / 100);
+};
+
+const listenOrientationChange = that => {
+  Dimensions.addEventListener('change', newDimensions => {
+    width = newDimensions.window.width;
+    height = newDimensions.window.height;
+
+    that.setState({
+      orientation: width < height ? 'portrait' : 'landscape',
+    });
+  });
+};
+
+export {widthPercentageToDP, heightPercentageToDP, listenOrientationChange};