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
React Native has revolutionized mobile app development by allowing developers to write a single code base for both iOS and Android. This approach improves efficiency and user experience through the use of native components. The popularity of React Native is supported by major companies, and the introduction of Expo simplifies the development process with robust tools and components.
00:00:00Â Before React Native, developing mobile applications for multiple platforms was hard.
00:00:06Â You had to write separate code bases for each platform, which was slow and expensive.
00:00:11Â But with React Native, you can write a single code base that works on both iOS and Android, which saves time.
00:00:19Â and makes you a more efficient developer.
00:00:21Â One of the reasons React Native has become so popular is that it allows you to use native components, which results in better performance and user experience.
00:00:30Â And it's not only me who thinks that way.
00:00:33Â Big companies like Meta, Discord, Microsoft, Tesla, Amazon, Airbnb, and even Call of Duty use React Native to build their mobile applications.
00:00:43Â It's gotten so good that you'll see only a few people fluttering these days.
00:00:49Â On top of the cross-platform compatibility and native components, the benefits of React Native are also hot reloading, which lets you see the changes you
00:00:58Â make in real time, speeding up the development process.
00:01:02Â Strong community support, ensuring that the framework continually evolves and improves.
00:01:07Â And finally, it's easy to learn.
00:01:09Â If you're familiar with JavaScript and React, you can quickly learn React Native and start developing mobile apps, which is exactly what we'll do today.
00:01:18Â In this video, we'll use Expo.
00:01:20Â You're familiar with tools like Create React App or Vite, right?
00:01:25Â Expo is just that, only for React Native applications.
00:01:28Â It provides many tools and services that simplify development and help you build your apps more easily.
00:01:35Â One of the biggest benefits of using Expo is its simplicity.
00:01:39Â With Expo, you don't have to worry about configuring your development environment, dealing with native dependencies, or installing huge Android Studio
00:01:48Â or Xcode to get started.
00:01:49Â Expo takes care of everything, so you can focus on building your app.
00:01:54Â Expo also offers pre-built components and APIs for navigations, gestures, camera, and maps.
00:02:01Â You can write native code and compile and run it without any issues.
00:02:05Â Specifically, its over-the-air updates automatically publish new releases.
00:02:11Â So the next time somebody launches your app, your app will have the latest JavaScript code you push.
00:02:16Â This usually requires a review from Google Play Store and Apple Store for each new update you have to bring, but not with Expo.
00:02:24Â In a nutshell, if you're new to React Native or want to develop your app quickly and easily, Expo is the way to go.
00:02:32Â It simplifies development and allows you to focus on building your app.
00:02:36Â In this video, we'll use the latest and greatest of what Expo has to offer.
00:02:41Â They've recently launched a fantastic new routing system called Expo Router.
00:02:46Â It takes a different approach to handling navigation using a file-based routing system that is simpler, more intuitive, and very similar to how Next.js
00:02:55Â handles routing.
00:02:56Â Expo is also planning to add React server components soon.
00:03:00Â This means we'll be able to do similar things that we do in Next.js, from writing API routes to writing server components.
00:03:07Â It seems like web and mobile development are going hand in hand, all thanks to Expo.
00:03:12Â It's a no-brainer why big companies like Discord, Burger King, Coinbase, and Xbox choose Expo for their products.
00:03:20Â And if you still think using React Native CLI would have been better, then you really need to think twice.
00:03:26Â Remember, with Expo, you can eject your app anytime you want and then add additional features.
00:03:31Â Alright, let's jump right into the exciting stuff.
00:03:34Â We've already talked about the benefits and drawbacks of React Native and how Expo can make your life easier.
00:03:40Â Now it's time to dive into the code and see how it works firsthand.
00:03:45Â If you've worked with ReactJS before, you'll find that React Native uses a similar syntax.
00:03:51Â But of course, there's some differences you should be aware of.
00:03:54Â Let's explore the ins and outs of React Native code, examine how it looks and how it functions, and compare it to React JS to help you understand the similarities
00:04:04Â and differences between the two.
00:04:06Â By the end, you'll understand the React Native components and how to use them.
00:04:10Â When coding in React Native, you use JavaScript, just like in React JS.
00:04:15Â But instead of rendering HTML elements, you'll be rendering native components.
00:04:20Â So let's take a look at the basic React Native component example.
00:04:23Â We're importing two important components from the React Native library, view and text.
00:04:29Â And then we create a functional component called app that returns the view and text components wrapped inside the view component.
00:04:36Â What's interesting here is that we're using JSX syntax, which makes it easy to create and visualize our components in a more HTML-like way.
00:04:45Â Let's take a closer look at the text component.
00:04:48Â While in React, we use P or H tags for text, in React Native, we use the text component instead.
00:04:55Â It's pretty straightforward.
00:04:56Â The text component is used to display text in the app, and you can style it using the same CSS-like syntax as in React.
00:05:03Â You can set the font size, color, and weight using the style prop.
00:05:07Â React Native also offers a stylesheet utility.
00:05:11Â allowing you to define styles by creating a single JavaScript object.
00:05:15Â This optimizes performance, especially in larger applications.
00:05:19Â And as Tailwind CSS is rising in popularity, Native Wind came into the picture.
00:05:24Â It allows you to write Tailwind-like styles within React Native.
00:05:28Â Isn't that crazy?
00:05:29Â It feels like we're working on a regular web app but we're developing a mobile app.
00:05:34Â Now, let's talk about the View component.
00:05:36Â Think of it as a box or container that holds other components.
00:05:40Â It's similar to a div in HTML, but with some added functionality specific to mobile apps.
00:05:47Â The View component is often used to create layout structures for other components.
00:05:51Â It has many different props that can be used to control its appearance and behavior.
00:05:56Â One thing to note is that the View component uses Flexbox layout by default.
00:06:01Â which makes it really easy to control how its children components are laid out.
00:06:05Â So you can use Flexbox properties like Flex Direction, Justify Content, or Align Items to achieve the layout you want.
00:06:12Â But how can you add some interactivity to your React Native app?
00:06:16Â Well, get excited because we have some awesome components that can do just that.
00:06:21Â These components are perfect for creating buttons, links, and other interactive elements in your app.
00:06:27Â The first one on the list is Touchable Opacity, which is great if you want to create a button.
00:06:32Â Think of it as a cousin to the button component in React, but with even more room for customization and flexibility.
00:06:39Â The second one is Touchable Highlight, which allows views to respond to touch in a unique way.
00:06:45Â When touched, the component reduces the opacity of the wrapped view, revealing an underlay color.
00:06:51Â And then there's touchable without feedback, which is there if you need to create an element that is clickable, but you don't want it to have any visual
00:06:59Â feedback when pressed.
00:07:00Â It's especially useful for creating links or images that don't require any additional styling or effects.
00:07:06Â Apart from these touchable components, there's also activity indicator, which allows you to show a spinner or a loading indicator in your app.
00:07:14Â Button allows you to set properties like the title, color, and onPress function to be called when it's pressed.
00:07:21Â But if you need more advanced styling or behavior, you may find yourself using the touchable components more often since they offer greater flexibility.
00:07:29Â The next component is the flat list.
00:07:31Â which is perfect for rendering a long list of items that needs to be scrolled efficiently.
00:07:36Â It's like the map function in React, but it has extra features like optimized scroll performance and item separation.
00:07:44Â So when should you use the flat list and when should you just map over the elements in React Native?
00:07:49Â For larger lists with smooth scrolling, go for the flat list.
00:07:52Â For smaller lists, map function will do the job.
00:07:55Â Scroll view is like a magic box that can hold multiple components and views, providing a scrolling container for them.
00:08:03Â It's like having the overflow scroll property of a div in HTML, allowing us to easily navigate through a list of items or a large amount of content within
00:08:12Â our app.
00:08:13Â By using scroll view, we can make sure that the users can easily explore all the content, making the app more intuitive and user-friendly.
00:08:21Â There's also a safe area view, which provides a safe zone to render your app's content without it being covered by the device's hardware features like
00:08:30Â the notch, home indicator, or status bar.
00:08:32Â It's great for building apps that are supported on devices with different screen sizes and shapes.
00:08:38Â While the default safe area view functions as expected for most cases, it falls short for some users, making it not the optimal choice.
00:08:46Â So, I consistently use React Native safe area context to ensure content is contained within the safe area on any mobile device,
00:08:54Â preventing overlap with the notch or the bottom bar.
00:08:57Â In React Native, we can also use the Image component to display images, whereas if you want to display an image as background,
00:09:04Â you can use ImageBackground.
00:09:06Â The ImageBackground is specifically designed to display images as the background of a container, allowing other components to be layered on top of it,
00:09:14Â whereas just Image is primarily used for displaying standalone images.
00:09:19Â Both components can handle different image formats like PNGs, JPGs, WebPs, and GIFs, and even GIFs, if that's how we pronounce it.
00:09:28Â However, believe it or not, neither support SVGs due to native rendering limitations.
00:09:34Â Still, you can use SVGs directly within Expo by using a third-party package like React Native SVG.
00:09:41Â React Native also has many ready-made components to display a model, which looks something like this.
00:09:47Â and an alert, which looks like a typical alert.
00:09:50Â And if you want to create a toggle in React Native, you can use a switch component.
00:09:55Â One of the components that I frequently use is the status bar.
00:09:58Â Both React Native and Expo have their own versions that allow us to control how a status bar should look like for each screen within our app.
00:10:07Â And of course, the list doesn't stop there, as there are many components that help us simplify development.
00:10:13Â But now that you know the most important ones, let's dive into the action.
00:10:17Â Let's explore Expo and React Native in more detail.
00:10:21Â I'll teach you how to set it up, what files and folders are involved, and everything else that matters.
00:10:26Â And as I've told you before, I've also prepared a completely free Ultimate React Native guide.
00:10:32Â Download it from the description down below and use it as a reference throughout this video.