Styling your RN app, easily

Mateo Silguero — Sun, 17 May 2020 03:17:53 +0000

Recently i've published Consistencss, an utility first style toolkit for React Native, inspired by tailwindcss.

Consistencss has not css at all, but is a JS library used to style your RN apps. how it works ?

Consistencss generates a dynamic object of styles like this:

C.m4 -> returns { margin: 16 },

and so:

Usage

import { View } from 'react-native';
import C, { apply } from 'consistencss';

const App = () => {
  return (
    <View style={apply(C.m4, C.p2, C.bgRed)}>
      <Text style={C.textRed}></Text>
      <Text style={[C.textBlue, C.m6]}></Text>
      <Text style={styles.subtitle}></Text>
    </View>
  );
};

// apply also accepts strings
const styles = {
  title: apply(C.font6, C.uppercase),
  subtitle: apply('capitalize', C.mt2),
};

Take a look !

DEV Community: Mateo Silguero

Styling your RN app, easily

Usage