Expo React Native Login System #1 | Creating the pages (STEP BY STEP)
ToThePointCode ToThePointCode
9.77K subscribers
142,340 views
1.5K

 Published On Apr 22, 2021

In this video, we create the initial screens for a react native login system app from scratch. Part 1.
GET SOURCE CODE 📀⬇️

🔴 Get Project Source Code - https://bit.ly/ttpc-react-native-logi...

🔴 All Other Source Codes & Support - https://bit.ly/ttpc-monthly-access

NOTES

🔵 Flower Crib is just an abstract application for demonstrating how to create a login system with react native.

🔵We create all the screens and pages we need for the expo application in this video. You can follow and do the same. We will build on this login app in the next parts.

🔵 Main packages using here include expo, formik, datetimepicker and styled-components.

VIDEO RESOURCES

🟢 Other Parts of this series
-    • React Native Login System  

LET’S WORK

👋 You can reach me at - https://www.tothepointcode.com/contact

CHECK OUT THESE HELPFUL TUTORIALS

🟡 Complete React and Node JS Login System -    • Login Page with React and Node Js + E...  

🟡 Node JS Projects -    • Node JS Starter Guide  

🟡 React Native Projects -    • React Native Starter Guide  

🟡 Publishing Expo React Native App to Play Store Journey
-    • Publish Expo React Native App to Play...  

🟡 PHP Project
-    • PHP CRUD Application ft MySQL, JQuery  

TOOLS USED

🟠 Tool for my thumbnail & images - https://partner.canva.com/ttpc

🟠 Cheap website domain name - https://namecheap.pxf.io/ttpc


FOLLOW US ON:

🔵 Twitter -   / tothepointcode  

🔵 Instagram - https://www.instagram.com/invites/con...

🔵 GitHub - https://github.com/tothepointcode

🔵 YouTube -    / @tothepointcode  

CHAPTERS

0:00 Intro & Preview
0:47 Creating the App
2:02 Work Structure
3:52 Running the App
4:18 Default Colors
6:23 First Styled Component
10:24 Login Screen
12:50 Outputting a component
13:37 Status bar Styling
16:05 Formik Intro
18:23 Creating Modular Input field
21:36 Icon component
22:45 Button
25:05 Expo Vector Icons Intro
28:14 Using Modular Input field
30:27 First Input field display
30:39 Password field Implementation
33:47 Toggle Password Eye
38:00 Submit Setup
39:04 Error Message box
40:56 Google Button
43:55 Extra Redirection Text
47:39 Signup Screen
52:22 Date of Birth Calendar
1:00:55 Welcome / Home Screen
1:08:36 Cleanup
1:09:24 Basis for Next Episode
1:10:10 Signing out ✌

#tothepointcode #reactnative #loginpage

show more

Share/Embed