GitHub

A Handy #reactnative press-able flash / toast / status bar alert  #javascript

  • 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.
  • To correct the navigation bar’s top position, simply add top: -20 to the navigation bar’s style.
  • Navigator automatically offsets its navigation bar’s top position by the height of the status bar ( source ).
  • If an alert is popped from the stack, StatusBarAlert will render any remaining alerts and when the stack is empty, StatusBarAlert will hide itself.
  • StatusBarAlert is positioned adjacent to the Navigator component and offsets the entire Navigator component by the height of the status bar.

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

@JimTheDev: A Handy #reactnative press-able flash / toast / status bar alert #javascript

npm install react-native-statusbar-alert –save

this.navigator.push({id: ‘SilentAlert’})} / >

Navigator automatically offsets its navigation bar’s top position by the height of the status bar (source). StatusBarAlert is positioned adjacent to the Navigator component and offsets the entire Navigator component by the height of the status bar. To correct the navigation bar’s top position, simply add

top: -20

< Navigator initialRoute={initialRoute} renderScene={this.renderScene} navigationBar={ < Navigator.NavigationBar routeMapper={routeMapper} style={{top: - 20}} / > } / >

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 ( 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’) }) }

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

GitHub