0
# React Router Native
1

2
React Router Native provides declarative routing for React Native applications. It extends React Router with native-specific components and hooks, enabling URL-based navigation patterns in mobile apps with support for deep linking, hardware back button integration, and touch-based navigation.
3

4
## Package Information
5

6
- **Package Name**: react-router-native
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install react-router-native react-router react react-native @ungap/url-search-params`
10
- **Peer Dependencies**: React >=16.8, React Native >=0.44
11

12
## Core Imports
13

14
```typescript
15
import { NativeRouter, Link, Routes, Route } from "react-router-native";
16
import { useSearchParams, useDeepLinking, useLinkPressHandler } from "react-router-native";
17
```
18

19
For CommonJS:
20

21
```javascript
22
const { NativeRouter, Link, Routes, Route } = require("react-router-native");
23
```
24

25
## Basic Usage
26

27
```typescript
28
import React from "react";
29
import { View, Text } from "react-native";
30
import { NativeRouter, Routes, Route, Link } from "react-router-native";
31

32
function App() {
33
  return (
34
    <NativeRouter>
35
      <Routes>
36
        <Route path="/" element={<Home />} />
37
        <Route path="/about" element={<About />} />
38
      </Routes>
39
    </NativeRouter>
40
  );
41
}
42

43
function Home() {
44
  return (
45
    <View>
46
      <Text>Home Screen</Text>
47
      <Link to="/about">
48
        <Text>Go to About</Text>
49
      </Link>
50
    </View>
51
  );
52
}
53

54
function About() {
55
  return (
56
    <View>
57
      <Text>About Screen</Text>
58
      <Link to="/">
59
        <Text>Go to Home</Text>
60
      </Link>
61
    </View>
62
  );
63
}
64
```
65

66
## Architecture
67

68
React Router Native is built around several key components:
69

70
- **Native Router**: `NativeRouter` component provides memory-based routing for React Native apps
71
- **Touch Navigation**: `Link` component built on `TouchableHighlight` for native touch interactions
72
- **Deep Linking**: Hooks for handling incoming URLs and app launch navigation
73
- **React Router Integration**: Full re-export of React Router's components, hooks, and utilities
74
- **Mobile Optimizations**: Native-specific adaptations for hardware back button and URL search parameters
75

76
## Capabilities
77

78
### Core Native Routing
79

80
Essential React Native routing components including the main router and navigation links optimized for mobile touch interactions.
81

82
```typescript { .api }
83
interface NativeRouterProps extends MemoryRouterProps {}
84
function NativeRouter(props: NativeRouterProps): JSX.Element;
85

86
interface LinkProps extends TouchableHighlightProps {
87
  children?: React.ReactNode;
88
  onPress?: (event: GestureResponderEvent) => void;
89
  relative?: RelativeRoutingType;
90
  replace?: boolean;
91
  state?: any;
92
  to: To;
93
}
94
function Link(props: LinkProps): JSX.Element;
95
```
96

97
[Native Routing Components](./native-routing.md)
98

99
### Navigation Hooks
100

101
Native-specific hooks for custom navigation behavior, hardware integration, and deep linking support.
102

103
```typescript { .api }
104
function useLinkPressHandler(
105
  to: To,
106
  options?: {
107
    replace?: boolean;
108
    state?: any;
109
    relative?: RelativeRoutingType;
110
  }
111
): (event: GestureResponderEvent) => void;
112

113
function useDeepLinking(): void;
114
function useHardwareBackButton(): void;
115
function useAndroidBackButton(): void;
116
```
117

118
[Navigation Hooks](./navigation-hooks.md)
119

120
### URL Search Parameters
121

122
Enhanced URLSearchParams functionality adapted for React Native applications with mobile-optimized parameter handling.
123

124
```typescript { .api }
125
function useSearchParams(
126
  defaultInit?: URLSearchParamsInit
127
): [URLSearchParams, SetURLSearchParams];
128

129
function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
130

131
type SetURLSearchParams = (
132
  nextInit?:
133
    | URLSearchParamsInit
134
    | ((prev: URLSearchParams) => URLSearchParamsInit),
135
  navigateOpts?: NavigateOptions
136
) => void;
137

138
type URLSearchParamsInit =
139
  | string
140
  | ParamKeyValuePair[]
141
  | Record<string, string | string[]>
142
  | URLSearchParams;
143
```
144

145
[Search Parameters](./search-parameters.md)
146

147
### React Router Components
148

149
Complete re-export of React Router components for building declarative route structures in React Native applications.
150

151
```typescript { .api }
152
function MemoryRouter(props: MemoryRouterProps): JSX.Element;
153
function Routes(props: RoutesProps): JSX.Element;
154
function Route(props: RouteProps): JSX.Element;
155
function Navigate(props: NavigateProps): JSX.Element;
156
function Outlet(props: OutletProps): JSX.Element;
157
```
158

159
[React Router Components](./react-router-components.md)
160

161
### React Router Hooks
162

163
Complete re-export of React Router hooks for accessing navigation state, route data, and programmatic navigation.
164

165
```typescript { .api }
166
function useNavigate(): NavigateFunction;
167
function useLocation(): Location;
168
function useParams(): Params;
169
function useNavigationType(): NavigationType;
170
function useMatch(pattern: PathPattern): PathMatch | null;
171
```
172

173
[React Router Hooks](./react-router-hooks.md)
174

175
### React Router Utilities
176

177
Complete re-export of React Router utility functions for path manipulation, route creation, and data handling.
178

179
```typescript { .api }
180
function createMemoryRouter(routes: RouteObject[], opts?: RouterOptions): Router;
181
function createPath(partialPath: Partial<Path>): string;
182
function generatePath(pattern: string, params?: Params): string;
183
function matchPath(pattern: PathPattern, pathname: string): PathMatch | null;
184
```
185

186
[React Router Utilities](./react-router-utilities.md)
187

188
## Types
189

190
### Core Types
191

192
```typescript { .api }
193
interface NativeRouterProps extends MemoryRouterProps {}
194

195
interface LinkProps extends TouchableHighlightProps {
196
  children?: React.ReactNode;
197
  onPress?: (event: GestureResponderEvent) => void;
198
  relative?: RelativeRoutingType;
199
  replace?: boolean;
200
  state?: any;
201
  to: To;
202
}
203

204
type ParamKeyValuePair = [string, string];
205

206
type URLSearchParamsInit =
207
  | string
208
  | ParamKeyValuePair[]
209
  | Record<string, string | string[]>
210
  | URLSearchParams;
211

212
type SetURLSearchParams = (
213
  nextInit?:
214
    | URLSearchParamsInit
215
    | ((prev: URLSearchParams) => URLSearchParamsInit),
216
  navigateOpts?: NavigateOptions
217
) => void;
218
```
219

220
### Re-exported Types
221

222
All React Router types are re-exported, including:
223

224
- **Route Types**: `RouteObject`, `IndexRouteObject`, `NonIndexRouteObject`, `RouteMatch`
225
- **Navigation Types**: `NavigateFunction`, `NavigateOptions`, `NavigationType`, `Location`
226
- **Component Props**: `RouteProps`, `RoutesProps`, `OutletProps`, `NavigateProps`
227
- **Utility Types**: `To`, `Params`, `PathMatch`, `PathPattern`, `RelativeRoutingType`
228
- **Data Types**: `LoaderFunction`, `ActionFunction`, `Fetcher`, `ErrorResponse`
229

230
See [React Router documentation](https://reactrouter.com/) for complete type definitions.