React Native Statusbar Alert

A status bar alert (e.g. in-call, recording, navigating) for React Native

Install

npm install react-native-statusbar-alert-hooks --save or yarn add react-native-statusbar-alert-hooks

Usage

Basic

<StatusBarAlert
  visible={true}
  message="Silent Switch ON"
  backgroundColor="#3CC29E"
  color="white"
/>

Pulse

<StatusBarAlert
  visible={true}
  message="Silent Switch ON"
  backgroundColor="#3CC29E"
  color="white"
  pulse="background"
/>

Press

<StatusBarAlert
  visible={true}
  message="Silent Switch ON"
  backgroundColor="#3CC29E"
  color="white"
  onPress={() => this.navigator.push({id: 'SilentAlert'})}
/>

Children

<StatusBarAlert
  visible={true}
  height={68}
  style={{
    padding: 5
  }}
>
  <Image
    style={{ width: 66, height: 58 }}
    source={{
      uri: 'https://facebook.github.io/react-native/img/header_logo.png'
    }}
  />
</StatusBarAlert>

Props

| Name | Description | Required | Type | Default | :------------- | :------------------------------ | :---------- | :------------------------ | :------ | visible | true to show, false to hide | true | bool | false | message | message to display in alert | true | string | '' | onPress | callback on press event | false | func | null | pulse | animate the text or background | false | enum('text','background') | false | backgroundColor | background color | false | color | '#3DD84C' | highlightColor | color on press and pulse | false | color | darken(this.props.backgroundColor, 0.9) | color | text color | false | color | 'white' | height | height of children container | false | int | 20 | statusbarHeight | custom status bar height | false | int | 20 | style | styles for children container | false | style object | {}

Usage with react-navigation

See the example directory for a complete example.

Example app

See the example directory for an example React Native app using react-native-statusbar-alert-hooks.