gnestor / react-native-statusbar-alert

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

React Native Statusbar Alert

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

Install

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

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

Create a navigation element using reat-navigation:

import { StackNavigator } from 'react-navigation';

const NavigationStack = StackNavigator({
	Home: {
		screen: HomeScreen
	},
	Child: {
		screen: ChildScreen
	}
});

Render StatusBarAlert adjacent with StatusBar and NavigationStack:

<View style={styles.container}>
  <StatusBar />
  <StatusBarAlert
    visible={this.state.alert}
    message="Alert!"
    onPress={this.toggleAlert}
  />
  <NavigationStack />
</View>

See the ReactNativeStatusBarAlert directory for a complete example.

Alert stack example

Much like a route stack, you can keep an alert stack as an array of alert objects in your component's state. The StatusBarAlert will render the first alert in the stack, so that as new alerts are pushed into the stack, it will render the most recent alert. If an alert is popped from the stack, StatusBarAlert will render any remaining alerts and when the stack is empty, StatusBarAlert will hide itself. Additionally, the object spread operator ({...this.state.alerts[0]}) allows you to declare the default props for alerts in render() (e.g. backgroundColor="#3CC29E") and override those props in the alert object (e.g. backgroundColor="#FF6245").

render() {
  return (
    <View style={styles.container}>
      <StatusBarAlert
        backgroundColor="#3CC29E"
        color="white"
        visible={this.state.alerts.length > 0}
        {...this.state.alerts[0]}
      />
      <Navigator
        initialRoute={initialRoute}
        renderScene={this.renderScene}
        navigationBar={
          <Navigator.NavigationBar
            routeMapper={routeMapper}
            style={{top: -20}}
          />
        }
      />
    </View>
  )
}
showSilentAlert() {
  this.setState({
    alerts: [{
      message: 'Silent Switch ON',
      onPress: () => this.navigator.push({id: 'SilentAlert'}),
      backgroundColor="#FF6245"
    }, ...this.state.alerts]
  })
}
hideSilentAlert() {
  this.setState({
    alerts: this.state.alerts.filter(alert => alert.message !== 'Silent Switch ON')
  })
}

Example app

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

react-native-statusbar-alert's Issues

Text does not line break or grow

So if I set my text to "Offline Mode" no problem but if I have longer text "Offline mode - press the green button below to create new content."

It gets cut off especially in different phone sizes it would make sense to have an option for multiline text to avoid this

React navigation beta 19 header height

Hi

There's a problem with the latest release of react navigation, beta 19.
I checked out the statusbar example app in expo, and it also has this problem.
There's a gap between the header title and the statusbar alert.
Any solution to fix this?

Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`

I recently started getting this error. It's pretty straightforward, I can make a PR if it will be merged.

floating/hovering statusbar-alert

Is it possible to make the alert floating so it does not push down any other content?

Problem with react-navigation and width of the alert

Hi, is there any tip to use this alert with the returned navigator from react-navigation, so it appears on all screens? Or is it possible to manually set the width of the alert (if I try to insert the alert inside a view in the returned component, the width is just the width of the text inside the alert)?

Some screenshots:

In this situation I'm putting the alert inside de Login screen, so I would have to put inside every other screen, but the width is delimited by the text width:

In this situation, I'm putting the alert with the navigation that is returned, but in android all the screen got blank and on iOS everything is squished in the top:

Doesn't show on Android if translucent is used in StatusBar

To reproduce try the below

      <View>
        <StatusBar
                barStyle='default'
                // HERE-> translucent={true}
                networkActivityIndicatorVisible={true}
                showHideTransition='slide'
                hidden={false}
        />
        <StatusBarAlert
            visible={true}
            message="TODO: Add any error allert here"
            backgroundColor="#ff1744"
            color="white"
        />        
        {/* <MainTabs />  */}
      </View>

Wrong spacing in combination with ReactNavigation

When the StatusBarAlert pushes down a StackNavigator of ReactNavigation, it also pushes down the spacing inside the header (meant for the statusbar). Is there any way to fix this?

Error using pulse

Got this error when I tried to use pulse and pressed on it:

 Style property 'backgroundColor' is not supported by native animated module

Is this library still being maintained @gnestor ?

Style text

Is there a way to style the text message?

Height of not visible statusbar-alert uses default statusbar height

In our app we disabled in iOS the statusbar of the os itself. We like to use you're statusbar-alert, but if we use visible={false}, the statusbar-alert keep uses the height of the statusbar from the os...