React-native-navigation: Increasing Tappable Area of Top Bar Buttons

[calendee]

Issue Description

When using custom icons for left/right buttons, the tappable area is significantly reduced as compared to native iOS icons.

Is there any way to improve the tappable area of custom buttons to extend to the edge of the screen and more vertically?

Steps to Reproduce / Code Snippets / Screenshots

Example of the tappable area of native iOS icons created using :

rightButtons: [
  {
    id: "cart",
    systemItem: "add"
    color: "gray"
  }
]

Versus the tappable area of custom icons created using:

rightButtons: [
  {
    id: "cart",
    icon: images.shopping_cart,
    color: "gray"
  }
]

Environment

• React Native Navigation version: 2.17.0
• React Native version: 0.59.4
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone X 12.2 simulator in Xcode 10.1

[calendee]

When using text for the buttons, they also have the full tappable area that native options do:

leftButtons: [
  {
    id: CLOSE_ID,
    enabled: true,
    color: "black",
    text: "Cart",
  },
],

[calendee]

I'm finding that if I make this change in RNNUIBarButtonItem.m, I get a more tappable area. However, I'm still not able to get the button to be tappable to the edge of the device.

-(instancetype)init:(NSString*)buttonId withIcon:(UIImage*)iconImage {
    UIButton* button = [[UIButton alloc] init];
    [button addTarget:self action:@selector(onButtonPressed) forControlEvents:UIControlEventTouchUpInside];
    [button setImage:iconImage forState:UIControlStateNormal];
// Increase the rectangle to increase tappable area
    [button setFrame:CGRectMake(0, 0, iconImage.size.width + 40, iconImage.size.height + 20)];
    self = [super initWithCustomView:button];
    self.buttonId = buttonId;
// Force the icon to align to the left of the rectangle
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
    return self;
}

[ItsNoHax]

I went ahead and assigned @yogevbd because this is something we are also running into.

[thinklinux]

Yeap I'm running into this one too. If you have guys have some suggestions where I can start from I can take a look.

[GioLogist]

+1 for this!

[minhloi]

This issue can be resolved by using the built-in initWithImage instead of initWithCustomView . If you use initWithImage, you will have the tappable area like the built-in system icons so it covers the edge area.

Any reason for using initWithCustomView to set button icon?

Here is the fix:
In RNNUIBarButtonItem.m

-(instancetype)init:(NSString*)buttonId withIcon:(UIImage*)iconImage {

        // ORGINAL:
        //UIButton* button = [[UIButton alloc] init];
    //[button addTarget:self action:@selector(onButtonPressed) forControlEvents:UIControlEventTouchUpInside];
    //[button setImage:iconImage forState:UIControlStateNormal];
    //[button setFrame:CGRectMake(0, 0, iconImage.size.width, iconImage.size.height)];
    //self = [super initWithCustomView:button];
    //self.buttonId = buttonId;

         // FIX:
    self = [super initWithImage:iconImage style:UIBarButtonItemStylePlain target:self action:@selector(onButtonPressed)];
    self.buttonId = buttonId;

    return self;
}

[AlexDM0]

The same goes for custom components, not just icons. I hope this can be addressed :) Keep up the good work guys!

[prgpascal]

Same issue here :/
I hope this will be resolved soon.

[bneigher]

backButton has a good hitSlop, would be cool to be able to set negative insets or something for left/right buttons

[bneigher]

@minhloi your suggestion is really good. Should be changed in the source for sure

[brsaylor2]

The solution from @minhloi worked for me as well.

[danilobuerger]

PR at #6482