bpk-component-alert

bpk-component-alert

Backpack React Native alert component.

Default

Day	Night

Cancelable

Day	Night

Three button

Day	Night

Installation

Check the main Readme for a complete installation guide.

Usage

import BpkAlert
import React, { Component } from 'react';
import BpkAlert from 'backpack-react-native/bpk-component-alert';

BpkAlert.alert(
  'Alert title',
  'Alert message',
  [
    {
      text: 'Cancel',
      onPress: () => console.log('negative button pressed'),
      style: 'cancel',
    },
    { text: 'Default', onPress: () => console.log('positive button press') },
    {
      text: 'Destructive',
      onPress: () => console.log('Destructive button press'),
      style: 'destructive',
    },
  ],
  { cancelable: false },
);

Theming and Dark mode

Android

To use the correct Backpack font and colours, the dialog needs to be themed in the native side. Bellow is an example theme you can use:

<!-- Make sure your theme extends from `DayNight` -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="alertDialogTheme">@style/AppTheme.AlertDialog</item>
    <item name="android:alertDialogTheme">?alertDialogTheme</item>
</style>

<style name="AppTheme.AlertDialog" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:windowTitleStyle">@style/AppTheme.AlertDialog.Title</item>
    <item name="android:textAppearanceSmall">?bpkTextSmAppearance</item>
    <item name="android:buttonBarButtonStyle">@style/AppTheme.AlertDialog.ButtonBar.Button</item>
    <item name="buttonBarButtonStyle">@style/AppTheme.AlertDialog.ButtonBar.Button</item>
    <item name="android:background">@color/bpkBackgroundTertiary</item>
    <item name="android:textColorPrimary">@color/bpkTextPrimary</item>
</style>

<style name="AppTheme.AlertDialog.Title" parent="Base.DialogWindowTitle.AppCompat">
    <item name="android:textAppearance">?bpkTextLgEmphasizedAppearance</item>
</style>

<style name="AppTheme.AlertDialog.ButtonBar.Button" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
    <item name="android:textAppearance">?bpkTextSmEmphasizedAppearance</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:textColor">?bpkPrimaryColor</item>
</style>