Skip to content

Commit 8e56c91

Browse files
WoLewickisatya164
authored andcommitted
fix: remove /next from links
1 parent 11f3747 commit 8e56c91

File tree

4 files changed

+13
-21
lines changed

4 files changed

+13
-21
lines changed

website/blog/2019-10-17-react-navigation-native.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Thanks to the great work of Krzysztof Magiera for [React Native Screens](https:/
3333
<img src="/blog/assets/android-native-stack.gif" height="530" />
3434
<img src="/blog/assets/ios-native-stack.gif" height="530" />
3535

36-
We believe you will find it useful in your projects and strongly encourage you to get acquainted with our [documentation](https://reactnavigation.org/docs/en/next/native-stack-navigator.html). Things that I’m the most excited about are iOS header animations!
36+
We believe you will find it useful in your projects and strongly encourage you to get acquainted with our [documentation](https://reactnavigation.org/docs/en/native-stack-navigator.html). Things that I’m the most excited about are iOS header animations!
3737

3838
Please, note that we don’t intend this component to be a drop-off replacement for the currently existing stack. There are many benefits of using JavaScript-based stack. Moreover, the range of customization of the native stack is very limited and probably won’t get broader due to the limitations of native API.
3939

website/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -464,7 +464,7 @@ export interface ResetPasswordScreenProps {
464464
}
465465
```
466466

467-
Now you can modify props of Auth screens props by adding types to make your autocomplete and IntelliSense work. For more complex examples, consider reading [type-checking](https://reactnavigation.org/docs/en/next/typescript.html) doc or reviewing [complete demo application sources](https://github.com/artyorsh/react-navigation-ex-demo/tree/complete-exmaples).
467+
Now you can modify props of Auth screens props by adding types to make your autocomplete and IntelliSense work. For more complex examples, consider reading [type-checking](https://reactnavigation.org/docs/en/typescript.html) doc or reviewing [complete demo application sources](https://github.com/artyorsh/react-navigation-ex-demo/tree/complete-exmaples).
468468

469469
<img src="/blog/assets/using-react-navigation-5-with-ui-kitten/typescript.gif" />
470470

website/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function App() {
7676

7777
The **PaperProvider** provides the theme to all the components in the framework. It also acts as a portal to components that need to be rendered at the top level. Check the full [Getting-Started](https://callstack.github.io/react-native-paper/getting-started.html) page for more information.
7878

79-
React Navigation setup looks similar. There is a component called **NavigationContainer** which manages our navigation tree and contains the navigation state. It must wrap all navigator structure. We will render this component in **App.tsx** inside a **PaperProvider**. More information can be found in the official [documentation](https://reactnavigation.org/docs/en/next/hello-react-navigation.html).
79+
React Navigation setup looks similar. There is a component called **NavigationContainer** which manages our navigation tree and contains the navigation state. It must wrap all navigator structure. We will render this component in **App.tsx** inside a **PaperProvider**. More information can be found in the official [documentation](https://reactnavigation.org/docs/en/hello-react-navigation.html).
8080

8181
```jsx
8282
import React from 'react';
@@ -451,7 +451,7 @@ function onTweetPress() {
451451

452452
The implementation of `Feed` and `Details` components is quite big and complex, that's why I am not gonna post it here. Please make sure to check it out on [github repo](https://github.com/Trancever/twitterClone)
453453

454-
We have covered only the basics of navigating between screens. If you want to learn more details check the official [documentation](https://reactnavigation.org/docs/en/next/navigating.html).
454+
We have covered only the basics of navigating between screens. If you want to learn more details check the official [documentation](https://reactnavigation.org/docs/en/navigating.html).
455455

456456
Now, let's see what does the app looks like with Stack Navigator and Paper's Appbar.
457457

@@ -668,7 +668,7 @@ export const BottomTabs = () => {
668668

669669
In the last step we will add ability to show different icon depending on the active tab.
670670

671-
We will take an advantage of our `BottomTabs` component being one of a Stack's screen. It means it has an access to the `route` object that is passed to each screen as a prop. This object contains an information about current screen which means we can access it and conditionally render proper icon. This is not a very common pattern and it can be confusing at first, so make sure to read the whole [guide](https://reactnavigation.org/docs/en/next/screen-options-resolution.html) on how to use it and what can be achieved by using it.
671+
We will take an advantage of our `BottomTabs` component being one of a Stack's screen. It means it has an access to the `route` object that is passed to each screen as a prop. This object contains an information about current screen which means we can access it and conditionally render proper icon. This is not a very common pattern and it can be confusing at first, so make sure to read the whole [guide](https://reactnavigation.org/docs/en/screen-options-resolution.html) on how to use it and what can be achieved by using it.
672672

673673
```jsx
674674
import React from 'react';
@@ -683,7 +683,7 @@ import { Notifications } from './notifications';
683683

684684
const Tab = createMaterialBottomTabNavigator();
685685

686-
export const BottomTabs = (props) => {
686+
export const BottomTabs = props => {
687687
// Get a name of current screen
688688
const routeName = props.route.state
689689
? props.route.state.routes[props.route.state.index].name
@@ -704,10 +704,7 @@ export const BottomTabs = (props) => {
704704

705705
return (
706706
<React.Fragment>
707-
<Tab.Navigator
708-
initialRouteName="Feed"
709-
shifting={true}
710-
>
707+
<Tab.Navigator initialRouteName="Feed" shifting={true}>
711708
<Tab.Screen
712709
name="Feed"
713710
component={Feed}
@@ -748,7 +745,6 @@ export const BottomTabs = (props) => {
748745
</React.Fragment>
749746
);
750747
};
751-
752748
```
753749

754750
<img src="/blog/assets/using-react-navigation-5-with-paper/fab.gif" height="480"/>
@@ -775,9 +771,7 @@ import { NavigationContainer, DarkTheme } from '@react-navigation/native';
775771

776772
export default function App() {
777773
return (
778-
<NavigationContainer theme={DarkTheme}>
779-
{/* content */}
780-
</NavigationContainer>
774+
<NavigationContainer theme={DarkTheme}>{/* content */}</NavigationContainer>
781775
);
782776
}
783777
```
@@ -846,7 +840,7 @@ If code for themes merging looks complex, you can use a [deepmerge](https://www.
846840

847841
#### Custom themes
848842

849-
Of course, the built-in themes are not the only themes we can apply. Both libraries allow full customization and you can learn about it in the official documentation ([React Navigation](https://reactnavigation.org/docs/en/next/themes.html), [React Native Paper](https://callstack.github.io/react-native-paper/theming.html))
843+
Of course, the built-in themes are not the only themes we can apply. Both libraries allow full customization and you can learn about it in the official documentation ([React Navigation](https://reactnavigation.org/docs/en/themes.html), [React Native Paper](https://callstack.github.io/react-native-paper/theming.html))
850844

851845
In the last step, I want to show you how to change the theme dynamically. We will implement a switch in a drawer that will allow users choosing light or dark theme.
852846

@@ -883,9 +877,7 @@ export default function Main() {
883877

884878
return (
885879
<PaperProvider theme={theme}>
886-
<NavigationContainer theme={theme}>
887-
{/* content */}
888-
</NavigationContainer>
880+
<NavigationContainer theme={theme}>{/* content */}</NavigationContainer>
889881
</PaperProvider>
890882
);
891883
}
@@ -941,4 +933,4 @@ We all know that UI Component library like Paper can speed up the development, b
941933

942934
Do you have any questions? Tweet to me [@trensik](https://twitter.com/trensik).
943935

944-
At the end I want to thank [@satya164](https://twitter.com/satya164) and the whole [Callstack](https://callstack.com/) team for their help with the article.
936+
At the end I want to thank [@satya164](https://twitter.com/satya164) and the whole [Callstack](https://callstack.com/) team for their help with the article.

website/versioned_docs/version-4.x/limitations.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ There are workarounds if you absolutely need dynamic routes but you can expect s
4646

4747
## iOS 11 style header with large text
4848

49-
> [React Navigation 5](https://reactnavigation.org) includes a new [native stack navigator](https://reactnavigation.org/docs/en/next/native-stack-navigator.html) which uses the platform navigation primitives. It supports the native [large title](https://reactnavigation.org/docs/en/next/native-stack-navigator.html#headerlargetitle) on iOS.
49+
> [React Navigation 5](https://reactnavigation.org) includes a new [native stack navigator](https://reactnavigation.org/docs/en/native-stack-navigator.html) which uses the platform navigation primitives. It supports the native [large title](https://reactnavigation.org/docs/en/native-stack-navigator.html#headerlargetitle) on iOS.
5050
5151
This is on the roadmap to implement, but it's not currently available in the React Navigation. Some folks have [gone ahead and built their own version of this](https://github.com/react-navigation/react-navigation-4/issues/2749#issuecomment-367516290), but your mileage may vary.
5252

@@ -58,7 +58,7 @@ If you like what React Navigation has to offer but are turned off by this constr
5858

5959
## Performance limitations
6060

61-
> [React Navigation 5](https://reactnavigation.org) includes a new [native stack navigator](https://reactnavigation.org/docs/en/next/native-stack-navigator.html) which uses the platform navigation primitives. While the customization options are limited with it, the performance is close to native.
61+
> [React Navigation 5](https://reactnavigation.org) includes a new [native stack navigator](https://reactnavigation.org/docs/en/native-stack-navigator.html) which uses the platform navigation primitives. While the customization options are limited with it, the performance is close to native.
6262
6363
We are able to offload animations to another thread using React Native's [Animated native driver](https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html), but we currently still need to call back into JavaScript for gestures (although there are plans to remedy this in the near future). React Navigation is entirely made up of React components and the state is managed in JavaScript on the same thread as the rest of your app. This is what makes React Navigation great in many ways but it also means that your app logic contends for CPU time with React Navigation &mdash; there's only so much JavaScript execution time available per frame.
6464

0 commit comments

Comments
 (0)