{"id":4026,"url":"https://github.com/KBLNY/react-native-message-bar","last_synced_at":"2025-08-04T00:31:01.712Z","repository":{"id":54512747,"uuid":"53891597","full_name":"KBLNY/react-native-message-bar","owner":"KBLNY","description":"A notification bar alert displayed at the top of the screen for react-native","archived":false,"fork":false,"pushed_at":"2021-02-02T13:30:55.000Z","size":175,"stargazers_count":442,"open_issues_count":31,"forks_count":125,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-09-05T03:48:50.596Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KBLNY.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-14T21:01:34.000Z","updated_at":"2024-05-23T13:00:24.000Z","dependencies_parsed_at":"2022-08-13T18:20:19.060Z","dependency_job_id":null,"html_url":"https://github.com/KBLNY/react-native-message-bar","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBLNY%2Freact-native-message-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBLNY%2Freact-native-message-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBLNY%2Freact-native-message-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KBLNY%2Freact-native-message-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KBLNY","download_url":"https://codeload.github.com/KBLNY/react-native-message-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576892,"owners_count":17939645,"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":[],"created_at":"2024-01-05T20:16:58.861Z","updated_at":"2024-12-07T07:30:56.393Z","avatar_url":"https://github.com/KBLNY.png","language":"JavaScript","funding_links":[],"categories":["Components","Libraries","Others","JavaScript"],"sub_categories":["UI"],"readme":"# react-native-message-bar\n\n![npm version](http://img.shields.io/npm/dm/react-native-message-bar.svg)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/482dc013717642e3971f78b22f2a95fd)](https://www.codacy.com/app/ktgr45/react-native-message-bar?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=KBLNY/react-native-message-bar\u0026amp;utm_campaign=Badge_Grade)\n![downloads](https://img.shields.io/npm/v/react-native-message-bar.svg) ![license](https://img.shields.io/npm/l/react-native-message-bar.svg)\n[![Platform](https://img.shields.io/badge/platform-ios%20%7C%20android-989898.svg?style=flat-square)](https://npmjs.org/package/react-native-message-bar \"View this project on npm\")\n\nA message bar notification component displayed at the top of the screen for React Native (Android and iOS) projects.\n\n![Screenshot](http://s31.postimg.org/cxq6x5srf/Untitled.gif)\n\n\n## Content\n- [Features](#features)\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Hide the Message Bar Alert](#hide-the-message-bar-alert)\n- [Customize Alert Type](#customize-alert-type)\n- [Customize Alert Content](#customize-alert-content)\n- [Customize View Layout](#customize-view-layout)\n- [Customize Position and Animation, Twitter Style!](#customize-position-and-animation-twitter-style)\n- [Properties](#properties)\n- [Contributing](#contributing)\n- [TODOS](#todos)\n- [Apps using this library](#apps-using-this-library)\n- [License](#license)\n\n\n## Features\n- Android and iOS capable\n- Animated alert with Title, Message and Icon/Avatar (from a local or a remote image file)\n- Top or Bottom display\n- 4 Slides Animation Types (Alert is shown from top, from bottom, from left or from right)\n- Auto-hide after x seconds (customizable and/or can be disabled)\n- Auto-hide current alert to display a newer one, if context requires to do so\n- Support hide on tap (can be disabled)\n- 4 pre-configured customizable styles + 1 extra\n- Customizable texts, styles, durations, positions and animation\n- Callbacks on alert show, hide and tap\n- Orientation supported\n- Children component support Show/Hide alert\n\n\n## Installation\nMake sure that you are in your React Native project directory and run:\n```batch\n$ npm install react-native-message-bar --save\n```\n\n\n## Basic Usage\n- 1. Import the `react-native-message-bar` package\n```javascript\nvar MessageBarAlert = require('react-native-message-bar').MessageBar;\nvar MessageBarManager = require('react-native-message-bar').MessageBarManager;\n```\n\n- 2. Add the `MessageBarAlert` to your render function\nNote: Add it at the very end of your render function, the alert will then be displayed over any component of the view\n```javascript\n// Within your render function.\n// Include the MessageBar once within your top View element\n// Make sure you add the MessageBar at the very bottom of your master component, then it will be displayed over all other components\n\u003cMessageBarAlert ref=\"alert\" /\u003e\n```\n\n- 3. Register and Release your Message Bar as the current main alert\n```javascript\ncomponentDidMount() {\n  // Register the alert located on this master page\n  // This MessageBar will be accessible from the current (same) component, and from its child component\n  // The MessageBar is then declared only once, in your main component.\n  MessageBarManager.registerMessageBar(this.refs.alert);\n}\n\ncomponentWillUnmount() {\n  // Remove the alert located on this master page from the manager\n  MessageBarManager.unregisterMessageBar();\n}\n```\n\n- 4. Display the Message Bar Alert on demand\n```javascript\n// Call this method after registering your MessageBar as the current alert\n// By calling this method the registered alert will be displayed\n// This is useful to show the alert from your current page or a child component\nMessageBarManager.showAlert({\n  title: 'Your alert title goes here',\n  message: 'Your alert message goes here',\n  alertType: 'success',\n  // See Properties section for full customization\n  // Or check `index.ios.js` or `index.android.js` for a complete example\n});\n```\nPlease note, if you do not provide a `alertType`, the `info` one will be chosen for you.\n\nThe normal `duration` of the notification is 3 seconds (3000 ms), you can override it. After this time, the notification is going to be hidden\n\n\nSee a full Example in `index.ios.js` or `index.android.js`.\n\n\n## Hide the Message Bar Alert\n```javascript\n// You can force the current alert to be hidden through the Manager\nMessageBarManager.hideAlert();\n```\n\n\n## Customize Alert Type\nThe Message Bar Alert comes with 4 pre-configured alert style and 1 undefined extra.\nThese alert styles defined the background color of the alert and the line stroke color.\nThe 4 pre-configured alert styles are:\n- `info` defined blue colors\n- `success` defined green colors\n- `warning` defined orange colors\n- `error` defined red colors\n\nThe `extra` alert type allows you to use another 5th type.\n\n```javascript\nMessageBarManager.showAlert({\n  ...\n\n  alertType: 'info', // Alert Type: you can select one of 'success', 'error', 'warning', 'error', or 'custom' (use custom if you use a 5th stylesheet, all are customizable). Default is 'info'\n\n  /* Customize the stylesheets and/or provide an additional one 'extra' */\n  stylesheetInfo : {{ backgroundColor : '#007bff', strokeColor : '#006acd' }}, // Default are blue colors\n  stylesheetSuccess : {{ backgroundColor : 'darkgreen', strokeColor : '#b40000' }}, // Default are Green colors\n  stylesheetWarning : {{ backgroundColor : '#ff9c00', strokeColor : '#f29400' }}, // Default are orange colors\n  stylesheetError : {{ backgroundColor : '#ff3232', strokeColor : '#FF0000' }}, // Default are red colors\n  stylesheetExtra : {{ backgroundColor : 'black', strokeColor : 'gray' }}, // Default are blue colors, same as info\n\n  ...\n});\n```\n\n\n## Customize Alert Content\nYou can customize the style of the Title, Message and Icon/Avatar.\n```javascript\nMessageBarManager.showAlert({\n  ...\n\n  title: \"John Doe\", // Title of the alert\n  message: \"Hello, any suggestions?\", // Message of the alert\n  avatar: \"\u003cURL/require('\u003cpath\u003e') of your icon/avatar\u003e\", // Avatar/Icon \u003cURL\u003e of the alert or enter require('LOCALPATH') for local image\n\n  /* Number of Lines for Title and Message */\n  titleNumberOfLines: 1,\n  messageNumberOfLines: 0, // Unlimited number of lines\n\n  /* Style for the text elements and the  */\n  titleStyle: {{ color: 'white', fontSize: 18, fontWeight: 'bold' }},\n  messageStyle: {{ color: 'white', fontSize: 16 }},\n  avatarStyle: {{ height: 40, width: 40, borderRadius: 20 }},\n\n  ...\n});\n```\n\n\n## Customize Message Bar Alert Layout\nYou can customize the inset (padding) and the offset of the alert.\n```javascript\nMessageBarManager.showAlert({\n  ...\n\n  /* Offset of the View, useful if you have a navigation bar or if you want the alert be shown below another component instead of the top of the screen */\n  viewTopOffset : 0, // Default is 0\n  viewLeftOffset : 0, // Default is 0\n  viewRightOffset : 0, // Default is 0\n\n  /* Inset of the view, useful if you want to apply a padding at your alert content */\n  viewTopInset : 15, // Default is 0\n  viewLeftInset : 0, // Default is 0\n  viewRightInset : 0, // Default is 0\n\n  ...\n});\n```\n\n\n## Customize Position and Animation, Twitter Style!\nYou can choose the position (`top`or `bottom`) of the alert.\nYou can choose the way the alert is shown (`SlideFromTop`, `SlideFromBottom`, `SlideFromLeft` or `SlideFromRight`).\n```javascript\nMessageBarManager.showAlert({\n  ...\n\n  /* Position of the alert and Animation Type the alert is shown */\n  position: 'bottom',\n  animationType: 'SlideFromLeft',\n\n  ...\n});\n```\n\n\n## Properties\nProp                  | Type     | Default              | Description\n--------------------- | -------- | -------------------- | -----------\ntitle                 | String   |                      | Title of the alert\nmessage               | String   |                      | Message of the alert\navatar                | String   |                      | Avatar/Icon source/URL of the alert. Use \u003cURL\u003e for a remote image file (eg `avatar: 'http://mywebsite.com/myimage.jpg'`) or use `avatar: require('\u003cpath/to/my/local/image.extension\u003e')` for a remote image file\nalertType             | String   | info                 | Alert Type: you can select one of 'success', 'error', 'warning', 'error', or 'custom' (use custom if you use a 5th stylesheet, all are customizable).\nduration              | Number   | 3000                 | Number of ms the alert is displayed  \nshouldHideAfterDelay  | Bool     | true                 | Tell the MessageBar whether or not it should hide after a delay defined in the `duration` property. If `false`, the MessageBar remain shown\nshouldHideOnTap       | Bool     | true                 | Tell the MessageBar whether or not it should hide or not when the user tap the alert. If `false`, the MessageBar will not hide, but the `onTapped` function is triggered, if defined. In addition, if `false`, the `onHide` function will not be triggered. The property `shouldHideAfterDelay` take precedence over `shouldHideOnTap`. That means if `shouldHideAfterDelay` is `false`, the value of `shouldHideOnTap` is not taken into account, since the MessageBar will not ever be hidden\nonTapped              | Function |                      | Callback function after alert is tapped\nonShow                | Function |                      | Callback function after alert is shown\nonHide                | Function |                      | Callback function after alert is hidden\nstylesheetInfo        | Object   | { backgroundColor: '#007bff', strokeColor: '#006acd' } | Background color and line stroke colors of the alert when alertType is equals to `info`\nstylesheetSuccess     | Object   | { backgroundColor: 'darkgreen', strokeColor: '#b40000' } | Background color and line stroke colors of the alert when alertType is equals to `success`\nstylesheetWarning     | Object   | { backgroundColor: '#ff9c00', strokeColor: '#f29400' } | Background color and line stroke colors of the alert when alertType is equals to `warning`\nstylesheetError       | Object   | { backgroundColor: '#ff3232', strokeColor: '#FF0000' } | Background color and line stroke colors of the alert when alertType is equals to `error`\nstylesheetExtra       | Object   | { backgroundColor: '#007bff', strokeColor: '#006acd' } | Background color and line stroke colors of the alert when alertType is equals to `extra`\ndurationToShow        | Number   | 350                  | Duration of the animation to completely show the alert\ndurationToHide        | Number   | 350                  | Duration of the animation to completely hide the alert\nviewTopOffset         | Number   | 0                    | Offset of the view from the top. That means the alert touch the top edge of the screen.\nviewBottomOffset      | Number   | 0                    | Offset of the view from the bottom. That means the alert touch the bottom edge of the screen\nviewLeftOffset        | Number   | 0                    | Offset of the view from the left. That means the alert touch the left edge of the screen\nviewRightOffset       | Number   | 0                    | Offset of the view from the right. That means the alert touch the right edge of the screen\nviewTopInset          | Number   | 0                    | Padding Top of the view\nviewBottomInset       | Number   | 0                    | Padding Bottom of the view\nviewLeftInset         | Number   | 0                    | Padding Left of the view\nviewRightInset        | Number   | 0                    | Padding Right of the view\ntitleNumberOfLines    | Number   | 1                    | Number of lines of the title. `0` means unlimited\nmessageNumberOfLines  | Number   | 2                    | Number of lines of the message. `0` means unlimited\navatarStyle           | Style    | { height: 40, width: 40, borderRadius: 20, alignSelf: 'center' } | Style of the icon/avatar\ntitleStyle            | Style    | { color: 'white', fontSize: 18, fontWeight: 'bold' } | Style of the title\nmessageStyle          | Style    | { color: 'white', fontSize: 16 } | Style of the message\nposition              | String   | top                  | Define the position of the alert, can be `top` or `right`\nanimationType         | String   | SlideFromTop         | Define the way the alert is animated on the view, can be `SlideFromTop`, `SlideFromBottom`, `SlideFromLeft` or `SlideFromRight`. If no value is specified, the animation type is selected for you based on the `position`; `SlideFromTop` if `position` is equal to `top`, `SlideFromBottom` if `position` is equal to `bottom`. The alert will then be smoothly displayed\n\n\n## Contributing\n1. Fork this Repo first\n2. Clone your Repo\n3. Install dependencies by $ npm install\n4. Checkout a feature branch\n5. Feel free to add your features\n6. Make sure your features are fully tested\n7. Publish your local branch, Open a pull request\n8. Enjoy hacking \u003c3\n\n\n## TODOS\n- [ ] Add Alert Queuing System\n- [x] Add Bottom Position\n- [x] Add Slide Animations Type (Slide from Top, Bottom, Left, Right)\n- [ ] Add Other Animations Type (Fade-in, Elastic, etc.)\n- [ ] Add customizable Animation (inject your configuration)\n- [ ] Anything that can help to improve :) Thanks for contributions\n\n\n## Apps using this library\n- Your App here...\n\n\n---\n\n## License\n`React-Native-Message-Bar` is released under MIT License. See `LICENSE` for details.\n\n\u003e**Copyright \u0026copy; 2016 KBLNY.**\n\n*Please provide attribution, it is greatly appreciated.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKBLNY%2Freact-native-message-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKBLNY%2Freact-native-message-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKBLNY%2Freact-native-message-bar/lists"}