bradparks / glamorous-native__react-native-component-styling-solved

React Native component styling solved💄

glamorous-native

glamorous for React Native. React component styling solved with an elegent (inspired) API, small footprint, and great performance. For full feature documentation, see the glamorous docs.

Read the glamorous intro blogpost

The Problem

In React Native, we write styles within our JS, but you don't like having to create entire component functions just for styling purposes. You don't wnat to give a name to something that's purely style-related. And it's kind of annoying to do the StyleSheet.create, conditionals, and props-forwarding song and dance.

For example, this is what you have to do with StyleSheet:

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: 'center'
  }
})
function MyStyledText ({style, ...rest}) {
  return (
    <Text
      style={[styles.text, style]}
      {...rest}
    />
  )
}

This solution

With glamorous-native, that example above looks as simple as this:

const MyStyledText = glamorous.text({
  fontSize: 20,
  textAlign: 'center';
})

In fact, it's even better, because there are a bunch of features that make composing these components together really nice!

Oh, and what if you don't care to give MyStyledText a name? If you just want a text that's styled using StyleSheet? You can do that too:

import {Text} from 'glamorous-native';

function Section() {
  return (
    <Text
      fontSize={20}
      textAlign="center"
    >
      Hello world!
    </Text>
  )
}

See more examples!

So that's the basics of this solution.. Let's get to the details!

Installation

TBD

Inspiration

This package was inspired by the work from people's work on the following projects:

• glamorous
• styled-components
• jsxstyle

Contributing

This project is in active development approaching completion. Your contributions are welcome! Take a look at the contributing guide and browse through the good first task issues.