Styled Components for React Native the way they should have been

To be honest, I've always felt that using 💅🏼styled-components to style View, Text, TouchableOpacity and other native components was very cumbersome.

React Native does not really work with DOM, so there is no real css engine underneath. This means that a lot of css functionality is simply not available and 90% of the time you will be using very basic css attributes: flex layout, colors, fonts, etc..

Then there is an issue with template strings - it is NOT easy to use them! Sometimes you end up creating nested template strings and needing to have special VS Code extensions to write css, and remember to put ; at the end of each line, etc..

And after you've managed all that, styled-components will generate the React Native styles from your template string and will pass them to the component. Yeah, cool...

So I thought to my self - why not use the native styles in the first place and avoid all the template string mess?

I googled a bit and found this this article, which inspired me to create an alternative to styled-components for React Native.

And thus the 💄styled-rn package was born :)

Why it better than 💅🏼styled-components/native?

Well, first of all, using styled components in React Native should be fun, but as I already mentioned, template strings are not fun.

Also:

styled-rn gives you access to ALL React Native style props

styled-rn is faster because it does not do tedious string template processing

styled-rn is easier to use (again, no messy string templates)

styled-rn is fully typed and has a nice API

styled-rn supports component attributes, custom props, theme via ThemeProvider, multiple style objects and more..

styled-rn has a shorter name ;)

Usage:

npm i styled-rn

The styled-rn API is almost one-to-one with the styled-components API, but everything happens in Javascript with full Typescript support:

import { styled } from "styled-rn";

export const Container = styled.View({
  flexDirection: "row",
  backgroundColor: "cyan",
});

Of course you can style any other component as well:

// Use with any component
export const CoolAndBoldComponent = styled(CoolComponent, {
  fontWeight: "bold",
});

You can also pass props to your components via the attrs key:

// Pass props to the styled component (attrs)
export const NonWrappingText = styled.Text({
  color: "blue",
}, {
  attrs: {
    numberOfLines: 1,
    ellipsizeMode: 'tail',
  }
});