Hide action sheet on outside press

[gamingumar]

Can I close action sheet when user taps outside of it?

[shubham696]

Can I close action sheet when user taps outside of it? do you get any solution for this?

[naytun]

If you put cancelButtonIndex={??} option will enable close on press on backdrop.

[Juman8]

check destructiveButtonIndex in your source. you can skip it and it'll work

[CorpOnThron]

@naytun was entirely right with his first version of the comment, not sure why you changed it. This should do the job(at least worked for me): cancelButtonIndex={-1}

Update: I understand why, it will replace the last button in the list with a destructive button.

[CorpOnThron]

Okay, I finally found a way to fix it. For that, you will need to patch the file in node modules and save it. here are the steps:

1. You will require to install "patch-package" into your project: a) Add "scripts": { "postinstall": "patch-package" } to your package.json b) run npm i patch-package
2. Then you will need to go to Your_Project\node_modules\react-native-actionsheet\lib\ActionSheetCustom.js
3. Function 'hide' is what you need. For my purposes I placed it in "_cancel" function, however you can play around with location: _cancel = () => { this.hide(); //add this line! const { cancelButtonIndex } = this.props // 保持和 ActionSheetIOS 一致， // 未设置 cancelButtonIndex 时，点击背景不隐藏 ActionSheet if (utils.isset(cancelButtonIndex)) { this.hide(cancelButtonIndex) } }
4. Run npx patch-package react-native-actionsheet. This will create a new folder in your project that will consist "your patch" for this component.
5. Commit your changes to git and don't forget to tell your team to run "npm install"=)

[numandev1]

remove destructiveButtonIndex and use cancelButtonIndex will gives dismiss-able backdrop. I have created PR https://github.com/facebook/react-native/pull/31972 after approving this PR you can change the color of cancel button by cancelButtonTintColor