Gesture-Based Toasts for React Native – Smooth Push

Description:

Smooth Push is a React Native toast notification that allows you to display minimal, translucent alerts with smooth animations for both iOS and Android platforms.

The component supports light and dark modes, and enables users to swipe away notifications on touch devices.

Features

• 🎨 Minimal Design: Clean visual presentation with translucent background effects.
• 👆 Gesture Controls: Users can swipe notifications to dismiss them manually.
• ⚙️ Customization Options: Extensive configuration for duration, position, and styling.
• 🎬 Smooth Animations: Fluid entrance and exit transitions using native animations.
• 📱 Cross-Platform: Consistent behavior and appearance across iOS and Android.
• 🌓 Theme Support: Automatic adaptation to light and dark mode interfaces.

See It In Action

Use Cases

• Form Validation: Display success or error messages after user input submission.
• Network Status: Show connection status changes or API request results.
• User Feedback: Provide immediate confirmation for user actions within the app.
• System Alerts: Notify users about application state changes or updates.

How to Use It

1. Install smooth-push and its dependencies in your project.

npm install react-native-reanimated and react-native-gesture-handler smooth-push

2. Add the Reanimated plugin to your babel.config.js file. This is necessary for Reanimated to function correctly.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
};

3. In your app’s entry point, typically App.js or _layout.tsx, wrap your entire application with GestureHandlerRootView and include the SmoothPushProvider.

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SmoothPushProvider } from "smooth-push";
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app components go here */}
      <SmoothPushProvider />
    </GestureHandlerRootView>
  );
}

3. Import the show function from the library and call it anywhere in your components.

import { show } from "smooth-push";
show({
  toastType: "success",
  message: "Your profile has been updated.",
});

4. You can also customize each notification by passing a config object.

import { show } from "smooth-push";
show({
  toastType: "error",
  message: "Failed to upload file. Please try again.",
  config: {
    duration: 4000,
    position: "bottom",
    offset: 50,
    stickColor: "#D32F2F"
  },
})c

6. All possible Configuration Option. You can pass these options to the SmoothPushProvider as defaultConfig, or use them in the config object when calling show().

Related Resources

• 10 Best React Toast Components To Enhance Notification Experience

FAQs

Q: Can I customize the style of a toast?
A: Yes, you can pass custom styles for the container and text using the containerStyle and textStyle properties in the configuration.

Q: How do I handle a press event on a notification?
A: The configuration object accepts an onPress callback function that executes when a user taps the toast.

Q: How do I change the notification display duration?
A: Set the duration property in milliseconds through either the provider default config or individual show calls.

Q: Does the component handle multiple simultaneous notifications?
A: The library manages notification queuing automatically. New notifications appear after previous ones dismiss.