Awesome

Restyle Image

<div align="center"> <a href="https://shopify.github.io/restyle/">Getting started</a> • <a href="https://shopify.github.io/restyle/#installation">Installation</a> • <a href="https://github.com/Shopify/restyle/tree/master/fixture">Playground</a> • <a href="https://discord.gg/k2gzABTfav">Discord</a> </br></br>

Build a consistent, themed UI in minutes. </br> </br>

RestyleTheme 2020-02-25 17_43_51 </br> </br>

</div>

The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus.

This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum.

Installation

Add the package to your project using one of the following:

yarn add @shopify/restyle

npm install @shopify/restyle

npx expo install @shopify/restyle

Usage

See Usage in the documentation, or see below for the fixture app.

App / Playground

The fixture is an example app to showcase the library's usage.

Running the Documentation site locally

To run the Documentation site locally, please follow the steps below:

cd documentation
yarn
yarn start
Go to http://localhost:3000/restyle/

Migrating to restyle v2

Inspiration

Restyle is heavily inspired by https://styled-system.com.

Contributing

For help on setting up the repo locally, building, testing, and contributing please see CONTRIBUTING.md.

Code of Conduct

All developers who wish to contribute through code or issues, take a look at the CODE_OF_CONDUCT.md.

License

MIT, see LICENSE.md for details.