A classy approach to manage your react native styles

react-native-use-styles

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 i react-native-use-styles

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 styles 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 'react-native-use-styles';

GlobalStyles({
  global: {
    flex: 1,
    flexDirection: 'row',
  },
});

Namespaced styles

my-namespaced-styles.js

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

export default Styles({
  reused: 'bg:color:green',
  namespaced: '.global .reused color:purple',
});

Namespaced styles are a way to isolate a group of styles for a particular part of your app, it could be styles for a component, a screen, etc. This is a way to group semantically and avoid collisions between your styles. Note that we are exporting the result of our namespaced definition.

Constants

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

GlobalStyles({
  constants: {
    purple: 'purple',
  },
  path: 'color:$purple',
  object: { color: '$purple' },
});

You can define constants in your global or namespaced styles that will be available to reuse with the $ prefix.

Computed and Dynamic styles

Computed styles:

import useStyles from './my-namespaced-styles';

const Component = () ⇒ {
  const isPurple = useState(true);
  const s = useStyles([isPurple]);

  return (
    <Text styles={s`fx:1 &purple`}>
      Hello World!
    </Text>
  );
}

Computed styles are prefixed with the & character. Note that we are passing isPurple as a hook's dependency to track it changes. We can then use this dependency in our computed styles as following.

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

export default Styles({
  computed: {
    purple: ([isPurple]) => ({ color: isPurple ? 'purple' : 'black' });
  }
});

If the dependencies change, only styles with a computed in it will be recomputed.

Dynamic styles:

import useStyles from './my-namespaced-styles';

const Component = () ⇒ {
  const isPurple = useState(true);
  const s = useStyles();

  return (
    <Text styles={s`fx:1 ${isPurple && '.purple'}`}>
      Hello World!
    </Text>
  );
}

And a simple style definition as following:

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

export default Styles({
  purple: { color: 'purple' },
});

There are plenty more things you can do with useStyles, learn more in User Guide

Definition order

You want your global styles to be defined or imported before all the other styles. So just import your global styles at the top of your App.js or your main entry point; before the imports of your custom or navigation component.

App.js

import './globalStyles'; // ultra safe zone
import React from 'react';

import CustomComponent from './CustomComponent';

export default function App() {
  return <CustomComponent />;
}

List of aliases

This is the current list of aliases available, we plan to add more.

bot = bottom;
col = column;
dir = direction;
fx = flex;
lt = left;
rt = right;
bg = background;
txt = text;
jf = justify;
pd = padding;
wd = width;
hg = height;

Performance

This library was created with performance in mind; useStyles has multiple cache layers to avoid unnecessary renders, calculations, and transformations.

GitHub