Shopify Restyle: The XML for React Native Development -
Shopify  Restyle: The XML for React Native Development
by on on android

Shopify Restyle: The XML for React Native Development

@Shopify / restyle The XML for React Native Android Development

I love to build apps, teach about it and dream big with it. But I have always wanted to know how to build apps mainly with XML and pure native codes (not only with react native), so i decided to start a journey with KOTLIN. My experience was bad at first, but i kept on pushing until it became part of me. But one thing I really enjoyed more was to be able to escape the react native type of styling. XML is more of inline styling and that simplicity made me enjoy development with it. I desired that feature on react native, until I came across @Shopify/Restyle which was a solution to it.

source

I went ahead to make A REACT NATIVE ANIMATION VIDEOS WITH IT at the end I really enjoyed same feeling just like XML.



What is Shopify Restyle

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 theme ability 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.

Source: Shopify github repo

With that short highlight we can see that you will be able to override styles, be most productive and your values are minimum. The typescript feature also makes the linting more exceptional. Now let's move on to install and make use of shopify restyle with our REACT NATIVE APPLICATION.

Install @shopfi/restyle on your project

yarn add @shopify/restyle
npm install @shopify/restyle

after the installation, the next thing to do is to create a theme. A theme is more like a custom properties you defined,  It specifies set values for spacing, colors, breakpoints, and more, and made available by the components. A good example of this is backgroundColor="cardPrimary"  , that is using the named color from your theme.

import { createTheme } from '@shopify/restyle'
const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',
  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',
  black: '#0B0B0B',
  white: '#F0F2F3',
};
const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  breakpoints: {
    phone: 0,
    tablet: 768,
  },
});
export type Theme = typeof theme;
export default theme;

Note: createTheme doesn't do anything except enforcing the theme to have the same shape as the BaseTheme, but it preserves the types of your user specific values (e.g. what colors the theme has) so you don't lose typesafety as a result of the { [key:string]: any } in BaseTheme

for example 

const theme = ({
    mainBackground: "#fff",
    cardPrimaryBackground: "#bolskillsk",
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  breakpoints: {
    phone: 0,
    tablet: 768,
  },
});
export type Theme = typeof theme;
export default theme;

Now to make use of our theme, we now have go to the App.js file and wrap everything components with the ThemeProvider.

import {ThemeProvider} from '@shopify/restyle';
import theme from './theme';
const App = () => (
  <ThemeProvider theme={theme}>Bolskills App</ThemeProvider>
);

 Here is an app built with shopify restyle.

please make to like and subscribe

GITHUB REPOSITORY