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Â With that said, let's start working on our onboarding screen, which is our index.jsx.
00:00:08Â And you can navigate to it on your phone by simply clicking the index on top left.
00:00:13Â Or, this is crazy, you can use your device's native capabilities, like on iOS, you can swipe from the left side of the screen,
00:00:22Â and that will also perform the same action.
00:00:26Â That's crazy.
00:00:27Â I mean, the power you get with developing in React Native is so good because you can develop native mobile applications with native functionalities for
00:00:37Â both Android and iOS while writing code that looks and feels like React and Next.js.
00:00:45Â I think you can see my enthusiasm and I hope you share it with me while you're learning how to develop React Native applications.
00:00:52Â With that said, let's not use the view right here, rather let's use something that you learned about in the crash course part of this course.
00:01:01Â And that is safe area view.
00:01:05Â Whenever you have kind of the most outside view, that should be a safe area view because it ensures that our content is visible on all different devices.
00:01:17Â And of course we have to import it at the top.
00:01:20Â by saying import safe area view, and it's going to come from a package react-native-safe area context like this.
00:01:32Â It will simply ensure that our content doesn't overlap with a status bar, a bottom bar, or anything like that, both on iOS,
00:01:40Â Android, and all other types of devices.
00:01:43Â Let's give it a class name equal to bgPrimary and h-full for full height.
00:01:49Â And that will immediately turn our device black.
00:01:53Â Next, we can wrap everything within the safe area view.
00:01:56Â We're going to also render a scroll view.
00:02:01Â This is coming directly from React Native.
00:02:04Â And we can give it a content container style equal to height of 100%. So the whole screen should be scrollable.
00:02:15Â The reason why we implement this is because the height of our content might be larger than what some smaller devices support.
00:02:22Â So they might need to be able to scroll up and down to see it fully.
00:02:27Â Now that we have the scroll view, we can implement the view within it, like a div, and give it some class names, such as w-full for full width,
00:02:38Â justify-center, items-center, h-full for full height, and padding x of 4 for some padding horizontal.
00:02:48Â This is just to center everything in the middle of the screen.
00:02:51Â Next, we can render an image, also coming from React Native, We already know what kind of properties does it have, like source,
00:03:00Â equal to, and we once again have to import the images at the top by saying import images from dot dot slash constants.
00:03:12Â And we can now use the images.logo.
00:03:16Â And of course you have to spell constants properly.
00:03:20Â There we go.
00:03:21Â Aura at the top.
00:03:22Â This looks great.
00:03:24Â Let's also give it a class name equal to w-130 pixels.
00:03:29Â and h-84 pixels, which makes it look bad, but we can give it a resize mode equal to contain, which will contain it within those width and height,
00:03:43Â essentially making it a bit smaller.
00:03:46Â Right below this image, we'll render a second image, which will also be self-closing with a source equal to images.cards.
00:03:55Â It will have a class name equal to max-w-380 pixels, w-full, and h-about 300 pixels.
00:04:11Â Also, let me fix this typo right here.
00:04:15Â And don't forget, we also have to give it a resize mode equal to contain.
00:04:21Â If we save it, this is looking much closer to what we have on the final design.
00:04:26Â But of course, now is the time that we add a couple of text elements and the button.
00:04:31Â So let's create a view for that, still within the same view below the image.
00:04:36Â We can create a new view.
00:04:39Â with a class name equal to relative margin top of 5 and give it our first text element with a class name equal to text-3xl to make it very big.
00:04:55Â text-white and font-bold as well as text-center to center it in the middle of the screen.
00:05:03Â Here, we can say something like, discover endless possibilities.
00:05:10Â with, and then within it, we can render another piece of text.
00:05:14Â It's like having a span within a P tag.
00:05:18Â That will say aura, which is our app name, and we can give it a special class name of text-secondary-200.
00:05:25Â And this is the first time we're using one of our special theme colors we have added within our Tailwind config.
00:05:33Â There we go.
00:05:34Â That's looking good.
00:05:35Â Let's also create a space right here.
00:05:39Â to divide aura from width.
00:05:42Â That's looking much better.
00:05:44Â And you see how this aura in the design has this special underline?
00:05:48Â Well, let's add that.
00:05:50Â Moving below both of the texts, we can create a new image, which will have a source.
00:05:58Â Equal to images.path with a class name equal to w-136 pixels.
00:06:07Â I found that value to work the best and h-15 pixels for the height.
00:06:14Â We're going to also make it absolute as we need to absolutely position it below that aura text and give it a minus bottom dash two and minus right dash
00:06:25Â eight to position it just right.
00:06:29Â Let's also give it a resize mode equal to contain.
00:06:34Â There we go.
00:06:35Â That's much better.
00:06:37Â Now we can go below the image and below the view and render another piece of text that will say something like where creativity meets innovation.
00:06:50Â And no, this was not created by ChatGBT.
00:06:53Â I thought of this myself for sure.
00:06:56Â Embark on a journey.
00:06:59Â of limitless exploration with Aura.
00:07:05Â I mean, who wouldn't use the app once you read this text?
00:07:08Â Let's give it some class names such as text-sm, font-pregular, which is P regular, Text dash gray dash 100, so we can actually see it.
00:07:22Â Margin top of seven to divide it a bit from the top and text dash center to center it vertically.
00:07:29Â This is looking great.
00:07:31Â And finally, let's create our first custom component of the day, which is going to be our button.
00:07:39Â So to do that, we go to our file explorer and create a new folder called components.
00:07:46Â Within components, we can create a new file called custom-button.jsx.
00:07:53Â And there we can run rnfe to quickly spin up our custom button.
00:07:59Â And now that we have our custom button, we can go back to our index.jsx.
00:08:03Â Right below the text, we can start typing custom-button and automatically import it from components.
00:08:12Â If we save it, you won't be able to see anything.
00:08:16Â That's because it's showing dark text on dark background.
00:08:20Â But this is our sign to dive into the custom button and start implementing it.
00:08:25Â First things first, it's not technically a button.
00:08:30Â It's something known as a touchable opacity, as we have learned before.
00:08:34Â But now you get a chance to put your skills to the test, to actually use what you learned in a real app.
00:08:40Â So let's import the touchable opacity coming from React Native.
00:08:47Â And instead of wrapping everything with a view, let's wrap it with a touchable opacity component.
00:08:53Â And don't forget to import the text.
00:08:55Â We'll still need it.
00:08:56Â We still cannot see anything.
00:08:58Â So let's give it some classes.
00:09:00Â I'm going to say class name is equal to, and I'm going to make it a dynamic template string of BG secondary.
00:09:09Â There we go.
00:09:10Â That's already better.
00:09:11Â At least we can see something.
00:09:13Â We can make it a rounded dash Excel, which will round the corners and give it a min dash H of 62 pixels for the height.
00:09:22Â We can also make it justify center and items center.
00:09:27Â And this is already looking a bit better.
00:09:30Â Let's style the text element within it by giving it a class name equal to text dash primary.
00:09:38Â font-p-semi-bold, text-lg to make it a bit larger.
00:09:44Â And within it, we can render whatever we want to say.
00:09:47Â So what we can do is pass some special props to our custom button to truly make it a custom reusable component.
00:09:55Â We can pass some props like the title, because every time we use this custom button, we don't want it to say custom button.
00:10:02Â We want it to say something like continue with email in this case.
00:10:06Â We can also pass a handlePress, not handleClick, handlePress in this case, which will be a callback function.
00:10:16Â For now, we can leave it empty.
00:10:18Â And we can also pass container styles, which are some additional styles we can pass, such as wFool and marginTop of 7. So if we go back,
00:10:28Â let's put all of these props to use.
00:10:31Â By first destructuring them, we can destructure the title, the handle press, the container styles.
00:10:39Â And in some cases, we might also have text styles as well as is loading property.
00:10:45Â We'll have it when submitting the video.
00:10:47Â So now we can expand our touchable opacity.
00:10:51Â And we can also give it the onPress handler, which will be equal to handlePress, which we're passing as a prompt.
00:11:01Â We can also modify the active opacity to something like 0.7, I think looks best.
00:11:07Â This is the opacity of the button once you press it.
00:11:09Â And we can apply the container styles right within our other styles, which will make it fit the full width of the screen.
00:11:17Â And if isLoading, we can apply the opacity of 50 to make it seem like you cannot click it.
00:11:24Â That's going to look something like this.
00:11:26Â And also, we can give it a disabled state if we're loading, which is not happening right now, so it looks good.
00:11:34Â Next, let's also make this dynamic template string the class names for the text element, which is going to look something like this if we properly close it.
00:11:46Â And we can also use the text styles right here if we're passing any.
00:11:52Â And most importantly, we can make this text render the title, which is coming dynamically from the index page where we're calling this custom component.
00:12:01Â And there we have it.
00:12:02Â We have our button.
00:12:04Â The last thing we need below the scroll view will be a component called status bar.
00:12:12Â It's a self-closing component, which we can import from expo status bar right at the top.
00:12:19Â And it will have a background color of hash 161622 and a style of light.
00:12:31Â Do you see what happened when I added that?
00:12:33Â Let me comment it out and bring it back.
00:12:38Â Basically, since our app is in dark mode, it also darkened status bar and gave it a style of light.
00:12:44Â So now you can see your battery percentage, clock, and all the other stuff at the top as well.
00:12:49Â This is very useful in case you want to show it or hide it within your application.
00:12:55Â One thing that I've noticed recently is that some apps purposefully show it because they want you to have all that information,
00:13:03Â but some apps sneakily hide it so you get lost in time and spend more time on the app.
00:13:09Â I noticed that TikTok actually hides all the information and shows you just the videos So you lose the sense of time and you keep scrolling.
00:13:18Â But now you see the other side of that and you learn how to implement it so that potentially you can trap your users within the app or you can be good
00:13:26Â in them and give them all the information they need.
00:13:28Â In this case, we'll be the good guys.
00:13:30Â With that in mind, the last thing we need to do to finalize our onboarding is actually provide our users with a way to exit it,
00:13:38Â meaning to go to the next screen.
00:13:41Â So for the first time, we're going to use the router.
00:13:44Â Right at the top, coming from ExpoRouter, we can import two things, the redirect component, as well as the router itself.
00:13:54Â In this case, we don't have to declare it as a hook.
00:13:57Â Rather, the only thing we have to say is router.push.
00:14:03Â And we're pushing to forward slash sign dash in, as that's the next component we want to work on.
00:14:10Â And believe it or not, that's it for our onboarding screen.
00:14:15Â Now there's just one small thing I noticed.
00:14:17Â And that is that back here in our view, instead of H full, we can give it H dash and then about 85 VH.
00:14:27Â This will actually help us center the content in the middle of the screen, and we can even make it min-h.
00:14:34Â So this is going to be the min height of the screen, and now it's nicely centered.
00:14:39Â With that done, I want you to take your phone in your hand and admire what you have done.
00:14:45Â You can even move your thumb up and down and you'll see it will nicely scroll.
00:14:49Â You can kind of hover over the button to see how the touchable opacity changes and you get all of the powers of developing native mobile application with
00:14:59Â a code that, let's be honest, feels like you're writing a web app.
00:15:04Â With that in mind, this looks great to me.
00:15:07Â Let's just continue with our email and let's start implementing our auth layout and then both of our sign-in and sign-up screens.
00:15:16Â Phenomenal work so far.