Skip to content

Commit 998db24

Browse files
satya164satya164
committed
Add snack links for navigator usage
1 parent b24e93b commit 998db24

5 files changed

Lines changed: 516 additions & 40 deletions

File tree

‎versioned_docs/version-7.x/bottom-tab-navigator.md‎

Lines changed: 108 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,73 @@ To use this navigator, ensure that you have [`@react-navigation/native` and its
2020
npm install @react-navigation/bottom-tabs@next
2121
```
2222

23-
## API Definition
23+
## Usage
2424

25-
To use this tab navigator, import it from `@react-navigation/bottom-tabs`:
25+
To use this navigator, import it from `@react-navigation/bottom-tabs`:
2626

27-
<samp id="tab-based-navigation-minimal" />
27+
<Tabs groupId="config" queryString="config">
28+
<TabItem value="static" label="Static" default>
2829

29-
```js
30+
```js name="Bottom Tab Navigator" snack version=7
31+
import * as React from 'react';
32+
import { Text, View, Button } from 'react-native';
33+
import { createStaticNavigation, useNavigation } from '@react-navigation/native';
34+
// codeblock-focus-start
35+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
36+
37+
// codeblock-focus-end
38+
function HomeScreen() {
39+
const navigation = useNavigation();
40+
41+
return (
42+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
43+
<Text>Home Screen</Text>
44+
<Button
45+
title="Go to Profile"
46+
onPress={() => navigation.navigate('Profile')}
47+
/>
48+
</View>
49+
);
50+
}
51+
52+
function ProfileScreen() {
53+
const navigation = useNavigation();
54+
55+
return (
56+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
57+
<Text>Profile Screen</Text>
58+
<Button
59+
title="Go to Home"
60+
onPress={() => navigation.navigate('Home')}
61+
/>
62+
</View>
63+
);
64+
}
65+
66+
// codeblock-focus-start
67+
const MyTabs = createBottomTabNavigator({
68+
screens: {
69+
Home: HomeScreen,
70+
Profile: ProfileScreen,
71+
},
72+
});
73+
// codeblock-focus-end
74+
75+
const Navigation = createStaticNavigation(MyTabs);
76+
77+
export default function App() {
78+
return <Navigation />;
79+
}
80+
```
81+
82+
</TabItem>
83+
<TabItem value="dynamic" label="Dynamic">
84+
85+
```js name="Bottom Tab Navigator" snack version=7
86+
import * as React from 'react';
87+
import { Text, View, Button } from 'react-native';
88+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
89+
// codeblock-focus-start
3090
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
3191

3292
const Tab = createBottomTabNavigator();
@@ -35,18 +95,60 @@ function MyTabs() {
3595
return (
3696
<Tab.Navigator>
3797
<Tab.Screen name="Home" component={HomeScreen} />
38-
<Tab.Screen name="Settings" component={SettingsScreen} />
98+
<Tab.Screen name="Profile" component={ProfileScreen} />
3999
</Tab.Navigator>
40100
);
41101
}
102+
// codeblock-focus-end
103+
104+
function HomeScreen() {
105+
const navigation = useNavigation();
106+
107+
return (
108+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
109+
<Text>Home Screen</Text>
110+
<Button
111+
title="Go to Profile"
112+
onPress={() => navigation.navigate('Profile')}
113+
/>
114+
</View>
115+
);
116+
}
117+
118+
function ProfileScreen() {
119+
const navigation = useNavigation();
120+
121+
return (
122+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
123+
<Text>Profile Screen</Text>
124+
<Button
125+
title="Go to Home"
126+
onPress={() => navigation.navigate('Home')}
127+
/>
128+
</View>
129+
);
130+
}
131+
132+
export default function App() {
133+
return (
134+
<NavigationContainer>
135+
<MyTabs />
136+
</NavigationContainer>
137+
);
138+
}
42139
```
43140

141+
</TabItem>
142+
</Tabs>
143+
44144
:::note
45145

46-
For a complete usage guide please visit [Tab Navigation](tab-based-navigation.md)
146+
For a complete usage guide see [Tab Navigation](tab-based-navigation.md).
47147

48148
:::
49149

150+
## API Definition
151+
50152
### Props
51153

52154
The `Tab.Navigator` component accepts following props:

‎versioned_docs/version-7.x/drawer-navigator.md‎

Lines changed: 109 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,33 +58,135 @@ Then, you need to install and configure the libraries that are required by the d
5858
npx pod-install ios
5959
```
6060

61-
## API Definition
61+
## Usage
6262

63-
To use this drawer navigator, import it from `@react-navigation/drawer`:
63+
To use this navigator, import it from `@react-navigation/drawer`:
6464

65-
<samp id="simple-drawer" />
65+
<Tabs groupId="config" queryString="config">
66+
<TabItem value="static" label="Static" default>
6667

67-
```js
68+
```js name="Drawer Navigator" snack version=7
69+
import * as React from 'react';
70+
import { Text, View, Button } from 'react-native';
71+
import { createStaticNavigation, useNavigation } from '@react-navigation/native';
72+
// codeblock-focus-start
73+
import { createDrawerNavigator } from '@react-navigation/drawer';
74+
75+
// codeblock-focus-end
76+
function HomeScreen() {
77+
const navigation = useNavigation();
78+
79+
return (
80+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
81+
<Text>Home Screen</Text>
82+
<Button
83+
title="Go to Profile"
84+
onPress={() => navigation.navigate('Profile')}
85+
/>
86+
</View>
87+
);
88+
}
89+
90+
function ProfileScreen() {
91+
const navigation = useNavigation();
92+
93+
return (
94+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
95+
<Text>Profile Screen</Text>
96+
<Button
97+
title="Go to Home"
98+
onPress={() => navigation.navigate('Home')}
99+
/>
100+
</View>
101+
);
102+
}
103+
104+
// codeblock-focus-start
105+
const MyDrawer = createDrawerNavigator({
106+
screens: {
107+
Home: HomeScreen,
108+
Profile: ProfileScreen,
109+
},
110+
});
111+
// codeblock-focus-end
112+
113+
const Navigation = createStaticNavigation(MyDrawer);
114+
115+
export default function App() {
116+
return <Navigation />;
117+
}
118+
```
119+
120+
</TabItem>
121+
<TabItem value="dynamic" label="Dynamic">
122+
123+
```js name="Drawer Navigator" snack version=7
124+
import * as React from 'react';
125+
import { Text, View, Button } from 'react-native';
126+
import { NavigationContainer, useNavigation } from '@react-navigation/native';
127+
// codeblock-focus-start
68128
import { createDrawerNavigator } from '@react-navigation/drawer';
69129

70130
const Drawer = createDrawerNavigator();
71131

72132
function MyDrawer() {
73133
return (
74134
<Drawer.Navigator>
75-
<Drawer.Screen name="Feed" component={Feed} />
76-
<Drawer.Screen name="Article" component={Article} />
135+
<Drawer.Screen name="Home" component={HomeScreen} />
136+
<Drawer.Screen name="Profile" component={ProfileScreen} />
77137
</Drawer.Navigator>
78138
);
79139
}
140+
// codeblock-focus-end
141+
142+
function HomeScreen() {
143+
const navigation = useNavigation();
144+
145+
return (
146+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
147+
<Text>Home Screen</Text>
148+
<Button
149+
title="Go to Profile"
150+
onPress={() => navigation.navigate('Profile')}
151+
/>
152+
</View>
153+
);
154+
}
155+
156+
function ProfileScreen() {
157+
const navigation = useNavigation();
158+
159+
return (
160+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
161+
<Text>Profile Screen</Text>
162+
<Button
163+
title="Go to Home"
164+
onPress={() => navigation.navigate('Home')}
165+
/>
166+
</View>
167+
);
168+
}
169+
170+
export default function App() {
171+
return (
172+
<NavigationContainer>
173+
<MyDrawer />
174+
</NavigationContainer>
175+
);
176+
}
80177
```
81178

179+
</TabItem>
180+
</Tabs>
181+
82182
:::note
83183

84-
For a complete usage guide please visit [Drawer Navigation](drawer-based-navigation.md).
184+
For a complete usage guide see [Drawer Navigation](drawer-based-navigation.md).
85185

86186
:::
87187

188+
## API Definition
189+
88190
### Props
89191

90192
The `Drawer.Navigator` component accepts following props:

0 commit comments

Comments
 (0)