You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
37
37
38
38
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.
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).
Copy file name to clipboardExpand all lines: website/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md
+9-17Lines changed: 9 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -76,7 +76,7 @@ export default function App() {
76
76
77
77
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.
78
78
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).
80
80
81
81
```jsx
82
82
importReactfrom'react';
@@ -451,7 +451,7 @@ function onTweetPress() {
451
451
452
452
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)
453
453
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).
455
455
456
456
Now, let's see what does the app looks like with Stack Navigator and Paper's Appbar.
In the last step we will add ability to show different icon depending on the active tab.
670
670
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.
672
672
673
673
```jsx
674
674
importReactfrom'react';
@@ -683,7 +683,7 @@ import { Notifications } from './notifications';
@@ -846,7 +840,7 @@ If code for themes merging looks complex, you can use a [deepmerge](https://www.
846
840
847
841
#### Custom themes
848
842
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))
850
844
851
845
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.
852
846
@@ -883,9 +877,7 @@ export default function Main() {
@@ -941,4 +933,4 @@ We all know that UI Component library like Paper can speed up the development, b
941
933
942
934
Do you have any questions? Tweet to me [@trensik](https://twitter.com/trensik).
943
935
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.
Copy file name to clipboardExpand all lines: website/versioned_docs/version-4.x/limitations.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -46,7 +46,7 @@ There are workarounds if you absolutely need dynamic routes but you can expect s
46
46
47
47
## iOS 11 style header with large text
48
48
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.
50
50
51
51
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.
52
52
@@ -58,7 +58,7 @@ If you like what React Navigation has to offer but are turned off by this constr
58
58
59
59
## Performance limitations
60
60
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.
62
62
63
63
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 — there's only so much JavaScript execution time available per frame.
0 commit comments