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>