Menu
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?
561
With React Native, you style your application using JavaScript. All of the core components accept a prop named style . The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color .
Organizing React Native styles A nice approach is to create a folder for each component or set of components. In our component's subdirectory, we can add a file called style. js . In here, create the component-specific stylesheet which we will ultimately import into our component file.
Style attributes React Native mostly use CSS attributes with camelCase instead of kebab-case for styling.
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.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
