react-native-toastify-pro/dist/index.esm.js

A customizable toast notification component for React Native, designed to work seamlessly on both Android and iOS platforms and allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

import e,{useState as t,useRef as o,createContext as r,useContext as n}from"react";import{Dimensions as a,Animated as s,PanResponder as i,TouchableWithoutFeedback as l,View as u,Text as c,StyleSheet as d}from"react-native";const{width:p,height:m}=a.get("window");var g;!function(e){e.top="top",e.bottom="bottom"}(g||(g={}));const h=e.forwardRef(((r,n)=>{const[a,d]=t({message:"",type:"",position:"top",positionOffset:50,backgroundColor:"blue",textColor:"white",duration:3e3}),[p,g]=t(!1),h=o(new s.Value(0)).current,b=o(new s.Value(0)).current,f=o(null),w=e=>{switch(e){case"success":return{backgroundColor:"green",textColor:"white"};case"error":return{backgroundColor:"red",textColor:"white"};case"info":return{backgroundColor:"blue",textColor:"white"};default:return{backgroundColor:"gray",textColor:"white"}}};e.useImperativeHandle(n,(()=>({show:({message:e="",type:t="info",position:o="top",positionOffset:r=50,duration:n=3e3,backgroundColor:a="",textColor:i=""})=>{f.current&&(clearTimeout(f.current),f.current=null);const{backgroundColor:l,textColor:u}=a||i?{backgroundColor:a||w(t).backgroundColor,textColor:i||w(t).textColor}:w(t);d({message:e,type:t,position:o,positionOffset:r,backgroundColor:l,textColor:u,duration:n}),g(!0),h.setValue("top"===o?-100:m),s.parallel([s.timing(b,{toValue:1,duration:300,useNativeDriver:!0}),s.spring(h,{toValue:0,useNativeDriver:!0})]).start(),f.current=setTimeout((()=>v(o)),n)},hide:()=>v(a.position)})));const v=e=>{s.parallel([s.timing(b,{toValue:0,duration:300,useNativeDriver:!0}),s.timing(h,{toValue:"top"===e?-100:m,duration:300,useNativeDriver:!0})]).start((()=>{g(!1),null!==f.current&&clearTimeout(f.current),f.current=null}))},x=o(i.create({onMoveShouldSetPanResponder:(e,t)=>{const{dx:o,dy:r}=t;return Math.abs(o)>10||Math.abs(r)>10},onPanResponderMove:(e,t)=>{const{dy:o}=t;h.setValue(o)},onPanResponderRelease:(e,t)=>{const{dy:o}=t;Math.abs(o)>50?v(a.position):s.spring(h,{toValue:0,useNativeDriver:!0}).start()}})).current;return p?e.createElement(l,{onPress:()=>v(a.position),style:{zIndex:1e18}},e.createElement(u,{style:[C.container,"bottom"===a.position?{bottom:a.positionOffset}:{top:a.positionOffset}]},e.createElement(s.View,{...x.panHandlers,style:[C.toast,{backgroundColor:a.backgroundColor},{opacity:b,transform:[{translateY:h}]}]},e.createElement(c,{style:[C.message,{color:a.textColor}]},a.message)))):null})),C=d.create({container:{position:"absolute",left:0,right:0,alignItems:"center",zIndex:9999},toast:{minWidth:200,maxWidth:.9*p,padding:12,borderRadius:8,justifyContent:"center",alignItems:"center",shadowColor:"#000",shadowOpacity:.2,shadowRadius:10,elevation:5},message:{textAlign:"center"}}),b=r(void 0),f=({children:t})=>{const r=o(null);return e.createElement(b.Provider,{value:{showToast:e=>{r.current?.show(e)}}},t,e.createElement(h,{ref:r}))},w=()=>{const e=n(b);if(!e)throw new Error("useToast must be used within a ToastProvider");return e};export{f as ToastProvider,g as positionType,w as useToast};