0
# Navigation Hooks
1
2
Native-specific hooks for custom navigation behavior, hardware integration, and deep linking support in React Native applications.
3
4
## Capabilities
5
6
### useLinkPressHandler
7
8
Handles the press behavior for router `<Link>` components. Useful for creating custom navigation components with the same press behavior as the built-in Link.
9
10
```typescript { .api }
11
/**
12
* Handles press behavior for router Link components
13
* Creates a press handler function for custom Link implementations
14
* @param to - Navigation target (string or path object)
15
* @param options - Navigation options
16
* @returns Press handler function for touch events
17
*/
18
function useLinkPressHandler(
19
to: To,
20
options?: {
21
replace?: boolean;
22
state?: any;
23
relative?: RelativeRoutingType;
24
}
25
): (event: GestureResponderEvent) => void;
26
```
27
28
**Usage Examples:**
29
30
```typescript
31
import { useLinkPressHandler } from "react-router-native";
32
import { TouchableOpacity, Text } from "react-native";
33
34
// Custom link component using useLinkPressHandler
35
function CustomLink({ to, children, style }) {
36
const handlePress = useLinkPressHandler(to);
37
38
return (
39
<TouchableOpacity onPress={handlePress} style={style}>
40
{children}
41
</TouchableOpacity>
42
);
43
}
44
45
// Custom link with replace navigation
46
function ReplaceLink({ to, children }) {
47
const handlePress = useLinkPressHandler(to, { replace: true });
48
49
return (
50
<TouchableOpacity onPress={handlePress}>
51
<Text>{children}</Text>
52
</TouchableOpacity>
53
);
54
}
55
56
// Custom link with state
57
function StatefulLink({ to, state, children }) {
58
const handlePress = useLinkPressHandler(to, { state });
59
60
return (
61
<TouchableOpacity onPress={handlePress}>
62
<Text>{children}</Text>
63
</TouchableOpacity>
64
);
65
}
66
67
// Custom button that navigates
68
function NavigateButton({ destination, userData }) {
69
const handlePress = useLinkPressHandler(destination, {
70
state: { user: userData },
71
replace: false
72
});
73
74
return (
75
<TouchableOpacity
76
onPress={handlePress}
77
style={{ padding: 12, backgroundColor: "#007AFF", borderRadius: 8 }}
78
>
79
<Text style={{ color: "white", textAlign: "center" }}>
80
Continue
81
</Text>
82
</TouchableOpacity>
83
);
84
}
85
```
86
87
### useDeepLinking
88
89
Enables deep linking support for both initial app launch and subsequent incoming links. Automatically handles URL schemes and navigates to appropriate routes.
90
91
```typescript { .api }
92
/**
93
* Enables deep linking support for initial app launch and incoming links
94
* Listens for URL events and navigates to matching routes
95
* Must be called within a component inside the router
96
*/
97
function useDeepLinking(): void;
98
```
99
100
**Usage Examples:**
101
102
```typescript
103
import { useDeepLinking } from "react-router-native";
104
import { View, Text } from "react-native";
105
106
// Enable deep linking in your app
107
function App() {
108
return (
109
<NativeRouter>
110
<DeepLinkHandler />
111
<Routes>
112
<Route path="/" element={<Home />} />
113
<Route path="/product/:id" element={<Product />} />
114
<Route path="/user/:userId" element={<Profile />} />
115
</Routes>
116
</NativeRouter>
117
);
118
}
119
120
function DeepLinkHandler() {
121
useDeepLinking();
122
return null; // This component only handles deep linking
123
}
124
125
// Alternative: Enable in a main screen component
126
function MainScreen() {
127
useDeepLinking();
128
129
return (
130
<View>
131
<Text>Welcome to the app!</Text>
132
{/* Other UI elements */}
133
</View>
134
);
135
}
136
137
// URL scheme examples that would work:
138
// myapp://product/123 -> navigates to /product/123
139
// myapp://user/456 -> navigates to /user/456
140
// myapp:// -> navigates to /
141
```
142
143
### useHardwareBackButton
144
145
Enables support for the hardware back button on Android devices. Currently a placeholder implementation that can be extended for custom back button handling.
146
147
```typescript { .api }
148
/**
149
* Enables support for hardware back button on Android
150
* Currently a placeholder implementation
151
* Sets up event listeners for hardware back button presses
152
*/
153
function useHardwareBackButton(): void;
154
```
155
156
**Usage Examples:**
157
158
```typescript
159
import { useHardwareBackButton } from "react-router-native";
160
import { View, Text } from "react-native";
161
162
// Enable hardware back button handling
163
function App() {
164
return (
165
<NativeRouter>
166
<BackButtonHandler />
167
<Routes>
168
<Route path="/" element={<Home />} />
169
<Route path="/settings" element={<Settings />} />
170
</Routes>
171
</NativeRouter>
172
);
173
}
174
175
function BackButtonHandler() {
176
useHardwareBackButton();
177
return null;
178
}
179
180
// Or enable in a main component
181
function MainLayout() {
182
useHardwareBackButton();
183
184
return (
185
<View>
186
<Text>Main Layout</Text>
187
{/* Navigation and content */}
188
</View>
189
);
190
}
191
```
192
193
### useAndroidBackButton
194
195
Alias for `useHardwareBackButton`. Provides the same functionality with a more explicit name for Android-specific back button handling.
196
197
```typescript { .api }
198
/**
199
* Alias for useHardwareBackButton
200
* Enables support for hardware back button on Android
201
*/
202
function useAndroidBackButton(): void;
203
```
204
205
**Usage Examples:**
206
207
```typescript
208
import { useAndroidBackButton } from "react-router-native";
209
210
// Same usage as useHardwareBackButton
211
function AndroidApp() {
212
useAndroidBackButton();
213
214
return (
215
<View>
216
<Text>Android App with Back Button Support</Text>
217
</View>
218
);
219
}
220
```
221
222
## Types
223
224
```typescript { .api }
225
// Navigation target type
226
type To = string | Partial<Path>;
227
228
// Relative routing behavior
229
type RelativeRoutingType = "route" | "path";
230
231
// React Native gesture event
232
interface GestureResponderEvent {
233
nativeEvent: any;
234
currentTarget: any;
235
target: any;
236
preventDefault(): void;
237
// ... other event properties
238
}
239
240
// Path object structure
241
interface Path {
242
pathname?: string;
243
search?: string;
244
hash?: string;
245
}
246
```
247
248
## Integration Notes
249
250
- **Deep Linking Setup**: Requires proper URL scheme configuration in your React Native project
251
- **Android Back Button**: Currently a placeholder implementation - can be extended for custom behavior
252
- **Custom Components**: `useLinkPressHandler` enables building custom navigation components that integrate with React Router
253
- **Event Handling**: All hooks work within the React Router context and require components to be inside a Router
254
- **Platform Support**: Deep linking works on both iOS and Android, back button hooks are Android-specific