React Navigation v5 Tutorial

Learn how to use React Navigation v5 by implementing the navigation pattern that is found in most popular apps right now. We cover authentication, stack/tab navigation, params, TypeScript, and more.

Links from video:
​
----
#benawad

[arpee]

It's kind of scary how many times I'm working EXACTLY on a specific project/library/framework and you release a video about it. Props, man!

[caleblovell]

Wow Ben. Incredible video! I am literally in the middle of doing this on several apps at my agency job and this was EXACTLY what I needed. Huge thanks!!

[JackieCodes]

If you don't see your ActivityIndicator, try adding color (probably an android issue) <ActivityIndicator size="large" color="#a8a4a4" />

[kadenwilkinson]

Great video! One piece of unsolicited feedback I would give, I would actually recommend leaving the icon types different based on if they are focused or not because it is better for accessibility. If you are color blind being able to see different icons not just different colors is easier to differentiate.

[JGBSolutions]

That's nice @Ben Awad! But I was hoping the tutorial to be centered about React Navigation and its features more than all this other stuff. And also what about a customized header component? There's so much more to cover here.

[JelteHomminga]

Great video! Helped me a lot, thanks!

For anyone that wants to avoid the serialisable error, you can also det the headerRight in the EditProduct component with setOptions like this:

React.useEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableOpacity
style={{ paddingRight: 10 }}
onPress={() => {
apiCall(formState);
navigation.goBack();
}}>
<Text style={{ color: 'red' }}>Done</Text>
</TouchableOpacity>
),
});
}, []);

Also no need for useRef then

[rafaelsoteldosilva]

Great tutorial. The way you explain things without leaving holes is amaizing

[caleblovell]

Just used this again as reference to stripe out an extremely outdate broken navigation from an old App. It's now so clean and working beautifully. Appreciate it!

[lucasmotta]

Great overview of the new API for react-navigation! I know you mentioned that there's several ways to access the "submit" from the header – I found this ref method a bit hacky, so I would suggest a different approach. You can customise the headerRight within your component, so you have access to your submit function. Something like:

useEffect(() => {
navigation.setOptions({ headerRight: () => <Button title="Done" onPress={onDone} /> })
}, [])

You don't have to mess up with the stack and you isolate the entire code to your screen :)

[ayoubbenabid]

Thanks a lot for the content ben.. You are just giving away amazing help for free! 💛

[vaclavvlcek]

Hi Ben, thank you for your effort to make a tutorial. But to be honest, it is kind of strange, the tutorial is called React Navigation, but you talk half of the time about TypeScript, Context, Authentications and bunch of other things. Well, if you want to explain React Navigation, I would avoid all of these because it makes it much more harder to follow you.

[myhendry]

Thanks for another excellent video Ben! With the coronavirus out there, stay safe. You are an inspiration to us. Thanks again :)

[tunicoAbc]

Hi Ben, how can i animate the transition when user login ? Because if you are inside stack, react-navigation will do the default transition, but in login screen you are not navigating inside a stack.

[Classick]

You do great work man. A full stack react native app series would be amazing. There doesn't seem to be much out there beyond a basic to do list.

[intheband]

Just curious - what is the advantage of setting up all of this logic in the Routes file instead of App.tsx? Would the App file serve a purpose beyond this other that exporting Routes?

[RizaHariati]

Woah.. I actually just wanted to learn about React Navigation. But this video show me how helpful Typescript can be for bigger project. Thank you. You made this video in one sitting? Awesome!

[alicimen]

Hi Ben,


I'm using typescript and have a problem with v5.
Why do I keep getting problems like this?


** PROBLEM:
(x) Property 'state' does not exist on type 'Pick<Route<"User">, "key" | "name">'.



** CODE:


import React from "react";
import { ProfileStack } from "./ProfileStack";


interface AppNavigatorProps {}


type AppNavigatorParamList = {
User: undefined;
Feed: undefined;
}


const Tabs =


export const AppNavigator: React.FC<AppNavigatorProps> = () => {
return (
<Tabs.Navigator>
<Tabs.Screen
name="User"
component={ProfileStack}
options={({ route }) => {
return {
tabBarVisible:
(route.state
?
: "") !== "ProfileComp",
};
}}
/>
<Tabs.Screen name="Feed" component={Feed} />
</Tabs.Navigator>
);
};

[fotios]

[solved] @6:50 Ben presses ctrl + . or cmd + . to import Text automatically. I get "No code actions available". I checked this post:


and installed Autoimport but still nothing.

Any suggestions would be appreciated.

Thanks

@40:00 He then shows a way to restart the TS server. Check also this post in stackoverflow to see how:


As someone suggests:
Open the Command Palette (view menu → command palette)
Enter TypeScript: Restart TS server. (type "restart" and it should autosuggest)

That's it!

[camdickie]

To anyone struggling with the Ionicons with npm, here is how I fixed it:
run 'npm install
then find the correct names of the icons you are searching from Ionic's website
then lastly to get the fonts to compile you need to add their fonts to your info.plist, by navigating to and opening
'ios/YourAppName/Info.plist'
Lastly add this code to the main <dict> tag that wraps the entire file
'
<key>UIAppFonts</key>
<array>

</array>
'
Hope none of you had to deal with the same insanity as me!

[jakeruth]

React native for lyfe
React Nav for lyfe