Alert

An alert gives people critical information they need right away.

Pro component

Requires all-access to use the source code

import { Stack } from 'expo-router';
import * as React from 'react';
import { View } from 'react-native';

import { Alert } from '~/components/nativewindui/Alert';
import { AlertRef } from '~/components/nativewindui/Alert/types';
import { Button } from '../~/components/nativewindui/Button';
import { Text } from '~/components/nativewindui/Text';

export default function AlertScreen() {
  const alertRef = React.useRef<AlertRef>(null);

  return (
    <>
      <Stack.Screen options={{ title: 'Alert' }} />
      <View className="flex-1 items-center justify-center gap-4 py-4">
        <Button
          onPress={() => {
            alertRef.current?.show();
          }}>
          <Text>Show Prompt With Ref</Text>
        </Button>
        <Alert
          title="Discard draft?"
          message="Some message that is kind of important since it is in an alert."
          buttons={[
            {
              text: 'Cancel',
              style: 'cancel',
              onPress: (text) => {
                console.log('Cancel Pressed', text);
              },
            },
            {
              text: 'OK',
              onPress: (text) => {
                console.log('OK Pressed', text);
              },
            },
          ]}>
          <Button variant="secondary">
            <Text>Show Alert</Text>
          </Button>
        </Alert>
        <Alert
          title="Login to Hydra"
          message="Reminding you to drink water."
          materialIcon={{ name: 'water-outline' }}
          materialWidth={370}
          prompt={{
            type: 'login-password',
            keyboardType: 'email-address',
          }}
          buttons={[
            {
              text: 'Report',
              style: 'destructive',
              onPress: () => {
                console.log('Report Pressed');
              },
            },
            {
              text: 'Cancel',
              style: 'cancel',
              onPress: (text) => {
                console.log('Cancel Pressed', text);
              },
            },
            {
              text: 'OK',
              onPress: (text) => {
                console.log('OK Pressed', text);
              },
            },
          ]}
          ref={alertRef}
        />
      </View>
    </>
  );
}

Unlock All Pro Screens & Components

Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.

Get all-access

Usage

import { Alert } from '~/components/nativewindui/Alert';

<Alert
  title="Discard draft?"
  message="Some message that is kind of important since it is in an alert."
  buttons={[
    {
      text: 'Cancel',
      style: 'cancel',
      onPress: (text) => {
        console.log('Cancel Pressed', text);
      },
    },
    {
      text: 'OK',
      onPress: (text) => {
        console.log('OK Pressed', text);
      },
    },
  ]}>
  <Button>
    <Text>Show Alert</Text>
  </Button>
</Alert>

Props

Alert

Prop	Type	Description
title	string	The title of the alert.
buttons	(Omit<AlertButton, "onPress"> & { onPress?: (text: AlertInputValue) => void })[]	An array of button configurations for the alert.
message	string	The message content of the alert.
prompt	object	Configuration for a prompt within the alert, if applicable.
prompt.type	Exclude<AlertType, "default">	The type of prompt to display.
prompt.defaultValue	string	The default value of the prompt input.
prompt.keyboardType	KeyboardType	The keyboard type for the prompt input.
materialPortalHost	string	The portal host for Android elements.
materialIcon	Pick<IconProps<'material'>, 'color' \| 'size'> & { name: MaterialIconName }	Configuration for a material icon in the alert.
materialWidth	number	The width of the Android alert.
children	React.ReactNode	The children elements to render inside the alert.

Alert

Usage

Props

NativeWindUI