Skip to content

Commit

Permalink
Add snack links to navigating
Browse files Browse the repository at this point in the history
  • Loading branch information
@satya164
satya164 committed Dec 27, 2023
1 parent ee10c0b commit 9c68751
Showing 1 changed file with 202 additions and 21 deletions.
223 changes: 202 additions & 21 deletions versioned_docs/version-7.x/navigating.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,14 @@ We'll do something similar to the latter, but rather than using a `window.locati

## Navigating to a new screen

<samp id="new-screen" />

```js
```js name="Navigating to a new screen" snack version=7
// codeblock-focus-start
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import {
createStaticNavigation,
useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
Expand All @@ -51,6 +53,29 @@ function HomeScreen() {
}

// ... other code from the previous section
// codeblock-focus-end

function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}

const RootStack = createNativeStackNavigator({
initialRouteName: 'Home',
screens: {
Home: HomeScreen,
Details: DetailsScreen,
},
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
return <Navigation />;
}
```

Let's break this down:
Expand All @@ -66,11 +91,32 @@ If we call `navigation.navigate` with a route name that we haven't defined in a

So we now have a stack with two routes: 1) the `Home` route 2) the `Details` route. What would happen if we navigated to the `Details` route again, from the `Details` screen?

## Navigate to a route multiple times
## Navigate to a screen multiple times

```js name="Navigate to a screen multiple times" snack version=7
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import {
createStaticNavigation,
useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

<samp id="multiple-navigate" />
function HomeScreen() {
const navigation = useNavigation();

```js
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}

// codeblock-focus-start
function DetailsScreen() {
const navigation = useNavigation();

Expand All @@ -84,19 +130,79 @@ function DetailsScreen() {
</View>
);
}
// codeblock-focus-end

const RootStack = createNativeStackNavigator({
initialRouteName: 'Home',
screens: {
Home: HomeScreen,
Details: DetailsScreen,
},
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
return <Navigation />;
}
```

If you run this code, you'll notice that when you tap "Go to Details... again" that it doesn't do anything! This is because we are already on the Details route. The `navigate` function roughly means "go to this screen", and if you are already on that screen then it makes sense that it would do nothing.
If you run this code, you'll notice that when you tap "Go to Details... again", it doesn't do anything! This is because we are already on the Details route. The `navigate` function roughly means "go to this screen", and if you are already on that screen then it makes sense that it would do nothing.

Let's suppose that we actually _want_ to add another details screen. This is pretty common in cases where you pass in some unique data to each route (more on that later when we talk about `params`!). To do this, we can change `navigate` to `push`. This allows us to express the intent to add another route regardless of the existing navigation history.

<samp id="multiple-push" />
```js name="Navigate to a screen multiple times" snack version=7
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import {
createStaticNavigation,
useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

```js
<Button
title="Go to Details... again"
onPress={() => navigation.push('Details')}
/>
function HomeScreen() {
const navigation = useNavigation();

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}

function DetailsScreen() {
const navigation = useNavigation();

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
// codeblock-focus-start
<Button
title="Go to Details... again"
onPress={() => navigation.push('Details')}
/>
// codeblock-focus-end
</View>
);
}

const RootStack = createNativeStackNavigator({
initialRouteName: 'Home',
screens: {
Home: HomeScreen,
Details: DetailsScreen,
},
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
return <Navigation />;
}
```

<div style={{ display: 'flex', margin: '16px 0' }}>
Expand All @@ -111,11 +217,32 @@ Each time you call `push` we add a new route to the navigation stack. When you c

The header provided by the native stack navigator will automatically include a back button when it is possible to go back from the active screen (if there is only one screen in the navigation stack, there is nothing that you can go back to, and so there is no back button).

Sometimes you'll want to be able to programmatically trigger this behavior, and for that you can use `navigation.goBack();`.
Sometimes you'll want to be able to programmatically trigger this behavior, and for that, you can use `navigation.goBack()`.

<samp id="go-back" />
```js name="Going back" snack version=7
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import {
createStaticNavigation,
useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

```js
function HomeScreen() {
const navigation = useNavigation();

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}

// codeblock-focus-start
function DetailsScreen() {
const navigation = useNavigation();

Expand All @@ -126,11 +253,27 @@ function DetailsScreen() {
title="Go to Details... again"
onPress={() => navigation.push('Details')}
/>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
// highlight-start
<Button title="Go back" onPress={() => navigation.goBack()} />
// highlight-end
</View>
);
}
// codeblock-focus-end

const RootStack = createNativeStackNavigator({
initialRouteName: 'Home',
screens: {
Home: HomeScreen,
Details: DetailsScreen,
},
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
return <Navigation />;
}
```

:::note
Expand All @@ -141,9 +284,30 @@ On Android, React Navigation hooks in to the hardware back button and fires the

Another common requirement is to be able to go back _multiple_ screens -- for example, if you are several screens deep in a stack and want to dismiss all of them to go back to the first screen. In this case, we know that we want to go back to `Home` so we can use `popTo('Home')`. Another alternative would be `navigation.popToTop()`, which goes back to the first screen in the stack.

<samp id="pop-to-top" />
```js name="Going back to specific screen" snack version=7
import * as React from 'react';
import { Button, View, Text } from 'react-native';
import {
createStaticNavigation,
useNavigation,
} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

```js
function HomeScreen() {
const navigation = useNavigation();

return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}

// codeblock-focus-start
function DetailsScreen() {
const navigation = useNavigation();

Expand All @@ -154,15 +318,32 @@ function DetailsScreen() {
title="Go to Details... again"
onPress={() => navigation.push('Details')}
/>
<Button title="Go to Home" onPress={() => navigation.popTo('Home')} />
<Button title="Go back" onPress={() => navigation.goBack()} />
// highlight-start
<Button title="Go to Home" onPress={() => navigation.popTo('Home')} />
<Button
title="Go back to first screen in stack"
onPress={() => navigation.popToTop()}
/>
// highlight-end
</View>
);
}
// codeblock-focus-end

const RootStack = createNativeStackNavigator({
initialRouteName: 'Home',
screens: {
Home: HomeScreen,
Details: DetailsScreen,
},
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
return <Navigation />;
}
```

## Summary
Expand Down

0 comments on commit 9c68751

Please sign in to comment.