DEV Community

loading...

Discussion on: Hacktoberfest 2020 — Who's looking for contributors?

Collapse
agustito37 profile image
Agustín

Alo! If you are interested in React Native or not, you are more than welcome to contribute to this new project we are doing to manage Styles.

We have different kinds of issues to work on: code, docs, tests and more.

GitHub logo rootstrap / react-native-use-styles

A classy approach to manage your react native styles.

A classy approach.

Did you ever want to organize your styles properly? This library contains an easy to use API that lets you organize your styles in a classy way.

Installation

npm install react-native-use-styles --save

Usage

Using styles

import useStyles from './my-namespaced-styles';
const component = ()  {
  const s = useStyles();
  return (
    <Text styles={s`.global .namespaced`}>
      Hello World
    </Text>
  );
}

Note that we are classy now, and nobody would deny it. Next we'll define our .global and .namespaced style to use them in our components as we are doing in this example.

Global styles

global-styles.js

import { GlobalStyles } from 'react-native-use-styles';

GlobalStyles({
  global: 'flex:1 fx:dir:row'
});

We are using aliases or shortcuts to define our styles. This is equivalent to do:

import { GlobalStyles } from