{"id":11772,"library":"react-native-flash-message","title":"React Native Flash Message","description":"react-native-flash-message is a widely used utility module for React Native that enables developers to easily create and display highly customizable flashbars, top notifications, and alerts. It is currently in a stable state with version 0.4.2, actively maintained to ensure compatibility with recent iPhone devices, including robust support for display notches (like iPhone X, XR, XS, and XS Max). The library offers both global and local instantiation patterns for its `FlashMessage` component, allowing flexible integration into various application architectures. Its key differentiators include ease of use, extensive customization options for message types (info, success, warning, danger, default), and critical attention to UI/UX details like safe area handling on modern mobile devices. The project has a consistent, though not strictly scheduled, release cadence, primarily focusing on compatibility and bug fixes.","status":"active","version":"0.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/lucasferreira/react-native-flash-message","tags":["javascript","react","react-native","react-component","native","component","flash","flashbar","flashmessage","typescript"],"install":[{"cmd":"npm install react-native-flash-message","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-flash-message","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-flash-message","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for type checking React props.","package":"prop-types","optional":false},{"reason":"Core React library, a peer dependency for all React Native components.","package":"react","optional":false},{"reason":"Core React Native library, a peer dependency for all React Native modules.","package":"react-native","optional":false}],"imports":[{"note":"The main `FlashMessage` component is a default export and should be imported without curly braces.","wrong":"import { FlashMessage } from 'react-native-flash-message';","symbol":"FlashMessage","correct":"import FlashMessage from 'react-native-flash-message';"},{"note":"The `showMessage` utility function for programmatically displaying messages is a named export and must be destructured.","wrong":"import showMessage from 'react-native-flash-message';","symbol":"showMessage","correct":"import { showMessage } from 'react-native-flash-message';"},{"note":"The `hideMessage` utility function is a named export and must be destructured.","wrong":"import hideMessage from 'react-native-flash-message';","symbol":"hideMessage","correct":"import { hideMessage } from 'react-native-flash-message';"}],"quickstart":{"code":"import React from \"react\";\nimport { View, Button, StyleSheet, Text } from \"react-native\";\nimport FlashMessage, { showMessage } from \"react-native-flash-message\";\n\nfunction App() {\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>React Native Flash Message Demo</Text>\n      <Button\n        title=\"Show Info Message\"\n        onPress={() => {\n          showMessage({\n            message: \"Hello from Flash Message!\",\n            description: \"This is an example info message.\",\n            type: \"info\",\n            duration: 3000,\n            icon: \"success\"\n          });\n        }}\n      />\n      <View style={{ height: 20 }} />\n      <Button\n        title=\"Show Error Message\"\n        color=\"red\"\n        onPress={() => {\n          showMessage({\n            message: \"Something went wrong!\",\n            description: \"Please check your network connection and try again.\",\n            type: \"danger\",\n            duration: 5000,\n            icon: \"danger\",\n            position: \"bottom\"\n          });\n        }}\n      />\n      {/* GLOBAL FLASH MESSAGE COMPONENT INSTANCE - MUST BE THE LAST COMPONENT */}\n      {/* This component acts as the container for all flash messages. */}\n      {/* It should be placed at the root level of your app, as the very last child. */}\n      <FlashMessage position=\"top\" />\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: 20,\n    backgroundColor: \"#f0f0f0\"\n  },\n  title: {\n    fontSize: 22,\n    fontWeight: \"bold\",\n    marginBottom: 40,\n    textAlign: \"center\"\n  }\n});\n\nexport default App;","lang":"typescript","description":"This example demonstrates how to integrate `FlashMessage` globally and trigger messages using `showMessage` with different types and positions."},"warnings":[{"fix":"Ensure all related dependencies are updated to their latest compatible versions. If upgrading from older versions, thoroughly test UI layouts on various notch devices to detect any unexpected visual issues.","message":"In version `0.4.0`, the internal dependency for iPhone notch and safe area detection was changed from the unmaintained `react-native-iphone-x-helper` to `react-native-iphone-screen-helper`. While this is primarily an internal change, projects with existing, specific workarounds or other dependencies relying on the older helper might experience subtle layout regressions on notch devices if not properly updated.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Always place the `<FlashMessage position='top' />` (or other position) component at the absolute end of your main `App` component's render tree, or as the last child of the specific `View` it is intended to cover.","message":"The `FlashMessage` component *must* be rendered as the very last child within its parent `View` to ensure it correctly overlays all other content and is fully visible. Incorrect placement will often lead to messages being obscured by other UI elements.","severity":"gotcha","affected_versions":"*"},{"fix":"Always provide a `message` string property in the object passed to `showMessage`, for example: `showMessage({ message: 'Your notification text', type: 'info' })`.","message":"When calling the `showMessage` function, the message object passed as an argument *must* include a `message` property with a string value. Omitting this required property will result in an error or an empty flash message failing to display.","severity":"gotcha","affected_versions":"*"},{"fix":"If you need a local message instance, render it as `<FlashMessage ref={myRef} />` and then call `myRef.current.showMessage(...)` on the ref. Global instances do not require a ref and rely on the exported `showMessage` helper function.","message":"For local `FlashMessage` instances scoped to a specific screen or component (instead of global), the `FlashMessage` component must be rendered with a `ref` prop. This allows you to call `showMessage` directly on that specific instance via the ref.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import { showMessage } from 'react-native-flash-message';` is present and that a `<FlashMessage />` component is rendered as the last child in your root component tree.","cause":"The `showMessage` function was called without an instantiated global `FlashMessage` component, or it was not imported correctly.","error":"TypeError: Cannot read property 'showMessage' of undefined"},{"fix":"Add a `message` string property to the object you pass to `showMessage`, for example: `showMessage({ message: 'Your notification text here', type: 'info' })`.","cause":"The object passed to the `showMessage` function is missing the mandatory `message` property.","error":"Error: `message` attribute is required for FlashMessage"},{"fix":"Move the `<FlashMessage />` component to be the absolute last element rendered within your root `View` component in your `App.js`/`App.tsx` file.","cause":"The `FlashMessage` component is not placed as the last child in the main application's render tree or within its intended parent `View` component.","error":"Flash messages are not appearing or are obscured by other UI elements."}],"ecosystem":"npm"}