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.
Let’s check how we can fix that out?
Here I am going to style two text components and this is my style:
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.
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.