If you're having trouble with the expo initial configuration with Expo v51, run this command:
npx create-expo-app@latest ./ --template blank
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
00:00:00Â Let's close all of the currently open files and navigate over to app.auth and then the layout.
00:00:07Â Here within the layout, we can return just an empty react fragment and we can then render a stack.
00:00:14Â Of course, this stack has to be imported from Expo router.
00:00:19Â So let's get stack coming from Expo router.
00:00:24Â And you know that we first wrap everything in a stack and then within it, we can render multiple stack dot screens, which are self-closing components.
00:00:33Â The first one in this case being the one with the name equal to sign in.
00:00:40Â And it will also have options equal to header shown, which will be set to false.
00:00:49Â And we can also just duplicate this entire screen stack right below and just change the name to sign up.
00:00:57Â There we go.
00:00:59Â So now we have the sign in screen, which we're on.
00:01:02Â And we can also show that same status bar that we rendered not that long ago right here by saying status bar coming from react native.
00:01:12Â And it will have a background color of hash 161622 and a style equal to light.
00:01:22Â And don't forget, there are two types of status bars.
00:01:24Â In this case, we don't want to use the one coming from React Native.
00:01:28Â Rather, we want to import the one coming from expo status bar.
00:01:36Â And now that we have our layout, we can dive right into the sign-in screen.
00:01:42Â Right within here, we can wrap everything in a safe area view, which is coming from React Native safe area context.
00:01:50Â Right here, we can give it a class name equal to bgPrimary and ageFull for full height.
00:01:58Â And now we have a dark screen.
00:02:00Â Within it, we can show a scroll view, so we can scroll through it.
00:02:04Â and then have a regular view as well.
00:02:07Â Of course, the scroll view has to be imported from React Native, and we'll have to navigate back to our sign-in every time.
00:02:15Â Let's also give this view a class name, w-full, justify-center, h-full, padding X of four and margin Y of six.
00:02:28Â And remember that last thing that we had, we didn't want to do H full, rather we've done min dash H 85 VH because this will actually center it.
00:02:39Â Now let's not forget to import images as we'll use them right now by saying import images from dot dot slash dot dot slash constants.
00:02:50Â And we can start using our first image right here by using a self-closing image tag, which we need to import from React Native and give it a source equal
00:03:03Â to images.logo with a resize mode equal to contain.
00:03:10Â And we can also give it a class name equal to w-115 pixels and h-about 35 pixels.
00:03:19Â There we go.
00:03:20Â Below this image, let's also render a text element that will say something like log into Aura, like this.
00:03:29Â And we can also give it a class name equal to text-2xl to make it a bit larger, text-white, text-semi-bold, margin-top of 10, and font-p semi-bold.
00:03:45Â And this does seem to be a bit too much down on the screen, so I might want to return this to h-full to see how that will look like.
00:03:55Â Yeah, I think this is better for now.
00:03:58Â We can easily change it later on.
00:04:00Â Now we're going to dive into creating a second custom component of the day.
00:04:05Â And it's going to be a very important one.
00:04:07Â It's going to be a custom form field or an input.
00:04:12Â So let's go to components and create a new form field dot JSX component where we can run RNFE to create a basic form field component.
00:04:26Â And we're going to start by giving this view a class name equal to space dash y dash two, which will create some spacing between the elements.
00:04:36Â Right within it, we can also have a text element that will simply say what kind of a form field this is.
00:04:43Â So let's give it a class name.
00:04:47Â equal to text-base, text-gray-100, and font-p-medium.
00:04:57Â And now we can go back to sign in, and we can render our first form field, coming from components form field.
00:05:06Â You can see it right here, at least its label.
00:05:09Â To this form field, we can pass a couple of different props.
00:05:13Â So let's immediately expand it.
00:05:16Â And let's give it a prop of title, which will be email, a value which needs to correspond to an actual form value.
00:05:24Â So while we're here, why do you say that we immediately create a new use state field?
00:05:31Â By saying use state snippet, we can call it something like form and set form.
00:05:37Â At the start equal to an object with an email property of an empty string and a password property as well of an empty string.
00:05:47Â So now we can set the value of this form field to be form.email.
00:05:53Â As simple as that.
00:05:54Â Next, we need to also pass the handle change text so we know how we can modify it.
00:06:00Â And this will be a callback function that accepts the event and calls the setFormSetter where we destructure the existing form values and then modify the
00:06:12Â email to be equal to the event that we're passing.
00:06:16Â We can also pass some additional styles like other styles to this, such as margin top of seven.
00:06:23Â And we can also pass the keyboard type, which in this case will be email address.
00:06:29Â And in the other case, it can be a password.
00:06:33Â This is useful for auto-filling information such as emails, names, and so on.
00:06:38Â Now we can also duplicate this right below and modify it to match what we need for a password.
00:06:45Â So the title will be password.
00:06:47Â The value will be formed that password.
00:06:50Â And here we can modify the password property.
00:06:54Â And we don't need the keyboard type.
00:06:56Â And of course, don't forget to import useState from React.
00:07:01Â Once we do that, we can go back to our screen and we can see two different form fields.
00:07:06Â So let's get back into the form field and let's accept all of these props.
00:07:12Â Things such as a title, value.
00:07:15Â Sometimes we might also want to have a placeholder, handle, change, text, and other styles.
00:07:23Â And we can also spread out all of the other props that we might have here as well.
00:07:28Â And now we can use them.
00:07:30Â First of all, we can add the other styles right here to our view in case we want to further modify the styles for each specific element.
00:07:39Â So we can simply render the other styles here.
00:07:43Â This will space them out as you can see on the screen.
00:07:46Â Then instead of saying form field, we can render the actual title.
00:07:50Â That will look something like this, email password.
00:07:53Â And finally, we can start creating the view for the text input.
00:07:57Â by saying view and we can give it a class name equal to w-full h-16 padding X of 4, BG black 100, and I know you can barely see it,
00:08:15Â so just so it's easier to see, at the start, I'm going to add something like a border of 2 and border of red 500. That way you can see what we're working on.
00:08:28Â After BG Black, I'm also going to give it a rounded dash to Excel.
00:08:33Â So it's going to be a bit more rounded.
00:08:36Â On Focus, I'm going to give it a border dash secondary.
00:08:40Â So later on, once you tap it, it will turn orange.
00:08:44Â And we can also give it items-center.
00:08:48Â Now that you know what we're working on, I can change this border from red 500 to black 200. That will be a bit less in your face.
00:08:59Â That's good.
00:09:00Â Right within it, we can render a text input element.
00:09:05Â which we can import from React Native.
00:09:08Â It's going to be a self-closing property.
00:09:11Â And to it, we can pass a class name equal to flex1 text-white font-p-semi-bold and text-base.
00:09:24Â We can pass it the value equal to value, a placeholder equal to placeholder, a placeholder text color equal to hash 7b7b8b,
00:09:40Â an onChangeText property equal to handleChange.
00:09:46Â text, and then we can have a special property of secure text entry.
00:09:53Â So if it is a password, then we want to hide what you're typing.
00:09:57Â So what we can do is create a new useState field called showPassword, useState snippet, showPassword, Set show password at the start set to false.
00:10:14Â And then secure text entry can be equal to if title is triple equal to password.
00:10:22Â And if not show password, then it will be hidden.
00:10:27Â It will be secure text entry, else we will show it.
00:10:30Â And of course we also have to import use state.
00:10:34Â If you go back here, that looks good.
00:10:37Â And now if you tap somewhere in the middle of the input, I think you should be able to trigger your keyboard right here,
00:10:44Â as you can see it on my screen, similar for the password.
00:10:48Â We're going to improve these inputs later on, but you should be able to trigger it by pressing it in the middle.
00:10:54Â Next, let's implement that feature to show or hide the password.
00:10:58Â So right here below the input, we can say if title is triple equal to password.
00:11:06Â then show the following thing, a touchable opacity.
00:11:13Â We learned what that is.
00:11:14Â That is basically a button and on press, it will call a callback function where it will set show password to be the previous value of show password.
00:11:26Â So basically it will toggle it on or off.
00:11:30Â And we can also render a self-closing image right here coming from react native.
00:11:36Â So we have to import some images from the top by saying import images from dot dot slash constants.
00:11:46Â And then we can give it a source equal to if not show password.
00:11:55Â Then it's going to be icons.i, else it will be icons.ihide.
00:12:02Â And I noticed that I should have imported icons, not images.
00:12:06Â There we go.
00:12:07Â Coming from Constance.
00:12:09Â So now we can see this huge i in the middle.
00:12:12Â Let's also style it a bit by giving it a class name of w-6 and h-6.
00:12:19Â and a resize mode equal to contain.
00:12:23Â Okay, but it's kind of still somewhere in the middle there, so definitely something's wrong with our classes.
00:12:30Â I think I need to make this view a flex row, like this.
00:12:35Â That's going to put the eye at the end.
00:12:38Â And now you can trigger both of these inputs.
00:12:41Â But if you start typing at the second one, like ASD, you can now show or hide it.
00:12:47Â This works perfectly.
00:12:50Â So with that in mind, you now have a great looking aura screen.
00:12:53Â You can also go back and we have our inputs.
00:12:57Â So let's exit the form field and let's finalize the login screen.
00:13:01Â We can do that by bringing back our button component.
00:13:05Â by calling a custom button, self-closing, and we have to import it at the top.
00:13:13Â So we can say something like import custom button coming from dot dot slash dot dot slash components.
00:13:24Â forward slash form field.
00:13:26Â And I noticed that I don't have to make it curly brace.
00:13:29Â It has to be imported like this as it's the only default export.
00:13:34Â So now that we have this button, let's pass it some props like a title equal to sign in.
00:13:42Â Let's pass it a handle press equal to.
00:13:45Â Well, this is a very important function.
00:13:47Â Here, we will actually submit our form.
00:13:50Â So we can create a new function, con submit is equal to an arrow function that looks like this.
00:13:57Â And then we can call that submit right here on the handle press.
00:14:02Â Let's also pass it container styles of margin top of seven to divide it a bit.
00:14:07Â And then since this action will take some time, we can also create a loading state right at the top.
00:14:14Â The loading state we can create by saying useStateSnippet and I'm going to call it isSubmitting setIsSubmitting at the start setToFalse.
00:14:25Â And then we can simply say isLoading will be equal to isSubmitting.
00:14:30Â There we go.
00:14:32Â But why is this button acting like an input?
00:14:35Â Looks like I have done a wrong import.
00:14:38Â The custom button should be coming from the custom button file.
00:14:43Â There we go.
00:14:44Â That's much better.
00:14:46Â And also below this button, we can add a couple of pieces of text.
00:14:51Â Something like view that will wrap those texts with a class name equal to justify-center padding top of five, flex of row and gap of two.
00:15:05Â And then it will have two children elements.
00:15:08Â The first one will be a text that will say, don't have an account.
00:15:14Â I mean, seriously.
00:15:16Â And it will have a class name equal to text-lg, text-gray-100 and font-p regular.
00:15:27Â There we go.
00:15:29Â What happens if you don't have an account?
00:15:31Â Well, let's render a link component, which we of course have to import from expo-router by saying import link from expo-router.
00:15:43Â And now we can just make it say something like, let's do sign up.
00:15:50Â And of course, every link needs an href, so we can make this one point to sign-up and give it a class name equal to text-lg.
00:16:01Â font-p-semi-bold and text-secondary so we can actually see it.
00:16:07Â There we go.
00:16:08Â Don't have an account, sign up, and this now actually points to the sign up screen.
00:16:14Â That is great.
00:16:16Â Let's also remove this ugly top bar, which says index and auth and doesn't work with our dark theme at all.
00:16:24Â We also have to modify the layout for the entire route group.
00:16:29Â So let's duplicate this layout right here.
00:16:31Â Name it in parentheses auth.
00:16:35Â And then we simply say header shown false.
00:16:38Â So now it hides it as well.
00:16:39Â And we see this beautiful bar at the top and the content slides just a bit.
00:16:43Â We do want to center it, which we'll do soon, but at least now we have a full dark mode.
00:16:49Â Let's also repeat this for tabs.
00:16:52Â And we can also repeat it for forward slash search.
00:16:57Â forward slash query like this.
00:17:00Â So now we're hiding the search bar everywhere.
00:17:03Â We do get a warning here.
00:17:04Â So for now, I will simply comment this one out and we're going to implement it later.
00:17:08Â With that said, let's go back to sign in.
00:17:10Â And now that we have hidden it, now it might make sense to turn this from H full to min.
00:17:18Â dash h dash 85vh as that's going to push it down a bit.
00:17:24Â I think this is approximately centered, but of course you can play around with it and modify it as you like.
00:17:30Â Great.
00:17:31Â With that said, our login screen has now been implemented.
00:17:35Â We can actually type stuff in and we can also type the password and even show and hide it.
00:17:42Â That's great.
00:17:44Â The sign in doesn't do anything as we didn't yet submit it, but we do have the sign up screen right here, which for now is completely empty.
00:17:53Â So what do you say that for the sign up screen, we simply copy everything we have right here in the sign in and simply paste it within the sign up.
00:18:04Â Of course you have to modify the export sign up and also the name of the component right here to sign up.
00:18:13Â And now it seems like a sign in, but with only a few modifications, we're going to immediately make it a sign up.
00:18:21Â Those modifications include adding a username right here at the top, as when you're registering, we also have to know your username.
00:18:29Â Then instead of login, we're going to say something like sign up.
00:18:34Â to Aura and we're going to duplicate the email field to add new one on top of it.
00:18:40Â This time we'll say something like username, form.username.
00:18:46Â Here we'll change the username text and add a bit of a larger margin top of 10 and also remove the keyboard type as it's not an email.
00:18:56Â And with that said, we have a beautiful sign up screen besides one small tweak right at the bottom.
00:19:02Â Instead of don't have an account, we can say something like have an account already.
00:19:08Â Well, what you're waiting for, right?
00:19:11Â Go ahead and sign in and modify the href to sign in.
00:19:17Â So now we have beautiful navigation from sign up to sign in, and we can go back and forth from onboarding, sign in, sign up and more.
00:19:27Â You, my friend have successfully completed the first three screens of your React Native application.
00:19:34Â With that in mind, I think you're ready to start adding some logic to our app.
00:19:39Â Let's make these sign in and sign up screens not be just pretty canvases.
00:19:44Â Let's make them actually do the work so we can sign our users up to the application.
00:19:49Â And believe it or not, your first React Native application will also be a full stack application.
00:19:56Â We'll be using AppRite to add auth, databases, functions, and storage to your application.
00:20:03Â So that way you will be able to have users which can then upload videos to your platform.
00:20:09Â How cool is that?
00:20:10Â So if you haven't done that at the start, click the link down in the description so you can follow along with the video and what I'm doing,
00:20:18Â sign up or sign in, and then go to the console.