React Native Dynamic Notifications

A customizable, device-aware notification system for React Native that adapts to different iOS and Android devices.

Features

• Device detection with optimal notification style
• Dynamic Island integration for iPhone 14 Pro and newer
• Notch support for iPhone X through 13 and other notched devices
• Toast fallback for all other devices
• Success, failure, and default notification types
• Highly customizable appearance and behavior
• Manual control and persistent notifications
• Custom content support

Quick Start

yarn add react-native-dynamic-toast

import { NotificationProvider, notif } from 'react-native-dynamic-toast';

// Wrap your app
function App() {
  return (
    <NotificationProvider>
      <YourApp />
    </NotificationProvider>
  );
}

// Use in components
function MyComponent() {
  const notification = notif();

  return (
    <Button
      title="Show Notification"
      onPress={() => notification.success('Operation successful!')}
    />
  );
}

⚠️ CRITICAL: StatusBar Configuration Required

For Dynamic Island and Notch notifications to work properly, you must configure your StatusBar component with the hidden state from the library:

import { StatusBar } from 'react-native';
import { useStatusBarVisibility } from 'react-native-dynamic-toast';

function Screen() {
  const { hidden } = useStatusBarVisibility();
  return (
    <StatusBar hidden={hidden} translucent backgroundColor="transparent" />
  );
}

Without this configuration, notifications will not animate correctly with the device's notch or Dynamic Island.

See the documentation for details.

Documentation

For detailed documentation, see the full documentation.

License

MIT

Made with create-react-native-library