A blog for technology, SEO tips, website development and open source programming.

How to extend styles in React-Native?

0 4,190

The nice thing about styles in React Native is that everything is JavaScript. 😂

React Native uses a JavaScript class called StyleSheet that resembles normal CSS in many ways.

In many cases we have to create different styles to style different components, correct?

And most of them will have duplicate elements, correct?

Check out How to extend styles in React-Native?





What are the disadvantages of this problem?

  • You will clutter your file with duplicate lines of code.
  • It will increase the file size and increase the application size.
  • Not very efficient way of coding.
  • Limited reusability.

[alert type=white ]
Don’t miss out
React.js First Attempt
Build iOS App with React Native and Expo
[/alert]

Let’s check how we can fix that out?

Code Example

Here I am going to style two text components and this is my style:

Follow me on Instagram

Now, what we can do to fix it?

Its simple…create a parent style and inherit from it.

Its not hard as it seems 😉

Therefore, the above code can be transformed like this
👇

In this way you can extend it to any number of components and even across the application by defining it in a styles file.

Render

The render will look like this

Much cleaner code.

There you have it: a useful overview of How to extend styles in React Native.

Please leave your valuable comments below, feedback much appreciated.

That’s it for now. 🙂

If you liked this article, then please subscribe to my YouTube Channel for video tutorials.

You can also find me on Twitter and Facebook.

Leave a Reply

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More