Login & Register UI Tutorial in React Native for Beginners

In this tutorial, you'll get to know how we can create a login & register screen UI in react native. This is a beginner friendly tutorial, so if you don't have much knowledge about react native styling, creating custom components, Text Input fields, datepicker field and navigation then this is the tutorial you need to watch. Also, this tutorial is a part of a tutorial series in which I'm showing you different parts of react navigation v6.
So if you want to follow that as well here's the link to the React Navigation v6 playlist • React Navigation 6 Tut...
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ Music App UI Tutorial • Music App UI in React ...
► Timestamps
0:00 Introduction
3:14 Discussing the Project Structure
5:18 Creating the Login Screen UI
17:40 Creating the Register Screen UI
19:25 Creating Custom Component
28:24 Creating Datepicker Input Field
GitHub repo URL bit.ly/3v0H9sH
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/

[@FahadQureshimastermind]

Great video tutorial series.Loved to watch them and also learned many good stuff. I want to request you to make a small video in continuation of this navigation series, in which we can understand how to land to previous login page stack from custom drawer navigation LOGOUT button as you have commented one stack each time in App.js. Because it's creating little confusion that how to access multiple navigators as params or something at same time. Hope you will make this tutorial soon. Thanks in advance 🙂👍

[@80Vikram]

Great job dude, keep it up. God bless you

[@MulombiAnnuar]

Good job...have been following up with this series and I can say, you are a great tutor. Thumbs up brother

[@itzpradip]

Glad to hear it!

[@cuteland8180]

very useful for me tnks

[@edirinnelson6802]

Hi Pradip Debnath, how do i fix this errors:
1. Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: number.
2. ERROR: fontFamily "Inter-Bold" is not a system font and has not been loaded through Font.loadAsync.

[@willyhorizont8672]

Great UI UX thank you!

[@itzpradip]

Glad you like it!

[@thelostman5625]

Hi, can you make a tutorial on how to make full-screen application with immersive mode?

[@letekel1784]

hello
A special thank you to you for this tutorial really.
I know to do the same thing again but I have an error that blocks me.
setUserToken(''tekeu') for example does not return TypeError: undefined is not a function.
This on all state updates
code snippet:
const[isLoading, setIsloading] = useState(false);
const[userToken, setUserToken] = useState(null);
const login = () => {
setUserToken('tekeu');
setIsloading(false);
}
output: TypeError: undefined is not a function.
thank you for your help

[@rog0079]

Gem video

[@abdulsami4618]

Yes pradip, Plus nested navigations with an real world based scenario. Much needed.
And yes I already watched your navigation v6 series. Bur this time please deliver this with a project.

[@sandeepgahlotofficial]

Yes we need this Video, Please Sir..

[@sulemanali8542]

Dear Pradip Sir
I want to learn react native pls make a series on any 1 complete project front end backend also

[@bachudeepak3003]

Great tutorial. Pls keep posting bro..

[@itzpradip]

Thank you, I will

[@osama6795]

amazing video, please create a video with a react-naitve with redux or reacjs, with error messaging usging react-native with nodejs backemd

[@swapnilcodes]

Wow... Superb UI...👌👌

[@itzpradip]

Thanks 🤗

[@reactor8502]

Where do you get these cool SVGs?

[@edirinnelson6802]

please i need some help here... i'm using Expo and i'm issues with the fonts.

[@darkesh6356]

When you use pixels you arent getting a responsive UI right?

[@bilalqureshi3807]

It is showing me an error using Date Picker. ERROR TypeError: Cannot read property 'openPicker' of null. I have installed the package perfectly and it is still showing me error.

[@7nekib]

Sir..
Plz make a video on reset password with email in firebase react native cli project 🙏

[@luisrobertoherreraholguin9654]

works for web?

[@edirinnelson6802]

If you used Expo please i have some blockers.. please reach out

[@osama6795]

please give us a tutorial on redux with react-native with nodejs backend.... please kindly we need this, as it is not provided in your channel we need a redux tutorial with redux preferably with nodejs, as it goes along with javascript and not any other backend language. THANK YOU!!!

[@moonirKhan]

Hi Porodip, Excellent Tutorial , how can add SVG image ?? and how can setup it?

[@itzpradip]

Please watch the first video of the tutorial series ruclips.net/p/PLQWFhX-gwJbmtZY4mcRE-k7hL9DigcGS-, I've mentioned this in video itself too.

[@raoulbouyo9404]

great job but I can't set up project on android and ios emulators

[@jomaraggabao7877]

TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNDatePicker.openPicker')
there's an error in expo while using DatePicker

[@saurabhdwivedi3093]

Are you able to solve this issue ?

[@rabbegoviski]

what VS Code Theme u using... it s really beautiful

[@itzpradip]

cobalt 2

[@rabbegoviski]

@@itzpradip thank you

[@nileshnilu7902]

Add Splash screen with auth sir❤❤

[@Saurabhkumar-ps5zp]

Please upload next video on authentication.

[@itzpradip]

coming soon

[@ranjittiwari3416]

Hi brother, I want to know it's in expo or cli !

[@Saurabhkumar-ps5zp]

React native cli

[@ranjittiwari3416]

@@Saurabhkumar-ps5zp thanks brother

[@micheldorianvargaslolli6751]

Somebody has the link to the video that explain the metro config to add svg to the project. Tks

[@kwamenadadson]

Please it is not even on your Github?

[@mahek2379]

Following

[@ilhamsa01]

First

[@itzpradip]

You're the best 👍

[@arupde6320]

plz be little bit regular

[@itzpradip]

I'll try, thanks for your comment & support.