{"id":3978,"url":"https://github.com/lucasferreira/react-native-flash-message","last_synced_at":"2025-05-14T09:08:55.583Z","repository":{"id":30177289,"uuid":"123928168","full_name":"lucasferreira/react-native-flash-message","owner":"lucasferreira","description":"React Native flashbar and top notification alert utility","archived":false,"fork":false,"pushed_at":"2024-09-20T13:22:16.000Z","size":3709,"stargazers_count":1418,"open_issues_count":22,"forks_count":154,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-29T15:38:59.503Z","etag":null,"topics":["component","javascript","react","react-native"],"latest_commit_sha":null,"homepage":"","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/lucasferreira.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["lucasferreira"]}},"created_at":"2018-03-05T14:04:44.000Z","updated_at":"2024-10-29T03:44:37.000Z","dependencies_parsed_at":"2023-01-14T16:30:36.211Z","dependency_job_id":"6eca0fe2-6689-4e79-8f1e-8eb3cf6849ae","html_url":"https://github.com/lucasferreira/react-native-flash-message","commit_stats":{"total_commits":165,"total_committers":32,"mean_commits":5.15625,"dds":0.5696969696969697,"last_synced_commit":"3b746d099edd70dae546d1a8171fa40d86d6a4d9"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasferreira%2Freact-native-flash-message","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasferreira%2Freact-native-flash-message/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasferreira%2Freact-native-flash-message/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucasferreira%2Freact-native-flash-message/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucasferreira","download_url":"https://codeload.github.com/lucasferreira/react-native-flash-message/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247953862,"owners_count":21024102,"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":["component","javascript","react","react-native"],"created_at":"2024-01-05T20:16:57.467Z","updated_at":"2025-04-09T01:22:59.719Z","avatar_url":"https://github.com/lucasferreira.png","language":"JavaScript","funding_links":["https://github.com/sponsors/lucasferreira","https://www.paypal.com/donate?business=ZMAJTXD5HYWCQ\u0026item_name=open-source+dev+flash+message\u0026currency_code=USD"],"categories":["Components","JavaScript"],"sub_categories":["UI"],"readme":"\u003ch1 align=\"center\" style=\"text-align: center;\"\u003ereact-native-flash-message\u003c/h1\u003e\n\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003e\n  \u003cstrong\u003eFlash Message\u003c/strong\u003e is a React Native module to help you easily create highly customizable flashbars, top notifications or alerts \u003ci\u003e(with iPhone X, XR, XS and XS Max \"notch\" support)\u003c/i\u003e.\u003cbr /\u003e\u003cbr /\u003e\n  \u003cimg src=\"https://i.imgur.com/t4COoWT.gif\" alt=\"Global Demo of Flash Message Component\" width=\"86%\" style=\"border: 0; width: 86%; min-width: 240px; max-width: 100%;\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-flash-message\" title=\"View this project on npm\"\u003e\n    \u003cimg src=\"http://img.shields.io/npm/v/react-native-flash-message.svg?style=flat-square\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-flash-message\" title=\"View this project on npm\"\u003e\n    \u003cimg src=\"http://img.shields.io/npm/dm/react-native-flash-message.svg?style=flat-square\" alt=\"npm downloads\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-flash-message\" title=\"View this project on npm\"\u003e\n    \u003cimg src=\"http://img.shields.io/npm/l/react-native-flash-message.svg?style=flat-square\" alt=\"npm licence\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.paypal.com/donate?business=ZMAJTXD5HYWCQ\u0026item_name=open-source+dev+flash+message\u0026currency_code=USD\" title=\"If this project help you reduce time to develop, you can give me a cup of coffee :)\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Donate-PayPal-green.svg?style=flat-square\" alt=\"help this project\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\nSince the library is a JS-based solution, to install the latest version of `react-native-flash-message` you only need to run:\n\n```bash\nnpm install --save react-native-flash-message\n```\n\nor\n\n```bash\nyarn add react-native-flash-message\n```\n\n## Try it out\n\nYou can try out the [Flash Message Playground app](https://exp.host/@lucasferreira/FlashMessagePlayground) to get a tease of the functionalities in this lib.\n\n## Basic Usage\n\nThe _FlashMessage component_ is built for global use, so you have to instance this component once in your main app screen always as the last inserted component:\n\n```jsx\nimport React from \"react\";\nimport { View } from \"react-native\";\nimport FlashMessage from \"react-native-flash-message\";\n\nfunction App() {\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      \u003cView ref={\"otherView1\"} /\u003e\n      \u003cView ref={\"otherView2\"} /\u003e\n      \u003cView ref={\"otherView3\"} /\u003e\n      {/* GLOBAL FLASH MESSAGE COMPONENT INSTANCE */}\n      \u003cFlashMessage position=\"top\" /\u003e {/* \u003c--- here as the last component */}\n    \u003c/View\u003e\n  );\n}\n```\n\nAfter that you only need to call `showMessage` or `hideMessage` methods from anywhere in your app.\n\nIf you don't need a global use for _(e.g. will use only in one screen)_ you can instance your _FlashMessage Component_ with a ref ID _(or other capture ref method)_:\n\n```jsx\n\u003cView style={{ flex: 1 }}\u003e\n  \u003cYourMainApp /\u003e\n  \u003cFlashMessage ref=\"myLocalFlashMessage\" /\u003e   {/* \u003c--- here as the last component always with `ref` as a prop */}\n\u003cView\u003e\n```\n\n### Show some message\n\nNow that you already instantiated the global _FlashMessage component_, when you need to show some message in your app you could use the `showMessage` method in any screen or view. This is a global method that receive a _message object_ with your message detail:\n\n```jsx\nimport React from \"react\";\nimport { View, Button } from \"react-native\";\n\nimport { showMessage, hideMessage } from \"react-native-flash-message\";\n\nfunction MyScreen() {\n  return (\n    \u003cView style={{ flex: 1 }}\u003e\n      \u003cButton\n        onPress={() =\u003e {\n          /* HERE IS WHERE WE'RE GOING TO SHOW OUR FIRST MESSAGE */\n          showMessage({\n            message: \"Simple message\",\n            type: \"info\",\n          });\n        }}\n        title=\"Request Details\"\n        color=\"#841584\"\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\nThe message object obligatorily requires some `message` attribute. If you need to show a message with two lines _(title and more details)_ you could use `message` attr for title and `description` attr for details line:\n\n```javascript\nshowMessage({\n  message: \"Hello World\",\n  description: \"This is our second message\",\n  type: \"success\",\n});\n```\n\nThe `type` attribute set the type and color of your flash message, default options are _\"success\" (green), \"warning\" (orange), \"danger\" (red), \"info\" (blue) and \"default\" (gray)_.\n\nBy default all of the messages will be displayed with transitions and with `autoHide` after _1850 ms_ enabled. If you need to programmatically hide any message, you can call `hideMessage()` .\n\nOther `message object` attributes will be detailed below.\n\n## Props\n\n| Property               | Default                  | In Message Object | Description                                                                                                                                                                                                                                                                                                                                                                                                                              |\n| ---------------------- | ------------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| hideOnPress            | `true`                   | Yes               | Controls if the flash message can be closed on press                                                                                                                                                                                                                                                                                                                                                                                     |\n| onPress                | `none`                   | Yes               | `onPress` callback for flash message press                                                                                                                                                                                                                                                                                                                                                                                               |\n| onLongPress            | `none`                   | Yes               | `onLongPress` callback for flash message press                                                                                                                                                                                                                                                                                                                                                                                           |\n| animated               | `true`                   | Yes               | Controls if the flash message will be shown with animation or not                                                                                                                                                                                                                                                                                                                                                                        |\n| animationDuration      | `225`                    | Yes               | Animations duration/speed                                                                                                                                                                                                                                                                                                                                                                                                                |\n| autoHide               | `true`                   | Yes               | Controls if the flash message can hide itself after some `duration` time                                                                                                                                                                                                                                                                                                                                                                 |\n| duration               | `1850`                   | Yes               | How many milliseconds the flash message will be shown if the `autoHide` it's true                                                                                                                                                                                                                                                                                                                                                        |\n| hideStatusBar          | `false`                  | Yes               | Controls if the flash message will auto hide the native status bar. _Note: Works OK in iOS, not all Android versions support this._                                                                                                                                                                                                                                                                                                      |\n| statusBarHeight        | `none`                   | Yes               | Use this prop to set a custom status bar height that will be add in flash message padding top calc                                                                                                                                                                                                                                                                                                                                       |\n| floating               | `false`                  | Yes               | The `floating` prop unstick the message from the edges and applying some border radius to component                                                                                                                                                                                                                                                                                                                                      |\n| position               | `top`                    | Yes               | The `position` prop set the position of a flash message. _Expected options: \"top\" (default), \"bottom\", \"center\" or a custom object with `{ top, left, right, bottom` } position_                                                                                                                                                                                                                                                         |\n| icon                   | `none`                   | Yes               | The `icon` prop could be a render function that return a new JSX Element to be placed in icon position OR a definition of the graphical icon of a flash message. _Expected options: \"none\" (default), \"auto\" (guided by `type`), \"success\", \"info\", \"warning\", \"danger\", a custom icon (render function) or a custom object with icon type/name and position (left or right) attributes, e.g.: `{ icon: \"success\", position: \"right\" }`_ |\n| style                  | `none`                   | Yes               | Apply a custom style object in flash message container                                                                                                                                                                                                                                                                                                                                                                                   |\n| textStyle              | `none`                   | Yes               | Apply a custom style object in flash message descript/text text label                                                                                                                                                                                                                                                                                                                                                                    |\n| titleStyle             | `none`                   | Yes               | Apply a custom style object in flash message title text label                                                                                                                                                                                                                                                                                                                                                                            |\n| titleProps             | `none`                   | Yes               | Set a custom props object in flash message title text label                                                                                                                                                                                                                                                                                                                                                                              |\n| textProps              | `none`                   | Yes               | Set a custom props object in flash message all text components                                                                                                                                                                                                                                                                                                                                                                           |\n| iconProps              | `none`                   | Yes               | Set a custom props object to use inside the `renderFlashMessageIcon` method as third argument                                                                                                                                                                                                                                                                                                                                            |\n| renderBeforeContent    | `none`                   | Yes               | Render custom `JSX` before title in flash message.                                                                                                                                                                                                                                                                                                                                                                                       |\n| renderCustomContent    | `none`                   | Yes               | Render custom `JSX` below title in flash message.                                                                                                                                                                                                                                                                                                                                                                                        |\n| renderAfterContent     | `none`                   | Yes               | Render custom `JSX` after the title (or description) of a flash message.                                                                                                                                                                                                                                                                                                                                                                 |\n| renderFlashMessageIcon | `renderFlashMessageIcon` | Yes               | Set a custom render function for inside message icons                                                                                                                                                                                                                                                                                                                                                                                    |\n| transitionConfig       | `FlashMessageTransition` | No                | Set the transition config function used in shown/hide anim interpolations                                                                                                                                                                                                                                                                                                                                                                |\n| canRegisterAsDefault   | `true`                   | No                | Use to handle if the instance can be registed as default/global instance                                                                                                                                                                                                                                                                                                                                                                 |\n| MessageComponent       | `DefaultFlash`           | No                | Set the default flash message render component used to show all the messages                                                                                                                                                                                                                                                                                                                                                             |\n\n## Message Object\n\nWhen you call `showMessage` method you'll need to pass a _message object_ to show your message. In this _call_ you could pass some custom attributes to customize your message. Most of the FlashMessage Component props can be passed in runtime calls of `showMessage`. This common props/attributes are identified in **Props** table as _In Message Object_.\n\nIf you need to customize de background color or text color of your message beyond the default types _(success, warning, info and danger)_ you could use the `backgroundColor` or/and `color` attributes in your _message object_:\n\n```javascript\nshowMessage({\n  message: \"My message title\",\n  description: \"My message description\",\n  type: \"default\",\n  backgroundColor: \"purple\", // background color\n  color: \"#606060\", // text color\n});\n```\n\nIf you need to handle the press/touch event in your message, you could use the `onPress` attribute to take some action:\n\n```javascript\nshowMessage({\n  message: \"My message title\",\n  description: \"My message description\",\n  type: \"success\",\n  onPress: () =\u003e {\n    /* THIS FUNC/CB WILL BE CALLED AFTER MESSAGE PRESS */\n  },\n});\n```\n\n## Message with custom icon\n\nTo show a custom/diferent icon in a `showMessage` call you could simple pass a render function with a new JSX element to shown:\n\n```javascript\nshowMessage({\n  message: \"Hello World\",\n  description: \"This is our custom icon message\",\n  icon: props =\u003e \u003cImage source={require(\"../assets/YOUR-CUSTOM-ICON.png\")} {...props} /\u003e,\n  type: \"success\",\n});\n```\n\n## Disable all messages\n\nIf you need to, for some reason, \"turn off\" all the flash messages, you could use the `FlashMessageManager` utility class:\n\n```javascript\nimport { FlashMessageManager } from \"react-native-flash-message\";\n\n// true to disable, false to enable\nFlashMessageManager.setDisabled(true);\n```\n\n## iPhone X (and above)\n\nThe main _MessageComponent_ (responsible for rendering the messages) is `DefaultFlash`. This component is wrapped in another component called `FlashMessageWrapper` that handles device orientations, statusbar heights and principal whether or not include the iPhone X \"notch\" inset padding:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/BfFrInC.gif\" alt=\"iPhone X\"/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/BtHCxus.gif\" alt=\"iPhone X Landscape\"/\u003e\n\u003c/p\u003e\n\n## Documentation\n\nMore details and use cases coming soon.\n\n## Donation\n\nIf this project helped you to reduce your developing time, you can give me a cup of coffee :)\n\nPlease, consider [becoming a sponsor](https://github.com/sponsors/lucasferreira).\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasferreira%2Freact-native-flash-message","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucasferreira%2Freact-native-flash-message","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucasferreira%2Freact-native-flash-message/lists"}