10:47 How to extend styles in React-Native?

How to extend styles in React-Native?

By Anonymous Updated: 05 Oct, 2018

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?



//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js





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.



Don’t miss out
React.js First Attempt
Build iOS App with React Native and Expo

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:


https://gist-it.appspot.com/github/georgioupanayiotis/React-Native-Examples/blob/master/extend-styles/example-style.js?footer=minimal


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
👇


https://gist-it.appspot.com/github/georgioupanayiotis/React-Native-Examples/blob/master/extend-styles/example-refine-style.js?footer=minimal


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


https://gist-it.appspot.com/github/georgioupanayiotis/React-Native-Examples/blob/master/extend-styles/render.js?footer=minimal


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.


The post How to extend styles in React-Native? appeared first on Panayiotis Georgiou.