Hexa Router

Lightweight router for React Native/Expo with lazy-loading, animations, deep linking, and a not-found screen.

Installation

npm install hexa-router

Initial Setup

Create a routes.tsx file to register your screens:

import { registerScreen } from "hexa-router";

export const routes = [
  registerScreen("home", () => import("./screens/home")),
  registerScreen("loading", () => import("./screens/loading")),
  registerScreen("not-found", () => import("./screens/notFound")),
];

Using the Provider

In your App.tsx, wrap the app with HexaRouterProvider and pass the routes:

import React from "react";
import { HexaRouterProvider, HexaNavigator } from "hexa-router";
import { routes } from "./routes.tsx";

export default function App() {
  return (
    <HexaRouterProvider>
      <HexaNavigator routes={routes} />
    </HexaRouterProvider>
  );
}

Using Hexa Router

Example Home screen:

import React from "react";
import { Text, Button } from "react-native";
import { useHexaRouter, HexaContainer } from "hexa-router";

export default function HomeScreen() {
  const { hexaRouter } = useHexaRouter();

  return (
    <HexaContainer top bottom>
      <Text>🏠 Home</Text>
      <Button
        title="Go to Profile"
        onPress={() =>
          hexaRouter.push("profile", {
            params: { id: 123 },
            animation: "zoom",
          })
        }
      />
    </HexaContainer>
  );
}

Example Profile screen:

import React from "react";
import { Text, Button } from "react-native";
import { useHexaRouter, useHexaParams, HexaContainer } from "hexa-router";

export default function ProfileScreen() {
  const { hexaRouter } = useHexaRouter();
  const { id } = useHexaParams();

  return (
    <HexaContainer top bottom>
      <Text>👤 Id: {id}</Text>
      <Button title="Back" onPress={hexaRouter.back} />
    </HexaContainer>
  );
}

Focus Effect

The useHexaFocusEffect hook lets you run side-effects whenever a specific route becomes active (similar to React Navigation’s useFocusEffect). This is useful for tasks like refreshing data, triggering analytics, or running background jobs only when the user is on a certain screen.

useHexaFocusEffect("home", () => {
  pushEngagementSystem();
});

Animations

The Hexa Router supports multiple animations using react-native-reanimated. To pass an animation when navigating:

hexaRouter.push("profile", {
  params: { id: 123 },
  animation: "zoom-up",
});

Deep Linking

Hexa Router supports native deep linking. Example:

myapp://home/123?foo=bar

SafeArea

Use HexaContainer to automatically handle SafeAreaView:

<HexaContainer top bottom>
  <Text>Safe content</Text>
</HexaContainer>

• top → adds padding at the top

• bottom → adds padding at the bottom