Unitools | Install in Expo | By GeekyAnts

Steps

1. Installation - Install all the @unitools packages required.
2. Configuration - Please configure the project correctly, refer this docs
3. File Setup - Add Support for .expo-web.{js|ts|jsx|tsx} file extension.
4. Aliases Setup - Add aliasing of @unitools/* packages to @unitools/*-expo and react-native to react-native-web.

Note

If you haven’t configured your project yet. Please refer this docs to configure for Expo.

Installation

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 @unitools/metro-config

Yarn

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

Install the required peer-dependencies.

npm

npm install expo-image expo-router

Yarn

yarn add expo-image expo-router

Add aliasing

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",
          },
        },
    ]
  ],
};