import React , { createRef } from 'react' ; import { StyleSheet , Text , View } from 'react-native' ; import { ToasterBase , ToasterMethods , useToast , Swipeable , ToastItemProps , } from 'react-native-customizable-toast' ; import { TouchableOpacity } from 'react-native-gesture-handler' ; import { Extrapolate , interpolate , SlideInLeft , SlideOutRight , } from 'react-native-reanimated' ; type MyCustomToaster = { text : string ; dismissible ? : boolean ; backgroundColor ? : string ; } ; const CustomToasterRef = createRef < ToasterMethods < MyCustomToaster > > ( ) ; export const CustomToasterHelper = { show : ( options ) => CustomToasterRef . current ?. show ( options ) ! , hide : ( id ) => CustomToasterRef . current ?. hide ( id ) , filter : ( fn ) => CustomToasterRef . current ?. filter ( fn ) , update : ( id , options ) => CustomToasterRef . current ?. update ( id , options ) , } ; export const clamp = ( value , lowerBound , upperBound ) => { 'worklet' ; return Math . min ( Math . max ( lowerBound , value ) , upperBound ) ; } ; export const customStyleWorklet = ( { itemLayout : { y } , gesture : { translationY } , properties : { index } , } ) => { 'worklet' ; return { transform : [ { translateY : clamp ( translationY . value , - y . value , 0 ) , } , { translateX : interpolate ( - translationY . value - y . value , [ 0 , 100 ] , [ 0 , index % 2 ? 1000 : - 1000 ] , Extrapolate . CLAMP ) , } , ] , } ; } ; const CustomToastComponent = ( ) => { const { text , hide , dismissible , backgroundColor = '#222' , } = useToast < MyCustomToaster > ( ) ; return ( < Swipeable onSwipe = { hide } disabled = { ! dismissible } > < View style = { styles . container } > < TouchableOpacity disabled = { ! dismissible } style = { [ styles . touchable , { backgroundColor , } , ] } onPress = { hide } > < Text style = { styles . text } > { text } < /Text> < /TouchableOpacity> < /View> < /Swipeable>); } ; export const CustomToaster = ( ) => { return ( < ToasterBase entering = { SlideInLeft } exiting = { SlideOutRight } onSwipeEdge = { ( { filter } ) => filter ( ( e ) => ! e . dismissible ) } ref = { CustomToasterRef } render = { CustomToastComponent } itemStyle = { customStyleWorklet } / > ) ; } ; const styles = StyleSheet . create ( { container : { paddingHorizontal : 10 , paddingVertical : 2 , } , touchable : { alignItems : 'center' , flexDirection : 'row' , borderRadius : 5 , padding : 10 , minHeight : 40 , } , text : { color : '#ffffff' , flex : 1 , } , } ) ;