I came to world recently. However, I do have a lot of experience with Reactjs environment. I used to use lib (nowadays evolved into ) for maintaining of CSS styles in my Reactjs apps. And that was exactly what I have been missing in React Native space. React Native Glamorous Emotion.sh 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 Simple and familiar interface. Works with React Native elements (and any other React component). Component styles . composition No need use of React Native (enhanced property). StyleSheet style Here is an example: I want to use built-in component. Text Inherit its styles, add custom ones and create a component which will be available across my app. 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 method which can looks like this: styled 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: 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 property later on: style const CustomButton = styled(Button) <CustomButton {...{style: {backgroundColor: 'black'}}}>Label</CustomButton> 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. Styled I took the code above and created npm package called styled-react-native . _styled-react-native - For easy styling of react native components and its style composition_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 too if you’d like to follow more of my code hacks. Twitter

Twitter

Too Long; Didn't Read

Making security fun one episode at a time

Advanced React Native styling with a few lines of code

Too Long; Didn't Read

Company Mentioned

George aka Jiri Sifalda

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Advanced React Native styling with a few lines of code

Too Long; Didn't Read

Company Mentioned

George aka Jiri Sifalda

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES