{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-flash-message"],"cli":null},"imports":["import FlashMessage from 'react-native-flash-message';","import { showMessage } from 'react-native-flash-message';","import { hideMessage } from 'react-native-flash-message';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}