hub / github.com/Shopify/restyle

github.com/Shopify/restyle @v2.4.5 sqlite

repository ↗ · DeepWiki ↗ · release v2.4.5 ↗

37 symbols 114 edges 40 files 0 documented · 0%

README

Restyle Image

Getting started • Installation • Playground • Discord

Build a consistent, themed UI in minutes.

RestyleTheme 2020-02-25 17_43_51

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.

Extension points exported contracts — how you extend this code

ColorProps (Interface)

(no doc)

src/restyleFunctions.ts

ResponsiveBaseTheme (Interface)

(no doc)

src/types.ts

OpacityProps (Interface)

(no doc)

src/restyleFunctions.ts

KnownBaseTheme (Interface)

(no doc)

src/types.ts

VisibleProps (Interface)

(no doc)

src/restyleFunctions.ts

BaseTheme (Interface)

(no doc)

src/types.ts

BackgroundColorProps (Interface)

(no doc)

src/restyleFunctions.ts

Dimensions (Interface)

(no doc)

src/types.ts

Core symbols most depended-on inside this repo

createRestyleFunction

called by 27

src/createRestyleFunction.ts

composeRestyleFunctions

called by 6

src/composeRestyleFunctions.ts

createRestyleComponent

called by 5

src/createRestyleComponent.tsx

useRestyle

called by 3

src/hooks/useRestyle.ts

Shape

Function 27

Interface 10

Languages

TypeScript100%

Modules by API surface

src/types.ts5 symbols

src/restyleFunctions.ts5 symbols

src/createRestyleFunction.ts4 symbols

src/utilities/getValueForScreenSize.ts2 symbols

src/utilities/getThemeValue.ts2 symbols

src/hooks/useRestyle.ts2 symbols

src/createVariant.ts2 symbols

src/composeRestyleFunctions.ts2 symbols

src/utilities/isResponsiveObjectValue.ts1 symbols

src/utilities/getResponsiveValue.ts1 symbols

src/typeHelpers.ts1 symbols

src/test/TestContainer.tsx1 symbols

Used by 2 indexed graphs manifest dependencies, hub-wide

github.com/tamagui/tamagui

github.com/wcandillon/can-it-be-done-in-react-native

Dependencies from manifests, versioned

@babel/core7.20.0 · 1×

@babel/preset-env7.20.0 · 1×

@babel/runtime7.20.0 · 1×

@docusaurus/core2.2.0 · 1×

@docusaurus/module-type-aliases2.2.0 · 1×

@docusaurus/preset-classic2.2.0 · 1×

@easyops-cn/docusaurus-search-local0.33.6 · 1×

@mdx-js/react1.6.22 · 1×

@react-native/eslint-config0.72.2 · 1×

@react-native/metro-config0.72.11 · 1×

@shopify/eslint-plugin42.1.0 · 1×

@shopify/restylelink:../ · 1×

For agents

$ claude mcp add restyle \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact