ignite-bowser icon indicating copy to clipboard operation
ignite-bowser copied to clipboard

Why dont use styleSheet.create in styling screen?

Open viralS-tuanlv opened this issue 4 years ago • 3 comments

Hi team, i saw the project generated by ignite bowser use style like:

const CONTAINER: ViewStyle = {
  backgroundColor: color.transparent,
...
}

Its perfomance not better than:

const styles = StyleSheet.create({
  container: {
    backgroundColor: color.transparent,
...
  },
});

So why we dont use StyleSheet?

viralS-tuanlv avatar Feb 21 '20 07:02 viralS-tuanlv

Ok, no one reply. And i found the result: at rn 0.57 or bellow, we should use StyleSheet for improve perfomance. But now from 0.6x no diffirent between create style using plain object and StyleSheet. So still use plain object. Reference: https://stackoverflow.com/questions/38958888/react-native-what-is-the-benefit-of-using-stylesheet-vs-a-plain-object

vantuan88291 avatar Feb 26 '20 15:02 vantuan88291

Thanks for the followup. I was wondering that myself.

hedgerh avatar Feb 29 '20 09:02 hedgerh

Hi team, i saw the project generated by ignite bowser use style like:

const CONTAINER: ViewStyle = {
  backgroundColor: color.transparent,
...
}

Its perfomance not better than:

const styles = StyleSheet.create({
  container: {
    backgroundColor: color.transparent,
...
  },
});

So why we dont use StyleSheet?

As @vantuan88291 mentioned, there is no performance benefit to using the Stylesheet API. The reason we don't use it is because we find that it is more verbose to type.

It's much easier to type a style object like this:

const CONTAINER: ViewStyle = {
  ...styles
}

harrisrobin avatar Aug 21 '21 10:08 harrisrobin