Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit b466bfd

Browse files
satya164satya164
committedMay 30, 2025··
Document navigation.replaceParams and CommonActions.replaceParams
1 parent 136ce31 commit b466bfd

File tree

4 files changed

+547
-478
lines changed

4 files changed

+547
-478
lines changed
 

‎versioned_docs/version-7.x/navigation-actions.md

Lines changed: 329 additions & 470 deletions
Large diffs are not rendered by default.

‎versioned_docs/version-7.x/navigation-object.md

Lines changed: 214 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -451,7 +451,7 @@ The `reset` method lets us replace the navigator state with a new state:
451451
<Tabs groupId="config" queryString="config">
452452
<TabItem value="static" label="Static" default>
453453

454-
```js name="Navigate - replace and reset" snack
454+
```js name="Navigation object replace and reset" snack
455455
import * as React from 'react';
456456
import { Button } from '@react-navigation/elements';
457457
import { View, Text } from 'react-native';
@@ -590,7 +590,7 @@ export default App;
590590
</TabItem>
591591
<TabItem value="dynamic" label="Dynamic">
592592

593-
```js name="Navigate - replace and reset" snack
593+
```js name="Navigation object replace and reset" snack
594594
import * as React from 'react';
595595
import { Button } from '@react-navigation/elements';
596596
import { View, Text } from 'react-native';
@@ -972,7 +972,7 @@ The `setParams` method lets us update the params (`route.params`) of the current
972972
<Tabs groupId="config" queryString="config">
973973
<TabItem value="static" label="Static" default>
974974

975-
```js name="Navigate - setParams" snack
975+
```js name="Navigation object setParams" snack
976976
import * as React from 'react';
977977
import { Button } from '@react-navigation/elements';
978978
import { View, Text } from 'react-native';
@@ -1074,7 +1074,7 @@ export default App;
10741074
</TabItem>
10751075
<TabItem value="dynamic" label="Dynamic">
10761076

1077-
```js name="Navigate - setParams" snack
1077+
```js name="Navigation object setParams" snack
10781078
import * as React from 'react';
10791079
import { Button } from '@react-navigation/elements';
10801080
import { View, Text } from 'react-native';
@@ -1173,14 +1173,222 @@ export default App;
11731173
</TabItem>
11741174
</Tabs>
11751175

1176+
### `replaceParams`
1177+
1178+
The `replaceParams` method lets us replace the params (`route.params`) of the current screen with a new params object.
1179+
1180+
<Tabs groupId="config" queryString="config">
1181+
<TabItem value="static" label="Static" default>
1182+
1183+
```js name="Navigation object replaceParams" snack
1184+
import * as React from 'react';
1185+
import { Button } from '@react-navigation/elements';
1186+
import { View, Text } from 'react-native';
1187+
import {
1188+
useNavigation,
1189+
createStaticNavigation,
1190+
} from '@react-navigation/native';
1191+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
1192+
1193+
function HomeScreen() {
1194+
const navigation = useNavigation();
1195+
1196+
return (
1197+
<View
1198+
style={{
1199+
flex: 1,
1200+
gap: 8,
1201+
alignItems: 'center',
1202+
justifyContent: 'center',
1203+
}}
1204+
>
1205+
<Text>This is the home screen of the app</Text>
1206+
<Button
1207+
onPress={() => {
1208+
navigation.navigate('Profile', {
1209+
friends: ['Brent', 'Satya', 'Michaś'],
1210+
title: "Brent's Profile",
1211+
});
1212+
}}
1213+
>
1214+
Go to Brents profile
1215+
</Button>
1216+
</View>
1217+
);
1218+
}
1219+
1220+
// codeblock-focus-start
1221+
function ProfileScreen({ route }) {
1222+
const navigation = useNavigation();
1223+
1224+
return (
1225+
<View
1226+
style={{
1227+
flex: 1,
1228+
gap: 8,
1229+
alignItems: 'center',
1230+
justifyContent: 'center',
1231+
}}
1232+
>
1233+
<Text>Profile Screen</Text>
1234+
<Text>Friends: </Text>
1235+
<Text>{route.params.friends[0]}</Text>
1236+
<Text>{route.params.friends[1]}</Text>
1237+
<Text>{route.params.friends[2]}</Text>
1238+
<Button
1239+
onPress={() => {
1240+
// highlight-start
1241+
navigation.replaceParams({
1242+
friends:
1243+
route.params.friends[0] === 'Brent'
1244+
? ['Wojciech', 'Szymon', 'Jakub']
1245+
: ['Brent', 'Satya', 'Michaś'],
1246+
title:
1247+
route.params.title === "Brent's Profile"
1248+
? "Lucy's Profile"
1249+
: "Brent's Profile",
1250+
});
1251+
// highlight-end
1252+
}}
1253+
>
1254+
Swap title and friends
1255+
</Button>
1256+
<Button onPress={() => navigation.goBack()}>Go back</Button>
1257+
</View>
1258+
);
1259+
}
1260+
// codeblock-focus-end
1261+
1262+
const Stack = createNativeStackNavigator({
1263+
initialRouteName: 'Home',
1264+
screens: {
1265+
Home: HomeScreen,
1266+
Profile: {
1267+
screen: ProfileScreen,
1268+
options: ({ route }) => ({ title: route.params.title }),
1269+
},
1270+
},
1271+
});
1272+
1273+
const Navigation = createStaticNavigation(Stack);
1274+
1275+
function App() {
1276+
return <Navigation />;
1277+
}
1278+
1279+
export default App;
1280+
```
1281+
1282+
</TabItem>
1283+
<TabItem value="dynamic" label="Dynamic">
1284+
1285+
```js name="Navigation object replaceParams" snack
1286+
import * as React from 'react';
1287+
import { Button } from '@react-navigation/elements';
1288+
import { View, Text } from 'react-native';
1289+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
1290+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
1291+
1292+
function HomeScreen() {
1293+
const navigation = useNavigation();
1294+
1295+
return (
1296+
<View
1297+
style={{
1298+
flex: 1,
1299+
gap: 8,
1300+
alignItems: 'center',
1301+
justifyContent: 'center',
1302+
}}
1303+
>
1304+
<Text>This is the home screen of the app</Text>
1305+
<Button
1306+
onPress={() => {
1307+
navigation.navigate('Profile', {
1308+
friends: ['Brent', 'Satya', 'Michaś'],
1309+
title: "Brent's Profile",
1310+
});
1311+
}}
1312+
>
1313+
Go to Brents profile
1314+
</Button>
1315+
</View>
1316+
);
1317+
}
1318+
1319+
// codeblock-focus-start
1320+
function ProfileScreen({ route }) {
1321+
const navigation = useNavigation();
1322+
1323+
return (
1324+
<View
1325+
style={{
1326+
flex: 1,
1327+
gap: 8,
1328+
alignItems: 'center',
1329+
justifyContent: 'center',
1330+
}}
1331+
>
1332+
<Text>Profile Screen</Text>
1333+
<Text>Friends: </Text>
1334+
<Text>{route.params.friends[0]}</Text>
1335+
<Text>{route.params.friends[1]}</Text>
1336+
<Text>{route.params.friends[2]}</Text>
1337+
<Button
1338+
onPress={() => {
1339+
// highlight-start
1340+
navigation.replaceParams({
1341+
friends:
1342+
route.params.friends[0] === 'Brent'
1343+
? ['Wojciech', 'Szymon', 'Jakub']
1344+
: ['Brent', 'Satya', 'Michaś'],
1345+
title:
1346+
route.params.title === "Brent's Profile"
1347+
? "Lucy's Profile"
1348+
: "Brent's Profile",
1349+
});
1350+
// highlight-end
1351+
}}
1352+
>
1353+
Swap title and friends
1354+
</Button>
1355+
<Button onPress={() => navigation.goBack()}>Go back</Button>
1356+
</View>
1357+
);
1358+
}
1359+
// codeblock-focus-end
1360+
1361+
const Stack = createNativeStackNavigator();
1362+
1363+
function App() {
1364+
return (
1365+
<NavigationContainer>
1366+
<Stack.Navigator initialRouteName="Home">
1367+
<Stack.Screen name="Home" component={HomeScreen} />
1368+
<Stack.Screen
1369+
name="Profile"
1370+
component={ProfileScreen}
1371+
options={({ route }) => ({ title: route.params.title })}
1372+
/>
1373+
</Stack.Navigator>
1374+
</NavigationContainer>
1375+
);
1376+
}
1377+
1378+
export default App;
1379+
```
1380+
1381+
</TabItem>
1382+
</Tabs>
1383+
11761384
### `setOptions`
11771385

11781386
The `setOptions` method lets us set screen options from within the component. This is useful if we need to use the component's props, state or context to configure our screen.
11791387

11801388
<Tabs groupId="config" queryString="config">
11811389
<TabItem value="static" label="Static" default>
11821390

1183-
```js name="Navigate - setOptions" snack
1391+
```js name="Navigation object setOptions" snack
11841392
import * as React from 'react';
11851393
import { View, Text, TextInput } from 'react-native';
11861394
import { Button } from '@react-navigation/elements';
@@ -1270,7 +1478,7 @@ export default App;
12701478
</TabItem>
12711479
<TabItem value="dynamic" label="Dynamic">
12721480

1273-
```js name="Navigate - setOptions" snack
1481+
```js name="Navigation object setOptions" snack
12741482
import * as React from 'react';
12751483
import { View, Text, TextInput } from 'react-native';
12761484
import { Button } from '@react-navigation/elements';

‎versioned_docs/version-7.x/params.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,9 +193,11 @@ export default function App() {
193193
}
194194
```
195195

196+
The `setParams` method merges the new params with the existing ones. To replace the existing params, you can use [`replaceParams`](navigation-object.md#replaceparams) instead.
197+
196198
:::note
197199

198-
Avoid using `setParams` to update screen options such as `title` etc. If you need to update options, use [`setOptions`](navigation-object.md#setoptions) instead.
200+
Avoid using `setParams` or `replaceParams` to update screen options such as `title` etc. If you need to update options, use [`setOptions`](navigation-object.md#setoptions) instead.
199201

200202
:::
201203

‎versioned_docs/version-7.x/typescript.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ If you have an [`id`](./navigator.md#id) prop for your navigator, you can do:
228228
type Props = NativeStackScreenProps<RootStackParamList, 'Profile', 'MyStack'>;
229229
```
230230

231-
This allows us to type check route names and params which you're navigating using [`navigate`](navigation-object.md#navigate), [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams).
231+
This allows us to type check route names and params which you're navigating using [`navigate`](navigation-object.md#navigate), [`push`](stack-actions.md#push) etc. The name of the current route is necessary to type check the params in `route.params` and when you call [`setParams`](navigation-actions#setparams) or [`replaceParams`](navigation-actions#replaceparams).
232232

233233
Similarly, you can import `StackScreenProps` from [`@react-navigation/stack`](stack-navigator.md), `DrawerScreenProps` from [`@react-navigation/drawer`](drawer-navigator.md), `BottomTabScreenProps` from [`@react-navigation/bottom-tabs`](bottom-tab-navigator.md) and so on.
234234

0 commit comments

Comments
 (0)
Please sign in to comment.