Sign in-Sign up UI-UX Design using React Native Expo (Android & IOS)
Build a highly designed login-signup UI-UX design using JavaScript code
Hello, devs!
Okay, this is going to be a quick one. Designing is an important part of programming as it improves the user experience and makes the application dynamic and user-friendly. Let’s start designing a login and signup page as it is required in almost every mobile application. And if you are a UI developer, then you have to deal with it somewhere in your programming career.
Our project’s outcome will look the same as the above image.
If you are looking for a video-based tutorial then it’s here:
Part 1:
Part 2(signup screen):
Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad
Set-up and Installation
We are using the latest React navigation 6 for switching between the screens and NativeBase components to make the UI. To use this, we have to do some installation. So, let’s install that. Make sure that you have installed the expo version greater than or equal to 41.
For Navigation
npm install @react-navigation/nativenpm install react-native-screens react-native-safe-area-contextnpm install @react-navigation/stack react-native-gesture-handler
For NativeBase
npm install native-base styled-components styled-systemexpo install react-native-svgexpo install react-native-safe-area-context
For Icons
npm install @expo/vector-icons
Well, that’s a long list of installations but we have to install them as we are going to use them in our application.
Code Part
App.js
We add two screens here, one is login and the other is signup in the stack navigator.
Login.js and Signup.js
The UI of both screens is made with the NativeBase component. We have added a secure text entry feature in the password section. And added a box (previously called card) for login using Facebook, Google, Twitter, or Apple ID.
Github Code Link: Login-Signup Design
Thanks for reading. Make sure to hit the comment box if you are facing any problems regarding this project. Share this with your community if the article is helpful.
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
