Stylesheet.create returns objects not numbers

Question

I did a simple test on my local setup, with RN 0.62.2:

const styles = Stylesheet.create({
  container: {
    flex: 1
  }
});

console.log(styles);

Given that in theory Stylesheet is caching the style, I expected a log like this:

{
  container: 120
}

But actually it returns the object:

{
  container: { flex: 1 }
}

Then I tried the same with an expo app (https://snack.expo.io/@agustito37/4a556c) with the same version of RN, and the result was the expected:

{
  container: 120
}

So I am a little confused, some people argue that caching was removed (What is the point of StyleSheet.create); but given expo is returning the identifier I am not sure, is Stylesheet.create working properly or not? Why do I have different results with expo? Could it be that expo has an older version of Stylesheet?

score 0 · Answer 1 · answered May 29 '21 at 14:42

I think this is because react-native-web will register style objects as atomic css classes when you use StyleSheet.create. So it probably is returning an id of what was registered back. If you don't route your style object through StyleSheet.create, you will get inline styles rendered. I discovered this while using UI Kitten with expo/react-native-web and took screenshots of the different css/styles that get generated for each approach:

https://github.com/akveo/react-native-ui-kitten/issues/1266

I think at some point it used to work similarly on react native with intention of optimizing trips across bridge, but apparently that is no longer the case based on the link you included. Interesting!

Stylesheet.create returns objects not numbers

1 Answers1