Unitools | <Link /> | By GeekyAnts

This document provides a comprehensive guide on configuring & using the official @unitools/link package. This configuration is tailored for Expo and Next.js applications, enabling seamless link usage across both frameworks.

For Next.js

Install @unitools/link and @unitools/link-next.

npm

 npm i @unitools/link @unitools/link-next

Yarn

 yarn add @unitools/link @unitools/link-next

Add module resolver to your next.config.js file.

next.config.js

module.exports = {
  webpack(config) {
    config.resolve.alias["@unitools/link"] = "@unitools/link-next";
    return config;
  },
};

For Expo

Install @unitools/link and @unitools/link-expo.

npm

 npm i @unitools/link @unitools/link-expo

Yarn

yarn add @unitools/link @unitools/link-expo

Add module resolver to your babel.config.js file.

const path = require("path");

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            "@unitools/link": "@unitools/link-expo",
          },
        },
      ],
    ],
  };
};

Usage

import Link from "@unitools/link";

export default function Home() {
  return (
    <View>
      <Link href="/about">
        <Text>About</Text>
      </Link>
    </View>
  );
}

Props

Name	Type	Default	Description
href	string	-	The URL the link points to.
children	ReactNode	-	The content of the link.
asChild	boolean	false	If true, the link will be rendered as a child component.
push	boolean	false	If true, the link will push the new URL to the history stack.
replace	boolean	false	If true, the link will replace the current URL in the history stack.