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
To point out how we are able to obtain it, we’ll construct two accordions, one for React and one other for React Native. To make sure constant UI, we’ll create a set of objects that maintain design tokens and compose them into themes.
Listed here are the 2 parts:
React
Click on Right here to open the menu
Manchester United
Barcelona
Paris Saint G.
Liverpool
React Native
Yow will discover all of the parts right here
Flip widespread code to shared dependencies
With 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 renderdesign-tokens/base-tokens: A primary design-token object.design-tokens/react-tokens: An extension ofdesign-tokens/base-tokenswith platform particular types for React.design-tokens/rnative-tokens: An extension ofdesign-tokens/base-tokenswith 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 thereact-tokensby way of the Context Api, and supply a hook to devour it.theme/cellular: A element that may share thernative-tokensby 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
Making a Cross-Platform Design System
The publish 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
Now that we’ve got set the bottom and structure for this method let’s take a look at the code, beginning with the three tokens objects.
The bottom one would look one thing like this:
export interface BaseTokensProps "dotted"
export const baseTokens: BaseTokensProps = {
primaryColor: "crimson",
secondaryColor: "blue",
borderColor: "inexperienced",
borderStyle: "stable",
};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:
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",
};Whereas rnative-tokens.tsx could have solely numbers:
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,
};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:
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
On this instance, we’ll present tips on how to create a Theme for React:
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 };We’ll do the identical for the react-native one.
Offering the rnative-tokens to a React-Native Theme supplier
On this theme, we might want to move the choice withoutCssVars: true to keep away from having a element that renders a <div>.
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 };Implementing the accordions: all set, go compose!
Now that the Themes are prepared let’s present them to the Accordions. All we have to do is to import these parts that we created. Each of our Accordions could have the identical skeleton, the place we devour the hooks and return a mapped checklist, represented and abstracted by a fraction within the following snippet.
import { useTheme } from '@learnbit-react/net-cellular-design-system.theme.net // or .cellular within the react-native one!
import { useOpen } from '@learnbit-react/web-mobile-design-system.hooks.use-open';
import { useSelect } from '@learnbit-react/web-mobile-design-system.hooks.use-select';
import kind { AccordionProps } from '@learnbit-react/web-mobile-design-system.api.accordion';
const GenericAccordionTemplate = ({ elementList } : AccordionProps) => {
const { isOpen, toggleOpen } = useOpen();
const { selectedId, setSelection } = useSelect();
const {someValueToken, someValueToken} = useTheme();
return <div_or_View fashion={{someProp: someValueToken}}>My styled ingredient<div_or_View/>;
};
Beware that the React and React Native Accordion do not use the identical useTheme hook. Every one makes use of a distinct one to adjust to the right styling varieties.
You possibly can have a look at each accordions implementations on the next playing cards:
Composing a React Net App with our parts
Elements are nice. Now that we’ve got the accordion let’s create a React App, which can be a element. We will deploy apps on the identical time we snapshot them by operating bit tag. Is not that cool?
Apps can have a deploy operate. On this case, I’m going to make use of the Netlify Deployer. You possibly can study extra about tips on how to create apps with Bit right here.
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 */}
</>
);
}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"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
expo init my-new-mission
cd my-new-mission
yarn set up @learnbit-react/net-cellular-design-system.base-ui.react-native.accordion @learnbit-react/net-cellular-design-system.api.accordionWe will add the not too long ago created element to the app.js file:
import {Accordion} from '@learnbit-react/web-mobile-design-system.base-ui.react-native.accordion';
import { Merchandise } from '@learnbit-react/web-mobile-design-system.api.accordion';
import {(StyleSheet, View)} from 'react-native';
export default operate App() {
return (
<View fashion={types.container}>
<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(),
]}
/>
</View>
);
}
const types = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'middle',
justifyContent: 'flex-start',
marginTop: 50,
},
});And run it inside our app:
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!
