Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Shopify/restyle

A type-enforced system for building UI components in React Native with TypeScript.
https://github.com/Shopify/restyle

Last synced: about 2 months ago
JSON representation

A type-enforced system for building UI components in React Native with TypeScript.

Awesome Lists containing this project

README

        

![Restyle Image](./Restyle.png)


Getting started
Installation
Playground
Discord

**Build a consistent, themed UI in minutes.**

![RestyleTheme 2020-02-25 17_43_51](https://user-images.githubusercontent.com/688415/75268245-91084b80-57f7-11ea-905b-2a9046aa5ca3.gif)

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:

```bash
yarn add @shopify/restyle
```

```bash
npm install @shopify/restyle
```

```bash
npx expo install @shopify/restyle
```

## Usage

See [Usage](https://shopify.github.io/restyle/#usage) in the documentation, or see below for the fixture app.

## App / Playground

The [fixture](https://github.com/Shopify/restyle/tree/master/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:

1. `cd documentation`
2. `yarn`
3. `yarn start`
4. Go to http://localhost:3000/restyle/

## Migrating to restyle v2

Read more about migration to v2 [here](https://shopify.github.io/restyle/guides/migrating-to-v2)

## Inspiration

Restyle is heavily inspired by [https://styled-system.com](https://styled-system.com/).

## Contributing

For help on setting up the repo locally, building, testing, and contributing
please see [CONTRIBUTING.md](https://github.com/Shopify/restyle/blob/master/CONTRIBUTING.md).

## Code of Conduct

All developers who wish to contribute through code or issues, take a look at the
[CODE_OF_CONDUCT.md](https://github.com/Shopify/restyle/blob/master/CODE_OF_CONDUCT.md).

## License

MIT, see [LICENSE.md](https://github.com/Shopify/restyle/blob/master/LICENSE.md) for details.