{"id":16748392,"url":"https://github.com/gnestor/react-native-statusbar-alert","last_synced_at":"2025-04-05T11:08:05.254Z","repository":{"id":8347487,"uuid":"58080169","full_name":"gnestor/react-native-statusbar-alert","owner":"gnestor","description":"A status bar alert (e.g. in-call, recording, navigating) for React Native","archived":false,"fork":false,"pushed_at":"2022-12-07T17:20:04.000Z","size":3072,"stargazers_count":231,"open_issues_count":25,"forks_count":30,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-14T02:12:33.590Z","etag":null,"topics":["alert","android","ios","react-native","statusbar"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gnestor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-04T19:56:03.000Z","updated_at":"2024-10-10T10:57:38.000Z","dependencies_parsed_at":"2023-01-13T15:30:26.414Z","dependency_job_id":null,"html_url":"https://github.com/gnestor/react-native-statusbar-alert","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnestor%2Freact-native-statusbar-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnestor%2Freact-native-statusbar-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnestor%2Freact-native-statusbar-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnestor%2Freact-native-statusbar-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gnestor","download_url":"https://codeload.github.com/gnestor/react-native-statusbar-alert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alert","android","ios","react-native","statusbar"],"created_at":"2024-10-13T02:12:33.382Z","updated_at":"2025-04-05T11:08:05.201Z","avatar_url":"https://github.com/gnestor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Statusbar Alert\n\nA status bar alert (e.g. in-call, recording, navigating) for React Native\n\n## Install\n\n`npm install react-native-statusbar-alert --save` or `yarn add react-native-statusbar-alert`\n\n## Usage\n\n### Basic\n\n```js\n\u003cStatusBarAlert\n  visible={true}\n  message=\"Silent Switch ON\"\n  backgroundColor=\"#3CC29E\"\n  color=\"white\"\n/\u003e\n```\n\n![basic](screenshots/react-native-statusbar-alert.mov.gif)\n\n### Pulse\n\n```js\n\u003cStatusBarAlert\n  visible={true}\n  message=\"Silent Switch ON\"\n  backgroundColor=\"#3CC29E\"\n  color=\"white\"\n  pulse=\"background\"\n/\u003e\n```\n\n![pulse](screenshots/react-native-statusbar-alert-pulse.mov.gif)\n\n### Press\n\n```js\n\u003cStatusBarAlert\n  visible={true}\n  message=\"Silent Switch ON\"\n  backgroundColor=\"#3CC29E\"\n  color=\"white\"\n  onPress={() =\u003e this.navigator.push({id: 'SilentAlert'})}\n/\u003e\n```\n\n![press](screenshots/react-native-statusbar-alert-press.mov.gif)\n\n### Children\n\n```js\n\u003cStatusBarAlert\n  visible={true}\n  height={68}\n  style={{\n    padding: 5\n  }}\n\u003e\n  \u003cImage\n    style={{ width: 66, height: 58 }}\n    source={{\n      uri: 'https://facebook.github.io/react-native/img/header_logo.png'\n    }}\n  /\u003e\n\u003c/StatusBarAlert\u003e\n```\n\n## Props\n\n| Name            | Description                     | Required    | Type                      | Default\n| :-------------  | :------------------------------ | :---------- | :------------------------ | :------\n| visible         | `true` to show, `false` to hide | true        | bool                      | `false`\n| message         | message to display in alert     | true        | string                    | `''`\n| onPress         | callback on press event         | false       | func                      | `null`\n| pulse           | animate the text or background  | false       | enum('text','background') | `false`\n| backgroundColor | background color                | false       | [color][1]                | `'#3DD84C'`\n| highlightColor  | color on press and pulse        | false       | [color][1]                | `darken(this.props.backgroundColor, 0.9)`\n| color           | text color                      | false       | [color][1]                | `'white'`\n| height          | height of children container    | false       | int                       | 20\n| statusbarHeight | [custom status bar height][2]   | false       | int                       | 20\n| style           | styles for children container   | false       | [style object][3]         | `{}`\n\n[1]: https://facebook.github.io/react-native/docs/colors.html  \"React Native Colors\"\n[2]: https://github.com/brentvatne/react-native-status-bar-size \"react-native-status-bar-size\"\n[3]: https://facebook.github.io/react-native/docs/style.html  \"React Native Style\"\n\n## Usage with react-navigation\n\nCreate a navigation element using reat-navigation:\n\n```js\nimport { StackNavigator } from 'react-navigation';\n```\n\n```js\nconst NavigationStack = StackNavigator({\n\tHome: {\n\t\tscreen: HomeScreen\n\t},\n\tChild: {\n\t\tscreen: ChildScreen\n\t}\n});\n```\n\nRender `StatusBarAlert` adjacent with `StatusBar` and `NavigationStack`:\n\n```js\n\u003cView style={styles.container}\u003e\n  \u003cStatusBar /\u003e\n  \u003cStatusBarAlert\n    visible={this.state.alert}\n    message=\"Alert!\"\n    onPress={this.toggleAlert}\n  /\u003e\n  \u003cNavigationStack /\u003e\n\u003c/View\u003e\n```\n\nSee the [ReactNativeStatusBarAlert](/ReactNativeStatusBarAlert) directory for a complete example.\n\n## Alert stack example\n\nMuch 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\"`).\n\n```js\nrender() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cStatusBarAlert\n        backgroundColor=\"#3CC29E\"\n        color=\"white\"\n        visible={this.state.alerts.length \u003e 0}\n        {...this.state.alerts[0]}\n      /\u003e\n      \u003cNavigator\n        initialRoute={initialRoute}\n        renderScene={this.renderScene}\n        navigationBar={\n          \u003cNavigator.NavigationBar\n            routeMapper={routeMapper}\n            style={{top: -20}}\n          /\u003e\n        }\n      /\u003e\n    \u003c/View\u003e\n  )\n}\nshowSilentAlert() {\n  this.setState({\n    alerts: [{\n      message: 'Silent Switch ON',\n      onPress: () =\u003e this.navigator.push({id: 'SilentAlert'}),\n      backgroundColor=\"#FF6245\"\n    }, ...this.state.alerts]\n  })\n}\nhideSilentAlert() {\n  this.setState({\n    alerts: this.state.alerts.filter(alert =\u003e alert.message !== 'Silent Switch ON')\n  })\n}\n```\n\n## Example app\n\nSee the [ReactNativeStatusBarAlertExample](https://github.com/gnestor/react-native-statusbar-alert/tree/master/ReactNativeStatusBarAlertExample) directory for an example React Native app using react-native-statusbar-alert.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgnestor%2Freact-native-statusbar-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgnestor%2Freact-native-statusbar-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgnestor%2Freact-native-statusbar-alert/lists"}