search

beefe / react-native-actionsheet

An elegant ActionSheet component for React Native.
MIT License
1.35k stars 345 forks source link

Hide action sheet on outside press #81

Open gamingumar opened 5 years ago

gamingumar commented 5 years ago

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

shubham696 commented 5 years ago

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

naytun commented 4 years ago

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

Juman8 commented 4 years ago

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

CorpOnThron commented 4 years ago

@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 commented 4 years ago

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 commented 3 years ago

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