Best navigation setup ever! Clear and right the point.

Please do a react native - firebase tutorial

Also thanks Shaun, this is the best free React-Native content hands down.

Thank you so much for these tutorials - truly a life saver!

great pedagogy, can't wait to watch the next lessons

very well explained tutorial series.Helps me a lot!!

absolute legend so well explained

i'm loving this tutorial

Will you do perhaps an updated version of this React Native tutorial, because it really sucks when having to switch between versions? I had to skip the font tutorial because it gave me such a headache that I had to jump straight to the stack navigator which itself also wasn't pleasing what so ever, I had to use v6 instead of v4 and as a result I couldn't create the HomeStack.js file or at the very least couldn't get it to work. Doesn't matter, your tutorials are still the best the Internet has to offer

Really good content on this video; apart some tricky steps where they made me look into documentation to more sustainable info.

Was itching to contact you in real time to correct the Statck typo lol... Great work!!

Can I still follow this tutorial right now? Because I just noticed that a lot has changed in React Navigation 5. Most of the code in the video don't work anymore.

You explain it very clearly.

Awesome video! thank you!

Thanks bro, good video!

I recommend using the new version of react navigation (5.x), which has a different configuration.

this is avery great tutorial and easy to understand

@mustafahamdy5116

Жыл бұрын

The code is working with you? because I have issues.

Very well explained

Thank you so much!

Thanks for your help

Great course sir😎😎

Hi, great video. i have a question. I want to open a new component from a header link. Instead of putting text on the header i put a link, so how can i move to another component when I will click ?

Thanks for the tutorials. I have a problem where it all seems to work but I don't get the bar at the top... Anyone know why?

Thank brother

Unable to resolve '../screens/Home' from 'App.js'. It seems React Nav 5 has completely borked things for me.

thanks ninja

very good explanation, thank you

@NetNinja

Жыл бұрын

Glad it was helpful Lannie!

@mustafahamdy5116

Жыл бұрын

The code is working with you?

@kbk489

5 ай бұрын

is the code working for u???

I used useFonts and useCallback function in previous Fonts tutorial. I was getting black page after adding this tutorials code. If you also face same issue try adding flex 1 to the view wrapping navigator. also I spelled screen as 'Screen' with capital S so was stuck there for a lot time. Hope this helps!

@haikalt.9279

Жыл бұрын

have you finish the course for gamezone? i would like your finished version of code for react native v6

Hello, i hope you will do a nodeJs/ExpressJs series with advenced topics or even an udemy course ;)

@theplayer3086

4 жыл бұрын

i am waiting for it too

Please make react native -firebase Tutorial and also please tell what needs to be changed for react navigation 5

the current version uses react-navgation 5 this tutorial works on react-navgation 4

hey bro i am getting the following error in bundling javascript : Unable to resolve "./SafeAreaContext" from "node_modules eact-native-safe-area-context\src\index.tsx" Please help me to overcome from this problem.. thanks for you tute series..

thank you

While installing navigation it's giving error.. I am trying to install navigation v5 ..can you create a Vdo ti show how to install v5 navigation? It will be very helpful.. Thank you.. I am learning a lot from u.. Thanks a lot 😊😍

nice

Unfortunately React navigation has changed a lot in the last year and a half. This does not work like it used to and I suggest you all go check out other videos to get this part done

@psphotos

2 жыл бұрын

just realised the same. need to look up for latest videos for this part, and seems need to stop this series here as most of the content would be outdated now in it I believe.

@iamnachoj

2 жыл бұрын

@@psphotos i actually continued and it's ok! I just figured out that it works a bit easier now, since navigation v5 was released. This is how I did it:

@iamnachoj

2 жыл бұрын

Unfortunately I can't add pictures. but basically, I imported import {createStackNavigator} from '@react-navigation/stack'; import {NavigationContainer} from '@react-navigation/native'; directly in App.js, and then in the function App, before the return part: const Stack = createStackNavigator(); With that, In the return, I wrote this: {/* it automatically adds a navigation prop */} I hope it helps!

@ojitelikenechukwu3895

2 жыл бұрын

Hi, anyone has an idea what channel I can see an updated react native tutorial especially for react navigation 6

@rekahorvath3759

Жыл бұрын

​@@ojitelikenechukwu3895 Hi, take a look at Udemy courses. KZread is just for understanding the beginning concepts 😉

I was super surprised to see the order of the pages in the javascript object matter - I thought the ordering of key/value pairs was never guaranteed in javascript objects! Is this a react-native thing? Am I missing something?

@coolbhes

3 жыл бұрын

stackoverflow.com/questions/30076219/does-es6-introduce-a-well-defined-order-of-enumeration-for-object-properties

I am getting lots of errors when trying to run the app towards the end of this video, and have had to expo install lots of other stuff including react-native-safe-area-view react-native-safe-area-context @react-native-community/masked-view react-native-screens - do you know why this is?

@mog7501

4 жыл бұрын

Tbh this episode is now pretty outdated. See the top comment for the newer way to use Navigator.

Something that isn't working that well with following your tutorial, is that I sometimes get errors when trying to install packages with expo, and have to do it with npm instead. What also annoys me to some degree is that my app, even though I follow your instructions, doesn't always end up looking like yours. Example being: When I implemented the stack navigator, up in the header, it displayed a title that I did not state anywhere in my code. I have later found out that that title can get in the way when working with the drawer navigation. Have anyone encountered some of these bugs and have anyone solved them?

@matthewrideout426

2 жыл бұрын

the installation thing with npm is probably due to the terminal you are using. If it's using bash then using expo should work fine. But using npm is fine either way.

@dhairyasharma6243

2 жыл бұрын

its not a bug, its a feature

Thanks for your tutorials. I am getting "Ho..." written automatically on my header screen. Could you please explain that if possible. Thanks again.

@AI913

4 жыл бұрын

Me too. Need an answer.

I am getting the following error what should I do to resolve this: Error:null is not an object (evaluating '_RNGestureHandlerModule.default.Direction') These are the dependencies in package.json. Kidnly help. "dependencies": { "@react-native-community/masked-view": "^0.1.10", "@react-navigation/native": "^5.1.6", "react": "16.11.0", "react-native": "0.62.2", "react-native-gesture-handler": "^1.6.1", "react-native-reanimated": "^1.8.0", "react-native-safe-area-context": "^0.7.3", "react-native-screens": "^2.5.0", "react-navigation": "^4.3.8", "react-navigation-stack": "^2.3.13" },

pls, help me! I have an error which is 'tried to register two views with the same name'. How can I fix this?

Following this in 2022 and got a cascade of errors, mostly to do with not being able to find any of these packages in node modules.

@ojitelikenechukwu3895

2 жыл бұрын

Hi, I can relate, kindly let me know if you have found a fix especially in react navigation 6,custom fonts

@filankzahmoul3494

2 жыл бұрын

@@ojitelikenechukwu3895 import * as React from 'react' import { NavigationContainer } from '@react-navigation/native' import { createNativeStackNavigator } from '@react-navigation/native-stack' import { useFonts } from 'expo-font' import AppLoading from 'expo-app-loading' import Home from './screens/Home' import ReviewDetails from './screens/ReviewDetails' const Stack = createNativeStackNavigator() export default function App() { let [fontsLoaded] = useFonts({ 'nunito-bold': require('./assets/fonts/Nunito-Bold.ttf'), 'nunito-regular': require('./assets/fonts/Nunito-Regular.ttf'), }) if (!fontsLoaded) { return } return ( )

@dinozar4449

2 жыл бұрын

You can't use this navigator like that anymore. The thing is much simpler like in normal react-router. You don't need to create another file like ninja did. You just import those in App.js: import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; Then you create stack: const Stack = createNativeStackNavigator(); And now you can use Navigator Freely like that:

Which version is used in this video v4 or v5 or v6

react-navigation-stack not found in project even after npm install react-navigation-stack

Sadly I kept getting error after error like "Module build failed" I deleted node_modules reinstalled but still, complete fail, very sad I was really enjoying this tut.. : -(

This navigation not support in latest react native 0.74. How I use this in latest react native?

Navigation transition is very slow in my phones, any one else?

Great video BUT unfortunately not working for react navigation 5 :-( Would be an awesome ninja move if there was an updated video :-)

@travenishere6063

4 жыл бұрын

What helped me was doing it like described in dev.to/paulobunga/navigating-react-native-app-with-react-navigation-5-4hn8 The behaviour is not the same but at least it's working

Can you do Java?

if you are facing any difficulties then refer here docs.expo.io/guides/routing-and-navigation/

I think react navigation updated, facing error.

I always get an error. I tried changing some stuff but nothing worked. I've got the same code as u do tho. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `App`.

@misaelvaldez7183

2 жыл бұрын

Make sure that in your version of node modules you can still use the export/import as Ninja Net does

I'm just getting empty white space where my navigator should be. None of my screens are loading.

get problem: "Unable to resolve "react-navigation" from "routes\homeStack.js" " what to do??

@sarangansakthi9644

4 жыл бұрын

Same here ??? Someone help

@chinmey_0147

4 жыл бұрын

@@sarangansakthi9644 do npm install react navigator then close your current session using ctr+c then restart using expo start than refresh your phone/emulator worked for me

@qasimsubhani2548

4 жыл бұрын

@@chinmey_0147 Thanks it works by your method

The component for route 'log' must be a React component. what to don if this pops up

@firegangsterz875

3 жыл бұрын

do*

Unable to resolve "react-navigation" from "route\homeStack.js" what should I do now

@hamzaakram4340

4 жыл бұрын

u need to install this : npm install react-navigation and then restart your expo by first terminating the current one : ctrl+c and then expo start after that your error should be resolved

The component for route 'screens' must be a React component.

@Diiiideeee

4 жыл бұрын

same error here, did u fix it?

@Diiiideeee

4 жыл бұрын

I solved it, Make sure u have export default statement in each component u have been used, and make sure u have a capital letter in "const HomeStack = createStackNavigator(screens); " Also, make sure u import homestack file in App.js file with a name that starts with CAPITAL Letter like "import HomeStack from './routes/homeStack'; "

Hi guys I keep getting this issue. Can someone help me? TypeError: undefined is not an object (evaluating 'Object.keys(routeConfigs)') My code is import React, { useState } from 'react'; import * as Font from 'expo-font'; import { AppLoading } from 'expo'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from 'react-navigation-stack'; import Home from './screens/home'; import ReviewDetails from './screens/reviewDetail'; const getFonts = () => { return Font.loadAsync({ 'roboto_regular': require('./assets/fonts/RobotoCondensed-Regular.ttf'), 'roboto_light': require('./assets/fonts/RobotoCondensed-Light.ttf'), 'roboto_bold': require('./assets/fonts/RobotoCondensed-Bold.ttf'), }) }; const Stack = createStackNavigator(); export default function App() { const [fontsLoaded, setFontsLoaded] = useState(false); if (fontsLoaded) { return ( // ); } else { return ( setFontsLoaded(true)} /> ) } }

Deberian de aclarar que para las versiones nuevas de navigate no funciona el codigo !

why did you skip over creating the screen files?

Did everything according to Shaun and still got a blank screen. Changed around the global styles a bit and then it worked… magically… fuck this shit sometimes, ya know? But also --- nice to be able to move on to the next video after 1 hour of frustration

Can you update this playlist :(

Don't do that stupid mistake I did, I followed the docs, did everything in the video, I installed all the dependencies. Still Doesn't work, I spent a whole day figuring out what the heck is wrong! After hours of irritation I realized that the docs says Npm install reactnavigation/native And that's a different and new version from the one in the video. So make sure to install the version in the video, not the one I installed :D

@eduardoocrespo1875

4 жыл бұрын

i don't see where it says it

@osamagamal495

4 жыл бұрын

@@eduardoocrespo1875 I was talking about the documentations, if you're gonna follow along with the docs, make sure it's version 4 as the version in the video. Cuz they released a recent version which is 5.

@sarahismail-ob4is

4 жыл бұрын

thank you so much !

I appreciate the simplicity of the course but to tell the truth I've not been able to go pass the stack navigation level. At this point I'm almost giving up on react native

@Rocketos

6 ай бұрын

You're AMAZING!

@kbk489

5 ай бұрын

find a diff course this one is WAY too old

Getting error!!!! Unable to resolve "@react-native-community/masked-view" from "node_modules eact-navigation-stack\lib\module\vendor\views\MaskedView.js" Please help

@lukancosta

4 жыл бұрын

The same is happening to me.

@lukancosta

4 жыл бұрын

I solved installing this pack: npm install --save @react-native-community/masked-view

@karanchandra9789

4 жыл бұрын

@@lukancosta okay thanks!!

getting error : TypeError: Object(...) is not a function

@mustafahamdy5116

Жыл бұрын

Did you solve it?

@Elleozito

Жыл бұрын

@@mustafahamdy5116 nop

Please add a new version tutorial

How to use react navigation 5 in this project

@SabioII

4 жыл бұрын

Check Abdur Rahim comment. Have you tried it?

I'm getting an error code: 500

How to remove header of the screen :(

@taylorfranklin85

2 жыл бұрын

set your header title to an empty string

For 2023 this tutorial is as good as dead. Sorry to say that.

@gool7947

9 ай бұрын

I second this.

@fluxsiarski

6 ай бұрын

Too

Unable to resolve "react-navigation-stack" from "routes\homeStack.js"? now what

@jaysonlana9147

4 жыл бұрын

hey bro did you solve this already? im having the same error

npm install react-navigation-stack --legacy-peer-deps

is there anyone here who knows how to take off the header ?

Old code

i love your russian accent

:)

I guess I am first :)

Declaimer: These are not Valid in New Version of React Navigation !!!!!!!!!!!! For Help see the docs ----- reactnavigation.org/docs/getting-started

@sidharthpunathil

4 жыл бұрын

How do I make it work?

@ImranSheikh-kg4qd

4 жыл бұрын

@@sidharthpunathil If you want to make it work.... then I cant help you. But if you want learn how it work ... then go and explore react-navigation doc. Note: In Development Field Documentation is the Ultimate Helper.

@sidharthpunathil

4 жыл бұрын

@@ImranSheikh-kg4qd Got it!

Make some PHP with real life projects

@nikulasoskarsson5472

4 жыл бұрын

Maybe ask nicely instead of demanding it like he owes it to you?

Unable to resolve "react-native-safe-area-context" from "node_modules eact-navigation-stack\lib\module\vendor\views\Stack\StackView.js" why ?

@hakizimanafred6482

4 жыл бұрын

got same problem, did you get around it ?

@dagasmundspangberg5842

4 жыл бұрын

Try to run "expo install react-native-safe-area-context" in the terminal

@TheDemmyRus

4 жыл бұрын

I used this command (npm install --save @ react-native-community / masked-view) and it helped me