How are styles mapped to numbers in React Native?

Question

I was working on a mobile application using React Native.

I created small set of styles using ReactNative.StyleSheet and use them in my components.

Now i witnessed something peculiar here. I see that that my styles are mapped to some number. Ideally i was expecting an object to be present when I tried printing the style.

Following is my css:-

const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems:'center',
    width: null,
  },
  logo: {
    width:110,
    marginTop:84,
    resizeMode:'contain'
  },
  mascot:{
    width:145,
    height:150,
    marginTop:73,
    resizeMode:'contain'
  },
  button:{
    backgroundColor:'#4A90E2',
    width:300,
    alignSelf:'center',
  },
  buttonContainer:{
    marginTop:70
  }
})

and console.log(style) shows me following. I am trying to understand what are these numbers?

Answer 1

The idea of StyleSheet.create is to reduce the number of times the stylesheet object is created to one. Since the object will always have the same values, it makes sense to do that and it is a very simple way of saving some processing time. The number that you get is simply a reference to the created StyleSheet object.

Something similar happens with static images as well. If you console.log the value of require('./myImage.png'), you will also get a number. Again, for the same optimization reasons.