Platform-specific-css in Nativescript Angular

Question

I'm trying to apply platform-specific-css in my Nativescript Angular Mobile App.

For example, for the home component, currently I have home.component.tns.css to style it. But I also need to handle some styles separately for IOS and Android.

Here's what I have tried:

Add a css file named as home.component.ios.tns.css. Not working, the css in this file won't be applied.
Add a css file named as home.component.ios.css. This time the css is applied. But I lost the css in home.component.tns.css
I import home.component.tns.css in home.component.ios.css like this: @import './home.component.tns.css'; This time I got an error saying NativeScript encountered a fatal error: Error: Could not resolve home.component.tns.css

I guess I wasn't using the platform specific css in the right way. Anyone can help?

Tyler Blake · Accepted Answer · 2019-10-10 01:59:08Z

2

Unless you are doing a shared-project (web + NS in 1 project).

To set up platform specific styling in NativeScript you need to name your files like this:

home.component.ios.css

home.component.android.css

In your home.component.ts you'll set up your styles binding like this:

styleUrls: ['./home.component.css']

NativeScript will take the respective platform .css file and generate the contents of the base home.component.css file with the platform specific style sheet .ios.css or .android.css.

answered Oct 10, 2019 at 1:59

Tyler Blake

1364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Viv Over a year ago

The Angular CLI automatically generated 5 files for my component, including: XX.component.html, XX.component.css, XX.component.ts, XX.component.tns.html, and XX.component.tns.css. I'm using the files with tns suffix to develop my nativescript project. Currently I do have imported home.component.css in styleUrls, and the styles in ...tns.css will work(that's all good). My problem is, if I create the file home.component.ios.css, only this file will work, and the ...tns.css file will be ignored.

ThibaultG · Accepted Answer · 2019-10-10 02:51:02Z

0

You can't import home.component.tns.css because there will only by home.component.css available.

You can put all your css in home.component.ios.css.
Or you can use the .android and .ios classes like :

.ios .myClass {
    background-color: red;
}

.android .myClass {
    background-color: blue;
}

answered Oct 10, 2019 at 2:51

ThibaultG

834 bronze badges

2 Comments

Viv Over a year ago

Is there a way to make both home.component.ios.css & home.component.tns.css available? Cause I do need the ....tns.css file to store some shared css code, and ....ios.css / ....android.css file to store platform specific css.

Juliano Vargas Jan 29 at 14:05

Any ideas did you ever find out if is possbile? I have the same issue, as soon I create a file home.component.ios.css then home.component.css doesn't work anyomre.

Otpidus · Accepted Answer · 2019-12-06 04:02:30Z

0

The platform specific files should be like:

yourcustom.component.css
styles.component.ios.css
styles.component.android.css

answered Dec 6, 2019 at 4:02

Otpidus

5195 silver badges5 bronze badges

1 Comment

Juliano Vargas Jan 29 at 12:27

Do we need to import in component.ts file ? like this: styleUrls: ["./yourcustom.component.css", "./styles.component.ios.css", "./styles.component.android.css"], Do the naming convention prefix should be styles ?

Collectives™ on Stack Overflow

Platform-specific-css in Nativescript Angular

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related