{"id":13404343,"url":"https://github.com/cooperka/react-native-snackbar","last_synced_at":"2025-06-14T21:08:30.506Z","repository":{"id":42006774,"uuid":"55616003","full_name":"cooperka/react-native-snackbar","owner":"cooperka","description":":candy: Material Design \"Snackbar\" component for Android and iOS.","archived":false,"fork":false,"pushed_at":"2025-03-29T21:34:40.000Z","size":1781,"stargazers_count":855,"open_issues_count":24,"forks_count":154,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-05-22T02:11:22.387Z","etag":null,"topics":["android","component","material","material-design","react-native","snackbar"],"latest_commit_sha":null,"homepage":"","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cooperka.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-06T15:06:29.000Z","updated_at":"2025-05-17T11:27:11.000Z","dependencies_parsed_at":"2024-01-13T07:25:54.999Z","dependency_job_id":"6527f291-ffb2-4461-8b43-189bd19f38c8","html_url":"https://github.com/cooperka/react-native-snackbar","commit_stats":null,"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"purl":"pkg:github/cooperka/react-native-snackbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cooperka%2Freact-native-snackbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cooperka%2Freact-native-snackbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cooperka%2Freact-native-snackbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cooperka%2Freact-native-snackbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cooperka","download_url":"https://codeload.github.com/cooperka/react-native-snackbar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cooperka%2Freact-native-snackbar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259884525,"owners_count":22926446,"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":["android","component","material","material-design","react-native","snackbar"],"created_at":"2024-07-30T19:01:43.557Z","updated_at":"2025-06-14T21:08:30.487Z","avatar_url":"https://github.com/cooperka.png","language":"Objective-C","readme":"# React Native Snackbar\n\n[![Build status](https://travis-ci.org/cooperka/react-native-snackbar.svg?branch=master)](https://travis-ci.org/cooperka/react-native-snackbar)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-snackbar.svg)](https://www.npmjs.com/package/react-native-snackbar)\n[![npm version](https://img.shields.io/npm/v/react-native-snackbar.svg)](https://www.npmjs.com/package/react-native-snackbar)\n[![Latest GitHub tag](https://img.shields.io/github/tag/cooperka/react-native-snackbar.svg)](https://github.com/cooperka/react-native-snackbar)\n\nMaterial Design \"Snackbar\" component for Android and iOS.\nSupports custom colors, fonts, and languages.\n\n![Snackbar screenshot](example/screenshots/snackbar.png)\n\nSnackbars are used for displaying a brief message to the user, along with an optional action.\nThey animate up from the bottom of the screen and then disappear shortly afterward.\n\nSee Google's [Material Design guidelines](https://m3.material.io/components/snackbar/overview) for more info on Snackbars\nand when to use them.\n\n## How it works\n\n```js\nSnackbar.show({\n  text: 'Hello world',\n  duration: Snackbar.LENGTH_SHORT,\n});\n```\n\nOr, to include an action button:\n\n```js\nSnackbar.show({\n  text: 'Hello world',\n  duration: Snackbar.LENGTH_INDEFINITE,\n  action: {\n    text: 'UNDO',\n    textColor: 'green',\n    onPress: () =\u003e { /* Do something. */ },\n  },\n});\n```\n\n## Installation\n\n1. Install:\n    - Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-snackbar --save`\n    - Using [Yarn](https://yarnpkg.com/): `yarn add react-native-snackbar`\n\n2. [Link](https://facebook.github.io/react-native/docs/linking-libraries-ios.html):\n    - RN \u003e= 0.60 supports [autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md): first `cd ios \u0026\u0026 pod install \u0026\u0026 cd ..`\n    - RN \u003c 0.60: `react-native link react-native-snackbar`\n    - Or if that fails, link manually using [these steps](https://github.com/cooperka/react-native-snackbar/wiki/Manual-Installation)\n    - Note that because this is a native module, Expo does not support it -- to use with Expo you need to [eject to ExpoKit](https://docs.expo.io/versions/latest/expokit/eject/)\n\n3. Import it in your JS:\n\n    ```js\n    import Snackbar from 'react-native-snackbar';\n    ```\n\n## Usage\n\n### Snackbar.show(options)\n\nShows a Snackbar, dismissing any existing Snackbar first. Accepts an object with the following options:\n\n| Key | Data type | Default value? | Description |\n|-----|-----------|----------------|-------------|\n| `text` | `string` | Required. | The message to show. |\n| `duration` | See below | `Snackbar.LENGTH_SHORT` | How long to display the Snackbar. |\n| `numberOfLines` | `number` | `2` | The max number of text lines to allow before ellipsizing. |\n| `marginBottom` | `number` | `0` | Margin from bottom. |\n| `textColor` | `string` or `style` | `'white'` | The color of the message text. |\n| `backgroundColor` | `string` or `style` | `undefined` (dark gray) | The background color for the whole Snackbar. |\n| `fontFamily` | `string` | `undefined` | The basename of a `.ttf` font from `assets/fonts/` (see [setup guide](https://github.com/facebook/react-native/issues/25852) and [example app](/example), remember to `react-native link` after). |\n| `rtl` | `boolean` | `false` | [Requires API 17+ if Android] Whether the Snackbar should render right-to-left (requires `android:supportsRtl=\"true\"`, see [setup guide](https://android-developers.googleblog.com/2013/03/native-rtl-support-in-android-42.html) and [example app](/example)). |\n| `action` | `object` (described below) | `undefined` (no button) | Optional config for the action button (described below). |\n\nWhere `duration` can be one of the following (timing may vary based on device):\n\n- `Snackbar.LENGTH_SHORT` (just over a second)\n- `Snackbar.LENGTH_LONG` (about three seconds)\n- `Snackbar.LENGTH_INDEFINITE` (stays on screen until dismissed, replaced, or action button is tapped)\n\nThe optional `action` object can contain the following options:\n\n| Key | Data type | Default value? | Description |\n|-----|-----------|----------------|-------------|\n| `text` | `string` | Required. | The button text. |\n| `textColor` | `string` or `style` | `'white'` | The color of the button text. |\n| `onPress` | `function` | `undefined` (Snackbar is simply dismissed) | A callback for when the user taps the button. |\n\nDeprecation note: The old keys `title` and `color` have been replaced by `text` and `textColor` for consistency.\nThe old keys will continue to work for now but are deprecated and may be removed at any time.\n\n### Snackbar.dismiss()\n\nDismisses any existing Snackbars.\n\n## Advanced usage\n\n### Snackbar events\nYou can have information on snackbar visibility.\n\n```js\n  componentDidMount() {\n    const SnackbarEventEmitter = new NativeEventEmitter(\n      NativeModules.RNSnackbar,\n    );\n    this.eventListener = SnackbarEventEmitter.addListener('onSnackbarVisibility', (event) =\u003e {\n      console.log(event.event);\n    });\n  }\n\n  componentWillUnmount() {\n    this.eventListener.remove();\n  }\n```\n\nOr, with functional components:\n\n```js\n  useEffect(() =\u003e {\n    const subscription = new NativeEventEmitter(\n      NativeModules.RNSnackbar,\n    ).addListener('onSnackbarVisibility', event =\u003e {\n      console.log(event.event);\n    });\n    return () =\u003e {\n      subscription.remove();\n    };\n  }, []);\n```\n\nWhere event is one of the following options :\n\n| Key | Data type | Value | Description |\n|-----|-----------|----------------|-------------|\n| `Snackbar.DISMISS_EVENT_SWIPE` | `number` | 0 | Indicates that the Snackbar was dismissed via a swipe. |\n| `Snackbar.DISMISS_EVENT_ACTION` | `number` | 1 | Indicates that the Snackbar was dismissed via an action click. |\n| `Snackbar.DISMISS_EVENT_TIMEOUT` | `number` | 2 | Indicates that the Snackbar was dismissed via a timeout. |\n| `Snackbar.DISMISS_EVENT_MANUAL` | `number` | 3 | Indicates that the Snackbar was dismissed via Snackbar.dismiss() call. |\n| `Snackbar.DISMISS_EVENT_CONSECUTIVE` | `number` | 4 | Indicates that the Snackbar was dismissed from a new Snackbar being shown. |\n| `Snackbar.SHOW_EVENT` | `number` | 5 | Indicates that Snackbar appears |\n\n## Mocking via jest\n\nThis package uses NativeModules, which `jest` does not have access to.\n\nYou can use the provided mocks in your `jest.setup.js`:\n\n```js\nimport mockSnackbar from 'react-native-snackbar/jest/snackbar-mock.js'\n\njest.mock('react-native-snackbar', () =\u003e mockSnackbar);\n```\n\n## Troubleshooting\n\n#### Snackbar not appearing [Android]\n\nThe Snackbar is designed to attach to whatever view is on top of your screen when `show` is called. If that view happens to be a temporary alert modal or some other view that goes away, you'll never see the Snackbar.\n\nA workaround in some cases is to use `setTimeout` to show the Snackbar a few seconds later after the modal is gone. See [issue #28](https://github.com/cooperka/react-native-snackbar/issues/28) for further discussion. If you want to submit a PR to improve the view-finding logic, feel free.\n\n#### Undefined import\n\nIf you see errors similar to `Cannot read property 'LENGTH_LONG' of undefined` or `Undefined not an object (NativeModules.RNSnackbar)`, please refer to [issue #43](https://github.com/cooperka/react-native-snackbar/issues/43) for help.\n\n#### Compiling [Android]\n\nIf you have issues compiling for Android after linking this library,\nplease try updating your Gradle and Android configs to the latest versions. For example:\n\nIn your `android/build.gradle`:\n\n- `com.android.tools.build:gradle:3.4.1` (or higher)\n\nIn your `android/app/build.gradle`:\n\n- `compileSdkVersion 28` (or higher)\n- `buildToolsVersion \"28.0.3\"` (or higher)\n\n#### Compiling [iOS]\n\nMake sure your Deployment Target is iOS 9.0 or above.\n\n## Software development\n\nIf you want to help contribute to this library, here are local setup steps:\n\n1. Clone this git repo\n1. Install main dependencies: `yarn install`\n1. Set up the example app too: `cd example \u0026\u0026 yarn install`\n1. Within the example directory, `react-native run-android` to run it\n\nThe example app will update automatically when changing JS code. To see your changes in the example app after updating native library code, reinstall it via:\n\n1. `yarn add file:.. \u0026\u0026 react-native run-android` in the example directory\n1. Type \"rr\" in the app to trigger a reload\n","funding_links":[],"categories":["Objective-C","\u003ca name=\"Alter,-Prompt,-Action-\u0026-Dialog:-Native-Modules\"\u003eAlter, Prompt, Action \u0026 Dialog: Native Modules\u003c/a\u003e"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcooperka%2Freact-native-snackbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcooperka%2Freact-native-snackbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcooperka%2Freact-native-snackbar/lists"}