feat: spike on Restyle

[MounirDhahri]

**Co-athored-by: Claude using Planning agent ⭐⭐⭐ **

#future-friday

This PR isn't meant to be merged, it's just a spike to look into how this can be potentially done. It isn't meant to be reviewed in details but as a POC

Description

In this PR I looked into the migration from styled-components towards restyled and what it could mean for us in performance + effort.

Motivation

With styled-components getting into maintenance mode and achieving on the promise it came with (CSS in JS). We risk on staying behind on using the newest features of React to render our styles along with performance issues.

Forks like this started already appearing and they promise significany performance wins thanks to using new React APIs like useInsertionEffect

That's why I think it's wise to look deeper into this and what it means for us and palette-mobile. Do we want to remain on the css-in-js land or is this an opportunity to look into catching up with the rest of the industry and the way styling is thought in the first drafts in React-native (to be compiled instead of generated in runtime).

Strategy used

Gradual adoption: Use styled-components + restyle at the same time.

The most used components are definitely Flex (using Box) and Text. That's what I focused on migrating. The results were promising.

The video below is on the emulator but the resutls are from a running device and it's the mean of 3 runs

Flex	Text
Screen.Recording.2025-10-17.at.11.08.41.mov	Screen.Recording.2025-10-17.at.11.08.54.mov

Performance Results

Environment: Android emulator

Box Component ✅

• 50 components: 45% faster ⚡
• 100 components: 22% faster ⚡
• 250-500 components: 10-18% faster ⚡
  Verdict: Excellent improvement

Text Component ✅

• 20 components: 29% faster ⚡
• 100 components: 13% faster ⚡
• 500 components: 5% faster ⚡
  Verdict: Fine improvement

Recommendation moving forward

I strongly think this is worth looking further into. I tried connecting Eigen to my local palette, but it didn't work because we inject many value out of our design system. Other devs also reported similar gains from cutting runtime style generation.

What does this mean for product engineers develeopment process?
Ideally? no major changes and no new learning curve outside of palette-mobile.

[artsy-peril]

@shopify/restyle

Author: Shopify Inc.

Description: A system for building constraint-based UI components

Homepage: https://github.com/Shopify/restyle#readme

Created	over 5 years ago
Last Updated	about 1 month ago
License	MIT
Maintainers	6
Releases	22

README

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.

New dependencies added: @shopify/restyle.

Generated by 🚫 dangerJS against fe320e1