{"id":13776631,"url":"https://github.com/yfuks/react-native-action-sheet","last_synced_at":"2025-04-04T10:07:16.095Z","repository":{"id":11995618,"uuid":"70921541","full_name":"yfuks/react-native-action-sheet","owner":"yfuks","description":"React native simple action sheet with native android (using the built-in AlertDialog)","archived":false,"fork":false,"pushed_at":"2022-12-08T02:27:30.000Z","size":1467,"stargazers_count":183,"open_issues_count":20,"forks_count":53,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-30T05:57:31.308Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","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/yfuks.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-10-14T15:12:21.000Z","updated_at":"2024-10-10T10:57:45.000Z","dependencies_parsed_at":"2023-01-13T16:44:55.965Z","dependency_job_id":null,"html_url":"https://github.com/yfuks/react-native-action-sheet","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yfuks%2Freact-native-action-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yfuks%2Freact-native-action-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yfuks%2Freact-native-action-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yfuks%2Freact-native-action-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yfuks","download_url":"https://codeload.github.com/yfuks/react-native-action-sheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247157112,"owners_count":20893203,"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-08-03T18:00:30.728Z","updated_at":"2025-04-04T10:07:16.060Z","avatar_url":"https://github.com/yfuks.png","language":"Java","funding_links":[],"categories":["\u003ca name=\"Alter,-Prompt,-Action-\u0026-Dialog:-Native-Modules\"\u003eAlter, Prompt, Action \u0026 Dialog: Native Modules\u003c/a\u003e"],"sub_categories":[],"readme":"# react-native-action-sheet [![npm version](https://badge.fury.io/js/react-native-action-sheet.svg)](https://badge.fury.io/js/react-native-action-sheet) ![MIT](https://img.shields.io/dub/l/vibe-d.svg) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg)\nReact native action sheet with native android (using the built-in [AlertDialog](https://developer.android.com/reference/android/app/AlertDialog.html))\n\nThis module simply return the [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html) if the device on iOS\n\niOS | Android\n------- | ----\n\u003cimg title=\"iOS\" src=\"http://i.imgur.com/Y9n9jkb.png\" height=550\u003e | \u003cimg title=\"Android\" src=\"http://i.imgur.com/oRXTG7g.png\" height=550\u003e\n\n## Table of contents\n- [Install](#install)\n- [Usage](#usage)\n- [Methods](#methods)\n\n# IMPORTANT ! Package name on npm is now react-native-action-sheet\n## Install\n\n`npm install react-native-action-sheet@latest --save`\n`react-native link react-native-action-sheet`\n\n## if react native \u003c 0.47\n\n`npm install @yfuks/react-native-action-sheet@0.0.3 --save`\n`react-native link @yfuks/react-native-action-sheet`\n\n### Android\n\nThe `react-native link` command above should do everything you need, but if for some reason it does not work, you can replicate its effects manually by making the following changes.\n\n```gradle\n// file: android/settings.gradle\n...\n\ninclude ':react-native-action-sheet'\nproject(':react-native-action-sheet').projectDir = new File(settingsDir, '../node_modules/react-native-action-sheet/android')\n```\n```gradle\n// file: android/app/build.gradle\n...\n\ndependencies {\n    ...\n    compile project(':react-native-action-sheet')\n}\n```\n\n```java\n// file: android/app/src/main/java/com/\u003c...\u003e/MainApplication.java\n...\n\nimport com.actionsheet.ActionSheetPackage; // \u003c-- add this import\n\npublic class MainApplication extends Application implements ReactApplication {\n    @Override\n    protected List\u003cReactPackage\u003e getPackages() {\n        return Arrays.\u003cReactPackage\u003easList(\n            new MainReactPackage(),\n            new ActionSheetPackage() // \u003c-- add this line\n        );\n    }\n...\n}\n\n```\n\n#### (Optional) Style customization\n\nYou can change the style of the dialog by editing `nodes_modules/react-native-action-sheet/android/src/main/res/values/style.xml`\n\n## Usage\n\n```javascript\nimport ActionSheet from 'react-native-action-sheet';\n\nvar options = [\n  'Option 0',\n  'Option 1',\n  'Option 2',\n  'Delete',\n  'Cancel'\n];\n\nvar DESTRUCTIVE_INDEX = 3;\nvar CANCEL_INDEX = 4;\n\nActionSheet.showActionSheetWithOptions({\n  options: options,\n  cancelButtonIndex: CANCEL_INDEX,\n  destructiveButtonIndex: DESTRUCTIVE_INDEX,\n  tintColor: 'blue'\n},\n(buttonIndex) =\u003e {\n  console.log('button clicked :', buttonIndex);\n});\n```\n\n## Methods\n\nFor the iOS implementation see [ActionSheetIOS](https://facebook.github.io/react-native/docs/actionsheetios.html)\n\n#### showActionSheetWithOptions (Android)\n```javascript\n/**\n * Display the native action sheet\n */\n\nstatic showActionSheetWithOptions(options, callback);\n```\n\n@note: on Android in case of a touch outside the ActionSheet or the hardware back button is pressed the buttonIndex value is `cancelButtonIndex` or ```'undefined'```\n\n#### options\n\noption | iOS  | Android | Info\n------ | ---- | ------- | ----\noptions | OK | OK | (array of strings) - a list of button titles (required on iOS)\ncancelButtonIndex | OK | Ok | (int) - index of cancel button in options\ndestructiveButtonIndex | OK | - | (int) - index of destructive button in options (same as above)\ntitle | OK | OK | (string) - a title to show above the action sheet\nmessage | OK | - | (string) - a message to show below the title\ntintColor | OK | - | (string) - a color to set to the text (defined by processColor)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyfuks%2Freact-native-action-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyfuks%2Freact-native-action-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyfuks%2Freact-native-action-sheet/lists"}