Skip to content

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.

Terminal window
npm i @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.

Terminal window
npm i @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

NameTypeDefaultDescription
hrefstring-The URL the link points to.
childrenReactNode-The content of the link.
asChildbooleanfalseIf true, the link will be rendered as a child component.
pushbooleanfalseIf true, the link will push the new URL to the history stack.
replacebooleanfalseIf true, the link will replace the current URL in the history stack.