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= thisnavigator/>
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.