Life savor, I was starting to hate react native because of shitty and useless documentation, references and guides but your video made my day. I am an intern and you explained better than the senior developer who explained this to me.
Knowledge gaining 30 minutes. I ignored this video 2 times before. Again it showef on my screen and i decided to watch. Really useful. Now going to watch 2nd part. Thanks
I was struggling with React-Navigation 3 a while back and got it to work eventually, now I am struggling with React-Navigation 5. This is a life saver, thanks!
You all probably dont give a shit but does someone know of a method to log back into an Instagram account..? I somehow forgot the account password. I love any tips you can give me!
Can you kindly show, how to add a Drawer button in the header to open the drawer. I tried to add it but I am getting errors. Please help. stackoverflow.com/questions/62237771/please-help-react-navigation-5-x-nested-navigation-drawer-not-opening-from-menu
Hi, thanks for the tutorial! This was so helpful. However, I'm having a slight problem with the bottom tabs. I created 5 bottom tabs, they're all there but the names of each tab don't show up unless I click on them, whereas you can clearly see "Tab 1" "Tab 2" at the bottom at all times in your example. Any idea why? At the moment I haven't added any styling to these tabs so Idk what could be the issue.
Hello Sir, Whenever I pass a react component just like you passed Screen1, Screen2 etc to a Navigator prop: component, I get this error:- Error: `Got an invalid value for 'children' prop for the screen 'login'. It must be a function returning a React Element.` What should I do?
I don't know all the availabile options off the top of my head, but you can just look at the source code for each class and see what's available (right click and go to definition in the IDE) . There shouldn't be too much that's different outside of the UI.
Hey Curry! I wanted to say thank you for the tutorial, helps a noob like me alot lol! I have a question regarding 28:49 , so basically you put the condition to check if the data from detail.js exists, right? When I tried to do the same in feed.js(which is the first screen) and ran the program, it gave me an error saying that the 'this.props.route.params.data' is undefined. Any idea what went wrong here?
Good catch. I was going over that part at the end a little too fast and it wasn't really part of my original that code I planned on writing in the video. 'this.props.route' always exists. If you do not pass any params than the 'params' field won't be there. The correct condition should be:: if(this.props.route.params){ //do something with this.props.route.params.data } In the final version I uploaded to Github i used a ternary operation. That's another way of checking the same condition. Part 2 of my videos transforms the components into hooks.
Sir I followed your tutorial and even I compared the code with your Github repo too. But I am getting Error: Looks like you nested a 'Navigation Container' inside another
I just subscribed bc this tutorial is great - thank you! One question though: when I try to navigate to another screen (similar to what you did at the 14:00 mark) the navigation isn't being pushed down to the props and therefore crashes my app every time. Any ideas as to why?
You can use the master branch in the Github repo. The link is in the description. The master branch now has v5 already integrated, but you can easily add more navigators and screen along with the video.
I keep getting this error @react-navigation/stack could not be found within the project or in these directories: node_modules ../node_modules If you are sure the module exists, try these steps: 1. Clear watchman watches: watchman watch-del-all 2. Delete node_modules and run yarn install 3. Reset Metro's cache: yarn start --reset-cache 4. Remove the cache: rm -rf /tmp/metro-*
This is the precious side of youtube. Thanks a lot, dude! +1 subscriber I have a question though. I want to pass some data from my navigator to each tab. You do implement it, but you pass it as a title at the options. I need to use that data at the of each tab. I found one answer that suggests using "this.props.navigation.dangerouslyGetParent().getParam('paramNameHere')" , but I couldn't figure out how to use this line, even though I understood what it actually does. Can you possibly help :S ?
How to make dynamic headerTitle using with headerleft option in React navigation version 5 ?? Using bottom tab when I press any tab it shoult change headerTitle.
So in my case im using webstorm and for some reason the IDE is not recognizing the @react-navigation/native import. I guess its some version issues, like you mentioned at the start of the video. Should i remove node modules folder, change the versions from package.json and run npm install ??
@@TheFlutterFactory actually i would like to question you something. When i use the navigation to push to another screen, then i exit the app and re open the screen it shows its actually the 'root' screen. Why it doesnt show me the screen that i went to before exit the app just like android apps do? PD: sorry if my english is sloppy.
That's the normal behavior. Opening to a specific Activity after the app has been closed is not the default behavior in Android either. Are talking about the app actually being killed, or just pressing the home button to put the app into the background.
@@TheFlutterFactory I was talking when the app is sent to the background, and i found the solution. Just had to pass a function to restore the state to the onStateChange prop of the NavigationContainer !
is there no way to click on something other than a button to navigate? i'm struggling to find a solution on the docs even though facebook + instagram both use this tactic profusely through their apps.
Hi, can you help me? I still got the Component Exception Error, like the one at 9:59 but this time, it was at the component screen1. I've rechecked many times for the component name and all, but still couldn't find the problem.
What exactly does the error say? It should tell you exactly what the problem is. Post a snippet of your code. That error is not possible on only one of the screens if all three are implemented in the exact same manner . Did you import that component correctly? Did you check double check capitalization etc? Did you restart the the app? (not just reload)
@@TheFlutterFactory Error : Coulnd't find a 'component' or 'children' prop for the screen 'Cart'. That is what the error says. I changed the screen name from contacts to cart. I've checked everything, name, spelling, made sure I exported and imported the right component from the right js file. Still got that error, I've restarted the app many times, still the same. I think maybe because I did not write the code at app.js? I'm writing the code at another js file because I used the app.js to write the code for a login page and the drawer navigation will be used for home page. Sorry if I'm asking too much, I'm still not familiar with react native .
Are you talking about the the AppBar? If you're talking about the tab component, one thing you can do is just create a ternary condition. Example: { Your condition ? ... : (or just null) }
Sure. You always have access to the useState hook. If you want to pass data between screens, you can use reactnavigation.org/docs/use-navigation-state/
I've had a weird thing that I couldn't find on Google, I make a blank project in Expo Managed mode, I run either expo, npm, or yarn start and everything is normal and I get the QR code to scan and the project on my phone via the Expo app. After doing the npm install for react navigation 5 (with the npm installs specifically for Expo), then anytime I run npm or exo start it runs in Webpack mode. I cannot find any way to not have it run in Webpack mode after this, no way to run normally with the QR code which lets me run it on my phone, and no way to toggle off of Webpack mode. If anyone know why this happens please let me know. I thought that maybe it's because react nav 5 uses native modules that Expo cannot handle so it defaults to the Webpack mode? However then why would there be compatibility downloads for Expo Managed Workspace projects?
every time I declare import { NavigationContainer } from '@react-navigation/native' import { createDrawerNavigator } from '@react-navigation/drawer' import { createStackNavigator } from '@react-navigation/stack' its shows error: Error: While trying to resolve module `@react-navigation/native` fro android mobile. How to solve this error. I installed everything based on this video. I can't find the correct solution.
Good catch. There was no particular reason. I went through a couple iterations of code before I made the video. If you use the brackets with the arrow function, you'll need to explicitly write the 'return'. Since I'm only returning a single component in all those functions, you can omit both the return and the brackets like you see in the createHomeStack function. It looks a littler cleaner.
When trying to get the drawer working I'm getting the following error: Unable to resolve "@react-navigation/drawer" from "App.js" but I followed all the steps as you did in the video, does anyone know what may be going wrong?
Are you sure you did 'npm install' from the root directory? It just sounds like it doesn't recognize the @react-navigation library in general. if you're still getting an error, do 'react-native link'
@@TheFlutterFactory Yes I always run the commands from the root of the project. I asked about this on StackOverflow and someone suggested running npm i -s @react-navigation/drawer and a few other lines to install the missing components, but after doing that Im getting the following error: warn Package native-base has been ignored because it contains invalid configuration. Reason: Cannot find module 'native-base\package.json' I'm getting extremely frustrated with trying to learn React Native, I always get errors for dependency issues and other things that dont seem to install properly..... thanks for the help!
Just open the debug menu on the emulator or real device. More info can be found here: reactnative.dev/docs/debugging I should probably do a video on more debugging tools
Informative video, Great effort bro.. I am looking on how to design a landing page in react native for a travel app, Can you help me or suggest something that would be helpful?
I'm assuming you're talking about a website. There are plenty of cheap options out there like Bluehost. If it's not going to be an actual web application, you can just use free options like Weebly or Wix to get something out in a day
I don't understand why you would create a separate app to advertise a different app. Landing pages by definitions are just simple websites. Apps are actual applications. Are you talking about a splash screen??
The same way you would design any other screen for your app.. Use your imagination 🙂 you are the developer. I can't tell you what to put in your screen. The 'home' screen is just what ever screen your app.js initially points too
I am just a beginner to react native,i started with function component, but this tutorial using class component .Can i follow same procedure to create mavigation using functional component,I dont find any tutorial using function component to create navigator?.If anyone know about any tutorial please suggest one.
what's the error? did you follow the instructions from the docs? you might need to do a 'react-navigation link' if you haven't yet. If you're are using my project in the Github repo, make sure you this line in your app level gradle: implementation project(':react-native-vector-icons')
@@TheFlutterFactory thanks for answering, i searched online and fixed it: implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02' add these two to "android/app/build.gradle" and worked for me
The this.props.navigation.navigate('Detail') at 14:08 is giving me an error that says, "TypeError: undefined is not an object (evaluation '_this.props.navigation')" Anyone got any ideas what could be wrong?
If you don't have access to the navigation object, it likely means that you didn't add the Detail screen to your Navigator correctly. Double check that. You can also look at the source directly in my git repo. The link is in the description
The component prop tells the screen that it's associated with a specific component. The children prop should be used if you want the screen to be associated with a different Navigator object. Think of the word 'children' as a child navigator object inside of the current Navigator. That's why we need to use children when moving to the top/bottom tab screens.
@@TheFlutterFactory, As the SDK expo module is required to replace with react-native-unimodules, I have tried this, but a new error has come to the gradle, here I focus on Android
@@dodicandra4971 did you follow these docs? docs.expo.io/versions/latest/expokit/expokit/ I'm not a fan of Expo and haven't used it in a long time (almost a year) so I'm sure the process has changed a bit.
I love react native, but it's full of failed error, even when you just started npm install.,, wasting time so much just for see halo world in emulator.
It's part of the learning process with everyone 🙂 once you see the same errors a few times you'll learn how to avoid them. For example, people usually forget to do a 'pod install' after 'npm install' for iOS
did you compare the code to what I have in the Github repo? If you're doing things slightly different , you can make a gist (gist.github.com/) of your file and send it to me so i can look at it.
No, Hooks are a completely different concept. I have a separate video on Hooks here ruclips.net/video/g68InzYKXN0/видео.html There are also Hooks that you can use with this navigation library. I might do a follow up video on that topic in the future.
I don't touch TS in this channel because not everyone likes it (myself included). If you already know TS, then you should already know how to convert JS to TS. There's no special case for React Navigation.
I appreciate some constructive feedback, but everyone talks differently. I'm not going to purposely change how I talk just because someone doesn't like it.
@@TheFlutterFactory im sory i thought you double the speed just to reduce the time in the video when you edit .. If its natural then im totally sory.. Didnt mean to upset you anyway... Im learning thrugh your videos a lot.. Big thanks for that actually 🙂
If someone needs I have created a git repo having started code in above video. If any one wants to follow along they can clone that: github.com/diwpro007/reactNavigationTest/tree/start-code
I did not simply want to follow the docs. I wanted to show a different way of implementing the library that may be more applicable to an actual app. A lot of people disagree with your statement that it's "Crazy" . Again, if there's any particular part that's confusing, we can discuss it
After being confused with a bunch of shit courses about navigation, that one has saved my life. THANKS !
Glad to help. I tried to make it as straightforward as possible
@Harvinder Singh I have not.
@@TheFlutterFactory how could add image or icon to the drawer ?
Life savor, I was starting to hate react native because of shitty and useless documentation, references and guides but your video made my day. I am an intern and you explained better than the senior developer who explained this to me.
Knowledge gaining 30 minutes. I ignored this video 2 times before. Again it showef on my screen and i decided to watch. Really useful. Now going to watch 2nd part. Thanks
I was struggling with React-Navigation 3 a while back and got it to work eventually, now I am struggling with React-Navigation 5. This is a life saver, thanks!
You all probably dont give a shit but does someone know of a method to log back into an Instagram account..?
I somehow forgot the account password. I love any tips you can give me!
Thanks dude! I saw a lot of videos how to do this but non of them were as good as this one
Thanks!
This is the best tutorial ever, clean and easy to understand.
this is the true react native tutorial, REACT NATIVE CLI. thanks for your kind heart!
PURE GENIUS... I have been waiting for this kind of tutorial for months! THANK YOU! :)
Best React Navigation video I've seen, helped me a lot updating from RN 4
I'm follow tutorial from lynda, but it's too old using react navigation, and now i was helped with your tutorial here. thanks anyway!
Most updated and clear tutorial for React navigation. Good job!
One Of the cleanest video for react-navigation. Thank you for this amazing content.
Thanks for the kind words. Glad it was helpful
Just in time for my new project. Thanks Stephen
It's Julian 🙂
Great Job , thanks for the tutorial!
Coding at its best, lucid and powerful.
Thanks a lot!
+1 subscriber
Can you kindly show, how to add a Drawer button in the header to open the drawer.
I tried to add it but I am getting errors. Please help.
stackoverflow.com/questions/62237771/please-help-react-navigation-5-x-nested-navigation-drawer-not-opening-from-menu
Great tutorial! Made react native look very easy! Thankss
Thank you for this great tutorial!
Great guide. Thank you very much!!
Man, You did a great job with this one
Nice explanation!! Love it
This is awesome! Thank you so much for sharing. How do you change the background color of the bottom tab bar?
tabBarOptions: {style :{backgroundColor....
Hi, thanks for the tutorial! This was so helpful. However, I'm having a slight problem with the bottom tabs. I created 5 bottom tabs, they're all there but the names of each tab don't show up unless I click on them, whereas you can clearly see "Tab 1" "Tab 2" at the bottom at all times in your example. Any idea why? At the moment I haven't added any styling to these tabs so Idk what could be the issue.
I guess you put so many tabs that react minimizes them
Amazing! thanks for your help!
Awesome Video. Very helpful
Hello Sir, Whenever I pass a react component just like you passed Screen1, Screen2 etc to a Navigator prop: component, I get this error:- Error: `Got an invalid value for 'children' prop for the screen 'login'. It must be a function returning a React Element.` What should I do?
can you make a video on navigation authentication flows with redux and react native navigation 5? Like structuring react native app.
I will consider it. That's a very specific request. I try not to do too many specific request or I will never be able to get to my planned videos
thanks a million :)
Hey, just curious. Is there a big difference when using the material-bottom-tabs vs the regular react-navigation/bottom-tabs? Thanks !
I don't know all the availabile options off the top of my head, but you can just look at the source code for each class and see what's available (right click and go to definition in the IDE) . There shouldn't be too much that's different outside of the UI.
I have a small doubt... why braces are given for createTopTabs and not for createHomeStack.... Anyway great tutorial...thanks for the help....
Is it ok to not add react-native-gesture-handler? They says of you didnt include that at the very top of your code it will crash on production.
Thank you for this great tutorial! Just subscribed 😀
Hey Curry! I wanted to say thank you for the tutorial, helps a noob like me alot lol! I have a question regarding 28:49 , so basically you put the condition to check if the data from detail.js exists, right? When I tried to do the same in feed.js(which is the first screen) and ran the program, it gave me an error saying that the 'this.props.route.params.data' is undefined. Any idea what went wrong here?
Good catch. I was going over that part at the end a little too fast and it wasn't really part of my original that code I planned on writing in the video. 'this.props.route' always exists. If you do not pass any params than the 'params' field won't be there. The correct condition should be::
if(this.props.route.params){
//do something with this.props.route.params.data
}
In the final version I uploaded to Github i used a ternary operation. That's another way of checking the same condition. Part 2 of my videos transforms the components into hooks.
Hello ! i just created a new react native project using expo and it didn't generate android and ios files. What should I do? Thanks !
You save my day lads
Sir I followed your tutorial and even I compared the code with your Github repo too. But I am getting
Error: Looks like you nested a 'Navigation Container' inside another
great to see you back on track lolz ...
Well explained.. I like it.. Keep it up
I just subscribed bc this tutorial is great - thank you!
One question though: when I try to navigate to another screen (similar to what you did at the 14:00 mark) the navigation isn't being pushed down to the props and therefore crashes my app every time. Any ideas as to why?
it's still crash now?
Hello Sir...Could you please tell me how to make bottom tab transparent..?
Excellent!!!
Thanks a lot !
Hi have you shared the starter code for this? I wanted to follow along the video.
You can use the master branch in the Github repo. The link is in the description. The master branch now has v5 already integrated, but you can easily add more navigators and screen along with the video.
How do you pass function to Header. For instance if you want to make an async search request from Header?
I keep getting this error
@react-navigation/stack could not be found within the project or in these directories:
node_modules
../node_modules
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
This is the precious side of youtube.
Thanks a lot, dude!
+1 subscriber
I have a question though.
I want to pass some data from my navigator to each tab. You do implement it, but you pass it as a title at the options.
I need to use that data at the of each tab.
I found one answer that suggests using "this.props.navigation.dangerouslyGetParent().getParam('paramNameHere')" , but I couldn't figure out how to use this line, even though I understood what it actually does.
Can you possibly help :S ?
How to make dynamic headerTitle using with headerleft option in React navigation version 5 ?? Using bottom tab when I press any tab it shoult change headerTitle.
Hello everyone. Sorry for my English)) I have a trouble: 9:20 'import Details', I not have that file, nowhere. How I can fix it?
It gives the file where its included in the error when you run
react-native run-android/ios
Thank you sir
So in my case im using webstorm and for some reason the IDE is not recognizing the @react-navigation/native import. I guess its some version issues, like you mentioned at the start of the video. Should i remove node modules folder, change the versions from package.json and run npm install ??
yeah you can try that. If you're still having issues you can paste your dependencies section and I can try it out.
@@TheFlutterFactory just did a whole new project, thank you anyways, your work is amazing and a i like the way tou structure the code.
@@TheFlutterFactory actually i would like to question you something. When i use the navigation to push to another screen, then i exit the app and re open the screen it shows its actually the 'root' screen. Why it doesnt show me the screen that i went to before exit the app just like android apps do?
PD: sorry if my english is sloppy.
That's the normal behavior. Opening to a specific Activity after the app has been closed is not the default behavior in Android either. Are talking about the app actually being killed, or just pressing the home button to put the app into the background.
@@TheFlutterFactory I was talking when the app is sent to the background, and i found the solution. Just had to pass a function to restore the state to the onStateChange prop of the NavigationContainer !
When I select home from drawer it does not return to home when it's in details page. Can we select the home and the children start again?
is there no way to click on something other than a button to navigate? i'm struggling to find a solution on the docs even though facebook + instagram both use this tactic profusely through their apps.
Try wrapping your component in a TouchableOpacity 🙂
Hi, can you help me? I still got the Component Exception Error, like the one at 9:59 but this time, it was at the component screen1. I've rechecked many times for the component name and all, but still couldn't find the problem.
Is it the same error or is it different? Paste the first part of the message here.
@@TheFlutterFactory Yes it is the same error but it happened to screen 2, not home screen. Any solution?
What exactly does the error say? It should tell you exactly what the problem is. Post a snippet of your code. That error is not possible on only one of the screens if all three are implemented in the exact same manner . Did you import that component correctly? Did you check double check capitalization etc? Did you restart the the app? (not just reload)
@@TheFlutterFactory Error : Coulnd't find a 'component' or 'children' prop for the screen 'Cart'. That is what the error says. I changed the screen name from contacts to cart. I've checked everything, name, spelling, made sure I exported and imported the right component from the right js file. Still got that error, I've restarted the app many times, still the same.
I think maybe because I did not write the code at app.js? I'm writing the code at another js file because I used the app.js to write the code for a login page and the drawer navigation will be used for home page.
Sorry if I'm asking too much, I'm still not familiar with react native .
big thanks
You're welcome
Nice work but did how we hide Top Tab Bar? Coding With Curry
Are you talking about the the AppBar? If you're talking about the tab component, one thing you can do is just create a ternary condition. Example:
{
Your condition ?
...
: (or just null)
}
@@TheFlutterFactory Sir i really Appriciate whenever i ask some thing you must reply.Thanks
Great tutorial..!!!
Just one que though: if i want to use state inside my screen is it possible to do that?
Sure. You always have access to the useState hook. If you want to pass data between screens, you can use reactnavigation.org/docs/use-navigation-state/
I've had a weird thing that I couldn't find on Google, I make a blank project in Expo Managed mode, I run either expo, npm, or yarn start and everything is normal and I get the QR code to scan and the project on my phone via the Expo app. After doing the npm install for react navigation 5 (with the npm installs specifically for Expo), then anytime I run npm or exo start it runs in Webpack mode. I cannot find any way to not have it run in Webpack mode after this, no way to run normally with the QR code which lets me run it on my phone, and no way to toggle off of Webpack mode. If anyone know why this happens please let me know. I thought that maybe it's because react nav 5 uses native modules that Expo cannot handle so it defaults to the Webpack mode? However then why would there be compatibility downloads for Expo Managed Workspace projects?
I got this error ". unable to resolve '. /src/screens/SearchScreen' from App. js. Whenever I start expo
hy sir, i have an error whenever i install react navigation packages through npm
could you please please tell me that what to do
I got error like this.. Error: requireNativeComponent: "RNSScreen" was not found in the UIManger.
How to fix it?
stackoverflow.com/questions/66921263/invariant-violation-requirenativecomponent-rnsscreen-was-not-found-in-the-ui
Always Google your errors first if you don't understand it. It's likely that any error you see has already been discussed by people in a forum online.
@@TheFlutterFactory Ive been seraching for this error, but still not working
@@TheFlutterFactory Ive visited this stack overflow question, but yeah still not work
Thanks
every time I declare
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'
its shows
error: Error: While trying to resolve module `@react-navigation/native`
fro android mobile.
How to solve this error. I installed everything based on this video. I can't find the correct solution.
Try doing 'react-native link'
name props doesn't work in my createbottomnavigator(), how to solve that, how to show the name on each screen individually.
How are you accessing props (from a class or functional component?) Which part of the video are you referring to? Paste the line of code
Why for the create home stack do you not have a return but for the create bottom and top tabs you have a return
Good catch. There was no particular reason. I went through a couple iterations of code before I made the video. If you use the brackets with the arrow function, you'll need to explicitly write the 'return'. Since I'm only returning a single component in all those functions, you can omit both the return and the brackets like you see in the createHomeStack function. It looks a littler cleaner.
recently I tried v5 but app keeps giving this error "null is not an object (evaluating 'rngesturehandlermodule.direction')"
github.com/react-navigation/react-navigation/issues/5688#issuecomment-550322452
When trying to get the drawer working I'm getting the following error: Unable to resolve "@react-navigation/drawer" from "App.js" but I followed all the steps as you did in the video, does anyone know what may be going wrong?
Are you sure you did 'npm install' from the root directory? It just sounds like it doesn't recognize the @react-navigation library in general. if you're still getting an error, do 'react-native link'
@@TheFlutterFactory Yes I always run the commands from the root of the project. I asked about this on StackOverflow and someone suggested running npm i -s @react-navigation/drawer and a few other lines to install the missing components, but after doing that Im getting the following error: warn Package native-base has been ignored because it contains invalid configuration. Reason: Cannot find module 'native-base\package.json'
I'm getting extremely frustrated with trying to learn React Native, I always get errors for dependency issues and other things that dont seem to install properly.....
thanks for the help!
how do you debug like that at 26:55? like connecting to the localhost browser? any tutorials?
Just open the debug menu on the emulator or real device. More info can be found here: reactnative.dev/docs/debugging I should probably do a video on more debugging tools
@@TheFlutterFactory Ohh thanks, btw debugging on devices is quite pain to see.
Informative video, Great effort bro.. I am looking on how to design a landing page in react native for a travel app, Can you help me or suggest something that would be helpful?
I'm assuming you're talking about a website. There are plenty of cheap options out there like Bluehost. If it's not going to be an actual web application, you can just use free options like Weebly or Wix to get something out in a day
@@TheFlutterFactory No, I am talking about front-end design for home screen in a mobile app using react native
I don't understand why you would create a separate app to advertise a different app. Landing pages by definitions are just simple websites. Apps are actual applications. Are you talking about a splash screen??
Coding with Curry No bro, you got me wrong. I just want to know how to design home screen for a app
The same way you would design any other screen for your app.. Use your imagination 🙂 you are the developer. I can't tell you what to put in your screen. The 'home' screen is just what ever screen your app.js initially points too
error is 'package itself specifies main module that could not be resolved' on ios
If you're running it after cloning it from my repo, do 'npm install' then cd into the ios folder and do 'pod install'.
whit Expo? or only react native?
Expo IS react-native. I'm not using expo if that's what youre asking. The code wouldn't be any different
I am just a beginner to react native,i started with function component, but this tutorial using class component .Can i follow same procedure to create mavigation using functional component,I dont find any tutorial using function component to create navigator?.If anyone know about any tutorial please suggest one.
Look at Part 2 🙂ruclips.net/video/RyMF8WyMoZE/видео.html
i have tried installing "@react-native/native v5.0.5" and app keeps crashing on startup.
I am runnig app on Samsung S7.
Any idea?
what's the error? did you follow the instructions from the docs? you might need to do a 'react-navigation link' if you haven't yet. If you're are using my project in the Github repo, make sure you this line in your app level gradle:
implementation project(':react-native-vector-icons')
@@TheFlutterFactory thanks for answering, i searched online and fixed it:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
add these two to "android/app/build.gradle" and worked for me
@@mr_kamuran Where you add these two? Under dependency?
@@许居仁 Yep
@@mr_kamuran I solved it, Thank you!
The this.props.navigation.navigate('Detail') at 14:08 is giving me an error that says,
"TypeError: undefined is not an object (evaluation '_this.props.navigation')"
Anyone got any ideas what could be wrong?
If you don't have access to the navigation object, it likely means that you didn't add the Detail screen to your Navigator correctly. Double check that. You can also look at the source directly in my git repo. The link is in the description
Coding with Curry thanks I got it
Plz sir make a video on in app puchases , payment integration in react native and flutter ...
what is difference between children and component ?
The component prop tells the screen that it's associated with a specific component. The children prop should be used if you want the screen to be associated with a different Navigator object. Think of the word 'children' as a child navigator object inside of the current Navigator. That's why we need to use children when moving to the top/bottom tab screens.
Please make a tutorial eject expo bare workflow, I have trouble handling expo dependencies for android
That would be an extremely short video. What's the specific error you're getting?
@@TheFlutterFactory, As the SDK expo module is required to replace with react-native-unimodules, I have tried this, but a new error has come to the gradle, here I focus on Android
@@dodicandra4971 did you follow these docs? docs.expo.io/versions/latest/expokit/expokit/ I'm not a fan of Expo and haven't used it in a long time (almost a year) so I'm sure the process has changed a bit.
I love react native, but it's full of failed error, even when you just started npm install.,, wasting time so much just for see halo world in emulator.
It's part of the learning process with everyone 🙂 once you see the same errors a few times you'll learn how to avoid them. For example, people usually forget to do a 'pod install' after 'npm install' for iOS
@@TheFlutterFactory what is `pod install`? this is my first time hearing about it
uber, uber eats, discordd, airbnb, twitter, instagram... all of these are made in react native. bye
@@alexandrepellegrino2699 wait, really? i only know discord is using react when using the browser version
@@StarBattle08 discordd uses react native on mobile lul
Thank you!This vedio helps me very much!
I’m getting “ref error: can’t find variable create top tabs. Everything is set like the video
did you compare the code to what I have in the Github repo? If you're doing things slightly different , you can make a gist (gist.github.com/) of your file and send it to me so i can look at it.
Liked ^^
IS IT SAME AT HOOKS COMPONENT?
No, Hooks are a completely different concept. I have a separate video on Hooks here ruclips.net/video/g68InzYKXN0/видео.html There are also Hooks that you can use with this navigation library. I might do a follow up video on that topic in the future.
Hey make a video on phone number authentication
Please keep comments related to the current video
can you do a TS version?
I don't touch TS in this channel because not everyone likes it (myself included). If you already know TS, then you should already know how to convert JS to TS. There's no special case for React Navigation.
@@TheFlutterFactory why dont u like it?
23:00 ......passing parameters from parent to child
How to disable Drawer for Home Page??
Are you asking how to hide/show it or you just don't want the drawer in the home screen at all?
@@TheFlutterFactory actually saw your code i got it thank you
createHomeStack is not defined
How to solve it
Import it 🙂 and make sure you have the right library installed
Please make videos on animation using rn-reanimated
I am planning to do some videos on animations in the near future.
Hi mate. How to pass different params to individual screens inside tab navigation. Anyone who knows also plzz comment.Thanks in advance
It's probably better to either use Context api or Redux in that case.
love your works.. but small thing.. it seems that you speeding up your voice in some places.. its annoying actually.
I appreciate some constructive feedback, but everyone talks differently. I'm not going to purposely change how I talk just because someone doesn't like it.
@@TheFlutterFactory im sory i thought you double the speed just to reduce the time in the video when you edit .. If its natural then im totally sory.. Didnt mean to upset you anyway... Im learning thrugh your videos a lot.. Big thanks for that actually 🙂
No worries. It might just be the editing or me just being nervous. Hopefully all aspects of the videos improve over time 🙂
@@TheFlutterFactory Keep up the good stuff cheetah you are a life savor 👏👏
If someone needs I have created a git repo having started code in above video. If any one wants to follow along they can clone that:
github.com/diwpro007/reactNavigationTest/tree/start-code
nobody want follow your code. it's very cazy
Please explain why the code is "crazy". Is there any particular piece of code that you don't understand? We can discuss.
@@TheFlutterFactory the guide in official docs is very easy to understand but you You make it difficult.
I did not simply want to follow the docs. I wanted to show a different way of implementing the library that may be more applicable to an actual app. A lot of people disagree with your statement that it's "Crazy" . Again, if there's any particular part that's confusing, we can discuss it