5

Cross Platform Material Alert and Prompt Dialogs for React Native

 3 years ago
source link: https://reactnativeexample.com/cross-platform-material-alert-and-prompt-dialogs-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 SCSCSCSCSCSCSCSCSC Dark SCSCSCSCSCSCSCSCSC

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>
  );
}
React TSX
  1. 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>
  );
};
React TSX

For more examples, see the example project

GitHub

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK