How to make toast appear from bottom?

[ghost]

Hi,

How to make the toast appear from bottom of the screen?

I've tried absolute position but it doesn't seem to be working.

[kubilaysalih]

Unfortunately, it is not possible right now, but i think it can be done easily. I will check it in my spare time 👍

[consuelo-sanna]

I started working on it but then switched to a separate solution, but in case someone else is looking into it you can start with something like this:

diff --git a/node_modules/react-native-customizable-toast/src/ToasterBase.tsx b/node_modules/react-native-customizable-toast/src/ToasterBase.tsx
index b7f6657..9fd5d29 100644
--- a/node_modules/react-native-customizable-toast/src/ToasterBase.tsx
+++ b/node_modules/react-native-customizable-toast/src/ToasterBase.tsx
@@ -7,11 +7,11 @@ import React, {
   ReactElement,
   RefObject,
 } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, SafeAreaView } from 'react-native';
 import { Toast as ToastComponent } from './components/Toast';
 import { ToastContainer } from './components/ToastContainer';
 import { ToastContext } from './contexts/ToastContext';
-import Animated from 'react-native-reanimated';
+import Animated, { PinwheelIn, SlideInUp } from 'react-native-reanimated';
 import { PanGestureHandler } from 'react-native-gesture-handler';

 import type {
@@ -78,10 +78,10 @@ const ToasterBaseWithoutRef = <T extends object>(
   });

   return (
-    <View style={StyleSheet.absoluteFillObject} pointerEvents="box-none">
+    <SafeAreaView style={[StyleSheet.absoluteFillObject,{justifyContent:'flex-end'}]} pointerEvents="box-none">
       <PanGestureHandler activeOffsetY={[-10, 10]} onGestureEvent={panGesture}>
-        <Animated.View onLayout={onLayout}>
-          {[...toasts].reverse().map((e, index) => {
+        <Animated.View onLayout={onLayout} >
+          {[...toasts].map((e, index) => {
             const hide = () => _hide(e.id);
             return (
               <ToastContext.Provider
@@ -115,7 +115,7 @@ const ToasterBaseWithoutRef = <T extends object>(
           })}
         </Animated.View>
       </PanGestureHandler>
-    </View>
+    </SafeAreaView>
   );
 };

diff --git a/node_modules/react-native-customizable-toast/src/components/ToastContainer/ToastContainer.tsx b/node_modules/react-native-customizable-toast/src/components/ToastContainer/ToastContainer.tsx
index 84df2f8..d28f812 100644
--- a/node_modules/react-native-customizable-toast/src/components/ToastContainer/ToastContainer.tsx
+++ b/node_modules/react-native-customizable-toast/src/components/ToastContainer/ToastContainer.tsx
@@ -14,8 +14,8 @@ export const ToastContainer = memo(
     index,
     children,
     entering = FadeIn,
-    exiting = FadeOut,
-    layout = Layout.springify(),
+    exiting = undefined,
+    layout = undefined,
     gestureValues,
     containerLayout,
     itemStyle,
diff --git a/node_modules/react-native-customizable-toast/src/hooks/useContainerSwipeGesture.ts b/node_modules/react-native-customizable-toast/src/hooks/useContainerSwipeGesture.ts
index 82327b5..7ca4867 100644
--- a/node_modules/react-native-customizable-toast/src/hooks/useContainerSwipeGesture.ts
+++ b/node_modules/react-native-customizable-toast/src/hooks/useContainerSwipeGesture.ts
@@ -27,9 +27,7 @@ export const useContainerSwipeGesture = ({
       translationY.value = context.startY + event.translationY;
     },
     onFinish: (event) => {
-      if (event.absoluteY < 100) {
-        runOnJS(onFinish)();
-      }
+      runOnJS(onFinish)();
       translationY.value = withTiming(0);
     },
   });

[mrkpatchaa]

@kubilaysalih I created a PR (still a WIP) but pretty stable at this point that adresses this issue, but not only. If you have time you can start reviewing it. I'd happy to continue the discussion. Thanks. -> #4

[mrkpatchaa]

@kubilaysalih Ready for review. I finally used a "simple" trick which is to rotate the container when we want to display from bottom.