How do styles match numbers in React Native?

Question

I worked on a mobile application using React Native.

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

Now I have witnessed something special here. I see that my styles are matched with some number. Ideally, I expected the object to be present when I try to print the style.

Below 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 the following. I'm trying to understand what these numbers are.

Answer 1

The idea behind StyleSheet.create is to reduce the number of times a style sheet object has been created. Since the object will always have the same values, it makes sense to do this, and this is a very simple way to save processing time. The number you get is just a reference to the created StyleSheet object.

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