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.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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
In this lesson, we walk through the process of setting up a React Native application using Expo. Starting from creating a new project, we delve into installing necessary dependencies and configuring the project for smooth development and navigation.
mpx create-expo-app . to set up an Expo project in the current directory.package.json to enable file-based routing similar to Next.js.index.jsx file to serve as the homepage and an _layout.jsx file for layout components.app.json.mpx expo start -c to start the development server and view the app on mobile devices through the ExpoGo app.Link component from Expo Router.00:00:00Â First, we can create a bare minimum project.
00:00:03Â Starting off from bare beginnings, we can create a new empty folder on our desktop.
00:00:07Â Let's call it something like react-native-crash-course, and then drag and drop it into your empty Visual Studio Code window.
00:00:16Â Once you're there, open up your terminal, update it if you need to.
00:00:20Â By the way, I'm using OMIZSH for my terminal highlighting.
00:00:25Â And within here, we can set up our first React Native project.
00:00:29Â And as you might know, if you've been watching some other JSM videos, I always like to teach you how I would approach if I was doing this from scratch,
00:00:37Â how to read documentation and how to truly become an exceptional engineer.
00:00:42Â So if you don't know that about JSM, you might need to subscribe and turn on that bell notification to watch more videos just like this one.
00:00:51Â With that said, we are right here within manual installation within Expo Docs.
00:00:56Â The link will be in the description.
00:00:58Â Here, we can see that the first step is to create an Expo project by running the command mpx create Expo app.
00:01:05Â So back within our terminal, we can run mpx create Expo app And then we can type .slash to create it in the current directory.
00:01:16Â It's going to ask us whether we want to install the Create Expo CLI, to which we can say yes, and it's going to download and install the basis for our
00:01:25Â React Native project.
00:01:26Â While it's doing that, the next step is to install all the dependencies, and we have to do this as we're doing a manual installation.
00:01:33Â So we can say mpx-expo install, and then we're going to install a couple of things.
00:01:38Â Expo Router, so that we include the file-based routing capabilities.
00:01:43Â React Native Safe Area Context, as I mentioned before, this will help us make our app work on all devices with notches, bottom bars,
00:01:51Â and more.
00:01:52Â React Native Screens, which will allow us to navigate through different components.
00:01:57Â Expo Linking, which will enable us to allow users to navigate directly to a specific screen within an app, within an app from an external link,
00:02:05Â such as another website or another app.
00:02:08Â Finally, we have Expo constants that will give us access to a lot of the device information, such as the operating system,
00:02:14Â ID, version, and more.
00:02:16Â And then the Expo status bar, which simply provides a status bar component.
00:02:20Â So let's copy it and then we can paste it right here within our terminal.
00:02:24Â All of these packages are necessary for smooth functioning of Expo's file-based routing system.
00:02:30Â While that is happening, we also need to set up the entry point.
00:02:35Â So for the property main, we're going to use the expo router entry as its value in the package JSON.
00:02:40Â The initial client file is app-layout.js.
00:02:44Â So let's copy this, collapse our terminal and navigate over to package.json.
00:02:51Â By the way, what I've done just now is I've pressed command P and then I started typing the file name.
00:02:56Â And now by simply pressing enter, I am in the file without ever touching my mouse, opening the explorer, and then manually navigating to it.
00:03:05Â That's just one of the many pro tips that I'll give you throughout this video.
00:03:09Â So once again, control or command P.
00:03:12Â With that said, we have the main right here, which we want to override.
00:03:15Â So the main will now look something like this, expo router, entry.
00:03:21Â And of course, we want to provide a comma at the end.
00:03:24Â Now that we have changed the entry point, we can use file-based routing similar to the one of Next.js.
00:03:31Â So let's go ahead and copy the contents of the app.js file by pressing Ctrl or Command A and then Ctrl or Command letter C,
00:03:40Â deleting this file and creating a new folder called app that will have a new file of underscore layout dot JSX.
00:03:51Â And here we can paste the code that we had in the app before.
00:03:55Â This will be the starting point of our application.
00:03:58Â Returning to the docs, we need to modify our project configuration by deep linking scheme in our app config.
00:04:05Â So let's go to our app.json by navigating to it.
00:04:09Â and add a scheme right here, and we can call it the name of our application, such as Aura right here.
00:04:16Â This scheme field is used to deep link Expo and React Native applications.
00:04:22Â It's a special technique that allows your app to be opened within a specific screen directly from a URL outside of the app,
00:04:30Â such as from email, webpage, or another app.
00:04:33Â And as you can see, in this file, we also have a lot of other stuff, such as the name, which specifies the name that appears on the app's home screen.
00:04:41Â And also here, you can modify that to Aura, or your own preferred app name.
00:04:47Â We have the slug, which is a URL-friendly version of the app name.
00:04:51Â Once again, we can have Aura right here.
00:04:54Â We have the version, the orientation, some typical stuff.
00:04:58Â We have the icon, which you want to show, the user interface style, splash screen, a path to the assets, whether it supports tablet devices,
00:05:07Â a specific setup for iOS and Android devices, and additional plugins that you can add.
00:05:14Â For example, you can immediately see the Expo router we added before.
00:05:18Â Do you get it?
00:05:19Â It's just a file with many configurations to improve our app.
00:05:22Â We'll play with a few of these in a few minutes.
00:05:25Â We can now proceed with the next steps outlined in the docs and compile and run our application.
00:05:31Â We can now proceed with our docs.
00:05:32Â I believe that our Babel config has been properly set up, so we can immediately run our application.
00:05:38Â Typically, it's just mpx-exposed-start, but you can also add a C flag which will clear all the previous cache.
00:05:46Â So let's copy this command, close our files, open up the terminal and run mpx expostart-c.
00:05:54Â This command will download and execute the expostart command, which will start the Metro bundler and the JavaScript bundler that ships with expo.
00:06:03Â And you can see a few elements right here.
00:06:06Â Starting off with a large QR code.
00:06:10Â and different shortcuts for various actions.
00:06:13Â For instance, to open up the app in Android Studio, you can press the shortcut A.
00:06:18Â And the same applies to iOS.
00:06:20Â Press R in the terminal to reload the screen or press J to open up the debugger.
00:06:26Â We'll test a few of these functionalities as we start building our full stack app.
00:06:30Â And as I mentioned before, you don't need to rely on heavy tools like Android Studio or Xcode.
00:06:37Â Instead, we'll opt for the easiest method to develop in React Native.
00:06:42Â which involves using the ExpoGo app on your phone, regardless of your operating system.
00:06:48Â So on your phone, just go to your App Store, whether it's Google Play or App Store, and search for ExpoGo.
00:06:57Â Install it and get ready to scan this QR code.
00:07:00Â If you're an Android, you can open up the ExpoGo app and then scan it within it.
00:07:05Â And on iOS, you can just scan it with your native camera app.
00:07:09Â And on both operating systems, make sure that you're connected to the same network.
00:07:14Â Also on iOS, make sure to go to the ExpoGo settings app and turn on the local network and also turn the VPN status off to not connected.
00:07:26Â This is necessary for the Expo to connect properly.
00:07:30Â So let's give it a go.
00:07:32Â I'm scanning my code and I'm going to press open in ExpoGo and immediately We're in.
00:07:40Â It says, open up your app.js to start working on your app.
00:07:44Â So let's do exactly what it says, navigate to our layout, and let's modify this to something like Aura, our new app.
00:07:53Â And we are live.
00:07:54Â You're developing your first ever React Native application.
00:07:59Â That's amazing.
00:08:00Â So pat yourself on the back for learning how to set up React Native projects with Expo.
00:08:05Â Moving ahead, we can now create different routes by creating different files in the app folder, just like in Next.js.
00:08:12Â First, we'll move our code to a special file called index.js.
00:08:17Â So copy everything we have here and create a new file called index.jsx and paste it right here.
00:08:26Â This index file is our homepage, or in web terms, that would be a forward slash route.
00:08:32Â And the underscore layout will be present in all of the routes.
00:08:36Â So if we were working with web, here you would do something like a navbar or a footer.
00:08:41Â So now here, let's create a starter template code.
00:08:44Â We can use a special snippet called rnfes.
00:08:49Â It's a React Native functional expert component with styles.
00:08:53Â And we can rename it to root layout.
00:08:56Â And if that didn't work for you, that must mean that you don't have the ES7+, React, Redux, React Native snippets installed.
00:09:05Â So simply install it and give it a go.
00:09:08Â Once again, the command is rnfes and enter, and then you can rename to root layout.
00:09:16Â That makes it much simpler to do, right?
00:09:19Â Now within here, we can also center our text.
00:09:22Â So let's apply some styles to this view by saying style is equal to styles.container.
00:09:30Â And then within this stylesheet.create, we can create a new container class.
00:09:36Â We can give it some styles like display is flex.
00:09:40Â Let's also give it a flex of one.
00:09:44Â Let's give it align items equal to center, as well as a justify content equal to center as well.
00:09:53Â These properties should center the root layout and you should be able to see it in the center of the screen.
00:09:59Â Now to render the index.jsx on our home screen, we can modify the layout to render different screens and specify the default one.
00:10:08Â Or we can just use the slot property from expo-router.
00:10:12Â So let's import it at the top by saying import slot.jsx.
00:10:17Â coming from Expo router.
00:10:20Â And then within this root layout, we can simply return something known as a slot.
00:10:27Â We don't even need the styles anymore.
00:10:29Â So now we can save it.
00:10:31Â And you can see Aura coming directly from our index.jsx.
00:10:35Â The slot basically just renders the current child route.
00:10:39Â Think of it like children prop in React.
00:10:41Â And this component can be wrapped with other components like this.
00:10:45Â If we were to expand it and then wrap everything in a React fragment, like we would do in React.
00:10:53Â And then it allows you to add something like a footer and then we can give it a header and a footer below.
00:11:01Â But as you save it for the first time ever, we can see a render error saying that text strings must be rendered within a text component.
00:11:10Â Okay.
00:11:11Â That's a helpful error.
00:11:12Â So let's simply render a text component right here.
00:11:17Â and let's wrap header and footer right within it.
00:11:21Â There we go.
00:11:22Â It's hard to see them.
00:11:23Â They're at the top left and at the bottom left of our container.
00:11:28Â Later on, we can properly style them, but what matters most is that they're here.
00:11:32Â This is one way to implement navigation and layouts within React Native.
00:11:37Â An alternative route is to use something known as a stack of different screens.
00:11:42Â So we can import stack from Expo router, and we can remove this return.
00:11:47Â And instead of that, we can return a stack.
00:11:52Â Within the stack, we can declare each one of our individual screens.
00:11:56Â So here we can say stack that screen, which will be a self-closing component with a name equal to index and options equal to header shown set to false,
00:12:09Â as we don't need to show the header.
00:12:12Â And there we go.
00:12:13Â Now we can see our index screen.
00:12:15Â Now say that you want to create a profile route.
00:12:18Â All we have to do is create a new file within the app, which will be called profile.jsx, run R-N-F-E-S.
00:12:31Â It's going to say profile, but now how do we navigate to it?
00:12:36Â Let's return to our index.jsx and add a link component coming from expo by saying import link from expo router.
00:12:47Â So right here we have the text, we have the status bar, and then below it, we can render a link.
00:12:54Â which will say something like go to profile.
00:12:57Â And as we would on the web, we can give it an href that's going to say something like forward slash profile and a style of color blue.
00:13:07Â It is as easy as that.
00:13:10Â A go to profile button appeared and on your phone, you can press go to profile.
00:13:16Â And just like that, we got navigated to a second screen.
00:13:20Â How crazy is that?
00:13:22Â Just a bit of setup here and there, but now we have a complete structure and the knowledge for creating as many screens as we want within all the new React
00:13:32Â Native applications that you create.
00:13:34Â With that in mind, both Expo and the React Native offer plenty of components and elements that I could go on and on about,
00:13:44Â but it would take forever.
00:13:46Â Luckily, I've got you covered.
00:13:48Â To help you understand React Native better, I've created an awesome app that covers all the fundamentals and essential features you need to learn as a beginner.
00:13:58Â So, let's start building the app and put everything into practice.
00:14:02Â Now that you know how to create your React Native and Expo application and implement a couple of different screens you can navigate between,
00:14:10Â let's add some styling to our application.
00:14:13Â Sure, we have been styling using stylesheet so far, but as we have routing similar to that in Next.js, we also have similar styling.
00:14:23Â And that, my friends, is Nativewind.
00:14:26Â As the name suggests, it uses Tailwind CSS as a scripting language to create universal style system for React Native.
00:14:34Â So, head over to Nativewind, and you'll see a little banner saying Nativewind 4.0 is coming soon.
00:14:41Â For some reason, they're jumping from V2 to V4, skipping V3, but no worries.
00:14:46Â As with everything I'm teaching you in JavaScript Mastery, what matters the most is reading the docs, not necessarily following along exactly with what
00:14:55Â I do.
00:14:56Â So if the version got updated in the meantime, that's totally okay.
00:15:00Â Just follow the docs and let's get it installed.
00:15:04Â In this case, we're going to go to Quick Start Expo.
00:15:08Â And we don't have to install our Expo app, we have already done that.
00:15:11Â Rather, we can just install nativewind.
00:15:14Â So let's copy this command, open up our terminal, split it, and then paste the npm install nativewind.
00:15:22Â Once that is done, we can also install a dev dependencies of Tailwind CSS by simply pasting the command npm install savedev tailwind-css.
00:15:31Â The second step is to set up Tailwind CSS by running the command mpx tailwindcss init, same as we would do on the web.
00:15:40Â So let's say mpx tailwindcss init, which will create a new Tailwind CSS config.
00:15:46Â Next step we have to do is copy this Tailwind CSS config that has the content added here so that it knows within which files we're going to implement styles.
00:15:56Â So simply copy this content part right here and replace the existing empty content.
00:16:01Â Next, we'll have to add the Babel plugin.
00:16:04Â So let's copy the plugins right here, go back to our application, and don't be fooled, we don't want to modify these plugins right here within tailwind.config.js.
00:16:16Â Rather, we want to modify the plugins within Babel config by simply adding a new plugins array.
00:16:23Â Now, that's it.
00:16:24Â We can start writing code.
00:16:26Â So we can replace the stylesheet with Tailwind CSS like class names.
00:16:31Â Let's do that by copying the class names from here, closing the existing files.
00:16:37Â and completely removing the styles and the stylesheet from index.jsx, removing the stylesheet import, and instead of styles,
00:16:46Â we can simply render the class name.
00:16:49Â So now if we save it, you can see that it jumps to the top.
00:16:53Â The background color also changed.
00:16:55Â It's not white, so we can see that the styles are still not getting applied.
00:17:00Â Since we modified our Babel config, we can open up our terminal and press R to restart the server.
00:17:06Â And we can also go to our tailwind.config.
00:17:09Â Within the content, we can modify our uppercased app folder to lowercase app.
00:17:15Â And it's not only one app file, we want to track all the files within the app folder.
00:17:20Â So we can say forward slash asterisk asterisk, meaning everything within all the folders within it, forward slash asterisk,
00:17:28Â which means all the files, and then dot for the all extensions.
00:17:33Â Later on, we can also modify this custom directory to say dot slash components.
00:17:39Â There we go.
00:17:40Â So now if we go back and if we try changing the text to something like class name is equal to text-3xl, you can see that it actually applied all the changes,
00:17:52Â the text3xl as well as all the flex properties belonging to the view.
00:17:57Â This is already looking much better.
00:17:59Â Now that we know that Native Wind is working, let's quickly go back to tailwind.config.js and play a bit with our theme.
00:18:07Â Rather, set up our colors and fonts so we can build our app successfully.
00:18:12Â Throughout the entire process of building our app, we'll be referring to our polished Figma design.
00:18:18Â As you can see, there are a lot of pages which we'll build.
00:18:21Â We'll have an onboarding screen, sign up and sign in screens, and also our great looking homepage.
00:18:29Â So with that in mind, as with many of our videos, you can get access to this complete Figma file for free by clicking the link down in the description,
00:18:38Â and then you can follow along and build your Tailwind theme setup.
00:18:42Â The way you would go about doing that, is you can select a specific screen, like we have this one right here, and then you can see all the colors that
00:18:51Â we have.
00:18:52Â For example, this 161622, and copy it.
00:18:56Â Then back in the theme, you can say extend colors, and you can also add primary.
00:19:04Â and you can say hash and paste that color.
00:19:07Â So now every time that you refer to this color, you don't have to repeat 161622, rather you can say text primary.
00:19:17Â We'll also use a couple of other colors and font families within this video.
00:19:21Â So in the readme down below, you can copy the final Tailwind config and paste it here.
00:19:27Â As you can see, there's basically 10 colors.
00:19:29Â And then we're also mentioning some font families to make our text look better.
00:19:34Â Now that we have these font families, we have to manually import all of them.
00:19:39Â So, in the description down below, you'll also be able to find a complete assets folder.
00:19:44Â So, let's remove the existing assets folder, download and unzip the one from the description, and then simply paste it right here in the root of your directory.
00:19:54Â you'll be able to see that we have a lot of fonts, icons, images, and more.
00:19:59Â And to make our life importing those assets a bit easier, I have also created a constants folder, which you can find somewhere near the assets.
00:20:07Â You can also download it, unzip it, and paste it right here.
00:20:11Â If you check it out, this will simply import all of the files from the assets and then export them so we can import them in an easier manner.
00:20:19Â With that in mind, we have to put those fonts to use so we can go to layout.
00:20:24Â Within the layout, we'll have to load all of those fonts in.
00:20:27Â That's a bit different from what we do in Next.js, but it's not that hard.
00:20:32Â We can use the special hook by importing it first called use fonts coming from Expo font.
00:20:42Â Once we have it, we can use it as we would use any typical hook by saying const fonts loaded is the first parameter.
00:20:50Â And then the error, if they don't load correctly is the second one.
00:20:54Â And we can call it by using the use fonts and passing in an object of all of the fonts that we want to use.
00:21:01Â The way it works is you first give it a string where you specify the name of the font, such as Poppins black.
00:21:10Â And then you require the link to where that font is saved.
00:21:14Â For example, dot dot slash assets, forward slash fonts, forward slash poppins dash black dot TTF.
00:21:24Â And we have to repeat this for every font that we use.
00:21:27Â And you also have to make sure that you spell it correctly.
00:21:29Â The B in the black right here is capitalized.
00:21:33Â So make sure to do it like that.
00:21:34Â And just to save you all the trouble of writing it out and making a couple of typos along the way, this complete fonts loaded will be in the readme down below.
00:21:43Â So simply copy it and override it here.
00:21:47Â As you can see, we're basically just loading in the fonts.
00:21:50Â Now, the next thing we can do is introduce a use effect.
00:21:54Â We already know what a use effect is for, right?
00:21:56Â It allows us to perform some actions while the page, or in this case, the screen, is loading.
00:22:02Â So let's create a new use effect hook.
00:22:06Â provided a callback function and a dependency array.
00:22:10Â And within that dependency array, we can say fonts loaded, meaning recall this function whenever fonts load the change or whenever there's an error.
00:22:21Â And then we can say, if there's an error, then throw that error.
00:22:27Â And if fonts loaded, Then we want to call something known as a splashScreen.
00:22:35Â And this splashScreen is coming from ExpoRouter.
00:22:39Â So let's import it right here.
00:22:41Â splashScreen.
00:22:44Â And there's a special method on the splashScreen called hideAsync, which looks like this.
00:22:51Â If you hover over it, it's going to give you more information.
00:22:54Â It basically hides the native splashScreen immediately.
00:22:58Â But before you use it, ensure that your app has all the content ready to display when you hide the splash screen, or you're going to see a blank screen instead.
00:23:07Â But if our fonts are loaded, we should be good to go.
00:23:11Â Next, if for some reason our fonts haven't loaded yet, so if no fonts loaded, then we can return null, meaning we won't show anything.
00:23:20Â And we can also add and, and there's no error.
00:23:23Â So if the fonts haven't loaded and there's no error, something must have gotten wrong.
00:23:28Â So we're going to return null.
00:23:30Â And we also have to import use effect from react.
00:23:34Â So if we do that, we should be good to go.
00:23:37Â Also at the top, we can add a special directive.
00:23:41Â also by using a splash screen called splashscreen.preventAutoHideAsync.
00:23:49Â This will prevent the splash screen from auto hiding before asset loading is complete.
00:23:55Â So now that we have loaded our fonts, let's navigate over to our index and let's try to use it within our Aura app.
00:24:03Â We can do that by saying font dash and automatically you can see how Tailwind CSS IntelliSense gives us different options that we can choose,
00:24:11Â such as P, let's do maybe P black and save it.
00:24:17Â And automatically you can see how our app just gets a lot more character.
00:24:21Â And it will look much, much better once we implement this entire phenomenal design and all of the other screens that are prepared for you.