refine-react-navigation

⚛️ A Routing Provider for integrating React Navigation with the Refine ecosystem.

⚠️ Important

This library is under construction!

✨ Overview

refine-react-navigation provides seamless integration between React Navigation and Refine by implementing a custom Routing Provider compatible with Refine’s routing system.

This package enables you to use React Navigation in your Refine-based mobile applications, preserving full control over navigation logic while adhering to Refine’s conventions.

🚀 Features

• ✅ Routing Provider object to plug into Refine's <Refine /> component
• ✅ NavigationProvider component to connect React Navigation's ref with Refine’s router
• ✅ Out-of-the-box support for navigation, redirection, and route parsing
• ✅ Fully type-safe with TypeScript

📦 Installation

npm install @designli/refine-react-navigation
# or
yarn add @designli/refine-react-navigation

Make sure you also have @react-navigation/native and its dependencies installed, as this library builds on top of React Navigation.

🧠 How It Works

This package exposes:

• routerProvider: A Routing Provider object conforming to Refine's expected interface.
• <NavigationProvider>: A React component that internally manages the React Navigation reference (navigationRef) and connects it with Refine's router provider system.

These components allow your Refine app to navigate using React Navigation while still supporting hooks like useNavigation, useGo, and useLink in a Refine-compatible way.

🔧 Usage

1. Setup React Navigation

Set up your navigation container as usual in your app:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export const AppNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen name="home" component={HomeScreen} />
    <Stack.Screen name="details" component={DetailsScreen} />
  </Stack.Navigator>
);

2. Wrap with NavigationProvider and pass to Refine

import { Refine } from '@refinedev/core';
import {
  NavigationProvider,
  routerProvider,
} from '@designli/refine-react-navigation';
import { AppNavigator } from './AppNavigator';

export default function App() {
  return (
    <NavigationProvider>
      <Refine routerProvider={routerProvider}>
        <AppNavigator />
      </Refine>
    </NavigationProvider>
  );
}

3. Use Refine's routing hooks as usual

import { useGo } from '@refinedev/core';
import { Button } from 'react-native';

const MyComponent = () => {
  const go = useGo();

  return (
    <Button
      title="Go to Details"
      onPress={() => go({ to: '/details', type: 'push' })}
    />
  );
};

✅ Navigation actions are synced and handled using React Navigation’s internal reference.

🛠 API Reference

NavigationProvider

Wraps your app and exposes a navigation ref to enable Refine-compatible navigation.

Props: none (yet)

RouterProvider

An object implementing Refine’s RouterProvider interface, wired up to React Navigation’s API.

Use it in <Refine routerProvider={RouterProvider} />.

📅 Roadmap & Ideas

We're actively improving this integration! Here are some future goals and areas where contributions are welcome:

• [ ] Support deep linking & route parsing
• [ ] Add support for stack, tab, and drawer navigators
• [ ] Handle modals and custom transitions
• [ ] Provide helper functions for linking & path generation
• [ ] Full test coverage with Jest & E2E tests
• [ ] Type-safe route configuration builder
• [ ] Storybook examples for common use cases

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to open an issue or submit a pull request.

Development Setup

# Install dependencies
pnpm install

# Build the library
pnpm build

# Run tests
pnpm test

🪪 License

MIT © Desginli