Cross Platform Material Alert and Prompt for React Native
npm install react-native-paper-alertsCross 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 | !SC | !SC | !SC | !SC | !SC | !SC | !SC | !SC | !SC |
| Dark | !SC | !SC | !SC | !SC | !SC | !SC | !SC | !SC | !SC |
``sh`
yarn add react-native-paper-alerts
This library depends on React Native Paper. Please install it as well if you haven't already.
`sh`
yarn add react-native-paper
1. Wrap your component tree with AlertsProvider. This should be after SafeAreaProvider & PaperProvider!
`tsx
// 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 (
);
}
`
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.
`tsx
import { useAlerts } from 'react-native-paper-alerts';
export const Screen: React.FC
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 (
);
};
``
For more examples, see the example project
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT