React-Native-Navigation Icon Alignment

Question

I've been using react-native-navigation in my current react native app and I'm running into a problem. I have a navbar on my app with the left button as a toggle for the drawer menu and the right button is a logo linking to our company website.

The logo is set in the navbar as follows:

icon: require('../logos/BB-Icon.png')

When viewing the app on android I get the following result as seen here.

However, on iOS I get this.

I have searched through the docs and can't seem to find anything that will centre the navbar in iOS in the same way as Android.

Environment:

React Native Navigation version: 1.1.444
React Native version: 0.52.0
Device Info: Android: Samsung Galaxy S9 running Android 8.0.0 // iOS: iPhone X simulator running iOS 11.3

Justin Noel Justin Noel · Accepted Answer · 2019-04-19T18:05:09

In 2.17, you can modify lib/ios/RNNUIBarButtonItem.m like this:

-(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];
    [button setFrame:CGRectMake(0, 0, iconImage.size.width, iconImage.size.height)];
    self = [super initWithCustomView:button];
    self.buttonId = buttonId;
// Align left or right here.
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
    return self;
}

I don't know if you can do something similar in version 1.x though. Hopefully this will help.

React-Native-Navigation Icon Alignment

1 Answers