yfuks / react-native-action-sheet

React native simple action sheet with native android (using the built-in AlertDialog)

react-native-action-sheet

React native action sheet with native android (using the built-in AlertDialog)

This module simply return the ActionSheetIOS if the device on iOS

iOS	Android

Table of contents

• Install
• Usage
• Methods

IMPORTANT ! Package name on npm is now react-native-action-sheet

Install

npm install react-native-action-sheet@latest --save react-native link react-native-action-sheet

if react native < 0.47

npm install @yfuks/[email protected] --save react-native link @yfuks/react-native-action-sheet

Android

The 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.

// file: android/settings.gradle
...

include ':react-native-action-sheet'
project(':react-native-action-sheet').projectDir = new File(settingsDir, '../node_modules/react-native-action-sheet/android')

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':react-native-action-sheet')
}

// file: android/app/src/main/java/com/<...>/MainApplication.java
...

import com.actionsheet.ActionSheetPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ActionSheetPackage() // <-- add this line
        );
    }
...
}

(Optional) Style customization

You can change the style of the dialog by editing nodes_modules/react-native-action-sheet/android/src/main/res/values/style.xml

Usage

import ActionSheet from 'react-native-action-sheet';

var options = [
  'Option 0',
  'Option 1',
  'Option 2',
  'Delete',
  'Cancel'
];

var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;

ActionSheet.showActionSheetWithOptions({
  options: options,
  cancelButtonIndex: CANCEL_INDEX,
  destructiveButtonIndex: DESTRUCTIVE_INDEX,
  tintColor: 'blue'
},
(buttonIndex) => {
  console.log('button clicked :', buttonIndex);
});

Methods

For the iOS implementation see ActionSheetIOS

showActionSheetWithOptions (Android)

/**
 * Display the native action sheet
 */

static showActionSheetWithOptions(options, callback);

@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'

options

option	iOS	Android	Info
options	OK	OK	(array of strings) - a list of button titles (required on iOS)
cancelButtonIndex	OK	Ok	(int) - index of cancel button in options
destructiveButtonIndex	OK	-	(int) - index of destructive button in options (same as above)
title	OK	OK	(string) - a title to show above the action sheet
message	OK	-	(string) - a message to show below the title
tintColor	OK	-	(string) - a color to set to the text (defined by processColor)

react-native-action-sheet's Issues

Getting error on Android

I'm getting an error 'undefined is not an object (evaluating 'reactNativeActionSheet2.default.showActionSheetWithOptions)' when calling ActionSheet.showActionSheetWithOptions as shown in the example.

Build Failed in Android

Hi, I got an error when I building the app to Android device.

I'm using React Native 0.47.1 and react-native-action-sheet 0.0.4

• What went wrong:
  A problem occurred configuring project ':(at)yfuks/react-native-action-sheet'.
  > SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

Android getting issue execution failed

"react": "^16.2.0",
"react-native": "^0.50.3",

error showing like

:react-native-action-sheet:compileReleaseJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
/Users/stellent/Desktop/MentorMentee/konnect-react-native/node_modules/@yfuks/react-native-action-sheet/android/src/main/java/com/actionsheet/ActionSheetPackage.java:19: error: method does not override or implement a method from a supertype
  @Override
  ^
1 error
:react-native-action-sheet:compileReleaseJavaWithJavac FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-action-sheet:compileReleaseJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

I suggested and followed all documents and downgraded also but still getting this error.

link && r-n run-android show error!

react native 0.44.3
react-native-action-sheet：0.0.4

react-native-action-sheet/android/src/main/java/com/actionsheet/ActionSheetPackage.java:13: 错误: ActionSheetPackage不是抽象的, 并且未覆盖ReactPackage中的抽象方法createJSModules()
public class ActionSheetPackage implements ReactPackage {
       ^
1 个错误
:@yfuks/react-native-action-sheet:compileReleaseJavaWithJavac FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':@yfuks/react-native-action-sheet:compileReleaseJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
...

Android: Support React Native 0.56

rmevans9@2e5cb7e

Could not find com.android.tools.build:gradle:2.3.3

Hi I'm having issues with my project when trying to run the app.

Searched in the following locations:
    https://jcenter.bintray.com/com/android/tools/build/gradle/2.3.3/gradle-2.3.3.pom
    https://jcenter.bintray.com/com/android/tools/build/gradle/2.3.3/gradle-2.3.3.jar
Required by:
    project :react-native-action-sheet```

Any help is appreciated.
Thank you!

(ANDROID) Tapping out returns an `undefined` buttonIndex

This seems to be android specific (can't repro on iOS).

When the action sheet dialog pops up on Android, if you tap outside of the dialog, it closes... BUT it also continues to execute and passes the buttonIndex of undefined. You can test by just console.log(buttonIndex) while on android and tapping outside the dialog. The workaround is not too difficult, but is a little tedious and people might easily miss it if not testing their implementations thoroughly on Android. This is more problematic if you are dynamically setting the available options and later trying to match them to call the appropriate function.

Workaround: Just include a catching conditional at the start of the buttonIndex function:

if (!buttonIndex && buttonIndex !== 0) {
    return;
}

Struggling with installation on Android

react-native link makes all the changes you recommend in manual installation, but I keep getting

"Warning:Unable to find module with Gradle path ':@yfuks/react-native-action-sheet' (needed by module 'app'.)
Linking to library '@yfuks/react-native-action-sheet-unspecified' instead."

React-native 0.49.3
React-native-action-sheet 0.0.4
Android Studio 2.3.3

Any hint on what I'm doing wrong ?

git diff if this is of any help.

--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -157,6 +157,7 @@ android {
 }

 dependencies {
+    compile project(':@yfuks/react-native-action-sheet')
     compile project(':react-native-vector-icons')
     compile project(':react-native-orientation')
     compile project(':react-native-i18n')

--- a/android/app/src/main/java/com/capturecanada/MainApplication.java
+++ b/android/app/src/main/java/com/capturecanada/MainApplication.java
@@ -3,6 +3,7 @@ package com.myapp;
 import android.app.Application;

 import com.facebook.react.ReactApplication;
+import com.actionsheet.ActionSheetPackage;
@@ -41,6 +42,7 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new ActionSheetPackage(),

--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -1,4 +1,6 @@
 rootProject.name = 'MyApp'
+include ':@yfuks/react-native-action-sheet'
+project(':@yfuks/react-native-action-sheet').projectDir = new File(rootProject.projectDir, '../node_modules/@yfuks/react-native-action-sheet/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Button Cancel

I think, you should to add button Cancel for Android like default Android Cancel.

How to customise height of action sheet for large list

Hello
Thank you for great component.
I am using it to show large list for countries selection. It’s working better than any other component I tried before but it is taking most of the screen.
how can I customise it to take 30-40% of total screen height?

thank you in advance

Light scheme in the dark theme

Can i use light color scheme in the dark mode ? (IOS)

Android Studio error

Hello guys,

I am getting all the time error in Android Studio:

Error:Unable to find module with Gradle path ':@yfuks/react-native-action-sheet' (needed by module 'app'.)

Anyone has faced with this issue and knows solution for this?
Generally build is building successfully, i just have this error when I do gradle sync.

Release without jcenter

Dependancy removal request

Jcenter will shutdown and it is not stable at the moment causing android builds either debug or release APKs to fail. Jcenter is used in the build.gradle file

Just creating an issue so we can track when a version without jcenter can be pulled for our app releases.
Path: react-native-action-sheet/android/build.gradle
Code :  
repositories {
    google()
    jcenter()
 }

Platform: Android

Could not find method compile() for arguments [project ':@yfuks/react-native-action-sheet']

The error message is:
Could not find method compile() for arguments [project ':@ yfuks/react-native-action-sheet'] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler. < a href="openFile:/Users/ofksj/react_native_project/android/build.gradle">Open File</ a>

Package.json:
"@ yfuks/react-native-action-sheet": "0.0.4", (Both 0.0.4 and 0.0.3 are tried, no difference)
"react-native": "^0.49.5",

react-native link:
Android module @ yfuks/react-native-action-sheet is already linked

The difference after react-native link is that I had prefix '@ yfuks/' in package name:
// file: android/app/build.gradle
dependencies {
compile project(':@ yfuks/react-native-action-sheet')
}

// file: android/settings.gradle:
include ':@ yfuks/react-native-action-sheet'
project(':@ yfuks/react-native-action-sheet').projectDir = new File(rootProject.projectDir, '../node_modules/@yfuks/react-native-action-sheet/android')

Please help check this issue, thank you!

Error on android when pressing on showActionSheet button

undefined is not an object (evaluating '_reactNativeActionSheet2.default.showActionSheetWithOptions')
showActionSheet
    editProfile.js:127:18
touchableHandlePress
    TouchableNativeFeedback.android.js:170:45
_performSideEffectsForTransition
    Touchable.js:746:34
_receiveSignal
    Touchable.js:664:44
touchableHandleResponderRelease
    Touchable.js:433:24
invokeGuardedCallback
    ReactNativeStack-dev.js:130:19
invokeGuardedCallback
    ReactNativeStack-dev.js:166:43
invokeGuardedCallbackAndCatchFirstError
    ReactNativeStack-dev.js:169:64
executeDispatch
    ReactNativeStack-dev.js:202:128
executeDispatchesInOrder
    ReactNativeStack-dev.js:208:279
executeDispatchesAndRelease
    ReactNativeStack-dev.js:272:58
executeDispatchesAndReleaseTopLevel
    ReactNativeStack-dev.js:276:39
forEachAccumulated
    ReactNativeStack-dev.js:268:37
processEventQueue
    ReactNativeStack-dev.js:340:143
runEventQueueInBatch
    ReactNativeStack-dev.js:637:79
handleTopLevel
    ReactNativeStack-dev.js:642:29
<unknown>
    ReactNativeStack-dev.js:749:51
fiberBatchedUpdates
    ReactNativeStack-dev.js:691:14
performFiberBatchedUpdates
    ReactNativeStack-dev.js:695:31
perform
    ReactNativeStack-dev.js:1382:99
batchedUpdates
    ReactNativeStack-dev.js:2077:139
batchedUpdates$1
    ReactNativeStack-dev.js:1456:61
batchedUpdates
    ReactNativeStack-dev.js:699:31
batchedUpdatesWithControlledComponents
    ReactNativeStack-dev.js:708:30
_receiveRootNodeIDEvent
    ReactNativeStack-dev.js:748:46
receiveTouches
    ReactNativeStack-dev.js:762:60
__callFunction
    MessageQueue.js:306:47
<unknown>
    MessageQueue.js:108:26
__guard
    MessageQueue.js:269:6
callFunctionReturnFlushedQueue
    MessageQueue.js:107:17

the error is in this line:
ActionSheet.showActionSheetWithOptions({

Undefined error on Android with Expo

I'm getting the same error as others who have posted here while trying to use this with Expo. I've tried the auto installation instructions, but can't try the manual installation as Expo doesn't have a gradle file. Is it possible to use this module with Expo? I copy and pasted the sample code into my project, and this is the error:

TypeError: undefined is not an object (evaluating '_reactNativeActionSheet2.default.showActionSheetWithOptions')

Versions:
react-native 0.50.3 (https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz)
react-native-action-sheet 0.0.4

Thanks

Getting Error in Android

I'm getting this error on Android. On iOS works fine.

Any thoughts?

[ANDROID] Error while compiling

Hello after install i can't compile, getting this error.

/Users/dantecervantes/Documents/react-native/EM/CHM/club-house-now-mobile/node_modules/@yfuks/react-native-action-sheet/android/src/main/java/com/actionsheet/ActionSheetPackage.java:13: error: ActionSheetPackage is not abstract and does not override abstract method createJSModules() in ReactPackage
public class ActionSheetPackage implements ReactPackage {
       ^
1 error
:@yfuks/react-native-action-sheet:compileReleaseJavaWithJavac FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':@yfuks/react-native-action-sheet:compileReleaseJavaWithJavac'.
> Compilation failed; see the compiler error output for details

any ideas?

RN version : 0.43.2
REACT version : 16.0.0-alpha.6

Android build error after updating from RN v51 to v55

This is the error that I get when I am building the application or if I try to run it using react-native run-android

Incorrect README

Regarding this part of the README:

// file: android/settings.gradle
...

include ':react-native-action-sheet'
project(':react-native-action-sheet').projectDir = new File(settingsDir, '../node_modules/react-native-action-sheet/android')

Had to change it to: ../node_modules/@yfuks/react-native-action-sheet/android in order to get it to build.

[Android] Font size is too big...?

Nice library, however i think the font size on android is too big.
Any way to change it by option or something?

React native ActionSheetIOS doesn’t seems to be centred when user changes device orientation

Device/simulator is in portrait position. The action sheet is shown on screen and user rotates the device from portrait to landscape, the action sheet doesn’t remain centred. However, it is positioned towards left and bottom.
Please see screenshot for more details.

Icon

Is it possible to add an Icon to the Action sheet ?
Right now using react-native-vector-icons.

Action sheet for android not working

[Android] Deprecation warning: project name contains at least one of the following characters

When building on Android, there is a deprecation warning from the latest versions of gradle:

The project name '@yfuks/react-native-action-sheet' contains at least one of the following characters: [ , /, \, :, <, >, ", ?, *, |]. This has been deprecated and is scheduled to be removed in Gradle 5.0. Set the 'rootProject.name' or adjust the 'include' statement (see https://docs.gradle.org/4.4/dsl/org.gradle.api.initialization.Settings.html#org.gradle.api.initialization.Settings:include(java.lang.String[]) for more details).
	at org.gradle.util.NameValidator.validate(NameValidator.java:38)

This is most likely because of the @ in the project name.

Android build error

08:39 AM $ npm outdated
Package                                   Current           Wanted         Latest  Location
@yfuks/react-native-action-sheet            0.0.3            0.0.3          0.0.4  MyAlert
mobx-logger                                 0.5.0            0.5.0          0.6.0  MyAlert
react                             16.0.0-alpha.12  16.0.0-alpha.12         15.6.1  MyAlert
react-native                               0.46.4           0.46.4         0.47.1  MyAlert

*What went wrong:
A problem occurred configuring project ':@yfuks/react-native-action-sheet'.

Could not resolve all dependencies for configuration ':@yfuks/react-native-action-sheet:_debugPublishCopy'.
Could not find com.facebook.react:react-native:0.41.2.

I double checked the effects from react-native link, looks fine.

Cannot build Android

794cdee

I can't build Android because of missing createJSModules function.

Execution failed for task ':react-native-action-sheet:verifyReleaseResources'

i am facing issue for android release build

> Task :@yfuks_react-native-action-sheet:verifyReleaseResources FAILED

Been trying to spin a React Native app on my Xiaomi Redmi 5 plus,
Android: 8.1.0 OPM1.171019.019

Running with
npx react-native run-android --deviceId 3530(....)
(Some more digits, its the device Id I get from adb devices you get the point)

I get

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':@yfuks_react-native-action-sheet:verifyReleaseResources'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
   > 1 exception was raised by workers:
     com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\aa17181826aeddb58b1ba8fbc7e77e86\appcompat-1.0.2\res\values-v2
6\values-v26.xml:5:5-8:13: AAPT: error: resource android:attr/colorError not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\aa17181826aeddb58b1ba8fbc7e77e86\appcompat-1.0.2\res\values-v2
6\values-v26.xml:9:5-12:13: AAPT: error: resource android:attr/colorError not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\aa17181826aeddb58b1ba8fbc7e77e86\appcompat-1.0.2\res\values-v2
6\values-v26.xml:13:5-16:13: AAPT: error: style attribute 'android:attr/keyboardNavigationCluster' not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\aa17181826aeddb58b1ba8fbc7e77e86\appcompat-1.0.2\res\values-v2
8\values-v28.xml:5:5-8:13: AAPT: error: resource android:attr/dialogCornerRadius not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\aa17181826aeddb58b1ba8fbc7e77e86\appcompat-1.0.2\res\values-v2
8\values-v28.xml:9:5-12:13: AAPT: error: resource android:attr/dialogCornerRadius not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:57:5-88:25: AAPT: error: resource android:attr/fontStyle not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:57:5-88:25: AAPT: error: resource android:attr/font not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:57:5-88:25: AAPT: error: resource android:attr/fontWeight not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:57:5-88:25: AAPT: error: resource android:attr/fontVariationSettings not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:57:5-88:25: AAPT: error: resource android:attr/ttcIndex not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:89:5-125:25: AAPT: error: resource android:attr/startX not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:89:5-125:25: AAPT: error: resource android:attr/startY not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:89:5-125:25: AAPT: error: resource android:attr/endX not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:89:5-125:25: AAPT: error: resource android:attr/endY not found.

     C:\Users\myUser\.gradle\caches\transforms-2\files-2.1\6998b9487de580473d9badf1767ce677\core-1.0.1\res\values\values.
xml:126:5-132:25: AAPT: error: resource android:attr/offset not found.

Anyone?

Execution failed for task ':@yfuks/react-native-action-sheet:compileDebugJavaWithJavac'

Receiving this error when building for Android:

Execution failed for task ':@yfuks/react-native-action-sheet:compileDebugJavaWithJavac'