Skip to content

Commit 4b7b0da

Browse files
WoLewickiWoLewicki
authored
fix: change .md to.hmtl and add export default to App (#662)
Changed broken links from .md to .html and added <NavigationContainer> where it was needed
1 parent 2afc2a9 commit 4b7b0da

File tree

9 files changed

+68
-53
lines changed

9 files changed

+68
-53
lines changed

‎website/versioned_docs/version-4.x/getting-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ original_id: getting-started
77

88
React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.
99

10-
Before you commit to using React Navigation for your project, you might want to read the [anti-pitch](pitch.md) &mdash; it will help you to understand the tradeoffs that we have chosen along with the areas where we consider the library to be deficient currently.
10+
Before you commit to using React Navigation for your project, you might want to read the [anti-pitch](pitch.html) &mdash; it will help you to understand the tradeoffs that we have chosen along with the areas where we consider the library to be deficient currently.
1111

1212
## What to expect
1313

@@ -154,4 +154,4 @@ import 'react-native-gesture-handler';
154154
155155
Now you are ready to build and run your app on the device/simulator.
156156

157-
Continue to ["Hello React Navigation"](hello-react-navigation.md) to start writing some code.
157+
Continue to ["Hello React Navigation"](hello-react-navigation.html) to start writing some code.

‎website/versioned_docs/version-4.x/stack-navigator-1.0.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Provides a way for your app to transition between screens where each new screen
99

1010
By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, fade in from the bottom on Android. On iOS the stack navigator can also be configured to a modal style where screens slide in from the bottom.
1111

12-
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`react-navigation-stack`](https://github.com/react-navigation/stack/tree/1.0).
12+
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.html), then install [`react-navigation-stack`](https://github.com/react-navigation/stack/tree/1.0).
1313

1414
```sh
1515
npm install react-navigation-stack@^1.10.3

‎website/versioned_docs/version-4.x/stack-navigator.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Provides a way for your app to transition between screens where each new screen
99

1010
By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, fade in from the bottom on Android. On iOS the stack navigator can also be configured to a modal style where screens slide in from the bottom.
1111

12-
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`react-navigation-stack`](https://github.com/react-navigation/stack).
12+
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.html), then install [`react-navigation-stack`](https://github.com/react-navigation/stack).
1313

1414
```sh
1515
npm install react-navigation-stack @react-native-community/masked-view

‎website/versioned_docs/version-4.x/troubleshooting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ sidebar_label: Troubleshooting
55
original_id: troubleshooting
66
---
77

8-
This section attempts to outline issues that can happen during setup and may not be related to React Navigation itself. Also see [common mistakes](common-mistakes.md).
8+
This section attempts to outline issues that can happen during setup and may not be related to React Navigation itself. Also see [common mistakes](common-mistakes.html).
99

1010
Before troubleshooting an issue, make sure that you have upgraded to **the latest available versions** of the packages. You can install the latest versions by installing the packages again (e.g. `npm install package-name`).
1111

‎website/versioned_docs/version-5.x/navigation-lifecycle.md

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,29 @@ Similar results can be observed (in combination) with other navigators as well.
2424
```jsx
2525
function App() {
2626
return (
27-
<Tab.Navigator>
28-
<Tab.Screen name="First">
29-
{() => (
30-
<SettingsStack.Navigator>
31-
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
32-
<SettingsStack.Screen name="Profile" component={ProfileScreen} />
33-
</SettingsStack.Navigator>
34-
)}
35-
</Tab.Screen>
36-
<Tab.Screen name="Second">
37-
{() => (
38-
<HomeStack.Navigator>
39-
<HomeStack.Screen name="Home" component={HomeScreen} />
40-
<HomeStack.Screen name="Details" component={DetailsScreen} />
41-
</HomeStack.Navigator>
42-
)}
43-
</Tab.Screen>
44-
</Tab.Navigator>
27+
<NavigationContainer>
28+
<Tab.Navigator>
29+
<Tab.Screen name="First">
30+
{() => (
31+
<SettingsStack.Navigator>
32+
<SettingsStack.Screen
33+
name="Settings"
34+
component={SettingsScreen}
35+
/>
36+
<SettingsStack.Screen name="Profile" component={ProfileScreen} />
37+
</SettingsStack.Navigator>
38+
)}
39+
</Tab.Screen>
40+
<Tab.Screen name="Second">
41+
{() => (
42+
<HomeStack.Navigator>
43+
<HomeStack.Screen name="Home" component={HomeScreen} />
44+
<HomeStack.Screen name="Details" component={DetailsScreen} />
45+
</HomeStack.Navigator>
46+
)}
47+
</Tab.Screen>
48+
</Tab.Navigator>
49+
</NavigationContainer>
4550
);
4651
}
4752
```

‎website/versioned_docs/version-5.x/navigation-prop.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ Firing the `setParams` action allows a screen to change the params in the route,
137137
function ProfileScreen({ navigation: { setParams } }) {
138138
render() {
139139
return (
140-
<Button
140+
<Button
141141
onPress={() =>
142142
navigation.setParams({
143143
friends:

‎website/versioned_docs/version-5.x/nesting-navigators.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,13 @@ function Home() {
1919

2020
function App() {
2121
return (
22-
<Stack.Navigator>
23-
<Stack.Screen name="Home" component={Home} />
24-
<Stack.Screen name="Profile" component={Profile} />
25-
<Stack.Screen name="Settings" component={Settings} />
26-
</Stack.Navigator>
22+
<NavigationContainer>
23+
<Stack.Navigator>
24+
<Stack.Screen name="Home" component={Home} />
25+
<Stack.Screen name="Profile" component={Profile} />
26+
<Stack.Screen name="Settings" component={Settings} />
27+
</Stack.Navigator>
28+
</NavigationContainer>
2729
);
2830
}
2931
```
@@ -83,10 +85,12 @@ function Root() {
8385

8486
function App() {
8587
return (
86-
<Drawer.Navigator>
87-
<Drawer.Screen name="Home" component={Home} />
88-
<Drawer.Screen name="Root" component={Root} />
89-
</Drawer.Navigator>
88+
<NavigationContainer>
89+
<Drawer.Navigator>
90+
<Drawer.Screen name="Home" component={Home} />
91+
<Drawer.Screen name="Root" component={Root} />
92+
</Drawer.Navigator>
93+
</NavigationContainer>
9094
);
9195
}
9296
```

‎website/versioned_docs/version-5.x/screen-options-resolution.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -225,12 +225,14 @@ function HomeTabs() {
225225

226226
const RootStack = createStackNavigator();
227227

228-
function App() {
228+
export default function App() {
229229
return (
230-
<RootStack.Navigator>
231-
<RootStack.Screen name="Home" component={HomeTabs} />
232-
<RootStack.Screen name="Settings" component={SettingsScreen} />
233-
</RootStack.Navigator>
230+
<NavigationContainer>
231+
<RootStack.Navigator>
232+
<RootStack.Screen name="Home" component={HomeTabs} />
233+
<RootStack.Screen name="Settings" component={SettingsScreen} />
234+
</RootStack.Navigator>
235+
</NavigationContainer>
234236
);
235237
}
236238
```

‎website/versioned_docs/version-5.x/upgrading-from-4.x.md

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,9 @@ function SelectionScreen({ navigation }) {
197197

198198
navigation.setOptions({
199199
title:
200-
selectionCount === 0 ? 'Select items' : `${selectionCount} items selected`,
200+
selectionCount === 0
201+
? 'Select items'
202+
: `${selectionCount} items selected`,
201203
});
202204

203205
// ...
@@ -284,18 +286,20 @@ navigation.navigate('App');
284286
With React Navigation 5.x, we can dynamically define and alter the screen definitions of a navigator, which makes Switch Navigator unnecessary. The above pattern can be now defined declaratively:
285287
286288
```js
287-
function App() {
289+
export default function App() {
288290
return (
289-
<Stack.Navigator>
290-
{isLoggedIn ? (
291-
<>
292-
<Stack.Screen name="Home" component={HomeScreen} />
293-
<Stack.Screen name="Settings" component={SettingsScreen} />
294-
</>
295-
) : (
296-
<Stack.Screen name="SignIn" component={SignInScreen} />
297-
)}
298-
</Stack.Navigator>
291+
<NavigationContainer>
292+
<Stack.Navigator>
293+
{isLoggedIn ? (
294+
<>
295+
<Stack.Screen name="Home" component={HomeScreen} />
296+
<Stack.Screen name="Settings" component={SettingsScreen} />
297+
</>
298+
) : (
299+
<Stack.Screen name="SignIn" component={SignInScreen} />
300+
)}
301+
</Stack.Navigator>
302+
</NavigationContainer>
299303
);
300304
}
301305
```
@@ -354,9 +358,9 @@ In addition, there have been some changes to the way the navigation actions work
354358
355359
One major difference is that a lot of methods used to take some parameters for controlling which screen and navigator it should be applied to and didn't follow a specific pattern.
356360
357-
In this version, we have standardized this and made it possible to use with any action without the action needing to support it. The new `target` and `source` properties provides control over which navigator should handle an action. See [docs for dispatch](https://reactnavigation.org/docs/navigation-prop.html#dispatch---send-an-action-to-the-router) for more details.
361+
In this version, we have standardized this and made it possible to use with any action without the action needing to support it. The new `target` and `source` properties provides control over which navigator should handle an action. See [docs for dispatch](https://reactnavigation.org/docs/navigation-prop.html#dispatch---send-an-action-to-the-router) for more details.
358362
359-
You can import the action creators from the [compatibility layer](compatibility.md) to preserve old behavior for the actions.
363+
You can import the action creators from the [compatibility layer](compatibility.html) to preserve old behavior for the actions.
360364
361365
More differences in the signatures are listed below:
362366
@@ -390,7 +394,7 @@ For example, this will reset the navigator's state to have one screen called `Ho
390394
391395
```js
392396
navigation.reset({
393-
routes: [{ name: 'Home' }]
397+
routes: [{ name: 'Home' }],
394398
});
395399
```
396400

0 commit comments

Comments
 (0)