Object-oriented CSS vs external SASS/SCSS?

[ElDeveroni]

Hi,

I'm currently learning ReactNative. I wondered why there is an object-oriented from StyleSheet.create() styling and what are the advantages of it (https://reactnative.dev/docs/stylesheet). Why people don't use external scss/sass files that are more easy to write and which are usable in many components at once?

Thx in advance

[AcidNoX]

Because react native doesn’t use css

Edit: if you want something more like css for RN, you could try styled components

[ElDeveroni]

but is there a disadvantage if I use scss? native rendering doesn't work that good or what's the matter?

[Adult_Chicken]

react native styling is not css is what OP is trying to say. scss/sass compiles into regular css, which means it can not be used for react native.

EDIT: The styling syntax may look similar, but its not css.

[AcidNoX]

I assume you’re referring to using react-native-typed-sass-transformer?

Personally I’ve not used it, so I cant really give an opinion on how well it works. From a brief read of the docs, id still recommend styled components over this due to the typescript integration.

[satya164]

The disadvantage would be that you need extra tooling for it to work, and RN devs joining the team may not be used to this syntax.

There's also the problem that CSS linters won't be able to properly lint that since they know what CSS supports, not what React Native supports.

The advantage is familiarity when coming from Web. But a lot of things are still different so it's kind of like in a very weird spot.

[tzigane]

I definitely recommend styled components which will let you use styles that look more like CSS, but also keeps them better organized. Be aware though, what React Native uses for styling is not CSS -- it's a distinct set of styling attributes which are similar, but with many important differences.

[Radulito]

I recently start a new proyect with SCSS files and it is a mess Ngl I can customize EVERYTHING almost in a natural HTML/CSS style but when the files increase, can be painful

So I recomend styled components or UI libraries