Add a swipe to dismiss functionality

[Giulio-source]

Hi!

I’ve seen some mentions that toastify-react-native supports swipe-to-dismiss, but I couldn’t find anything about it in the README. Is this feature available? If so, could you show how to enable it?

Thanks a lot!

[adyhatem65]

Hey! 👋

I needed the same feature and ended up implementing swipe-to-dismiss myself using react-native-reanimated and react-native-gesture-handler. Sharing my full solution in case it helps anyone.

The idea is to wrap your custom toast in a GestureDetector with a Pan gesture, so the toast slides and fades as you drag, then flies off screen and calls Toast.hide() when you pass the threshold.

Dependencies

bash

yarn add react-native-reanimated react-native-gesture-handler

Make sure your app root is wrapped with <GestureHandlerRootView>.

SwipeableToast Component

tsx

import React from 'react';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
  interpolate,
  Extrapolation,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { Toast } from 'toastify-react-native';
import { scheduleOnRN } from 'react-native-worklets';

const SWIPE_THRESHOLD = 80;
const SCREEN_WIDTH = 400; // replace with your screen width

const SwipeableToast = ({ children }) => {
  const translateX = useSharedValue(0);
  const dismissed = useSharedValue(false);

  const hideToast = () => {
    Toast.hide();
  };

  const panGesture = Gesture.Pan()
    .activeOffsetX([-10, 10])
    .failOffsetY([-5, 5])
    .onUpdate(event => {
      if (!dismissed.value) {
        translateX.value = event.translationX;
      }
    })
    .onEnd(event => {
      if (Math.abs(event.translationX) > SWIPE_THRESHOLD) {
        dismissed.value = true;
        const direction = event.translationX > 0 ? 1 : -1;
        translateX.value = withTiming(
          direction * SCREEN_WIDTH,
          { duration: 200 },
          () => {
            scheduleOnRN(hideToast);
          },
        );
      } else {
        translateX.value = withSpring(0, {
          damping: 15,
          stiffness: 150,
        });
      }
    });

  const animatedStyle = useAnimatedStyle(() => {
    const opacity = interpolate(
      Math.abs(translateX.value),
      [0, SWIPE_THRESHOLD],
      [1, 0.5],
      Extrapolation.CLAMP,
    );
    return {
      transform: [{ translateX: translateX.value }],
      opacity,
    };
  });

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={animatedStyle}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
};

export default SwipeableToast;

GlobalToastProvider

I'd recommend creating a GlobalToastProvider that wraps ToastManager with your custom config, so your toast styling and swipe behavior are defined in one place:

tsx

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import ToastManager from 'toastify-react-native';
import SwipeableToast from './SwipeableToast';

const toastConfig = {
  success: (props) => (
    <SwipeableToast>
      <View style={[styles.toast, { backgroundColor: '#4CAF50' }]}>
        <Text style={styles.text}>{props.text1}</Text>
      </View>
    </SwipeableToast>
  ),
  error: (props) => (
    <SwipeableToast>
      <View style={[styles.toast, { backgroundColor: '#F44336' }]}>
        <Text style={styles.text}>{props.text1}</Text>
      </View>
    </SwipeableToast>
  ),
  // same for warn, info...
};

const GlobalToastProvider = () => {
  return (
    <ToastManager
      width={350}
      showProgressBar={false}
      config={toastConfig}
      useModal={false}
    />
  );
};

export default GlobalToastProvider;

Usage in App Root

Then just drop <GlobalToastProvider /> at the bottom of your app tree --- after your navigator so it renders on top of everything:

tsx

<GestureHandlerRootView style={{ flex: 1 }}>
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <BottomSheetModalProvider>
        <AppNavigator />
        <GlobalToastProvider />
      </BottomSheetModalProvider>
    </PersistGate>
  </Provider>
</GestureHandlerRootView>

Then from anywhere in your app, just call:

tsx

import { Toast } from 'toastify-react-native';

Toast.success('Saved successfully!');
Toast.error('Something went wrong');

How the animation works

1. Gesture.Pan() activates after 10px horizontal movement and fails if vertical movement is detected first --- so it won't hijack scrolling.
2. During drag --- translateX follows the finger and opacity fades from 1 → 0.5 as you approach the threshold.
3. On release past threshold --- the toast animates off screen with withTiming (200ms), then calls Toast.hide() via scheduleOnRN once the animation completes.
4. On release before threshold --- withSpring snaps the toast back to center with a natural bounce.

Everything runs on the UI thread (no JS bridge involvement during the gesture), so it stays smooth at 60/120fps.

Hope this helps until native support lands in the library! 🙌