Skip to content

Commit 985658d

Browse files
WoLewickisatya164
WoLewicki
authored and
satya164
committed
Update snacks in Fundamentals (#590)
1 parent 5b1f4ac commit 985658d

9 files changed

+368
-1
lines changed

‎docs/hello-react-navigation.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ Here, the `Home` route corresponds to the `HomeScreen` component, and the `Detai
100100

101101
Each screen in the navigator can specify some options for the navigator, such as the title to render in the header. These options can be passed in the `options` prop for each screen component:
102102

103+
<samp id="hello-react-navigation-with-options" />
104+
103105
```js
104106
<Stack.Screen
105107
name="Home"
@@ -123,7 +125,7 @@ Sometimes we might want to pass additional props to a screen. We can do that wit
123125
</Stack.Screen>
124126
```
125127

126-
> Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to prevent avoid performance issues.
128+
> Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to prevent avoid performance issues.
127129
128130
## What's next?
129131

‎docs/navigating.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,28 @@ function DetailsScreen({ navigation }) {
123123
124124
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 `navigate('Home')` (not `push`! try that out and see the difference). Another alternative would be `navigation.popToTop()`, which goes back to the first screen in the stack.
125125

126+
<samp id="pop-to-top" />
127+
128+
```js
129+
function DetailsScreen({ navigation }) {
130+
return (
131+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
132+
<Text>Details Screen</Text>
133+
<Button
134+
title="Go to Details... again"
135+
onPress={() => navigation.push('Details')}
136+
/>
137+
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
138+
<Button title="Go back" onPress={() => navigation.goBack()} />
139+
<Button
140+
title="Go back to first screen in stack"
141+
onPress={() => navigation.popToTop()}
142+
/>
143+
</View>
144+
);
145+
}
146+
```
147+
126148
## Summary
127149

128150
- `navigation.navigate('RouteName')` pushes a new route to the stack navigator if it's not already in the stack, otherwise it jumps to that screen.

‎docs/navigation-lifecycle.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ React Navigation emits events to screen components that subscribe to them. We ca
5555

5656
Example:
5757

58+
<samp id="focus-and-blur" />
59+
5860
```js
5961
function Profile({ navigation }) {
6062
React.useEffect(() => {
@@ -76,6 +78,8 @@ Instead of adding event listeners manually, we can use the [`useFocusEffect`](us
7678

7779
Example:
7880

81+
<samp id="use-focus-effect" />
82+
7983
```js
8084
import { useFocusEffect } from '@react-navigation/native';
8185

‎docs/nesting-navigators.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ navigation.navigate('Root', { screen: 'Settings' });
8888

8989
Now, the `Settings` screen will be rendered instead of `Profile` upon navigation. We can also pass params this way:
9090

91+
<samp id="nest-navigators" />
92+
9193
```js
9294
navigation.navigate('Root', {
9395
screen: 'Settings',

‎website/static/examples/next/focus-and-blur.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import * as React from 'react';
2+
import { Button, View, Text } from 'react-native';
3+
import { NavigationNativeContainer } from '@react-navigation/native';
4+
import { createStackNavigator } from '@react-navigation/stack';
5+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
6+
7+
function SettingsScreen({ navigation }) {
8+
return (
9+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
10+
<Text>Settings Screen</Text>
11+
<Button
12+
title="Go to Profile"
13+
onPress={() => navigation.navigate('Profile')}
14+
/>
15+
</View>
16+
);
17+
}
18+
19+
function ProfileScreen({ navigation }) {
20+
React.useEffect(() =>
21+
navigation.addListener('focus', () => alert('Screen was focused'))
22+
);
23+
24+
React.useEffect(() =>
25+
navigation.addListener('blur', () => alert('Screen was unfocused'))
26+
);
27+
28+
return (
29+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
30+
<Text>Profile Screen</Text>
31+
<Button
32+
title="Go to Settings"
33+
onPress={() => navigation.navigate('Settings')}
34+
/>
35+
</View>
36+
);
37+
}
38+
39+
function HomeScreen({ navigation }) {
40+
return (
41+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
42+
<Text>Home Screen</Text>
43+
<Button
44+
title="Go to Details"
45+
onPress={() => navigation.navigate('Details')}
46+
/>
47+
</View>
48+
);
49+
}
50+
51+
function DetailsScreen({ navigation }) {
52+
return (
53+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
54+
<Text>Details Screen</Text>
55+
<Button
56+
title="Go to Details... again"
57+
onPress={() => navigation.push('Details')}
58+
/>
59+
</View>
60+
);
61+
}
62+
const Tab = createBottomTabNavigator();
63+
const SettingsStack = createStackNavigator();
64+
const HomeStack = createStackNavigator();
65+
66+
export default function App() {
67+
return (
68+
<NavigationNativeContainer>
69+
<Tab.Navigator>
70+
<Tab.Screen name="First">
71+
{() => (
72+
<SettingsStack.Navigator>
73+
<SettingsStack.Screen
74+
name="Settings"
75+
component={SettingsScreen}
76+
/>
77+
<SettingsStack.Screen name="Profile" component={ProfileScreen} />
78+
</SettingsStack.Navigator>
79+
)}
80+
</Tab.Screen>
81+
<Tab.Screen name="Second">
82+
{() => (
83+
<HomeStack.Navigator>
84+
<HomeStack.Screen name="Home" component={HomeScreen} />
85+
<HomeStack.Screen name="Details" component={DetailsScreen} />
86+
</HomeStack.Navigator>
87+
)}
88+
</Tab.Screen>
89+
</Tab.Navigator>
90+
</NavigationNativeContainer>
91+
);
92+
}

‎website/static/examples/next/hello-react-navigation-with-options.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import { View, Text } from 'react-native';
3+
import { NavigationNativeContainer } from '@react-navigation/native';
4+
import { createStackNavigator } from '@react-navigation/stack';
5+
6+
function HomeScreen() {
7+
return (
8+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
9+
<Text>Home Screen</Text>
10+
</View>
11+
);
12+
}
13+
14+
const Stack = createStackNavigator();
15+
16+
function App() {
17+
return (
18+
<NavigationNativeContainer>
19+
<Stack.Navigator>
20+
<Stack.Screen
21+
name="Home"
22+
component={HomeScreen}
23+
options={{ title: 'Overview' }}
24+
/>
25+
</Stack.Navigator>
26+
</NavigationNativeContainer>
27+
);
28+
}
29+
30+
export default App;

‎website/static/examples/next/nest-navigators.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import * as React from 'react';
2+
import { Button, View, Text } from 'react-native';
3+
import { NavigationNativeContainer } from '@react-navigation/native';
4+
import { createStackNavigator } from '@react-navigation/stack';
5+
import { createDrawerNavigator } from '@react-navigation/drawer';
6+
7+
function SettingsScreen({ route, navigation }) {
8+
const { user } = route.params;
9+
return (
10+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
11+
<Text>Settings Screen</Text>
12+
<Text>userParam: {JSON.stringify(user)}</Text>
13+
<Button
14+
title="Go to Profile"
15+
onPress={() => navigation.navigate('Profile')}
16+
/>
17+
</View>
18+
);
19+
}
20+
21+
function ProfileScreen({ navigation }) {
22+
return (
23+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
24+
<Text>Profile Screen</Text>
25+
</View>
26+
);
27+
}
28+
29+
function HomeScreen({ navigation }) {
30+
return (
31+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
32+
<Text>Home Screen</Text>
33+
<Button
34+
title="Go to Settings"
35+
onPress={() =>
36+
navigation.navigate('Root', {
37+
screen: 'Settings',
38+
params: { user: 'jane' },
39+
})
40+
}
41+
/>
42+
</View>
43+
);
44+
}
45+
46+
const Drawer = createDrawerNavigator();
47+
const Stack = createStackNavigator();
48+
49+
function Root() {
50+
return (
51+
<Stack.Navigator>
52+
<Stack.Screen name="Profile" component={ProfileScreen} />
53+
<Stack.Screen name="Settings" component={SettingsScreen} />
54+
</Stack.Navigator>
55+
);
56+
}
57+
58+
export default function App() {
59+
return (
60+
<NavigationNativeContainer>
61+
<Drawer.Navigator initialRouteName="Root">
62+
<Drawer.Screen name="Root" component={Root} />
63+
<Drawer.Screen name="Home" component={HomeScreen} />
64+
</Drawer.Navigator>
65+
</NavigationNativeContainer>
66+
);
67+
}

‎website/static/examples/next/pop-to-top.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as React from 'react';
2+
import { Button, View, Text } from 'react-native';
3+
import { NavigationNativeContainer } from '@react-navigation/native';
4+
import { createStackNavigator } from '@react-navigation/stack';
5+
6+
function HomeScreen({ navigation }) {
7+
return (
8+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
9+
<Text>Home Screen</Text>
10+
<Button
11+
title="Go to Details"
12+
onPress={() => navigation.navigate('Details')}
13+
/>
14+
</View>
15+
);
16+
}
17+
18+
function DetailsScreen({ navigation }) {
19+
return (
20+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
21+
<Text>Details Screen</Text>
22+
<Button
23+
title="Go to Details... again"
24+
onPress={() => navigation.push('Details')}
25+
/>
26+
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
27+
<Button title="Go back" onPress={() => navigation.goBack()} />
28+
<Button
29+
title="Go back to first screen in stack"
30+
onPress={() => navigation.popToTop()}
31+
/>
32+
</View>
33+
);
34+
}
35+
36+
const Stack = createStackNavigator();
37+
38+
function App() {
39+
return (
40+
<NavigationNativeContainer>
41+
<Stack.Navigator initialRouteName="Home">
42+
<Stack.Screen name="Home" component={HomeScreen} />
43+
<Stack.Screen name="Details" component={DetailsScreen} />
44+
</Stack.Navigator>
45+
</NavigationNativeContainer>
46+
);
47+
}
48+
49+
export default App;

0 commit comments

Comments
 (0)