How to change Button text color in highlighted state for iOS in NativeScript?

Question

I'm trying to change Button text color in a highlighted state on iOS using css.

Even though I can change the text color, it seems like some sort of opacity or other styling is also being applied and I can't figure out what it is or how to override it.

This is how the Button looks in a default state:

And this is how it looks in the highlighted state:

My code:

.facebookBtn {
  background-color: #3b5998;
  color: #fff;
  &:highlighted {
    color: #fff;
    background-color: darken(#3b5998, 5%);
  }
}

I can tell that the color parameter is working because if I change it to #000 it works (ofc it is not black either, rather some sort of transparent black).

I've tried applying opacity: 1; but it didn't help. It works as it should on Android though.

Any suggestions?

Answer 1

You can create a new button class that extends Button that will not get the default highlighted/tapped styling in iOS:

import { isIOS, Button } from '@nativescript/core';

export class PlainButton extends Button {
    createNativeView() {
        if (isIOS) {
            return UIButton.buttonWithType(0);
        }
        return super.createNativeView();
    }
}

To register this as a global component in nativescript-vue, you can do:

Vue.registerElement("PlainButton", () => PlainButton);