Slide In Drawer Navigation in React Native
HTML-код
- Опубликовано: 4 окт 2019
- Need One on One Coaching? 20% OFF NOW!
1 Hour - tinyurl.com/DC1HRCoach
2 Hours - tinyurl.com/DC2HRCoach
4 Hours - tinyurl.com/DC4HRCoach
💥 Check out this awesome animated like button!
/ animated-like-62750436
💥 Save TIME with a custom TEXT component!
/ custom-reusable-47843654
Check out the updated social app! • Updating SOCIAL APP wi...
Get notified about my upcoming Instagram clone course! www.instaclone.app - Let's create a simple but beautiful slide-in drawer navigation for React Native! We will be using the react-navigation package to quickly accomplish this.
If you enjoyed this video please consider supporting me on Patreon! / designintocode
💾Source Code
bit.ly/36RbzAD
❤️ Subscribe for awesome videos! bit.ly/2KZU1ds
✅SwiftUI Videos!
• SwiftUI ANIMATED Float...
✅Building a React Native + Firebase Social App
• React Native + Firebas...
✅Taking Designs and Turning them Into Code
• Music Player screen UI...
✅Awesome React Native Videos!
• React Native LOGIN SCR...
Follow me!
Twitter: bit.ly/2MdnXBX
Software Used:
VSCode, React Native, Expo
#reactnative #reactnavigation #reactdrawer 
Наука
I have a course coming out on building an Instagram clone from scratch using React Native & Firebase, make sure you sign up to get discounts, release date info and sample chapters! www.instaclone.app
bro, please make MORE SIMPLE EXAMPLES, without other not important information, make a simple sidebar plsss...
Great tutorial! The first video I came across that helped me get custom content in the drawer navigator.
Glad it helped you out!
Another quality content. Thanks again💪
This helped me a lot, Thanks
Excellent Tutorial. Thx!
you're amazing, thank you
You are awesome. Thanks!
Subscribed!
Hi great tutorial! What would be the best way to implement a different backgroundColor on each item (not random) ?
Very nice tutorial
You just saved me 1 hour at least! :) appreciate it bro! nice tutorial!
Awesome!
thanks bro!
First of all, great video! Thank you for this. I have one question. How can I change title of SideBar/Screen dynamically inside screen. For example, instead of Profile I want there name of user or something like that.
Awesome!
Excellent video. Can you create video for nested drawer navigation?. Means drawer navigation with submenus.
Your video helped me a lot, but not able to find a full working example on how to bring user profile data from my switch navigator to this drawer navigator, any suggestions?
Nice!
keep on!
Come chat with us on Discord! discord.gg/xg5auu4
What would you like to see next?? Please leave a like on the video if you enjoyed it and subscribe to see more, it really helps out!! ❤️
thanks for this tutorial. Can u please create a drawer navigation for Native-base!
Hello
I really need your help and guide on how to do a role-based login app with different user levels using RN.
Let's say we have users
1. Cashier,
2. Manager and
3. Customer
Each user will have a dashboard and menu (drawer) specific to it.
when you login as Manager it takes you to Manager's dashboard with Manager's specific Drawer Navigation
when you login as Cashier it takes you to Cashier's dashboard with Cashier's specific Drawer Navigation
when you login as Customer it takes you to Customer's dashboard with Customer's specific Drawer Navigation
I am using a nodejs API on my local server as backend.
Can you do a basic tutorial on how to do this and how to structure my folder.
Thank you for your great tutorials and inspiration
russellogieva@gmail.com
Thank You
Can you let me know how to install expo with this project by using yarn package manager?
Hi, I like this tutorial, but I can't foward to de minute 4:44, after that the app don't run.. what are the dependency I need? I install react-navigation, react-navigation-drawer react-native-gesture-handler react-native-reanimated react-native-screens and nothing.. somebody help me?
so cool
hello, which dependias you use in this Drawer Navigation, always when I do mine it gives an error. Would you help me.
Good i like it
Hey Is it possible to do this now in this version of react native???
How do i use this to change screens or populate the screens shown ?
I didn't get 'this.props.navigation.openDrawer' at 2:00 min. where you defined 'openDrawer'? something is missing.
Nice tutorial, can u do on phone input with country verification with validation like whatsapp, telegram type
I am geting this error error: Error: Unable to resolve module `@unimodules/react-native-adapter` from `node_modules\@unimodules\core\build\AdapterProxy.js`: @unimodules/react-native-adapter could not be found within the project.
How to make the Sign Out button to the bottom of the drawer navigator?
How Can I implement a theme to this?
If I do pay Can i get the code and will it work with my Wordpress Divi Theme please reply
1st background music is awesome. How can i get it?
I use a paid service for the music. Not sure where else you could get it.
How to set position right side for drawer open
run in react-navigation 5 ?
How to add logo in toggle right side
all depencies is not include when this tutorial is created by this person
I'm getting an error:
"TypeError: undefined is not an object (evaluating '_reactNavigation.ThemeColors.light')"
I've already searched everywhere, but can't seem to find a solution for that
Hmm... Sounds like it maybe being caused by older or incompatible versions of react and react navigation. Grab the source for this from github and see if that project works.
@@DesignIntoCode Thanks for the reply, but I can't run the project from github here. I've started with react native like 2 months ago, so I'm kind new.. I think it's probably because you're using expo, but anyway.
In my case I've tried following the steps on the video, starting a new react native project (react-native init projectName), and then just installed the same versions of the dependencies you had on the "package.json" file on GitHub. But then I was getting that error I mentioned earlier.
Now I've downloaded the source from your GitHub, and when I try to run the project (I use 'react-native run-android') it gives me this error:
"Android project not found. Are you sure this is a React Native project?"
All I did was download the project, and I ran "npm install", then tried to run the project. It might be something really simple, that would happen only with me, 'cause I'm new to this, but if you could tell me what I should do to get it running, I would be thankful. hahaha
Thanks again!
#HELP_ME
Unable to resolve "react-navigation-drawer/lib/typescript/src/navigators/createDrawerNavigator" from "components\SideBar.js"
Probably you have to import this package first from npm
Edit: Since its too late hopy you had figured it out yourself
Please can you make a full social network like a migme , mig33 ?
Possibly!
Very good tutorial!
How can I call a view instead of printing the pending text?
export const PendingScreen = ({navigation}) =>
Aapko answer mila ,i also want to know
Can you please let me know that how we can use drawer and stack navigation together in app.js file....
reactnavigation.org/docs/en/getting-started.html
@@yusufhadi4256 its not here completely,
I already used this but the layout is noy working properly......after using stack navigator and drawer navigator both in app.js
Hey did u find any soln?
@@mohitarora2190 yeh....ill share the link to u
@@rahulnag9582 that would be great
Good work bro, but hideStatusbar is not good animated in android
What emulator are you using ?
iOS Simulator
I got error unable to resolve ./screens none of these files exist in App.js
You’ll need to create the screens.js file
I have a problem please help me
Getting error:
unable to resolve react-navigation-drawer from app.js
npm install -g react-navigation-drawer is not working.
Please help.
Try without the -g
@@DesignIntoCode thanks for the help.
gesture-handler and reanimated needed to be installed as well.
But still getting an error like:
TypeError: (0, _reactNavigation.createAppConatiner) is not a function. (0, _reactNavigation.createAppConatiner) is undefined.
Are you also installing react navigation and importing the needed modules?
@@DesignIntoCode I installed again react navigation and drawer as well. Still getting the same one. Is there any version conflict I'm having here?
It doesn’t sound like a version issue. Can you post a link to your code?
Hello my drawer list text is coming but part of it... for example if screen title is Profile then its coming like Profil not able to find where to change the style
It sounds like maybe the container your text is in is too small and cutting off the text
@@DesignIntoCode yes... So container contains only flex value 1 I'll try to add width der..but it's not working ...
Flex doesn’t necessarily make it stretch horizontally, put a background color on your container so you can see what dimensions it’s actually taking up
@@DesignIntoCode Already checked its full. i cross checked every part of style. and dont know y its giving me this wired issue..is there any chance issue with createDrawerNavigator as less letters are working fine i mean max 5 like "Lists" but others like chopping last 2 characters.
@@DesignIntoCode even If reduce text like instead of Profile i use Pro.. then too last character is gone
Does this work on web?
No, this is for mobile apps.
for react native cli this is working or this is only for expo #i am new to react native development
Works for both
@@DesignIntoCode thank you so much let me try
@@DesignIntoCode unable to resolve module'expo-font' from 'node_modules/@expo/vector-icons/build/characterIconSet.js'expo font could not be found within the project.kindly guide me thanks in advance
You can’t use expo fonts if you’re using the cli, you’ll need to replace them with something else
@Marshalls Corner Only look for the library in "reactnavigation.org/" and see how it import.
Unable to resolve "react-navigation-drawer" from "App.js"
Failed building JavaScript bundle.
You have to npm install it
@@DesignIntoCode Yeah I resolved it, based on your tutorial I have made a custom drawer but in the sidedrawer I want it to have the background color of black instead of white in your case, any tips on that? Thanks
Just change the backgroundColor of the container to black
@@DesignIntoCode It was useful, but i want to build over it and add stuffs like header and contents on different screens
bit confused about where to put the header component etc.
Any help regarding that? I have also joined your discord group
It’s a view just like any other screen, you can build it out however you’d like
Is this react native v5 navigation
No it’s 4.x
Hey man!
My project runs, there are no errors, but the MENU Drawer does not appear, I have already followed several tutorials and all the menu does not appear and the drag does not work! What can it be?
What version of react navigation are you using?
Ya no funciona
error
error
i recive an error he can't find contentComponent
Would need to see your code where you’re getting that error
You prob didn't do return(); in sidebar.js
i cant see drawer menu
Make sure your code is exactly the same as I have throughout the video.
Same here, the project and everything works but the menu does not appear!
managed to make it work?
abe bhai kya kya dependencies thi wo to bta deta 4 5 hrs waste hogye fir bhi nhi mila kuchh
In hindi language
We need voice over, for a little explaination
achese explain kro installation process gnta smj nahi aa rahi h
waste of time
Its waste as new methods are available now.
it is a very bad telling