Smooth Push

A smooth, gesture-based toast notification component for React Native.

Features

• 🎨 Beautiful, minimal design with translucent effect
• 👆 Gesture support (swipe to dismiss)
• 🎯 Highly customizable
• 💫 Smooth animations
• 📱 iOS and Android support
• 🌓 Light/Dark mode compatible

Installation

npm install smooth-push

Required Dependencies

This package requires the following peer dependencies:

npm install react-native-reanimated react-native-gesture-handler

Setup

1. Configure Reanimated

Add Reanimated's Babel plugin to your babel.config.js:

plugins: [
  'react-native-reanimated/plugin',
],

2. Wrap Your App with GestureHandlerRootView and import SmoothPushProvider

In your app's root component (usually App.js or _layout.tsx), wrap your entire app with GestureHandlerRootView:

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SmoothPushProvider } from "smooth-push";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SmoothPushProvider />
      {/* Your app components go here */}
    </GestureHandlerRootView>
  );
}

3. Use SmoothPushProvider in Your App

Now you can use the show function to display toast notifications:

import { show } from "smooth-push";
// Basic usage
show({
  toastType: "success",
  message: "Operation completed successfully",
});
// With custom configuration
show({
  toastType: "error",
  message: "Something went wrong",
  config: {
    duration: 3000,
    position: "bottom",
    offset: 40,
  },
});

Configuration

You can customize the toast notifications in two ways:

1. Default configuration through the SmoothPushProvider
2. Per-notification configuration when calling show()

Provider Configuration

<SmoothPushProvider
  defaultConfig={{
    duration: 5000,
    position: "top",
    offset: 60,
    maxWidth: 400,
    blurIntensity: 50,
    containerStyle: {},
    textStyle: {},
    onPress: () => {},
    onClose: () => {},
  }}
/>

Available Options

| Property | Type | Default | Description | | -------------- | ----------------- | --------- | -------------------------------------------- | | duration | number | 6000 | Duration in milliseconds before auto-dismiss | | position | 'top' | 'bottom' | 'top' | Toast position on screen | | offset | number | 60 | Distance from top/bottom edge | | maxWidth | number | 400 | Maximum width of toast | | blurIntensity | number | 50 | Intensity of blur effect | | containerStyle | ViewStyle | {} | Custom styles for container | | textStyle | TextStyle | {} | Custom styles for text | | onPress | () => void | undefined | Callback when toast is pressed | | onClose | () => void | undefined | Callback when toast is dismissed | | swipeThreshold | number | -55 | Threshold for swipe to dismiss | | stickColor | string | "#ffcad4" | Color of the bottom indicator stick |

Types

type SmoothPushType = "success" | "error" | "info" | "none";

interface NotificationConfig {
  duration?: number;
  position?: "top" | "bottom";
  offset?: number;
  maxWidth?: number;
  blurIntensity?: number;
  containerStyle?: ViewStyle;
  textStyle?: TextStyle;
  onPress?: () => void;
  onClose?: () => void;
  swipeThreshold?: number;
  stickColor?: string;
}

interface ShowNotification {
  toastType: SmoothPushType;
  message: string;
  config?: NotificationConfig;
}

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.