Nonvoluntary Professional Mangling

npm

Need private packages and team management tools?Check out npm Orgs. »

react-native-bpk-component-banner-alert

7.1.0 • Public • Published

react-native-bpk-component-banner-alert

Backpack React Native banner alert component.

Installation

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

Usage

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import BpkText from 'react-native-bpk-component-text';
import { spacingBase } from 'bpk-tokens/tokens/base.react.native';
import BpkBannerAlert, { ALERT_TYPES } from 'react-native-bpk-component-banner-alert';
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: spacingBase,
  },
  bannerAlert: {
    marginBottom: spacingBase,
  },
});
 
export default class App extends Component {
  constructor() {
    super();
 
    this.state = {
      showDismissable: true,
      expanded: false,
    };
 
  }
 
  onDismiss = () => {
    this.setState({ showDismissable: false });
  }
 
  onExpandablePress = () => {
    this.setState({ expanded: !this.state.expanded });
  }
 
  render() {
    return (
      <View style={styles.container}>
        <BpkBannerAlert
          style={styles.bannerAlert}
          type={ALERT_TYPES.success}
          message="Success message!"
        />
        <BpkBannerAlert
          style={styles.bannerAlert}
          type={ALERT_TYPES.warn}
          message="Warn message!"
          dismissButtonLabel="Dismiss"
          onDismiss={this.onDismiss}
          dismissable
          show={this.state.showDismissable}
        />
        <BpkBannerAlert
          style={styles.bannerAlert}
          type={ALERT_TYPES.error}
          message="Error message!"
          toggleExpandedButtonLabel="Expand"
          onToggleExpanded={this.onExpandablePress}
          expanded={this.state.expanded}
        >
          <BpkText textStyle="sm">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sagittis sagittis purus, id blandit ipsum.
            Pellentesque nec diam nec erat condimentum dapibus. Nunc diam augue, egestas id egestas ut, facilisis nec mi.
            Donec et congue odio, nec laoreet est. Integer rhoncus varius arcu, a fringilla libero laoreet at.
          </BpkText>
        </BpkBannerAlert>
      </View>
    );
  }
}

Props

Property PropType Required Default Value
message string true -
type oneOf(ALERT_TYPES) true -
animateOnEnter bool false false
animateOnLeave bool false false
children node false null
dismissable bool false false
dismissButtonLabel string false null
expanded bool false false
onDismiss func false null
onToggleExpanded func false null
show bool false true
toggleExpandedButtonLabel string false null
bannerStyle style false null

Prop Details

bannerStyle

These styles will be applied to the banner alerts outer View container, but still within it's animation container. This is useful for maintaining smooth animations whilst applying top/bottom margin.

Keywords

none

install

npm i react-native-bpk-component-banner-alert

Downloadsweekly downloads

172

version

7.1.0

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability