react-native-bpk-component-alert

4.0.1 • Public • Published

react-native-bpk-component-alert

Backpack React Native alert component.

Installation

npm install react-native-bpk-component-alert --save-dev

Usage

import BpkAlert
import React, { Component } from 'react';
import BpkAlert from '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>

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-bpk-component-alert

Weekly Downloads

3

Version

4.0.1

License

Apache-2.0

Unpacked Size

20.4 kB

Total Files

6

Last publish

Collaborators

  • anambl
  • skyscanner-koalasquad
  • gert-jan.vercauteren
  • frugoman
  • marianeumayer-skyscanner
  • ojcurt