React Native Varia

A Component library based on react-native-unistyles that provides a CLI tool for React Native to effortlessly scaffold components, icons, styles, and layouts into your project.

Installation

1. Install the library as a development dependency:

yarn add -D react-native-varia

You also need to install react-native-unistyles

2. Components dependencies

| Component | Dependencies | | ------------------ | ---------------------------------------------------------------------------- | | Badge | - | | Button | react-native-svg | | Checkbox | react-native-svg | | CircleProgress | react-native-reanimated, react-native-svg | | Field | - | | GradientBackground | react-native-svg | | GradientText | react-native-svg | | Input | - | | Link | - | | Modal | react-native-reanimated, @gorhom/portal, react-native-svg | | NumberInput | - | | RadioGroup | - | | ReText | react-native-reanimated | | Select | @gorhom/portal | | Slider | react-native-reanimated, react-native-gesture-handler, react-native-worklets | | Slideshow | react-native-reanimated, react-native-gesture-handler, react-native-worklets | | SlidingDrawer | react-native-reanimated, react-native-gesture-handler, react-native-worklets | | Spinner | - | | Switch | react-native-reanimated |

Install react-native-reanimated, react-native-worklets and react-native-gesture-handler.

Check the react-native-reanimated docs.

Check the react-native-gesture-handler docs.

Check the react-native-worklets docs.

Check the react-native-svg docs.

Check the react-native-portal docs.

Varia setup

Now you need to run:

npx varia setup

This will copy the mixins, types and utils files from lib into src/style/varia.

About ColorPalettes

React Native Varia uses a color palette system to provide a consistent color scheme for your app. It is based on Radix color palette system. Check the Radix Color Palettes for more information.

Check how to Compose a color palette for more information.

Varia has the same color palettes as Radix built-in. In the next section you will learn how to add them.

Creating your Theme

After setting up react-native unistyles theme, you will need to update it, to include the color palette system and default token needed for varia components.

In you src/style/themes.ts file, you will need to update it, to include the color palettes you will use:

import {tomato} from './varia/colorPalettes/tomato'
import {teal} from './varia/colorPalettes/teal'
import {slate} from './varia/colorPalettes/slate'
import {iris} from './varia/colorPalettes/iris'

Create a your preset with them, following how to Compose a color palette from radix you will set an accent and a gray color palette, and a red color palette is needed as well for default error styling in the components:

import {slate} from './varia/colorPalettes/slate'
import {iris} from './varia/colorPalettes/iris'
import {red} from './varia/colorPalettes/red'

export const colorPalettes = createPreset({
  accent: iris,
  gray: slate,
  red,
})

Beside those color palettes you can add more optional color palettes to your theme.

import {lime} from './varia/colorPalettes/lime'
import {olive} from './varia/colorPalettes/olive'
import {red} from './varia/colorPalettes/red'
import {yellow} from './varia/colorPalettes/yellow'
import {forest} from './varia/colorPalettes/forest'

export const colorPalettes = createPreset({
  accent: lime,
  gray: olive,
  red,
  yellow,
  forest,
})

Include de default theme tokens:

import {
  defaultColors,
  defaultFontSizes,
  defaultFontWeights,
  defaultRadii,
  defaultShadows,
  defaultSizes,
  defaultSpacing,
} from './varia/defaultTheme'

Create the base theme, here you can override the default tokens with whatever you want:

export const base = {
  colors: {
    ...defaultColors,
  },
  fontWeights: {
    ...defaultFontWeights,
  },
  sizes: {
    ...defaultSizes,
  },
  fontSizes: {
    ...defaultFontSizes,
  },
  spacing: {
    ...defaultSpacing,
  },
  radii: {
    ...defaultRadii,
  },
} as const

Get the shadows tokens:

const lightShadows = defaultShadows(colorPalettes.light)
const darkShadows = defaultShadows(colorPalettes.dark)

Ensamble the light and dark theme, you can add extend here with independent light and dark colors:

export const lightTheme = {
  colors: {
    ...base.colors,
    ...colorPalettes.light,
  },
  fontSizes: base.fontSizes,
  fontWeights: base.fontWeights,
  spacing: base.spacing,
  radii: base.radii,
  sizes: base.sizes,
  shadows: {
    ...lightShadows,
  },
} as const

export const darkTheme = {
  colors: {
    ...base.colors,
    ...colorPalettes.dark,
  },
  fontSizes: base.fontSizes,
  fontWeights: base.fontWeights,
  spacing: base.spacing,
  radii: base.radii,
  sizes: base.sizes,
  shadows: {
    ...darkShadows,
  },
} as const

⚙️ Available Commands

4. Add varia command to package.json

"bin": {
    "varia": "./node_modules/new-varia-lib/bin/cli.js"
  }

Once installed, you can use the following commands via npx varia:

| Command | Description | | -------------------------------- | -------------------------------------------------------------------------------- | | npx varia setup | Adds the mixins, types and utils files from to src/style/varia. | | npx varia add <component_name> | Adds the specified component into your project src/components. | | npx varia add-icon <icon_name> | Copies the Icon.tsx template and renames it to the specified icon name. | | npx varia add-patterns | Copies the entire lib/patterns folder into src/patterns in your project. |