0
# Native Routing Components
1
2
Core React Native routing components providing the foundation for declarative navigation in mobile applications.
3
4
## Capabilities
5
6
### NativeRouter
7
8
A `<Router>` component that runs on React Native, providing memory-based routing optimized for mobile applications.
9
10
```typescript { .api }
11
/**
12
* A Router component that runs on React Native
13
* Built on top of MemoryRouter for mobile-optimized routing
14
* @param props - Router configuration props
15
* @returns JSX.Element router component
16
*/
17
interface NativeRouterProps extends MemoryRouterProps {
18
basename?: string;
19
children?: React.ReactNode;
20
initialEntries?: InitialEntry[];
21
initialIndex?: number;
22
future?: Partial<FutureConfig>;
23
}
24
25
function NativeRouter(props: NativeRouterProps): JSX.Element;
26
```
27
28
**Usage Examples:**
29
30
```typescript
31
import { NativeRouter, Routes, Route } from "react-router-native";
32
import { View, Text } from "react-native";
33
34
// Basic routing setup
35
function App() {
36
return (
37
<NativeRouter>
38
<Routes>
39
<Route path="/" element={<Home />} />
40
<Route path="/profile" element={<Profile />} />
41
</Routes>
42
</NativeRouter>
43
);
44
}
45
46
// With initial entries for deep linking
47
function AppWithInitial() {
48
return (
49
<NativeRouter initialEntries={["/", "/profile"]} initialIndex={0}>
50
<Routes>
51
<Route path="/" element={<Home />} />
52
<Route path="/profile" element={<Profile />} />
53
</Routes>
54
</NativeRouter>
55
);
56
}
57
58
// With basename for app prefixes
59
function AppWithBasename() {
60
return (
61
<NativeRouter basename="/app">
62
<Routes>
63
<Route path="/" element={<Home />} />
64
<Route path="/settings" element={<Settings />} />
65
</Routes>
66
</NativeRouter>
67
);
68
}
69
```
70
71
### Link
72
73
A `<TouchableHighlight>` component that navigates to a different URL when touched, optimized for React Native touch interactions.
74
75
```typescript { .api }
76
/**
77
* A TouchableHighlight that navigates to a different URL when touched
78
* Provides native touch feedback and accessibility
79
* @param props - Link configuration and TouchableHighlight props
80
* @returns JSX.Element touchable link component
81
*/
82
interface LinkProps extends TouchableHighlightProps {
83
children?: React.ReactNode;
84
onPress?: (event: GestureResponderEvent) => void;
85
relative?: RelativeRoutingType;
86
replace?: boolean;
87
state?: any;
88
to: To;
89
}
90
91
function Link(props: LinkProps): JSX.Element;
92
```
93
94
**Usage Examples:**
95
96
```typescript
97
import { Link } from "react-router-native";
98
import { View, Text } from "react-native";
99
100
// Basic navigation link
101
function HomeScreen() {
102
return (
103
<View>
104
<Text>Home Screen</Text>
105
<Link to="/about">
106
<Text>Go to About</Text>
107
</Link>
108
</View>
109
);
110
}
111
112
// Link with state and custom styling
113
function ProductList() {
114
return (
115
<View>
116
{products.map((product) => (
117
<Link
118
key={product.id}
119
to={`/product/${product.id}`}
120
state={{ product }}
121
style={{ padding: 16, backgroundColor: "#f0f0f0", margin: 8 }}
122
underlayColor="#e0e0e0"
123
>
124
<Text>{product.name}</Text>
125
</Link>
126
))}
127
</View>
128
);
129
}
130
131
// Link with custom onPress handler
132
function CustomLink() {
133
return (
134
<Link
135
to="/settings"
136
onPress={(event) => {
137
console.log("Link pressed");
138
// Additional custom handling
139
// Navigation still occurs unless event.preventDefault() is called
140
}}
141
>
142
<Text>Settings</Text>
143
</Link>
144
);
145
}
146
147
// Link with replace navigation
148
function LoginRedirect() {
149
return (
150
<Link to="/dashboard" replace>
151
<Text>Continue to Dashboard</Text>
152
</Link>
153
);
154
}
155
156
// Link with relative routing
157
function NestedNavigation() {
158
return (
159
<View>
160
<Link to="../parent" relative="path">
161
<Text>Go to Parent</Text>
162
</Link>
163
<Link to="child" relative="route">
164
<Text>Go to Child</Text>
165
</Link>
166
</View>
167
);
168
}
169
170
// Preventing navigation with preventDefault
171
function ConditionalLink() {
172
const isLoggedIn = useIsLoggedIn();
173
174
return (
175
<Link
176
to="/protected"
177
onPress={(event) => {
178
if (!isLoggedIn) {
179
event.preventDefault();
180
// Show login prompt instead
181
showLoginPrompt();
182
}
183
}}
184
>
185
<Text>Protected Content</Text>
186
</Link>
187
);
188
}
189
```
190
191
## Types
192
193
```typescript { .api }
194
interface NativeRouterProps extends MemoryRouterProps {
195
basename?: string;
196
children?: React.ReactNode;
197
initialEntries?: InitialEntry[];
198
initialIndex?: number;
199
future?: Partial<FutureConfig>;
200
}
201
202
interface LinkProps extends TouchableHighlightProps {
203
children?: React.ReactNode;
204
onPress?: (event: GestureResponderEvent) => void;
205
relative?: RelativeRoutingType;
206
replace?: boolean;
207
state?: any;
208
to: To;
209
}
210
211
// Re-exported from React Router
212
type To = string | Partial<Path>;
213
type RelativeRoutingType = "route" | "path";
214
type InitialEntry = string | Partial<Location>;
215
216
interface Path {
217
pathname: string;
218
search: string;
219
hash: string;
220
}
221
222
interface Location extends Path {
223
state: any;
224
key: string;
225
}
226
```
227
228
## Integration Notes
229
230
- **TouchableHighlight**: Link extends all TouchableHighlight props for full customization
231
- **Memory Routing**: NativeRouter uses memory-based routing suitable for mobile apps
232
- **State Management**: Link supports passing state data between routes
233
- **Accessibility**: Both components inherit React Native accessibility features
234
- **Event Handling**: Link allows custom onPress handlers while maintaining navigation functionality