React-native-statusbar-alert-hooks NPM

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.

react native status bar alert banner

@infinitebrahmanuniverse/nolb-react-native-st @everything-registry/sub-chunk-2593 @zalastax/nolb-react-native-st

0.4.2

5 years ago

0.4.1

5 years ago