Alert

An alert gives people critical information they need right away.

Usage

index.tsx
import { Alert, Button as RNButton, ButtonProps, Platform, View } from 'react-native';

import { useColorScheme } from '~/lib/useColorScheme';

function DefaultButton({ color, ...props }: ButtonProps) {
  const { colors } = useColorScheme();
  return <RNButton color={color ?? colors.primary} {...props} />;
}

function AlertExample() {
  const { colors } = useColorScheme();

  return (
    <View className="items-center">
      <DefaultButton
        color={colors.destructive}
        onPress={() => {
          if (Platform.OS === 'ios') {
            Alert.prompt(
            'Delete account?',
            'Enter your password to delete your account.',
            [
              {
              text: 'Cancel',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
              },
              {
              text: 'Delete',
              style: 'destructive',
              onPress: () => console.log('Delete Pressed'),
              },
            ],
            'secure-text',
            '',
            'default'
            );
          } else {
            Alert.alert('Delete account?', 'Enter your password to delete your account.', [
            {
              text: 'Cancel',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
            {
              text: 'Delete',
              style: 'destructive',
              onPress: () => console.log('Delete Pressed'),
            },
            ]);
          }
        }}
        title="Delete account"
      />
    </View>
  );
}
© Ronin Technologies LLC 2024