React-native-navigation: [v2] `topBar.buttonColor` is ignored for back button

[ilovett]

topBar: {
  buttonColor: 'red'
}

Did not work, but

backButton: {
  color: 'red'
}

Did

[ujwal-setlur]

This seems to be a difference between iOS and android. On android, I need to use

backButton: {
  color: 'red'
}

on iOS, I need to use:

buttonColor: 'red'

[derrh]

Where are you specifying:

backButton: {
  color: 'red'
}

within topBar? within the screen's static options object? I've tried that everywhere I can think to try and I'm not having any luck affecting the color of the Android back button.

[ujwal-setlur]

I set it in the default options:

 // default options for navigation bar
  Navigation.setDefaultOptions({
    topBar: {
      backButton: { // android
        color: "rgba(60, 109, 240, 0.87)"
      },
      buttonColor: "rgba(60, 109, 240, 0.87)", // iOS
      title: {
        color: "rgba(60, 109, 240, 0.87)",
        fontFamily: "Nunito-Bold",
        fontSize: 18
      }
    },
    bottomTab: {
      iconColor: "black",
      selectedIconColor: "#3c6df0",
      backgroundColor: "white",
      fontFamily: "Nunito",
      fontSize: 10
    }
  });

[oldtinroof]

thanks @ujwal-setlur using both of the button options you set worked for me :)

[HoogsterInc]

Sadly it isn't working for me. It makes the Android back button (topBar) the color I want, but ios is greyed out instead of the color I set.

[henrikra]

@guyca These two params should be easy to merge to one? Now I have to use two different params like @ujwal-setlur showed us

[henrikra]

@ujwal-setlur Looks like your solution is not working 2.0.2462 onwards. Ref: https://github.com/wix/react-native-navigation/issues/3731

[ujwal-setlur]

@henrikra Unfortunately, that seems to be the case :-(. For me, it works on Android, but on iOS, it is ignored.

[ujwal-setlur]

Here is a patch that will address it:

--- a/node_modules/react-native-navigation/lib/ios/RNNBackButtonOptions.h
+++ b/node_modules/react-native-navigation/lib/ios/RNNBackButtonOptions.h
@@ -8,5 +8,7 @@
 @property (nonatomic, strong) NSString* transition;
 @property (nonatomic, strong) NSNumber* showTitle;
 @property (nonatomic, strong) NSNumber* color;
+@property (nonatomic, strong) NSString* fontFamily;
+@property (nonatomic, strong) NSNumber* fontSize;

 @end
--- a/node_modules/react-native-navigation/lib/ios/RNNBackButtonOptions.m
+++ b/node_modules/react-native-navigation/lib/ios/RNNBackButtonOptions.m
@@ -11,12 +11,46 @@ - (void)applyOn:(UIViewController *)viewController {

        UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:nil action:nil];
        viewController.navigationItem.backBarButtonItem = backItem;
-   } else if (self.title) {
-       UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithTitle:self.title
+   } else {
+       NSString *title;
+       
+       if(self.title) {
+           title = self.title;         
+       } else {
+           title = viewController.navigationItem.title;
+       }
+        
+       UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithTitle:title
                                                                     style:UIBarButtonItemStylePlain
                                                                    target:nil
                                                                    action:nil];

+       if (self.color) {
+           [backItem setTintColor:[RCTConvert UIColor:self.color]];
+       }
+       
+       if(self.fontFamily || self.fontSize) {
+           NSNumber* fontSize = self.fontSize;
+           NSString* fontFamily = self.fontFamily;
+           NSMutableDictionary* textAttributes = [[NSMutableDictionary alloc] init];
+           UIFont *font = nil;
+
+           
+           if (!fontSize) {
+               fontSize = [[NSNumber alloc] initWithInt: 18];
+           }
+           
+           if (fontFamily) {
+               font = [UIFont fontWithName:fontFamily size:[fontSize floatValue]];}
+           else {
+               font = [UIFont systemFontOfSize:[fontSize floatValue]];
+           }
+           [textAttributes setObject:font forKey:NSFontAttributeName];
+   
+           [backItem setTitleTextAttributes:textAttributes forState:UIControlStateNormal];
+           [backItem setTitleTextAttributes:textAttributes forState:UIControlStateHighlighted];
+       }
+       
        viewController.navigationItem.backBarButtonItem = backItem;
    }

This will allow you to specify:

  Navigation.setDefaultOptions({
    topBar: {
      backButton: {
        color: "red",
        fontFamily: "Nunito",
        fontSize: 12,
        title: "boo"
      },
      title: {
        color: "red",
        fontFamily: "Nunito-Bold",
        fontSize: 18
      }
    }
  });

[terreb]

Is it still supposed to work? This does not change topBar button back button color on iOS for me. react-native-navigation 2.0.2485.

[ujwal-setlur]

Please check PR #3755

[henrikra]

This is fixed in version 2.0.2567. Please close and reopen if the bug is still there :)

[ricocrescenzio95]

I'm not able to change colors in Navigation.push. It works only with setDefaultOptions. Using 2.0.2569

[DenisBogatirov]

@henrikra Not working for me, 2.0.2577 only for iOS
On android works fine

[terreb]

Still not working on iOS, v. 2.0.2582

[GibranPolonsky]

Still not working on IOS, v.2.0.2584

[immortalx]

@ujwal-setlur setDefaultOptions is working fine on v2.1.2

[alexcoady]

For me this works on iOS only once I use:

backButton: {
  color: COLOR.WHITE, // For back button text
},
buttonColor: COLOR.WHITE, // For custom top bar buttons

The only issue I see here is that backButton.coloris not documented

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[davidperrenoud]

This seems to work for me on iOS, but it sets both the button and the _back_ button colors:

Navigation.setDefaultOptions({
  topBar: {
    backButton: {
      color: '#ffffff'
    }
  }
})