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.