installation

To get started with Design Blocks, you can install the package using your preferred package manager. Follow these steps:

pnpm add @design-blocks/native@beta

Keep in mind that Design Blocks is agnostic to whether you are using Expo or the React Native CLI; the installation steps are the same. Welcome to ease of use!

Usage

Config File

To configure Design Blocks, create a blocks.config.ts file (.js works too) and import createBlocks and createTokens functions from @design-blocks/native.

// blocks.config.ts
import { createTokens, createBlocks } from "@design-blocks/native";
 
const [themeTokens] = createTokens({
  theme: {
    tokens: {
      colors: {
        text: {
          primary: "#000",
          secondary: "#fff",
        },
        red: {
          100: "#FFEEEE",
          200: "#FACDCD",
          ...
        },
      },
    },
    extendTokens: {
      spacings: {
        "7xl": 76,
      },
      radii: {
        "6xl": 32,
      },
      fontSizes: {
        "10xl": 80,
      },
    },
  },
  utils: {
    toPixels: (value: number) => `${value}px`,
    ...
  },
});
 
export const { block, css, themes } = createBlocks({
  themes: { light: themeTokens },
});

Using Your Configuration File

From this point onwards, you'll be importing block and other functions from blocks.config.

tsx

import { block, css } from "[path-to]/blocks.config";
 
const Description = block.Text(({ theme }) => ({
  color: theme.colors.text.primary,
  fontSize: theme.fontSizes.['10xl'],
}));
 
function Screen() {
  return(
    <Description
      style={css`
        font-Weight: '700';
      `}
    />
  );
}
 
export default Screen;

tsx

// App.tsx index root application react-native
 
import React from "react";
import { ThemeProvider } from "@design-blocks/native";
 
import Screen from "./Screen";
import { themes } from "./blocks.config";
 
const App = () => {
  return (
    <ThemeProvider theme={themes.light}>
      <Screen />
    </ThemeProvider>
  );
};
 
export default App;