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

1npm install smooth-push

Required Dependencies

This package requires the following peer dependencies:

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

Setup

1. Configure Reanimated

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

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

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:

1import { GestureHandlerRootView } from "react-native-gesture-handler";
2import { SmoothPushProvider } from "smooth-push";
3
4export default function App() {
5  return (
6    <GestureHandlerRootView style={{ flex: 1 }}>
7      <SmoothPushProvider />
8      {/* Your app components go here */}
9    </GestureHandlerRootView>
10  );
11}

3. Use SmoothPushProvider in Your App

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

1import { show } from "smooth-push";
2// Basic usage
3show({
4  toastType: "success",
5  message: "Operation completed successfully",
6});
7// With custom configuration
8show({
9  toastType: "error",
10  message: "Something went wrong",
11  config: {
12    duration: 3000,
13    position: "bottom",
14    offset: 40,
15  },
16});

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

1<SmoothPushProvider
2  defaultConfig={{
3    duration: 5000,
4    position: "top",
5    offset: 60,
6    maxWidth: 400,
7    blurIntensity: 50,
8    containerStyle: {},
9    textStyle: {},
10    onPress: () => {},
11    onClose: () => {},
12  }}
13/>

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

1type SmoothPushType = "success" | "error" | "none";
2
3interface NotificationConfig {
4  duration?: number;
5  position?: "top" | "bottom";
6  offset?: number;
7  maxWidth?: number;
8  blurIntensity?: number;
9  containerStyle?: ViewStyle;
10  textStyle?: TextStyle;
11  onPress?: () => void;
12  onClose?: () => void;
13  swipeThreshold?: number;
14  stickColor?: string;
15}
16
17interface ShowNotification {
18  toastType: SmoothPushType;
19  message: string;
20  config?: NotificationConfig;
21}

License

MIT

Contributing

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