react-native-zstyle

ZSTYLE

A utility-first styling library for React Native

About zstyle

zstyle is a utility-first styling library for React Native largely inspired by Tailwindcss, a utility-first CSS framework for rapid UI development.

Installation

1 . Install the package:

yarn add react-native-zstyle

2 . Install the following dependencies:

react-native-svg is required to use the ZIcon component.

yarn add react-native-svg

3 . Link the dependencies:

React Native 0.60 and higher

cd ios && pod install && cd ..

React Native 0.59 and lower

react-native link react-native-svg

4 . Create a Zstyle config file:

Copy the 'zstyle.js' file into the root folder of your React Native project:

cp ./node_modules/react-native-zstyle/src/zstyle.js .

zstyle comes with standard utilities out of the box with some of them being customisable such as colors, margins, paddings, etc...

The 'zstyle.js' file is the place to setup all your customs styling utilities that will be available in the Z components everywhere in your project.

Documentation

A first version of the official documentation is available here: react-native-zstyle.com

This documentation is explaining the concept of the library as well as listing all availble utilities.

This is a work in progress it still need to get styling examples you can achieve with zstyle.

License

The zstyle library is open-sourced software licensed under the MIT license.