Fashion runway with React Native code and UI components

Restyle Your React Native Wardrobe: Shopify's Fashion-Forward UI Library

The Orange Cat
The Orange Cat

In the world of React Native development, creating a consistent and themable user interface can sometimes feel like trying to coordinate a perfect outfit from a chaotic wardrobe. Enter Restyle, Shopify’s fashion-forward solution for dressing up your React Native apps with style and ease. Let’s dive into the closet of possibilities that @shopify/restyle opens up for developers.

The Restyle Runway: Features That Shine

Restyle isn’t just another UI library; it’s a comprehensive system for building type-enforced, themable components in React Native with TypeScript. Here’s what makes it stand out on the catwalk of development tools:

  • Type-Safe Styling: Say goodbye to typos and hello to autocomplete. Restyle ensures your styles are as error-free as a well-tailored suit.
  • Themability at Its Core: Like a versatile wardrobe, Restyle allows you to switch themes effortlessly, adapting your app’s look with ease.
  • Responsive Design: Your app will look great on any device, just like how a well-chosen outfit flatters any body type.
  • Consistent UI: Build upon a design system that keeps your app’s look cohesive, like a perfectly coordinated ensemble.

Fitting Room: Getting Restyle Into Your Project

Before we start mixing and matching components, let’s get Restyle into your project’s wardrobe. You have a few options to add this stylish piece to your collection:

Using yarn:

yarn add @shopify/restyle

If npm is more your style:

npm install @shopify/restyle

For those using Expo, here’s your fitting room ticket:

npx expo install @shopify/restyle

Basic Wardrobe: Getting Started with Restyle

Let’s start with the basics of putting together your Restyle outfit. First, we need to define our theme – think of it as your color palette and size chart.

Creating Your Theme

import { createTheme } from '@shopify/restyle'

const theme = createTheme({
  colors: {
    primary: '#0A0A0A',
    secondary: '#FAFAFA',
    accent: '#0080FF',
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 32,
  },
  textVariants: {
    header: {
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
  },
})

type Theme = typeof theme

This theme is like your basic wardrobe essentials – it defines the colors, spacing, and text styles that you’ll use throughout your app.

Dressing Up Components

Now, let’s create a simple component using Restyle:

import { createRestyleComponent, createVariant, spacing, SpacingProps } from '@shopify/restyle'

const Box = createRestyleComponent<
  SpacingProps<Theme> & {
    variant: 'primary' | 'secondary'
  },
  Theme
>([
  spacing,
  createVariant({ themeKey: 'boxVariants' })
])

const StylishBox = () => (
  <Box variant="primary" padding="m" margin="s">
    <Text variant="body">I'm a stylish box!</Text>
  </Box>
)

In this example, Box is like a versatile piece of clothing that can be styled in different ways using the variant prop and spacing properties.

Advanced Styling: Couture-Level Restyle

Once you’ve got the basics down, it’s time to create some haute couture components.

Responsive Styles

Restyle allows you to create responsive styles that adapt to different screen sizes:

import { createRestyleComponent, createVariant, spacing, SpacingProps } from '@shopify/restyle'

const ResponsiveBox = createRestyleComponent<
  SpacingProps<Theme>,
  Theme
>([
  spacing,
  {
    property: 'backgroundColor',
    themeKey: 'colors',
  },
])

const AdaptiveBox = () => (
  <ResponsiveBox
    backgroundColor={{
      phone: 'primary',
      tablet: 'secondary',
    }}
    padding={{
      phone: 's',
      tablet: 'm',
    }}
  >
    <Text>I adapt to different screens!</Text>
  </ResponsiveBox>
)

This ResponsiveBox changes its background color and padding based on whether it’s displayed on a phone or tablet.

Creating Custom Variants

For those special occasions when you need a unique look:

import { createRestyleComponent, createVariant } from '@shopify/restyle'

const Button = createRestyleComponent<
  {
    variant: 'primary' | 'secondary' | 'accent'
  },
  Theme
>([
  createVariant({
    themeKey: 'buttonVariants',
    defaults: {
      padding: 'm',
      borderRadius: 'rounded',
    },
  }),
])

// In your theme:
buttonVariants: {
  primary: {
    backgroundColor: 'primary',
    color: 'secondary',
  },
  secondary: {
    backgroundColor: 'secondary',
    color: 'primary',
  },
  accent: {
    backgroundColor: 'accent',
    color: 'white',
  },
},

This Button component can now be easily styled with different variants, each with its own preset styles.

The Final Touch: Conclusion

Restyle by Shopify is more than just a UI library; it’s a complete styling system that brings the best of type safety, themability, and consistency to your React Native projects. By leveraging its powerful features, you can create beautiful, responsive, and maintainable user interfaces that look great on any device.

As you continue to explore Restyle, you’ll find that it’s like having a personal stylist for your React Native app – always ensuring you look your best, no matter the occasion. So go ahead, restyle your React Native wardrobe, and strut your app down the digital runway with confidence!