Cross Platform Material Alert and Prompt Dialogs for React Native

React Native Paper Alerts

Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native's built-in Alert Module and works on Android, IOS and Web.

Color Scheme	Simple Alert	Alert With Multiple Butons	Alert With Stacked Butons	Simple Prompt	Simple Prompt (Focused)	Prompt With Outlined Input	Prompt With Label	Prompt With Label (Focused)	Login Prompt
Light
Dark

Installation

yarn add react-native-paper-alerts

This library depends on React Native Paper. Please install it as well if you haven't already.

yarn add react-native-paper

Usage

1. Wrap your component tree with AlertsProvider. This should be after SafeAreaProvider & PaperProvider!

// App.tsx
import React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-context';
import { AlertsProvider } from 'react-native-paper-alerts';
import Application from './application';

export default function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <PaperProvider theme={DefaultTheme}>
        <AlertsProvider>
          <Application />
        </AlertsProvider>
      </PaperProvider>
    </SafeAreaProvider>
  );
}

2. Import the useAlerts hook from the library. Calling it will return you an object with two functions alert and prompt to open an alert or a prompt dialog respectively. The function signatures are compatible with the Alert.alert and Alert.prompt from react-native and adds additional features on top of that.

import { useAlerts } from 'react-native-paper-alerts';

export const Screen: React.FC<Props> = (props) => {
  const alerts = useAlerts();

  // You can now alerts methods from handler functions, effects or onPress props!

  // Call from handler function
  const simpleAlert = () => alerts.alert('Simple Alert', 'This is a simple alert dialog');

  const simplePrompt = () =>
    alerts.prompt('Simple Prompt', 'This is a simple prompt dialog', (message) => {
      toast.show({ message });
    });

  // Call from Effects
  useEffect(() => {
    login(username, password).then((v) =>
      alerts.alert('Simple Alert', 'This is a simple alert dialog')
    );
  });

  return (
    <Surface>
      <Button onPress={simpleAlert}>Simple Alert</Button>
      <Button onPress={simplePrompt}>Simple Prompt</Button>
    </Surface>
  );
};

For more examples, see the example project

GitHub

https://github.com/kuasha420/react-native-paper-alerts