Tuesday, July 23, 2024
HomeJavaScriptMaking a Cross-Platform Design System for React and React Native with Bit

Making a Cross-Platform Design System for React and React Native with Bit


Many groups use each React and React Native to drive their net and cellular improvement, providing a novel method to have UI/UX consistency throughout two very totally different platforms. One of many issues that developer groups encounter in synchronizing between these platforms is tips on how to share code between them simply.

What seems like a trivial drawback can grow to be a hustle when scaling up and including extra parts to the ecosystem. Extra parts normally imply extra upkeep.
It’s pure to ask ourselves tips on how to obtain this by utilizing a scalable and maintainable structure whereas additionally being versatile sufficient to permit variations inside the ecosystem, particularly when styling.

This information will educate us tips on how to construct a constant Design System with React and React Native. We’ll present tips on how to share design tokens, logic, and kinds whereas making a design system that goals to supply consistency between the 2 platforms.

In case you like to look at moderately than learn, you possibly can see the entire course of right here:

Constructing platform-specific Accordions

right here

Flip widespread code to shared dependencies

Bit, we are able to handle shared code between React and React Native as parts and use it as dependencies for each platforms’ respective design system parts. In our instance, we’re constructing two accordions, one for React and one other for React Native. We would like every accordion to include the minimal quantity of platform-specific code (since their APIs are totally different) and can outsource all of the widespread components.

Trying on the dependencies graph, we are able to see how the base-tokens are consumed by different parts and offered to totally different themes. Each Accordions will share a Varieties element and the interior state administration (hooks).

React Dependencies:

React Native Dependencies:

As talked about, we wish to have as a lot code outdoors the platform-specific implementations as potential, that means that hooks, varieties, themes, and design tokens will probably be a part of totally different parts.

That implies that we might want to construct the next parts:

  • api/accordion: To share varieties. For instance, the props of those accordions.
  • api/accordion-items: To share the objects the accordions might want to render
  • design-tokens/base-tokens: A primary design-token object.
  • design-tokens/react-tokens: An extension of design-tokens/base-tokens with platform particular types for React.
  • design-tokens/rnative-tokens: An extension of design-tokens/base-tokens with platform particular types for React Native.
  • base-ui/hooks/use-open: A hook that may management the open / shut state of the accordion.
  • base-ui/hooks/use-select: A hook that may management the chosen merchandise of the accordion.
  • theme/net: A element that may share the react-tokens by way of the Context Api, and supply a hook to devour it.
  • theme/cellular: A element that may share the rnative-tokens by way of the Context Api, and supply a hook to devour it.
  • base-ui/react/accordion: A React Accordion.
  • base-ui/react-native/accordion: A React Native Accordion.
share-react-react-native              --> scope
├── api                               --> namespace
│    ├── accordion                    --> element
│    └── accordion-objects              --> element
├── design-tokens                     --> namespace
│    ├── base-tokens                  --> element
│    ├── react-tokens                 --> element
│    └── rnative-tokens               --> element
├── base-ui                           --> namespace
│    ├── hooks                        --> namespace
│    │    ├── use-open                --> element
│    │    └── use-choose              --> element
│    ├── react                        --> namespace
│    │    └── accordion               --> element
│    └── react-native                 --> namespace
│         └── accordion               --> element
└── theme                             --> namespace
     ├── net                          --> element
     └── cellular                       --> element
CopiedCopy

Making a Cross-Platform Design System

Design Tokens in React and How We Use Them confirmed us how we might use them in React and Bit. Now let’s add React Native!

We’ll apply the identical sample of making a context and a hook to inject our tokens into our parts.
The trick to creating it work with React and React Native is that we’re going to have three sorts of tokens:

  • A base Token, widespread to each
  • A Token prolonged from the bottom one to make use of with React.
  • A Token prolonged from the bottom one to make use of with React Native.

Offering it to 2 totally different Themes, we could have two units of platform-specific tokens that share a typical floor.

React and React Native do not share the identical styling properties and kinds. Whereas types in React are outlined by CSS.Properties, in React Native it’s outlined by ViewStyle | TextStyle | ImageStyle. In apply, that implies that React Native has a extra restricted kind decision. For instance, whereas in React, many properties adjust to the Globals kind, permitting others to inherit, in React Native, there is not such a chance. One other topic to say is models. React Native models are unitless, as specified within the documentation:

All dimensions in React Native are unitless and characterize density-independent pixels.

In React, there may be extra freedom: you should utilize px, rem, em.

Again to our tokens, that implies that we will not have a property like margin: 10px or backgroundColor: "inherit" as a result of it will not work in React Native. To beat this difficulty, we could have a base object that shares the commonest values and different Platform particular that provides extra properties.

Offering the Design Tokens to a Theme

base-tokens.tsx

export interface BaseTokensProps  "dotted" 

export const baseTokens: BaseTokensProps = {
  primaryColor: "crimson",
  secondaryColor: "blue",
  borderColor: "inexperienced",
  borderStyle: "stable",
};
CopiedCopy

Now, we are able to prolong it on design-tokens/react-tokens and design-tokens/rnative-tokens
For instance, react-tokens.tsx could have some values in px:

react-tokens.tsx

import { baseTokens } from "@learnbit-react/web-mobile-design-system.design-tokens.base-tokens";
import kind { BaseTokensProps } from "@learnbit-react/web-mobile-design-system.design-tokens.base-tokens";

export interface ReactTokensProps extends BaseTokensProps {
  spacing: string;
  fontSize: string;
  borderWidth: string;
}

export const reactTokens: ReactTokensProps = {
  ...baseTokens,
  spacing: "15px",
  fontSize: "18px",
  borderWidth: "3px",
};
CopiedCopy

Whereas rnative-tokens.tsx could have solely numbers:

rnative-tokens.tsx

import { baseTokens } from "@learnbit-react/web-mobile-design-system.design-tokens.base-tokens";
import kind { BaseTokensProps } from "@learnbit-react/web-mobile-design-system.design-tokens.base-tokens";

export interface RNativeTokensProps extends BaseTokensProps {
  spacing: quantity;
  fontSize: quantity;
  borderWidth: quantity;
}

export const rNativeTokens: RNativeTokensProps = {
  ...baseTokens,
  primaryColor: "purple",
  secondaryColor: "grey",
  spacing: 10,
  fontSize: 12,
  borderWidth: 3,
};
CopiedCopy

These will probably be our token definitions. Take note of how each definitions prolong the bottom one.

In case your IDE autocompletes the situation utilizing relative imports, you possibly can shortly repair it by operating `bit hyperlink –rewire`

For our theme, we’ll use a pre-existing element that creates a Theme from an object. For that, we might want to set up it in our workspace:

$bit

Copiedcopy

We have to have an object with the properties of our theme and name the createTheme operate, offering it as an argument. The end result will probably be an object with a hook to make use of these values and a element that injects it utilizing the React Context.

Offering the react-tokens to a React Theme supplier

net.tsx

import { createTheme } from "@teambit/base-react.theme.theme-provider";

import { reactTokens } from "@learnbit-react/web-mobile-design-system.design-tokens.react-tokens";
import kind { ReactTokensProps } from "@learnbit-react/web-mobile-design-system.design-tokens.react-tokens";

const theme = createTheme<ReactTokensProps>({
  theme: reactTokens,
});

const { useTheme, ThemeProvider } = theme;
export { useTheme, ThemeProvider };
CopiedCopy

We’ll do the identical for the react-native one.

Offering the rnative-tokens to a React-Native Theme supplier

cellular.tsx

import { createTheme } from "@teambit/base-react.theme.theme-provider";

import { rNativeTokens } from "@learnbit-react/web-mobile-design-system.design-tokens.rnative-tokens";
import kind { RNativeTokensProps } from "@learnbit-react/web-mobile-design-system.design-tokens.rnative-tokens";

const theme = createTheme<RNativeTokensProps>({
  theme: rNativeTokens,
  withoutCssVars: true,
});

const { useTheme, ThemeProvider } = theme;

export { useTheme, ThemeProvider };
CopiedCopy

Implementing the accordions: all set, go compose!

Netlify Deployer. You possibly can study extra about tips on how to create apps with Bit right here.

$bit

Copiedcopy
$bit

Copiedcopy
$bit

Copiedcopy
$bit

Copiedcopy

After incorporating our React Accordion to the code:app.tsx

import React from "react";
import { Routes, Route } from "react-router-dom";
import { Accordion } from "@learnbit-react/web-mobile-design-system.base-ui.react.accordion";
import { Merchandise } from "@learnbit-react/web-mobile-design-system.api.accordion";

export operate AccordionApp() {
  return (
    <>
      {/* header element */}
      <Routes>
        <Route
          path="/"
          ingredient={
            <Accordion
              elementList={[
                new Item("Asia", "01").toObject(),
                new Item("Africa", "02").toObject(),
                new Item("North America", "03").toObject(),
                new Item("South America", "04").toObject(),
                new Item("Antarctica", "05").toObject(),
                new Item("Australia / Oceania", "06").toObject(),
                new Item("Europe", "07").toObject(),
              ]}
            />
          }
        />
        <Route path="/about">{/* about web page element */}</Route>
      </Routes>
      {/* footer element */}
    </>
  );
}
CopiedCopy

And configuring the app in accordion.react-app.ts, only a bit tag will snapshot it and likewise deploy it:

bit tag apps/react/accordion -m "First deploy"
CopiedCopy

As soon as we tag the element, it would deploy to netlify. You possibly can open the web site right here

Consuming the React Native element in Expo

Supply code

Through the use of design tokens and Theme Suppliers, we had been capable of create platform-specific themes for our functions. Utilizing Bit, we cut up parts into totally different parts, writing them as soon as however consuming them on each accordions, sustaining a novel supply of fact and the code upkeep to a minimal. We additionally documented and confirmed utilization examples of every element, scaling our apps additional and faster, even throughout a number of platforms like React and React Native. Lastly, we had been additionally capable of create manufacturing prepared functions.

That’s it! Thanks for studying!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments