Getting started • Installation • Playground • Discord

Build a consistent, themed UI in minutes.

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:

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

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.

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and adheres to Semantic Versioning.

Next

2.4.5 - 2025-03-19

• Fixed: dist folder not being generated when building the project #302 by kelset
• Chore: Bump Node to 20 and allow releasing from GH Actions #312 by gvarandas

2.4.3 - 2023-04-18

• Fixed: clean up the project configuration for RN0.71, aligning some packages to the right version #271 by kelset & tido64
• Added: Add layout props to createText function #262 by robrechtme

2.4.2 - 2023-03-30

• Fixed: Variant with breakpoints memoizing separate values into the same hash key by deconstructing breakpoint objects into strings #241 by mattfrances
• Added: Missing typography properties from React Native's Text Style Props #249 by mattfrances

2.4.1 - 2023-03-02

• Fixed: New property error when using react-native-reanimated v3.0.0 by memoizing style values in a separate WeakMap #237 by fortmarek

2.4.0 - 2023-02-21

• Improve restyle performance #220 by fortmarek

2.3.0 - 2023-01-30

• Renamed gap shorthands to be lowercase #218 by mlecoq
• Better TypeScript type support #216 by FranzMoreno & fortmarek

2.2.0 - 2023-01-24

• Upgrade React Native to 0.71 in #207 by mattfrances
• Add support of gap properties in #188 by mlecoq

2.1.0 - 2022-04-11

• Handle Pressable function style prop by CodyBrouwers in https://github.com/Shopify/restyle/pull/138
• Fix default variant not being applied by nelyousfi in https://github.com/Shopify/restyle/pull/148

2.0.0 - 2022-03-07

• Export composeRestyleFunctions and update useRestyle docs 211b29d5 by sbalay

1.8.0 - 2022-03-04

• Send a stable reference for style object #133 by jamesism

1.7.0 - 2022-02-24

• Performance improvements #131 by sbalay

1.6.2 - 2022-02-21

• Fix web support for variants #121 by dobrea-v

1.6.1 - 2021-12-01

• Allow using 'auto' as value of spacing props. #118 by sbalay

1.6.0 - 2021-11-25

• Fix incorrect props when empty breakpoints. #115 by @nelyousfi
• Improve rendering performance on breakpoint changes and re-renders. #113 by @omulet
• Updated React Native to 0.66 and fixed eslint issues. #117 by @davebcn87

1.5.0 - 2021-11-01

• Export ThemeContext for outside use. #80 by @mohsinulhaq
• Fixing the example usages of createRestyleComponent in the README. #82 by @lucasstorti
• Fix ts error for useRestyle hook. #87 by @andre-krueger
• Improve web support with StyleSheet when creating styles. #94 by @yuriazevedo11
• Fix removeEventListener warning in rn0.65. #112 by @alexanderstrom
• Update outdated Polaris tokens link in README.md. #114 by @nelyousfi

1.4.0 - 2020-12-15

• Add 2-dimensional breakpoints #70 by @Johan-duitot

1.3.1 - 2020-10-26

• Silently ignore any errors caused by missing a variant definition in the theme (e.g. textVariants), to preserve backwards compatibility. #64 by @jonogreenz
• Disallow creating a variant with the existing base theme keys of colors, spacing, breakpoints, zIndices, borderRadii. #64 by @jonogreenz
• Improve rendering performance by removing unnecessary uses of the spread operator. #63 by @JoelBesada
• Add a more descriptive error when theme is missing a key for a used variant. #59 by @Charly6596 (Replaced by PR #64)

1.3.0 - 2020-09-22

• Add support for defining default values for variants in the theme. #51 by @Johan-duitot

1.2.0 - 2020-08-19

• Improve typesafety of createRestyleFunction for correct property values. #36 by @hammadj
• Add start and end (e.g. paddingStart) properties where applicable to better support RTL layouts. #38 by @salzhrani
• Fix useRestyle types not accepting a function created by createVariants. #41 by @JoelBesada
• Make createRestyleComponent, createBox and createText correctly forward the ref prop to the underlying component. #42 by @JoelBesada

1.1.0 - 2020-07-25

• Improve type safety and type inference of createVariant, createBox, createText, useRestyle, createRestyleFunction and createRestyleComponent. #16 and #21 by @hammadj, #26 by @Johan-duitot
• Add a createTheme helper function to enforce proper shape for user themes. #18 by @hammadj
• Add shorthand names for spacing and backgroundColor props. #22 by @hammadj
• Fix a bug in createVariant where defaults were only applied when the variant prop was passed in. #28 by @hammadj
• Add a hook useResponsiveProp to deconstruct responsive prop values. #27 by @hammadj

1.0.4 - 2020-02-26

• Public release

1.0.3 - 2020-01-10

• Fix bug where 0 or other falsy values aren't allowed in the theme.

1.0.2 - 2020-01-03

• Accept children by default in components created with createBox and createText.

1.0.1 - 2020-01-03

• Fix a bug where children would always be a required prop in createRestyleComponent.

1.0.0 - 2019-12-20

• Rename library to @shopify/restyle
• [BREAKING] Rename useStyleSystem to useRestyle
• [BREAKING] Rename createStyleSystemFunction to createRestyleFunction
• [BREAKING] Rename createStyleSystemComponent to createRestyleComponent

0.1.10 - 2019-12-05

• Accept override component prop types in createText and createBox.

0.1.9 - 2019-10-28

• Accept optional underlying component to use in createText and createBox.

0.1.8 - 2019-09-26

• Fix component created with createText not accepting React Native Text properties.

Removed

• Removed component override prop, it's not really needed in practice and it makes managing the types much more complicated.

0.1.7 - 2019-09-25

Added

• Added optional type argument to useTheme to set the returned type, e.g. useTheme<Theme>()

0.1.6 - 2019-09-24

Added

• Added shadow style function to createBox
• Added textShadow style function to createText

0.1.5 - 2019-09-19

• Map shadowColor and textShadowColor to colors theme key

0.1.3 - 2019-09-13

Added

• Added defaults parameter to createVariant to set default values that should be applied before anything from the theme.

0.1.2 - 2019-09-11

• Compile library without JSX

0.1.1 - 2019-09-11

• Changed TypeScript compile target to es5 (instead of esnext)

0.1.0 - 2019-09-10

• Initial release