Unitools | Getting Started | By GeekyAnts

Installation

The installation process for Unitools is straightforward. You can install the required packages using npm or yarn.

Note

If you don’t want to use all the available packages from unitools just SKIP this section and head to the package specific docs.

Next.js

Run the following commands to install all the packages supported under unitools.

npm

npm install @unitools/image @unitools/link @unitools/router @unitools/tailwindcss-fonts @unitools/fonts @unitools/image-next @unitools/link-next @unitools/router-next

Yarn

yarn add @unitools/image @unitools/link @unitools/router @unitools/tailwindcss-fonts @unitools/fonts @unitools/image-next @unitools/link-next @unitools/router-next

Expo

Run the following commands to install all the packages supported under unitools.

npm

npm install @unitools/image @unitools/link @unitools/router @unitools/tailwindcss-fonts @unitools/fonts @unitools/image-expo @unitools/link-expo @unitools/router-expo

Yarn

yarn add @unitools/image @unitools/link @unitools/router @unitools/tailwindcss-fonts @unitools/fonts @unitools/image-expo @unitools/link-expo @unitools/router-expo

Install the required peer-dependencies.

npm

npm install expo-image expo-router

Yarn

yarn add expo-image expo-router

Configuration

Next.js

For @unitools/image, @unitools/link, and @unitools/router to work in Next.js we need to alias it with @unitools/image-next, @unitools/link-next, and @unitools/router-next respectively

next.config.js

module.exports = {
  webpack: (config) => {
    config.resolve.alias['@unitools/image'] = '@unitools/image-next';
    config.resolve.alias['@unitools/link'] = '@unitools/link-next';
    config.resolve.alias['@unitools/router'] = '@unitools/router-next';
    config.resolve.alias['@unitools/fonts'] = '@unitools/fonts/next';
    return config;
  },
};

Expo

For @unitools/image, @unitools/link, and @unitools/router to work in Expo we need to alias it with @unitools/image-expo, @unitools/link-expo, and @unitools/router-expo respectively

babel.config.js

module.exports = {
  plugins: [
    [
        "module-resolver",
        {
          alias: {
            "@unitools/link": "@unitools/link-expo",
            "@unitools/image": "@unitools/image-expo",
            "@unitools/router": "@unitools/router-expo",
            "@unitools/fonts" : "@unitools/fonts/expo";
          },
        },
    ]
  ],
};