![](https://hackernoon.com/hn-images/1*3PzPVY97k8VOubBBTIdfqQ.png)

I came to [React Native](https://hackernoon.com/tagged/react-native) world recently. However, I do have a lot of experience with Reactjs environment. I used to use [Glamorous](http://glamorous.rocks/) lib (nowadays evolved into [Emotion.sh](https://emotion.sh/)) for maintaining of CSS styles in my Reactjs apps. And that was exactly what I have been missing in React Native space.

I did not want to use anything complex because my React Native app should be simple. However, I still wanted some kind of abstraction because otherwise the project code boilerplate can get messy quite easily. Mainly, I wanted to be able to use React Native elements, easily modify its styles, create a reusable components, and overwrite its styles in its descendants.

#### Requirements

1.  Simple and familiar interface.
2.  Works with React Native elements (and any other React component).
3.  Component styles [composition](https://hackernoon.com/tagged/composition).
4.  No need use of React Native _StyleSheet_ (enhanced _style_ property).

Here is an example:

1.  I want to use built-in _Text_ component.
2.  Inherit its styles, add custom ones and create a component which will be available across my app.
3.  Inherit this custom component, modify its styles (or add new ones) and render it on my screen.

It can be done quite easily with a simple component abstraction/composition:

  import { Text } from 'react-native'  
  
  const Headline = styled(Text)(() => {  
    return {  
      fontSize: 20,  
      textAlign: 'center',  
      margin: 10  
    }  
  })  
  
  const BoldHeadline = styled(Headline)(() => {  
    return {  
      fontWeight: 'bold'  
    }  
  })

  <BoldHeadline {...{style: {backgroundColor: 'red'}}}>My Headline</BoldHeadline>

Our abstraction which allows us to do this, is wrapped in **styled** method which can looks like this:

import React from 'react'  
import { StyleSheet } from 'react-native'  
  
const styled = Component => {  
  const comp = styles => {  
    return ({ style, children, ...rest }) => {  
      let composed = \[\]  
      if (styles) {  
        composed = \[  
          ...composed,  
          StyleSheet.create({  
            styles  
          }).styles  
        \]  
      }  
  
      if (Array.isArray(style)) {  
        composed = \[...composed, ...style\]  
      } else if (style) {  
        composed = \[  
          ...composed,  
          StyleSheet.create({  
            style  
          }).style  
        \]  
      }  
  
      return <Component {...{ style: composed }} {...rest}>{children}</Component>  
    }  
  }  
  
  return arg => {  
    if (typeof arg === 'function') {  
      return comp(arg())  
    }  
  
    return comp()(arg)  
  }  
}  
  
export default styled

Styled function allows us to use its components in two different ways:

1.  **As a component wrapper (for the composition).**

It allows us to take any component, overwrite its styles and return a new component. As is shown in the example above:

const Headline = styled(Text)(() => {  
   return {} // your styles goes here  
})

const InheritedHeadline = styled(Headline)(() => {  
   return {} // another styles here  
})

2\. **As a component “enhancer”.**

If you don’t want to define any styles at component declaration level but you want to be able to use _style_ property later on:

const CustomButton = styled(Button)

<CustomButton {...{style: {backgroundColor: 'black'}}}>Label</CustomButton>

**Styled** function is very simple as you can see, but it allows us to do quite a lot of stuff for better components maintenance, reducing code complexity and better code readability.

I took the code above and created npm package called [**styled-react-native**](http://bit.ly/2lK3vMn)**.**

[**jsifalda/styled-react-native**  
_styled-react-native - For easy styling of react native components and its style composition_github.com](https://github.com/jsifalda/styled-react-native "https://github.com/jsifalda/styled-react-native")[](https://github.com/jsifalda/styled-react-native)

You can start using it as well by adding package into your dependencies with command:

npm install --save styled-react-native

and in your project:

import styled from "styled-react-native"  
const CustomText = styled(Text)

Thanks for reading! I hope you found this helpful. 🤩

By the way, I’m now on [Twitter](https://twitter.com/JSifalda) too if you’d like to follow more of my code hacks.

Twitter

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Advanced React Native styling with a few lines of code

Too Long; Didn't Read

Company Mentioned

@JSifalda

RELATED STORIES