Styling of React Native Component Using Stylesheet

Styling of React Native Component Using Stylesheet

In this post, you will see the Styling of React Native Component Using Stylesheet. React Native StyleSheet is similar to CSS StyleSheets which is used in web development. React Native provides a number of basic components which can be used directly but according to the application’s theme, we have to customize the components sometimes and that is why we use StyleSheet.

Similar to CSS we can use StyleSheet in both ways. By making a separate StyleSeet or inline.

Separate StyleSheet

You can easily create your StyleSheet as shown below. You can use style={styles.container} to access the StyleSheet for any element.

Here StyleSheet.create will create a style sheet and assign it to the variable styles. You can see the structure to define style is the same as making a JSON. After making a StyleSheet we can use it like the below example

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.

Inline Style

We can also customize the components inline. For example

Here we have an Image which needs to define width , heightand that can also be done by adding Inline style.

For more about React Native UI Kits, you can visit the post Best UI Libraries for React Native.

That was the React Native StyleSheet. If you have any doubt or you want to share something about the topic you can comment below or contact us here. The remaining components will be covered in the next article. Stay tuned!

Hope you liked it. 🙂

How useful was this post?

Click on a star to rate us!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

About React will use the information you provide on this form to be in touch with you and to provide updates and marketing.