0

I want to show images with title in ActionSheet buttons like this:

enter image description here

Code I am using is 

var BUTTONS = [
  'Investigated and Resolved',
  'Under Investigation',
  'Action Required',
  'Urgent Action Required',
  // 'Delete',
  'Cancel',
];
var CANCEL_INDEX = 4;

showActionSheet = () => {
    ActionSheet.showActionSheetWithOptions({
        title: 'Flag the status of the event',
        options: BUTTONS,
        cancelButtonIndex: CANCEL_INDEX,
      },
      (buttonIndex) => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      });
  }

Is there a way to style text or add images?

Adnan Ali
  • 2,890
  • 5
  • 29
  • 50

2 Answers2

2

Found this library for above desired functionality. It works for both android and iOS.

react-native-actionsheet

We can also customise every component of action sheet according to our design.

Adnan Ali
  • 2,890
  • 5
  • 29
  • 50
  • Did you get it to look as the design above? I'm not getting how to get the rounded corners. It seems that it is only possible to change the inside of each options, and not the view for the option itself. – nullforlife Feb 25 '18 at 13:55
  • Our need was about inner design. You can change native module according to your needs though. – Adnan Ali Feb 25 '18 at 16:27
  • this lib doesnt support icon – famfamfam Jul 19 '22 at 17:20
0

ActionSheetIOS is implementing the native UIAlertController, which does not let you customize your text or add images to the buttons. At least not in a non-hacky way, and you surely won't be able to do that via ActionSheetIOS.

You most likely will have to use a custom JS implementation like react-native-actionsheet.

j3491
  • 475
  • 1
  • 5
  • 11