Transcript for:
Ultimate React Native Crash Course

the existence of react native makes react one of the most valuable skills to have it's crazy that about 75% of your knowledge from learning to make websites can carry over to building mobile applications that's exactly what I said in 2023 and it's more true now than ever before you may not believe it but what we do now in nextjs we can also do in react native 2 same file-based routing structure API routes and even react server components so hi there and welcome to a brand new Ultimate crash course where you'll learn the foundations of react native the newest features it offers and also deploy a Sleek full stack app using it the first part of this video is the ultimate crash course on react native we'll start by going over the benefits of using react native and why it has become such a popular choice for developing both IOS and Android applications next we'll dive into Expo a tool that lets get our application up and running quickly and easily after that we'll cover the fundamentals of react native we'll discuss its different elements how it compares to react GS as well as NEX GS code structure file based routing styling and much more by the end of this course you'll have a great understanding of react native and you'll be able to create your own apps using this powerful tool alongside this video in the description below I've also prepared the ultimate react native guide that covers everything you need to know to become a fantastic developer the guide covers the complete react native road map prerequisites and essential react native components and project ideas you can build and deploy to get a job you can download the guide and use it as a reference whenever you're unsure what to do next of course the guide is completely free and once again the link is in the description immediately after I'll put your skills to the test in the JavaScript Mastery Style by teaching you how to build and deploy a complete full stack react native application that's the only way to retain and expand on your knowledge the application you'll build is called Aura a full stack platform to share AI generated stock videos with a visually appealing onboarding screen robust authentication system including both sign-in and signup screens Dynamic home screen showcasing the latest videos in an animated flat list with a comprehensive list of all videos with playback pull to refresh functionality full text search cap ility with a dedicated search screen tab navigation for seamless browsing a post creation screen where you'll learn how to upload videos and images and a profile screen offering detailed insights into your account this eight screen app for sure has to be one of the best YouTube apps you can build with react native you won't need any previous react knowledge rather while building this you'll learn basic elements like view touchable image flatlist scroll view safe area View text input and status bar animations using animat table responsive design styling using Styles sheet and Tailwind CSS file-based and dynamic routing using nested routes and layouts Tab and stack navigation custom Hooks and fonts video players file Pickers professional code architecture and a backend using aite an open- Source platform that lets you add off database storage and more so you can build powerful full stack applications before we die into the crash course let's first create an account on aight in the description down below you can find a special link that will allow you to follow along and see exactly what I'm seeing in this video so you won't get stuck click get started sign in with GitHub and that's it now let's dive straight into the crash course before react native developing mobile applications for multiple platforms was hard you had to write separate code bases for each platform which was slow and expensive but with react native you can write a single codebase that works on both IOS and Android which saves time and makes you a more efficient developer 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 and it's not only me who thinks that way big companies like meta Discord Microsoft Tesla Amazon Airbnb and even Call of Duty use react native to build their mobile applications it's gotten so good that you'll see only a few people fluttering these days on top of the crossplatform compatibility and Native components the benefits of react native are also hot reloading which lets you see the changes you make in real time speeding up the development process strong Community Support ensuring that the framework continually evolves and improves and finally it's easy to learn 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 in this video we'll use Expo you're familiar with tools like create react app or vit right Expo is just that only for react native applications it provides many tools and services that simplify development and help you build your apps more easily one of the biggest benefits of using Expo is its Simplicity with Expo you don't have to worry about configuring your development environment dealing with Native dependencies or installing huge Android Studio or xcode to get started Expo takes care of everything so you can focus on building your app Expo also offers pre-built components and apis for navigations gestures camera and maps you can write native code and compile and run it without any issues specifically it's over theair updates automatically publish new releases so the next time somebody launches your app your app will have the latest JavaScript code you push this usually requires a review from Google Play Store and Apple Store for each new update you have to bring but not with Expo 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 it simplifies development and allows you to focus on building your app in this video we'll use the latest and greatest of what Expo has to offer they've recently launched launched a fantastic new routing system called Expo router it takes a different approach to handling navigation using a file-based routing system that is simpler more intuitive and very similar to how nygs handles routing Expo is also planning to add react server components soon this means we'll be able to do similar things that we do in nextjs from writing API routes to writing server components it seems like web and mobile development are going hand inand all thanks to Expo it's a no-brainer why big companies like Discord Burger King coinbase and Xbox choose Expo for their products and if you still think using react native CLI would have been better then you really need to think twice remember with Expo you can eject your app anytime you want and then add additional features all right let's jump right into the exciting stuff we've already talked about the benefits and drawbacks of react native and how Expo can make your life easier now it's time to dive into the the code and see how it works firsthand if you worked with reactjs before you'll find that react native uses a similar syntax but of course there's some differences you should be aware of let's explore the ins and outs of react native code examine how it looks and how it functions and compare it to react GS to help you understand the similarities and differences between the two by the end you'll understand react native components and how to use them when coding in react native you you use JavaScript just like in reactjs but instead of rendering HTML elements you'll be rendering native components so let's take a look at the basic react native component example we're importing two important components from the react native Library View and text and then we create a functional component called app that returns The View and text components wrapped inside the view component 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 let's take a closer look at the text component while in react we use P or H tags for text in react native we use the text component instead it's pretty straightforward 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 you can set the font size color and weight using the style prop react native also offers a stylesheet utility allowing you to Define styles by creating a single JavaScript object this optimizes performance especially in larger applications and as Tailwind CSS is rising in popularity native wind came into the picture it allows you to write Tailwind like Styles within react native isn't that crazy it feels like we're working on a regular web app but we're developing a mobile app now let's talk about the view component think of it as a box or container that holds other components it's similar to a div in HTML but with some added functionality specific to mobile apps The View component is often used to create layout structures for other components it has many different props that can be used to control its appearance and behavior one thing to note is that the view component uses flexbox layout by default which makes it really easy to control how its children components are laid out so you can use flexbox properties like Flex Direction justify content or align items to achieve the layout you want but how can you add some interactivity to your react native app well get excited because we have some awesome components that can do just that these components are perfect for creating buttons links and other interactive elements in your app the first one on the list is touchable opacity which is great if you want to create a button think of it as a cousin to the button component in react but with even more room for customization and flexibility the second one is touchable highlight which allows views to respond to touch in a unique way when touched the component reduces the opacity of the wrapped view revealing an underlay color 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 feedback when pressed it's especially useful for creating links or images that don't require any additional styling or effects apart from these touchable components there's also activity indicator which allows you to show a spinner or a loading indicator in your app button allows you to set properties like the title color and onpress function to be called when it's pressed but if you need more Advanced Styling or behavior you may find yourself using the touchable components more often since they offer greater flexibility the next component is the flat list which is perfect for rendering a long list of items that needs to be scrolled efficiently it's like the map function in react but it has extra features like optimized scroll performance and item separation so when should you use the flat list and when should you just map over the elements in react native for larger lists with smooth scrolling go for the flat list for smaller lists map function will do the job scroll view is like a magic box that can hold multiple components and Views providing a scrolling container for them 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 cont content within our app 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 there's also a safe area view which provides a safe Zone to render your apps content without it being covered by the devices Hardware features like the notch home indicator or status bar it's great for building apps that are supported on devices with different screen sizes and shapes while the default safe area view functions as expected for most cases is it falls short for some users making it not the optimal choice so I consistently use react native safe area context to ensure content is contained within the safe area on any mobile device preventing overlap with a notch or the Bottom bar in react native we can also use the image component to display images whereas if you want to display an image as background you can use image background the image background is specifically designed to display images as the background of a container allowing other components to be layered on top of it whereas just image is primarily used for displaying Standalone images both components can handle different image formats like pgs jpegs web PS and gifs and even gifs if that's how you pronounce it however believe it or not neither support svgs due to Native rendering limitations still you can use svgs directly within Expo by using a third-party package like react native SVG react native also has many ready-made components to display a model which looks something like this and an alert which looks like a typical alert and if you want to create a toggle in react native you can use a switch component one of the components that I frequently use is the status bar 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 and of course the list doesn't stop there as there are many components that help simplify development but now that you know the most important ones let's dive into the action let's explore Expo and react native in more detail I'll teach you how to set it up what files and folders are involved and everything else that matters and as I've told you before I've also prepared a completely free ultimate react native guide download it from the description down below and use it as a reference throughout this video first we can create a bare minimum project starting off from bare beginning we can create a new empty folder on our desktop let's call it something like react native crash course and then drag and drop it into your empty Visual Studio code window once you're there open up your terminal update it if you need to by the way I'm using om my zsh for my terminal highlighting and within here we can set up our first react native project 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 how to read documentation and how to truly become an exceptional engineer 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 with that said we are right here within manual installation within Expo docs the link will be in the description here we can see that the first step is to create an expo project by running the command MPX create Expo app so back within our terminal we can run MPX create Expo app and then we can type do slash to create it in the current directory 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 react native project 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 so we can say MP Expo install and then we're going to install a couple of things Expo router so that we include the file based routing capabilities react native safe area context as I mentioned before this will help us make our app work on all devices with notches bottom bars and more react native screens which will allow us to navigate through different components 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 such as another website or another app finally we have Expo constants that will give us access to a lot of the device information such as the operating system ID version and more and then the Expo status bar which simply provides a status bar component so let's copy it and then we can paste it right here within our terminal all of these packages are necessary for smooth functioning of Expos file based routing system while that is happening we also need to set up the entry point so for the property main we're going to use the Expo router entry as its value in the package Jon the initial client file is app layout JS so let's copy this collapse her terminal and navigate over to package.json by the way what I've done just now is I've pressed command p and then I started typing the file name 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 that's just one of the many pro tips that I'll give you throughout this video so once again control or command p with that said we have the main right here which we want to override so the main will now look something like this Expo router entry and of course we want to provide a comma at the end now that we have changed the entry point we can use file based routing similar to the one of nextjs so let's go ahead and copy the contents of the appjs file by pressing control or command a and then control or command letter C deleting this file and creating a new folder called app that will have a new file ofor layout. jsx and here we can paste the code that we had in the app before this will be the starting point of our application returning to the docs we need to modify our project configuration by Deep linking scheme in our app config so let's go to our app. Json by navigating to it and add a scheme right here and we can call it the name of our application such as Aura right here this scheme field is used to deep link Expo and the react native applications it's a special technique that allows your app to be opened within a specific screen directly from a URL outside of the app such as from email web page or another app 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 and also here you can modify that to Aura or your own preferred app name we have the slug which is a URL friendly version of the app name once again we can have Aura right here we have the version the orientation some typical stuff we have the icon which you want to show the user interface style splash screen a pth path to the assets whether it supports tablet devices a specific setup for IOS and Android devices and additional plugins that you can add for example you can immediately see the Expo router we added before do you get it it's just a file with many configurations to improve our app we'll play with a few of these in a few minutes we can now proceed with the next steps outlined in the docs and compile and run our application we can now proceed with our docs I believe that our babble fig has been properly set up so we can immediately run our application typically it's just MPX exp poost start but you can also add a c flag which will clear all the previous cache so let's copy this command close our files open up the terminal and run MPX Expos start- C this command will download and execute the Expos start command which will start the metro bundler and the JavaScript bundler that chips with Expo and you can see a few elements right here starting off with a large QR code and different shortcuts for various actions for instance to open up the app in Android Studio you can press the shortcut a and the same applies to iOS press R in the terminal to reload the screen or press J to open up the debugger we'll test a few of these functionalities as we start building our full stack app and as I mentioned before you don't need to rely on heavy tools like Android Studio or xcode instead we'll opt for the easiest method to develop in react native which involves using the Expo Go app on your phone regardless of your operating system so on your phone just go to your app store whether it's Google play or App Store and search for Expo go install it and get ready to scan this QR code if you're an Android you can open up the Expo Go app and then scan it within it and on iOS you can just scan it with your native camera app and on both operating systems make sure that you're connected to the same network also on iOS make sure to go to the expoo settings app and turn on the local network and also turn the VPN status off to not connected this is necessary for the Expo to connect properly so let's give it a go I'm scanning my code and I'm going to press open in Expo go and immediately we're in it says open up your app.js to start working on your app so let's do exactly what it says navigate to our layout and let's modify this to something like Aura our new app and we are live you're developing your first ever react native application that's amazing so pat yourself on the back for learning how to set up react native projects with Expo moving ahead we can now create different routes by creating different files in the app folder just like in nextjs first we'll move our code to a special file called index.js so copy everything we have here and create a new file called index. jsx and paste it right here this index file is our homepage or in web terms that would be a forward SL route and the underscore layout will be present in all of the routes so if we were working with web here you would do something like a navbar or a footer so now here let's create a starter template code we can use a special snippet called RN FES it's a react native functional expert component with Styles and we can rename it to root layout and if that didn't work for you that must mean that you don't have the es7 plus react Redux react native nippet installed so simply install it and give it a go once again the command is rnf s and enter and then you can rename to root layout that makes it much simpler to do right now within here we can also Center our text so let's apply some styles to this view by saying style is equal to styles. container and then within this Styles sheet. create we can create a new container class we can give it some Styles like display is flex let's also give it a flex off one let's give it a line items equal to Center as well as a justify content equal to Center as well these properties should Center the root layout and you should be able to see it in the center of the screen now to render the index jsx on our home screen we can modify the layout to render different screens and specify the default one or we can just use the slot property from Expo router so let's import it at the top by saying import slot coming from Expo router and then within this root layout we can simply return something known as a slot we don't even need the Styles anymore so now we can save it and you can see Aura coming directly from our index . jsx the slot basically just renders the current child route think of it like children prop in react and this component can be wrapped with other components like this if we were to expand it and then wrap everything in a react fragment like we would do in react and then it allows you to add something like a footer and then we can give it a header and a footer below 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 okay that's a helpful error so let's simply render a text component right here and let's wrap header and footer right within it there we go it's hard to see them they're at the top left and at the bottom left of our container later on we can properly style them but what matters most is that they are here this is one way to Implement navigation and layouts within react native an alternative route is to use something known as a stack of different screens so we can import stack from Expo router and we can remove this return and instead of that we can return a stack within the stack we can declare each one of our individual screens so here we can say stack. screen which will be a self-closing component with a name equal to index and options equal to header shown set to false as we don't need to show the header and there we go now we can see our index screen now say that you want to create a profile route all we have to do is create a new file within the app which will be called profile. jsx run RN FES it's going to say profile but now now how do we navigate to it let's return to our index. jsx and add a link component coming from Expo by saying import link from Expo router so right here we have the text we have the status bar and then below it we can render a link which will say something like go to profile and as we would on the web we can give it an H that's going to say something like forward SL profile and a style of color blue it is as easy as that a go to profile button appeared and on your phone you can press go to profile and just like that we got navigated to a second screen how crazy is that 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 native applications that you create with that in mind both Expo and react native offer plenty of components and elements that I could go on and on about but it would take forever luckily I've got you covered to help you understand the react native better I've created an awesome app that covers all the fundamentals and essential features you need to learn as a beginner so let's start building the app and put everything into practice now that you know how to to create your react native and Expo application and Implement a couple of different screens you can navigate between let's add some styling to our application sure we have been styling using stylesheet so far but as we have routing similar to that in nextjs we also have similar styling and that my friends is native wind as the name suggests it uses tailin CSS as a scripton language to create Universal style system for react native so head over to Native wind and you'll see a little Banner saying native wind 4.0 is coming soon for some reason they're jumping from V2 to V4 skipping V3 but no worries 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 I do so if the version got updated in the meantime that's totally okay just follow the docs and let's get it installed in this case we're going to go to Quick Expo and we don't have to install our Expo app we have already done that rather we can just install native wind so let's copy this command open up our terminal split it and then paste the mpm install native wind once that is done we can also install a Dev dependencies of Tailwind CSS by simply pasting the command mpm install save Dev Tailwind CSS the second step is to set up Tailwind CSS by running the command MPX Tailwind CSS in nit same as we would do on the web so let's say MPX tailin CSS in nit which will create a new tailin CSS config next step we have to do is copy this tailin CSS config that has the content added here so that it knows within which files we're going to implement Styles so simply copy this content part right here and replace the existing empty content next we'll have to add the Bab plugin so let's copy the plugins right here go back to application and don't be fooled we don't want to modify these plugins right here within tail. config.js rather we want to modify the plugins within Babel config by simply adding a new plugins array now that's it we can start writing code so we can replace the stylesheet with Tailwind CSS like class names let's do that by copying the class names from here here closing the existing files and completely removing the Styles and the Styles sheet from index. jsx removing the stylesheet import and instead of styles we can simply render the class name so now if we save it you can see that it jumps to the top the background color also changed it's not white so we can see that the styles are still not getting applied since we modified our Babble config we can open up our terminal and press R to restart the server and we can also go to our Tailwind doc config within the content we can modify our uppercased app folder to lowercased app and it's not only one app file we want to track all the files within the app folder so we can say for slash asterisk asterisk meaning everything within all the folders within it SL asterisk which means all the files and then dot for the all extensions later on we can also modify this custom directory to say slash components there we go 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 the text 3 Excel as well as all the flex properties belonging to the view this is already looking much better now that we know that native wind is working let's quickly go back to Tailwind Doc config.js and play a bit with our theme rather set up our colors and fonts so we can build our app successfully throughout the entire process of building our app we'll be referring to our polished figma design as you can see there are a lot of pages which will build we'll have an onboarding screen sign up and signin screens and also our great looking homepage so with that in mind as with many of our videos you can get access access to this complete figma file for free by clicking the link down in the description and then you can follow along and build your Tailwind theme setup 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 we have for example this 161 622 and copy it then back in the theme you can say extend colors and you can also add PR primary and you can say hash and paste that color so now every time that you refer to this color you don't have to repeat 161 622 rather you can say text primary we'll also use a couple of other colors and font families within this video so in the read me down below you can copy the final Tailwind config and paste it here as you can see there's basically 10 colors and then we're also mentioning some font families to make our our text look better now that we have these fun families we have to manually import all of them so in the description down below you'll also be able to find a complete assets folder 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 you'll be able to see that we have a lot of fonts icons images and more and to make her life importing those assets a bit easier I have also created a constants folder which you can find somewhere near the assets you can also download it unzip it and paste it right here 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 with that in mind we have to put those fonts to use so we can go to layout within the layout we'll have to load all of those fonts in that's a bit different from what we do in nextjs but it's not that hard we can use the special Hook by importing it first called use fonts coming from Expo font once we have it we can use it as we would use any typical Hook by saying const fonts loaded is the first parameter and then the error if they don't load correctly is the second one and we can call it by using the used fonts and passing in an object of all of the fonts that we want to use the way it works is first give it a string where you specify the name of the font such as Poppins black and then you require the link to where that font is saved for example do/ assets SL fonts SL Poppins dl. ttf and we have to repeat this for every font that we use and you also have to make sure that you spell it correctly the b in the black right here is capitalized so make sure to do it like that 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 read me down below so simply copy it and override it here as you can see we're basically just loading in the fonts now the next thing we can do is introduce a use effect we already know what a use effect is for right it allows us to perform some actions while the page or in this case the screen is loading so let's create a new use effect hook provided a callback function and a dependency array and within that dependency array we can say fonts loaded meaning recall this function whenever fonts loaded change or whenever there's an error and then we can say if there's an error then throw that error and if fonts loaded then we want to call something known as a splash screen and this splash screen is coming from Expo router so let's import it right here splash screen and there's a special method on the splash screen called hide a sync which looks like this if you hover over it it's going to give you more information it basically hides the native splash screen immediately but before you use it ensure that your app has all the content ready to display with when you hide the splash screen or you're going to see a blank screen instead but if our fonts are loaded we should be good to go 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 and we can also add and end there's no error so if the fonts haven't loaded and there's no error something must have gotten wrong so we're going to return null and we also have to import use effect from react so if we do that we should be good to go also at the top we can add a special directive also by using a splash screen called Splash screen. prevent autohide async this will prevent the splash screen from Auto hiding before asset loading is complete 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 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 such as P let's do maybe P black and save it and automatically you can see how our app just gets a lot more character and it will look much much better once we implement this entire phenomenal design and all of the other screens that I prepared for you so now that we know how to spin up a react native application we know how to do routing and we have styles and fonts set up we can actually create the file and folder structure of our application we can do that by first creating a new folder which will be within parentheses and we will call it o like this once again this is the same as within nextjs if you put a folder within parentheses it's considered a route group allowing you to add additional pages or screens within it with a special layout So within this o we can also create a newcore layout. jsx file and within it we can run rnf which is a react native functional expert component like this we can rename it to something like oth layout so it makes more sense now what is the reason why we're going to create a separate layout for the O well if you think about it only the O screens and the on boarding won't have those tabs at the bottom the navigation right if you see all the home screens right here they have the home create profile and so on but our odd screens don't have that which is exactly why we're going to use a separate layout now that we have the layout for our o routes let's go ahead and create them the first o route will be sign in. jsx and we can also run rnfe and simply put it right here and rename it to sign in and did I say route I meant screen we're creating screens here so let's create a sign- up. jsx screen as well and run rnf and rename it to sign up there we go so now our routes for the O are good and we also have to do a second route group also within parentheses old tabs within tabs we're going to create a new custom layout. jsx where we can run rnf and rename it to tabs layout soon enough we'll Implement that Bottom bar that allows us to switch between all the pages within the tabs folder and which pages are those or which screens should I say the first one is the bookmark doj SX where we can also run rnf and rename it to bookmark with a capital B and keep in mind we're just creating the structure right now to make her life easier later on then we're going to create a create. jsx where we can also run rnf this will be to create and add videos to our platform we can create a home. jsx and run rnf and finally we can create create a profile and finally the profile will also be under the tabs category so we can pull the profile we have created before into the tabs folder finally we'll have one more page which will be within its own folder called search and here we're going to use another concept coming directly from nextjs it's called a dynamic route so let's create a new file and put it within square brackets and call it query do jsx this will allow us to rename the page or get the query information for the specific search our user is trying to do there we can also run rnf and rename it to search great now the majority of our file and folder structure has been set up but we have no way of navigating between those routes so let's go to tabs and tab into the layout here will create this bottom part that will allow us then to navigate between all of the other Pages within our app so to see this tabs layout which we create soon we can navigate to our index. jsx and modify this link that navigates the profile and make it go to something like home so we can say go to home and now if we click on it you can see that now we have the tabs right here tabs folder and in the tabs layout which means that we are ready to start creating our tabs so to get started let's import tabs from Expo router by saying import tabs and we'll also use redirect later on from Expo Das router we can then create just an empty react fragment with which we'll wrap everything and then render the tabs component like so within the tabs component we'll also have a tabs. screen component which will be self-closing and to it we can give a property of name is equal to home and immediately you can see that we have four different things at the bottom home create profile and bookmark and these are the exact files that we have created this is pretty cool right but right now they're just upside down triangles what we can do is of course modify them a bit so I'm going to give it some additional options which is an object that has a title of uppercase home like this we can also choose whether a header is shown on that route so we can say false in this case and we can modify the tab bar icon which will be a callback function inside of which we can destructure the color and the focus State and return the icon that we want to show make sure to use just parenthesis here and not open a function block within here we can return a tab icon which is a new component which we'll create so right here let's say const tab icon is a react functional component that returns Well for now we can return just a view view is like a div we'll use it quite often and within that view we can render an image and this image will come directly from react native once again very similar to nextjs if you're used to that this image will accept a source which we can pass into the tab icon functional component so we can destructure some things like the icon the color the name and the focus state that way we now know what we need to pass so right here below we can render the tab icon self closing and it pass the icon and now we need to import the icons we have created before within our constants so we can say import icons coming from do SL do SL constants and if we scroll down we can now use the icons. home this is the home icon specifically we also have the caller coming directly from the Callback function we have the name equal to home and we have the focus state which will simply pass over focused is equal to focused this should give us everything we need to now start rendering our tab icon which needs its image so let's simply render the icon as the source of that image and already you can see a huge home icon at the bottom let's style it a bit by using the resize mode equal to contain this is a bit different but of course we can just read the docs of react native image and understand which props does it accept tint color is another property to which we can pass the color coming from props and the class name using native wind not Tailwind of w-6 and h-6 as well and now we have a beautiful looking home icon at the bottom right below the image we can also render the text and that text will render the name now we can see two different names right here so let's style it a bit by giving it a class name equal to and we want to modify the state depending on whether it's focused or not so I'm going to open a dynamic template string and say if it's focused then apply a font of P semi bold and P stands for Poppins which is the name of the font else apply a font of P regular like this I was almost about to say regular but no it's Poppins regular so then we can do a text- XS right here to make it smaller but now we can see the home two times so we need to modify our options in the Tab screen a bit more and we can do that by modifying the tabs in general so right here we can pass additional screen options equal to an object where we can say tab bar show label will be set to false and now we have only our specific label that we chose also I can see it's not centered properly so let's go into this View and give it a class name of items Das Center justify Das Center and a gap of two to create some space there we go that's better next let's just copy this Tab screen and duplicate it three more times 1 2 3 and that way we can make it work for all of the other icons or screens by changing the name to bookmark changing the title to bookmark with a capital B we can also change the icon to Icon stad bookmark and change the name to bookmark you get the idea right if we save it you're going to get an error because we still have some duplicate screens so before we can see anything we'll have to modify all of them and I do believe that my bookmark was supposed to be a second screen so I'm just going to copy it and move it over to the second place right here after the home so we have home we have bookmark and the third one on our list is going to be create allowing us to add new videos to the platform so name create title create I can start plus and name is going to be create and the last one of our Tab screen will be profile so the name is profile title is profile icons. profile and name is profile if we save it the error is gone we can renate to the homepage and you can see four of these beautiful tabs at the bottom which if you click on them will navigate to different pages this is great they change the focus State and if you pay close attention at the top you can see that the text within the screen changes this is great so simple and so similar to what we're used to Let's also apply some addition additional class names to tabs in general by modifying the screen options and giving it a tab bar active tint color which we can put something like let's do hash ff001 this one matches our theme a bit more we can also do a tab bar inactive tint color and we can make it something like hash CD CD e0 we can also modify the tab bar style which is an object or we can change the background color to something like hash 161 622 which if you remember is our primary Coler and yes even though it is in the tailin config and we can use it just as a color primary we're here within an object passing to the screen options so we still have to type it out manually just in this case we also can set up the Border top width to something like one I found that to work the best and also border top color to something like hash 232 533 and set the height to something like 84 pixels and now we have this modern looking dark tabs bar but we cannot see the name of our tabs and that's because because we have to go to our text and add a special property of style color is set to the color that we're passing from the props in this case that will be white so now you can see this beautiful home bookmark create and so on and we can nicely navigate between them and it's not just about changing the color in the tabs bar it's about actually navigating to different screens of our application which soon enough will look exactly like it looks right now on figma this is a beautiful onboarding design and I think I like this onboarding screen the most it is visually the most pleasing so let's get started with that as it's our first screen anyway and of course this screen just looks good doesn't yet Implement any functionality but as you know you're building a full stag application so after we're done with creating the onboarding screen after you kind of feel a bit more comfortable working within a react native mobile native environment you'll be able to dive into the sign up and sign in screens where we'll immediately start implementing the logic so let's get started with the onboarding screen you can see our designer here has pulled out specific assets that we can use within the application I have already provided these to you within the assets but in case you're wondering how we can use them and how we can download them yourself you can just select them and then scroll down and click export that way you'll have those assets also you can see that our grade designer has also provided us with different colors to implement the gradient looking button with that said let's start working on our onboarding screen which is our index. jsx and you can navigate to it on your phone by simply clicking the index on top left or this is crazy you can use your devices native capabilities like on iOS you can swipe from the left side of the screen and that will also perform the same action that's crazy 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 both Android and iOS while writing code that looks and feels like react and nextjs 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 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 and that is safe area view 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 devices and of course we have to import it at the top by saying import save area View and it's going to come from a package react-native Das safe area context like this it will simply ensure that our content doesn't overlap with a status bar a bottom bar or anything like that both on iOS Android and all other types of devices let's give it a class name equal to BG primary and h- full for full height and that will immediately turn our device black next we can wrap everything within the safe area view we're going to also render a scroll view this is coming directly from react native and we can give it a Content container style equal to height of 100% so the whole screen should be scrollable the reason why we implement this is because the height of our content might be larger than what some smaller devices support so they might need to be able to scroll up and down to see it fully 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-o for full width justify Das center items Das Center age- full for full height and padding X of four for some padding horizontal this is just to Center everything in the middle of the screen next we can render an image also coming from react native we already know what kind of properties does it have like Source equal to and we once again have to import the images at the top by saying import images from SL constants and we can now use the images do logo and of course you have to spell constants properly there we go Aura at the top this looks great let's also give it a class name equal to w-130 pixels 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 essentially making it a bit smaller right below this image will'll render a second image which will also be self-closing with a source equal to images. cards it will have a class name equal to Max dw- 380 pixels w- full and h- about 300 pixels also let me fix this typo right here and the don't forget we also have to give it a resize mode equal to contain if we save it this is looking much closer to what we have on the final design but of course now is the time that we add a couple of text elements and the button so let's create a view for that still within the same view below the image we can create a new view with a class name equal to relative margin top of five and give it our first text element with a class name equal to text- 3XL to make it very big text- white and font Das bold as well as text- Center to center it in the middle of the screen here we can say something like discover Endless Possibilities with and then within it we can render another piece of text it's like having a span within a P tag that will say Aura which is our app name and we can give it a special class name of text- secondary D200 and this is the first time we're using one of our special theme colors we have added within our Tailwind config there we go that's looking good let's also create a space right here to divide Aura from wi that's looking much better and you see how this Aura in the design has this special underline well let's add that moving below both of the texts we can create a new image which will have a source equal to images. path with a class name equal to W d136 pixels I found that value to work the best and h-15 pixels for the height 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-2 and minus right das8 to position it just right let's also give it a resize mode equal to contain there we go that's much better 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 and no this was not created by Chad jpt I thought of this myself for sure embark on a journey of Limitless Exploration with aura I mean who wouldn't use the app once you read this text let's give it some class names such as text- smm font d pral which is p regular text- gr-100 so we can actually see it margin top off seven to divide it a bit from the top and text- Center to center it vertically this is looking great and finally let's create our first custom component of the day which is going to be our button so to do that we go to our file explorer and create a new folder called components within components we can create a new file called custom button. jsx and there we can run rnfe to quickly spin up our custom button and now that we have our custom button we can go back to our index. jsx right below the text we can start typing custom button and automatically imported from components if we save it you won't be able to see anything that's because it's showing dark text on dark background but this is our sign to dive into the custom button and start implementing it first things first it's not technically a button it's something known as a touchable opacity as we have learned before but now you get a chance to put your skills to the test to actually use what you learned in a real app so let's import the touchable opacity coming from react native and instead of wrapping everything with a view let's wrap it with a touchable opacity component and don't forget to import the text we'll still need it we still cannot see anything so let's give it some classes I'm going to say class name is equal to and I'm going to make it a dynamic template string of BG secondary there we go that's already better at least we can see something we can make it a rounded d Excel which will round the corners and give it a m-h of 62 pixels for the height we can also make it justify Center and items Center and this is already looking a bit better let's style the text element within it by giving it a class name equal to text- primary font dasp semi bold text- LG to make it a bit larger and with with in it we can render whatever we want to say so what we can do is pass some special props to our custom button to truly make it a custom reusable component 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 we wanted to say something like continue with email in this case we can also pass a handle press not handle click handle press in this case which will be a call back function for now we can leave it empty and we can also pass container Styles which are some additional Styles we can pass such as W full and margin top of seven so if we go back let's put all of these props to use by first destructuring them we can destructure the title the handle press the container Styles and in some cases we might also have text Styles as well as is loading property we'll have it when submitting the video so now we can expand our touchable opacity and we can also give it the on press Handler which will be equal to handle press which we're passing as a prop we can also modify the active opacity to something like 0.7 I think looks best this is the opacity of the button once you press it and we can apply the container Styles right within our other styles which will make it fit the full width of the screen and if is loading we can apply the opacity of 50 to make it seem like you cannot click it that's going to look something like this and also we can give it a disabled state if we're loading which is not happening right now so it looks good 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 and we can also use the text Styles right here if we're passing any 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 and there we have it we have our button the last thing we need below the scroll view will be a component called status bar it's a self-closing component which we can import from Expo status bar right at the top and it will have a background color off # 161 622 and a style of light do you see what happened when I added that let me comment it out and bring it back basically since our app is in dark mode it also darkened status bar and gave it a style of light so now you can see your battery percentage clock and all the other stuff at the top as well this is very useful in case you want to show it or hide it within your application one thing that I've noticed recently is that some apps purposefully show it because they want you to have all that information but some apps sneakily hide it so you get lost in time and spend more time on the app I noticed that Tik Tok actually hides all the information and shows you just the videos so you lose the sense of time and you keep scrolling 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 in them and give them all the information they need in this case we'll be the good guys 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 meaning to go to the next screen so for the first time we're going to use the router right at the top coming from Expo router we can import two things the redirect component as well as the router itself in this case we don't have to declare it as a hook rather the only thing we have to say is router. push and we're pushing to forward SL sign- in as that's the next component we want to work on and believe it or not that's it for our onboarding screen now there's just one small thing I noticed and that is that back here in our view instead of H full we can give it h-h and then about 85 VH this will actually help us Center the content in the middle of the screen and we can even make it Min Dash so this is going to be the Min height of the screen and now it's nicely centered with that done I want you to take your phone in your hand and admire what you have done like you can even move your thumb up and down and you'll see it will nicely scroll 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 a code that let's be honest feels like you're writing a web app with that in mind this looks great to me let's just continue with our email and let's start implementing our o layout and then both of our sign in and and signup screens phenomenal work so far let's close all of the currently open files and navigate over to app o and then the layout here within the layout we can return just an empty react fragment and we can then render a stack of course this stack has to be imported from Expo router so let's get stack coming from Expo router and you know that we first wrap everything in a stack and then within it we can render multiple stack. screens which are self-closing components the first one in this case being the one with the name equal to sign in and it will also have options equal to header shown which will be set to false and we can also just duplicate this entire screen stack right below and just change the name to sign up there we go so now we have the signin screen which we're on 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 and it will have a background color of # 161 622 and a style equal to light and don't forget there are two types of status bars in this case we don't want to use the one coming from react native rather we want to import the one coming from Expo status bar and now that we have our layout we can dive right into the sign in screen right within here we can wrap everything in a safe area view which is coming from react native safe area context right here we can give it a class name equal to BG primary and H full for full height and now we have a dark screen within it we can show a scroll view so we can scroll through it and then have a regular view as well of course the scroll view has to be imported from react native and we'll have to navigate back to our signin every time let's also give this view a class name w-o justify Das Center h- full padding X of four and margin y of six and remember that last thing that we had we didn't want to do H full rather we've done m-h 85 VH because this will actually sent thre it now let's not forget to import images as we'll use them right now by saying import images from SL do SL constants 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 to images. logo with a resize mode equal to contain and we can also give it a class name equal to w- 115 pixels and h- about 35 pixels there we go below this image let's also render a text element that will say something like log into Aura like this 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 dasp semi bold 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 yeah I think this is is better for now we can easily change later on now we're going to dive into creating a second custom component of the day and it's going to be a very important one it's going to be a custom form field or an input so let's go to components and create a new form field. jsx component where we can run RN Fe to create a basic form field component and we're going to start by giving this view a class name equal to space- y-2 which will create some spacing between the elements right within it we can also have a text element that will simply say what kind of a form field this is so let's give it a class name equal to text-base text- gray -100 and font DP medium and now we can go back to sign in and we can render our first form field coming from components form field you can see it right here at least it's label to this form field we can pass a couple of different props so let's immediately expand it and let's give it a prop of title which will be email a value which needs to correspond to an actual form value so while we're here what how do we say that we immediately create a new use State field by saying use State snippet we can call it something like form and set form 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 so now we can set the value of this form field to be form. email as simple as that next we need to also pass has the handle change text so we know how we can modify it and this will be a callback function that accepts the event and calls the set form Setter where we destructure the existing form values and then modify the email to be equal to the event that we're passing we can also pass some additional Styles like other styles to this such as margin top of seven and we can also pass the keyboard type which in this case will be email address and in the other case it can be a password this is useful for autofilling information such as emails names and so on now we can also duplicate this right below and modify it to match what we need for a password so the title will be password the value will be formed that password and here we can modify the password property and we don't need the keyboard type and and of course don't forget to import use state from react once we do that we can go back to our screen and we can see two different form Fields so let's get back into the form field and let's accept all of these props things such as a title value sometimes we might also want to have a placeholder handle change text and other styles and we can also spread out all of the other props that we might have here as well and now we can use them 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 so we can simply render the other styles here this will space them out as you can see on the screen then instead of saying form field we can render the actual title that will look something like this email password and finally we can start creating the view for the text input by saying View and we can give it a class name equal to w-o h-16 padding X off four BG black 100 and I know you can barely see it so just so it's easier to see at the start I'm going to add something like a border of two and border of red 500 that way you can see what we're working on after BG black I'm also going to give it a rounded Dash 2XL so it's going to be a bit more rounded on Focus I'm going to give it a border Das secondary so later on once you tap it it will turn orange and we can also give it items Dash center 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 that's good right within it we can render a text input element which we can import from react native it's going to be a self-closing property and to it we can pass a class name equal to flex one text- white font Dash p semi bold and text- base we can pass it the value equal to value a placeholder equal to placeholder a placeholder text Coler equal to Hash 7B 7B 8B an onchange text property equal to handle change text and then we can have a special property of secure text entry so if it is a password then we want to hide what you're typing so what we can do is create a new US State field called show password use State snippet show password set show password at the start set to false and then secure text entry can be equal to if title is triple equal to password and if not show password then it will be hidden it will be secure text entry else we will show it and of course we also have to import use state if you go back here that looks good and now if you tap somewhere in the middle of the input I think you should be able to trigger your keyboard right here as you can see it on my screen similar for the password we're going to improve these inputs later on but you should be able to trigger it by pressing it in the middle next let's Implement that feature to show or hide the password so right here below the input we can say if title is triple equal to password then show The Following thing a touchable opacity we learned what that is 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 so basically it will toggle it on or off and we can also render a self-closing image right here coming from react native so we have to import some images from the top by saying import images fromc constants and then we can give it a source equal to if not show password then it's going to be icons. I else it will be icons. iide and I noticed that I should have imported icons not images there we go coming from constants so now we can see this huge I in the middle let's also style it a bit by giving it a class name of w-6 and h-6 and a resize mode equal to contain okay but it's kind of still somewhere in the middle there so definitely something's wrong with our classes I think I need to make this view a flex row like this that's going to put the I at the end and now you can trigger both of these inputs but if you start typing at the second one like ASD you can now show or hide it this works perfectly so with that in mind you now have a great looking or screen you can also go back and and we have our inputs so let's exit the form field and let's finalize the login screen we can do that by bringing back our button component by calling a custom button self closing and we have to import it at the top so we can say something like import custom button coming from SL do SL components slash form field and I notice that I don't have to make it curly brace it has to be imported like this as it's the only default export so now that we have this button let's pass it some props like a title equal to sign in let's pass it a handle press equal to well this is a very important function here we will actually submit our form so we can create a new function cons submit is equal to an Arrow function that looks like this and then we can call that submit right here on the handle press let's also pass it container styles of margin top of seven to divide it a bit and then since this action will take some time we can also create a loading state right at the top the loading State we can create by saying use State snippet and I'm going to call it is submitting set is submitting and the start set to false and then we we can simply say is loading will be equal to is submitting there we go but why is this button acting like an input looks like I have done a wrong import the custom button should be coming from the custom button file there we go that's much better and also below this button we can add a couple of pieces of text something like view that will wrap those texts with a class name equal to justify Das Center padding top of five Flex of row and gap of two and then it will have two children elements the first one will be a text that will say don't have an account I mean seriously and it will have a class name equal to text- LG text- gr-100 and font d P regular there we go what happens if you don't have an account well let's render a link component which we of course have to import from Expo router by saying import link from Expo router and now we can just make it say something like let's do sign up and of course every link needs an hre so we can make this one point to sign Dash up up and give it a class name equal to text- LG font DP semi bold and text- secondary so we can actually see it there we go don't have an account sign up and this now actually points to the signup screen that is great let's also remove this ugly top bar which says index and O and doesn't work with our Dark theme at all we also have to modify the layout for the entire route group so let's duplicate this layout right here name it in parentheses off and then we simply say header shown false so now it hides it as well and we see this beautiful bar at the top and the content slides just a bit we do want to center it which we will do soon but at least now we have a full dark mode Let's also repeat this for tabs and we can also repeat it for for/ searchquery like this so now we're hiding the search bar everywhere we do get a warning here so for now I will simply comment this one out and we're going to implement it later with that said let's go back to sign in and now that we have hidden it now it might make sense to turn this from H full to Min DH Das 85 VH as that's going to push it down a bit I think this is a approximately centered but of course you can play around with it and modify it as you like great with that said our login screen has now been implemented we can actually type stuff in and we can also type the password and even show and hide it that's great 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 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 of course you have to modify the export sign up and also the name of the component right here to sign up and now it seems like a sign in but with only a few modifications we're going to immediately make it a sign up those modifications include adding a username right here at the top as when you're registering we also have to know your username then instead of login we're going to say something like sign up to Aura and we're going to duplicate the email field to add new one on top of it this time we will say something like username form. username 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 and with that said we have a beautiful sign up screen besides one small tweak right at the bottom instead of don't have an account we can say something like have an account already well what you're waiting for right go ahead and sign in and modify the hre to sign in 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 you my friend have successfully completed the first three screens of your react native application with that in mind I think you're ready to start adding some logic to our app let's make these sign in and sign up screens not be just pretty canvases let's make them actually do the work so we can sign our users up to the application and believe it or not your first react native application will also be a full stack of application we'll be using aite to add oth databases functions and storage to your application so that way you will be able to have users which can then upload videos to your platform how cool is that 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 sign up or sign in and then go to the console finally we can start adding logic to our react native application starting with authentication first things first let's create a new project let's name it something like JSM uncore and then you can either put your app name or something like react native crash course I'll use that one and I'll let you guys choose the names I'll click next and here you can choose a deployment region for your project I'll choose the first one since I'm based in Europe but you can choose something else as well based on your location and I'm going to click create there we go our react native crash course project has been created so we are greeted with this nice getting started guide right now you can choose between Apple or Android either one is okay but soon enough aright will add another thing such as Expo signifying that it's crossplatform in this case I'll proceed with apple we can choose our app name I'm going to type AA under bundle ID you can use what ever you prefer we can follow their example and then do something like com. JSM do and then the app name so I'm going to say com. JSM doora in your case you'll most likely have to choose a different name which is totally okay but what's important is that whatever you choose here copy it write it down somewhere because we'll need to use it later on with that said click next and click skip optional steps the steps are the same for for Android devices as well you can skip the optional steps and then you'll be redirected to your dashboard let's quickly go back to our code and go to app. Json here if you scroll down under iOS or under Android whatever operating system you want to work on you can add a new property called package make sure to put it within double quoted strings and type out exactly what you typed out as your bundle ID in my case it was com. jsm.org on what you want to do next let's copy the project ID right here from the dashboard and then create a new folder in the root of our directory called lib as in library and within it create a new file called app.js within here we can create and export a new aight config object which will look something like this the first thing we can add will be the endpoint so we can say endpoint is equal to https colon cloud. aight. slv1 this is their hosted version of the platform but aright is completely open source and allows self-host posting as well so in case you want to do that you can in this case we'll proceed with their Cloud version the second thing we can add is the platform and here you can type the bundle ID that you chose before in my case that's going to be com. jm. Ora the next thing is the project ID which is the one that you just copied from your dashboard next let's check out oth here we can create users manually but rather than creating users manually we'll connect this to our application and then create it using our great signin and signup forms we created not that long ago there are multiple options for doing authentication here we have phone magic URLs Anonymous jwt's and a lot of o o providers basically anything you can imagine in this case we'll simply be using email and password next let's look into databases here we can create our own data base so let's do that by choosing a name I'm going to do something like JSM Ora and click create it has been created and we've been given the ID of the database so let's copy it and back right here we can say database ID and we can paste that ID we just copied next let's create our first collection it'll be for our users we can call it users and click create we also get an ID of the collection so let's copy it and let's paste it right below that's going to be user collection ID and we can paste the ID right below next we can go back to all collections and create a second and last collection we'll have for this application which is going to be called videos and we can click create and we can copy the ID and paste it below by saying Video Collection ID first let's go back to the users collection and add the attributes our users need so let's create our first attribute it'll be of a type string the attribute key is username size is something like 2200 just so we have enough space but of course you can go much smaller as usernames AR typically that long we can make it required and we can click create let's go for another one it's going to be of a type email which you can get right here its name will also be email and it will be required next one will be of a type URL and it'll be called Avatar and it will also be required finally we can have a string of a type account ID with a size of about 2200 just so we don't hit the limit and also required and then we can head over to settings scroll down and add a new role under permissions we're going to add any and turn on all cred operations that way all users can perform all cred operations now let's modify the attributes for our videos collection go to attributes and create our first attribute of a type string with the attribute key of title 2200 as the size and make it required the second attribute will be of a type URL and its attribute key will be thumbnail it will also be required the third one will also be of a type string and it will be the prompt that you use to create that video this is a special feature of our application where people can type in the prompt that they use to generate that video as you can think of it as a social platform for sharing AI generated videos and we're going to make this a bit longer like 5,000 characters and make it required next we need the actual video so that will be a URL type with the attribute key of video and it will be required and finally we need a very important attribute of a type relationship so we need to create a one-way relationship with a related collection of users the relation will be many to one which basically means that one user or one let's call it a Creator right here under the attribute key can create many videos and we can also see that right here videos can contain one Creator and then Creator can belong to many videos on deleting a document we can set document to null and click create finally we can go to settings and also enable permissions we'll give permissions to all users and we're going to give it all credit operations and click update great so now we have successfully created our aite project o is set up by default we have set up the database right here with two different collections that now have their own attributes and finally we can move on on to creating storage so let's create a bucket let's give it a bucket name of something like files and click create as before we can immediately copy the ID of the bucket and we can add it right here at the bottom by saying storage ID is equal to the ID that we just copied finally we can go under settings permissions and we can make all of our user users do anything they want by giving them all the permissions and if you click update you'll get a quick alert saying that the maximum file size you're trying to set is above the limit so scrolling down we can change this over to 50 megabytes which is allowed within the free plan that way you can update this first and make it just 50 megabytes that's good and now we can also add a second role of all guests and give guests only read permissions and click update so now the locked in users have full permissions and guests have only read permissions and we have also set up our maximum file size now let's also allow for specific extensions jpeg PNG GIF or GIF and MP4 and click update that's it our bucket permissions and settings have been updated all the IDS and all the information that we need to hook up to our aight Cloud are now here and we are ready to start connecting to our aight client which will allow us to create users upload videos make relations between them and upload files to our storage exciting stuff ahead so let's get started with setting up our app right within the code so we can focus on what we want to do not that long ago and that is Implement Logic for our complete authentication now aite provides a couple of SDK libraries for major programming languages and Platforms in this case we'll be using a client library for react native SDK it's currently in beta but I went ahead and tested it thoroughly and everything was working properly so it's safe to use let's go to the GitHub page of that SDK the link for that will be in the description and while we're here we can also give it a star we can share some love for this developer creating the mobile SDK as they don't have a lot of stars right now has it currently in beta and we can scroll down to go under installation we can copy this command and within our terminal we can paste it right here this will install react native aide and react native URL pills which I guess they need to make this work after that is done we need to to initialize our SDK so let's copy this block of code and paste it just below we are importing the client let's do that all the way at the top from reactnative app right then we initialize our react native s DEC and we set up our endpoint project and platform this is easy to do as we have this object with all of the information so we can remove this fake stuff right here and simply say upright config do endpoint or we can even shorten it at the top and say something like config and then config right here. endpoint which is our endpoint then we have our project ID which is config dopr ID and finally we have a config do Platform it's great that we collected all that information beforehand so now it's just easy to set our client up once that is done we can make our first request so let's copy the code for it and paste it right below let's indent this properly and as you can see we have a function that tries to register a user we're simply calling account. create we create a new unique ID with an example email password and name and then we call a that then function which simply conss the response so now we can call this somewhere within our code to do that let's first turn it into a function const create user is equal to a callback function and we can put this code right within it let's just move it a bit up there we go we have our account create and we can also add export right here before so we can use this function later on and let's not forget to import a count coming from react native ight that's right at the top because we need to initialize our account instance and then set it to the account variable right here then let's go to our sign up since that's the page that that I currently have opened so we can test our example function call I'm going to go to app o sign up and then we're calling this submit on click so here we can call create user and unfortunately it doesn't Auto Import it for me so we can do that by saying import create user from lib slaight and once we call the submit we call the create user Let's test it now back within our application let's open up the terminal and press R to reload and I can see an error here saying that the prop ID doesn't exist I think that's going to be right within our app right so let's navigate and you can see here ID unique we can import that ID from react native aight now that we have that let's once again open up the terminal click continue with email navigate to sign up and then click the sign in button this should trigger the ight account creation it says project with the requested ID could not be found please check the value of x ight project header to ensure the project correct ID is being used so let's make sure that the project ID indeed is correct by going over to aite and then referring to our project ID here looks good but here set project the ID should be uppercased there we go now it's pointing to the right thing so if we save it and click sign in one more time you can see something that looks like a piece of data which would make me assume that the account was indeed created successfully so back within our dashboard let's go to O and there we go we have Jane Doe with the me example.com email and that's the only thing we care about that means that we have successfully created a user from within our application for now I think we can safely delete Jane as she wasn't a real user with the data that we typed in and we can focus on hooking up our inputs to our form and then creating a new user but for real this time so back within our code let's go back to aite where we'll create all of the functions like creating a new user signing in a user getting the user information and more starting off of course with creating a user so so we can scroll down to where we have this create user function and let's remove everything from here and start from scratch just so it makes complete sense we'll first open up a try and catch Block in the catch we can consol Lo the error that we got just so we know what's happening and we can also throw a new error by saying throw new error and then we can pass the error in in the try we can try to create a new account by saying new account is equal to await account. create and we have to pass a couple of things to it first we have to pass the user ID and you can see that right here in the docs create user ID of type string then email then password and then name you also get more information about what exactly this endpoint does so first we're going to use the ID unique to pass in ID and then we have to get the information about our current user which will pass through parabs so the first parameter will be email then password and then username so just like that right here we can set the email then the password and then the username since we are waiting we also have to make our function a sync then if we don't get a new account we'll also throw a new error like this else if the account has been created successfully we can try to create a new profile picture by saying const Avatar URL is equal to avatars which we need to create right here where we have the account by saying const avatars is equal to new avatars coming from react native aight and to it we pass the client so now we can say avatars .g get initials this is a special function which basically as it says if you have over it gets the initials of the user's name and then uploads that so get the special URL so you can pass the username right in then we can await and call another function which we can create which is sign in so let's say sign in and let's create that function right below export async function sign in that accepts an email and password that's going to look something like this within it we can open up a new try and catch Block in the catch we can throw a new error and pass the error right in but in the try we can try to establish a new user session by saying cons session is equal to await account. create email s session and this is a method given to us by aite to allow the user to log into their account by providing a valid email and password combination so let's pass in the email and password great and finally once we have the session we can simply return it now we can call this signin function right above and to it we can pass the email and password which will pass into the create account or create user rather once we sign in we can create that new user in the database by saying const new user is equal to await and as we have created an account instance we have to create an instance of databases so right at the top we can say const databases is equal to new databases coming from react native aite to which we can pass the client and right below we can say await databases. create document like this to it we need to pass a couple of things the database ID The Collection ID the document ID and then the data so let's do it one by one we have the database ID stored under config do database ID we have the collection ID stored under config do user collection ID then the ID of the document since it's new we don't have it already we can create a new unique ID by saying ID unique and then we need to pass the object with all the information about the user such as the account ID which will be equal to new account dot dollar sign ID email which we get from the form username which we get from from the form and then Avatar which will be equal to Avatar URL that way we create a new instance of the user in the database and at the end we can simply return that new user perfect now our function for creating a new user has been completed as well as the function for signing in and we can call it within this submit function once we click sign in or now that I look at it the button should say sign up so let's fix it and make it say sign up but of course since now this is a real function we have to pass real data to it so let's first check if we actually have that data if no form. username or no form. email or no form. password if either one of these is empty then we want to issue an alert and with react native it's easy to do an alert you simply say alert import it from react native and then say alert. alert of type error or rather this is the title and then you pass the message please fill in all the fields if we do have all the fields we can set is submitting to be true and then we can open up a new try and catch Block in the catch we can do an alert. alert that's going to say error and we can render the error. message we can add a finally clause which will set submitting or set is submitting to false because either way if we got an error or if it succeeded the loading is done and then in the try we'll say const result is equal to a wait create user and since we're using a wait we have to make this function a sync and we have to pass three things to this user function one by one email password and username so let's do just that form. email form. password and finally form. username and once we get the result we'll later on set it to Global State using context for now let's leave it as it is and let's simply use the router function coming from Expo router and replace the route by pointing to slome so let's give it a shot and let's try to sign up I'll start typing my username like JS Mastery I'll do an email of contact at Js mastery. proo and I'll choose a password something like 1 two3 1 two3 1 two3 there we go we can also check it it looks good so let's click sign up and we got redirected back to the homepage I won't save it yet which means that it succeeded because we reached the end of the tri block that is great but what happens now if I go back to profile or if I try to go back and then again continue with email once again we are back to the login screen which is a good thing right because we haven't yet implemented the submit function of the signin screen so let's copy this entire submit logic that we have here move over to sign in and replace this submit this one will be very similar we said is submitting we're doing everything the same but in instead of creating a new user and getting the result we simply want to call await sign in and this signin should be coming from the ight file so we can say import sign in coming from SL slash lib app right and then we're saying await sign in the sign in accepts only two params email and password so we don't have to pass the username as we already know who we are and then also after we log in we want to set it to the global State and point to home so now let's verify whether we have successfully created our account I'm going to type in the same email I had typed before contact at JSM dopro and 123123123 and sign in O in this case we have an error possible unhandled rejection coming from the fact that we don't have a username okay that's my bad I should have removed this no username because here we don't even have the username field so if we save it we can type in our password one more time and we can sign in this time we get a different error saying that I forgot to import the alert coming from react native let's see if we have the router there we go I got that just to be safe I think I think I have everything right now so if I give it a go we indeed got redirected to our homepage which means that we're successfully signed in and that's great and all but what is it good for if I just close the app like go right here and reload and then the next time we have to log in again and go through the onboarding screen we don't want to do that we have already seen what the app is about and we have already created an account so the next thing we'll do is we will Implement a global context state that will remember when our user has logged in and automatically redirect them to the homepage first we have to create a new folder within the root over directory called context and within it we'll create a new file called Global provider. JS as it will provide us with all the state that we need so let's first import create context use context as well as use State and use effect coming from react then we can declare the context by saying const Global context is equal to create context and we can also export cons a new hook we'll create called use Global context which is basically a callback function that simply calls the used context hook and specifies which context we want to get in this case it's the global context but someone or something has to provide that context so let's say const Global provider is equal to and typically this is just a react component that gets children as a prop and it returns a global context. provider like this within it we have children so we can wrap everything but still display all the screens properly next we can choose which types of values we want to provide to our provider so we can see value is equal to an object and here we can declare whatever we want our entire app to have access to so let's create some states first use State snippet will be called is logged in like this and at the start it will be set to false then we'll also create a new use State snippet called user set user at the start set to null and make sure to properly capitalize this U right here and finally we'll create a last state called is loading set is loading at the start set to true because we're first loading that user user in then let's create a use effect something like this with a callback function and it will only happen at the start the dependency array is empty here we want to call a special function which will create within aite so let's go to the aite file and create a new function by saying either export a sync function or you can declare it as a regular export const and we can call it get current user which is equal to an async function like this we can have a try and catch block right there in the catch we'll simply conso log the error and in the try we'll say con current account or currently logged in user is equal to await account. getet if there is no current account like this we want to throw an error and if we do have a current account then we want to get that user from the database by saying const current user is equal to await databases. list documents first things first you want to say from which database do you want to get the documents from so that's config do database ID then from which collection that's config do user collection ID and then you can specify the query meaning how you want to get it and in aite you do that using their own query object which you import from react native app right and it has different methods such as apply bind call we're going to use equal so we want to ensure that the query. equal account ID is equal to the current account. dollar sign ID this way we can get the exact user that's currently logged in finally if there is no current user not current account this time we're looking for current user then we once again throw an error and finally if everything is good and if we have our user we can return current user documents Z because we only need one user let's also turn this function into an es6 function by saying export const that's going to be an arrow function like this doesn't make a difference but it's good to stick with what you do there we go and now we have this get current user function and we can import it right here within Global Provider by saying import get current user from slash or doli SL upright this get current user is an async function so we can call do then on it first we get a response and if a response exists then we want to set is logged in to be true and we want to set user to be equal to rest as in response else if we don't have a response we're going to set is logged in to false and we're going to set the user to null then we can also catch it meaning if something goes wrong in that case we're going to get an error and we can simply conso that log the error and finally meaning no matter what happens if we succeed or if we fail we can have a callback function that sets his loading to be equal to false because we have done doing whatever we're supposed to do now that this function gets the current user information we set it to the state let's provide our entire application with the value of that state with information like is logged in set is logged in user set user and is loading and of course for this provider to do its purpose it has to actually wrap every single screen within our application and the best way to wrap all the screens is just to use it within our main layout right here so we have the stack we can just say Global provider wrap it properly and that way all the screens will have access to the data within the values let's just properly indented and let's import it at the top by saying import Global provider coming from. context forward slash Global provider now it does look like there's a problem and I think I know why if we go back to Global provider we never exported it it's never being used so at the bottom we have to say export default Global provider and now we should be good looks like I forgot to put an opening call right here we're calling this as a function so if we fix it we're good and what this does is if we have logged in before it will give us access to the current user and then we can use it within our own boarding to figure out whether we should automatically redirect the user to the homepage so we can head to the onboarding component which is the index of our app and then right at the top we can say const is loading and is logged in which is equal to use global Global context which of course we have to import by saying import use Global context coming from Context Global provider and now if we're not loading and if we are logged in in that case we can return a redirect component with an H F off slash home this is how that works and you can see that worked perfectly and if that didn't immediately work for you no worries we'll just do a quick fix make your registration submit form look like this feel free to pause the video and your signin submit form look like this after that give it another go this should save your user to the context now we cannot go back we're tied to home and even if we reload our application right here you see that we automatically get redirected to the homepage if we are already logged in back on upright if you reload your o you can also see that we have contact at JS Mastery Pro with the JS Mastery username right here which means that we indeed have successfully created an account logged into that account within our app and also stored it within Global context so that every time that we launch our our app we are automatically logged in that is great and now we are on our home component within the tabs and now I think you can barely see it at the top left but it says home right there which means that we are ready to start working on the home screen and that should look something like this we have welcome back JS Mastery so we know we're properly logged in and we're going to pull our username from that Global context we created then we're going to reuse our input for the search we're going to show some trending videos and we'll have another display for all of the videos that people upload so once again amazing job for coming this far into the video learning how to create react native apps learning how to do file based routing within react native learning how to use Tailwind or should I say native wind within our app importing all of the assets crafting three beautiful screens with react native components and implementing aight for our user management databases and storage more on that later so let's get to the good stuff and let's Implement our homepage to get started working on the homepage we can wrap everything in a safe area view similar to what we have done so far and this safe area view will come from react native safe area context right within it for the first time we'll use a component known as a flat list coming directly from react native it is a self-closing component to which you can pass a lot of props and it is used to render a list of elements we mentioned it in the crash course at the beginning but now we're going to put it to use there are a couple of things that a flat list needs such as data which is the most important part and this is an array or array like list of items to render so we definitely need to provide some kind of an array then we need a key extractor so this will be a way for us to get the key out of that item so for example if you have an array of objects where the ID is a number like this you would create a callback function where you get each individual item and then you get the item. ID out of it in our case later on once we fetch data from aight it's going to be dollar sign ID so let's leave it like that and then most importantly you need a render item which looks like this and this explains react native how we want to render each item in the list so we can open it up as a callback function that's going to look something like this and we can have an immediate return so just parenthesis right here right within here we can destructure the data from each item and then for each one we can return something like let's do a text for now and the text can render the item itself or in this case it could be item. ID so let's save it and see what do we have you can see one on top left we can make it a bit bigger by giving it a class name equal to text- 3XL and you can see number one now if we add multiple objects within this array I can duplicate this and add Maybe two more we can give them IDs of two and three you can see that it basically creates a list where it shows different text elements soon enough we'll fill this data with the real video data coming from aite for now let me show you another property belonging to the flat list it is the list header component which also is a callback function with an immediate return where we can return a view this view will have a class name equal to margin y of 6 padding X of four and space y of six between the elements right within it we want to have another view and this view will have a class name equal to justify between items start Flex row and margin bottom of six and within it we can have one more last View and within it we can have a text element that will say welcome back and right below we can create another text element where we can for now hardcode JS Mastery later on we can use the real username here and you can see this appear at the top as the header to our flat list let's style these text elements let's do the first one first by giving get a class name equal to font DP medium text DSM and text- gr-100 the second one will have a class name equal to text- 2XL font DP semi bold and text- white of course it's hard to see it right now because our background is white but let's immediately make it black so it's easier for our eyes by giving the safe area view a class name equal to BG primary there we go that's better and we can also give our text items a text off white so it's easier to see them there we go this is our flat list you can see how customizable this flat list is and I didn't even show you half of the things that it offers we can immediately pass the data in we can choose how the data will be rendered and then we can also form the header component for that list there's more stuff coming soon let's also render an image right below this view by adding another view that will have a class name equal to margin top of 1.5 and within it we can render a self-closing image which of course we have to import coming from react native and we need to import images at the top by saying import images coming from slash slash constants and images or no I think it's just coming from constants since we have the index that exports them we can now give it a source equal to images. logos small it's not that small right now so let's give it a class name equal to W9 and h-10 and give it a resize mode equal to contain there we go that's better now we have a proper header we want to go to views down and we want to implement our search input component this will be similar to our other text inputs that we used within our signin and sign up but just a tiny bit different so let's create a new component within the components folder called search input. jsx and we can start by entirely copying the entire form field and then making some modifications to it first let's actually show it within the home by rendering the search input like this and of course we have to change the actual name search input and also we have to export it as such so now if we go back it's going to give us the Auto Import which is good and now we can see it barely at the top so let's go into it and let's make some slight modifications in this case we don't need this outer view with the text the only thing we need is one View and the input within it so we can delete this outer View at the end of the classes for the view we can give it some space like space- x-4 and I think the rest can be the same we can also give additional class names to our text input we'll give it a class name of text base margin top of 0.5 text- white Flex -1 and font DP regular now now here is where things change instead of having this title we will render another touchable opacity which we have to import from react native so let's get it right here touchable opacity it has already been imported within it we can render an image that will have a source equal to icons. search let's see if we have imported icons at the top we have let's also give it a class name equal to w-5 h-5 and you know it resize mode off contain there we go now we can see the search icon for now we can leave it as it is and later on once we implement the search Logic we can add additional stuff to this search input for now let's go below it and let's continue with our homepage below the search input we'll create another view and this will be for our latest videos so let's give it a class name equal to w-o flex D1 padding top of five and padding bottom of eight within it we can render a text element that will say latest videos and we can give it a class name equal to text- gr-100 text- LG font DP regular and margin bottom of three and if memory serves you right the next section we have to implement is a horizontal list of videos and also let's add a placeholder to this input so we can quickly jump into the input so we can replace the placeholder with something like search for a video topic and there we go you can see it right here now going back to home how are we going to implement that horizontal video list well well right below our text we can create a new component so let's create it in the components folder and let's call it trending jsx we can run rnf and we can import this component right here trending and of course we have to import it at the top as well that's going to be trending coming from components trending to this trending we can pass a post property that will be equal to some kind of an array where we can also have a couple of different things let's do just IDs now to keep it simple for example ID 1 Let's also do another object with an ID of two and then another one with an ID of three and we can say question mark question mark meaning if it doesn't exist then make it an empty array just so it doesn't break now we can dive into the trending and we can map over those elements in another flat list so we know we're getting the posts right here as a prop and the only thing we'll render will be another flat list we already learned how to work with that right we have to pass the data which will be equal to posts we need to give it a key extractor which will be equal to a function where we get the item and then we take over the item. dollar sign ID as that's how the items will look like coming from from app right and we have to give it a render item meaning how each one of these items will look like once we destructure it and map over it for now I'm going to copy what I have right here at the top it will be just a single text element since we don't have a lot of data to show right now and there we go you can see that we have another flat list right here but the most important thing for this flat list will be transitioning it to a horizontal View simply by giving it a horizontal prop you can now see latest videos 1 2 3 that is great so now we have a horizontal list and we have a vertical list right here and that's actually the primary reason why I wrapped everything in one flat list instead of wrapping everything in a scroll view as we typically should do that's because scroll views don't support both horizontal and vertical scroll at the same time and in this case since we have a flat list with vertical scrolling this one right here and another flat list within that flat list that supports trending or horizontal scrolling this is the way that we needed to do it there's a special error in react native if you wrap everything in a scroll View and had two different flat list types like horizontal and vertical you would get a special error saying that you cannot do that so with that in mind let's go below this trending and below the list header content as well and let's let's use another special flat list property called list empty component it allows us to create a function inside of which we can specify what will happen if our list is empty so we can say something like text and then say empty now this doesn't show right now but if we modify this data to be simply a completely empty array I'm going to comment this out and remove it and make it empty now you cannot see anything but if we give this text a class name with a text off white you can see it says empty but come on let's make this look a bit better let's create a new component that we will call empty state. jsx we can run rnf and we can this empty State and show it as the only thing right here empty State coming from components we can pass it a title of no videos found and we can also pass it a subtitle of no videos created yet or we can say something better like be the first one to upload a video now we can navigate over to to this empty State Implement a view with a class name of justify center items Das Center and padding X of4 within it we can render an image coming from react native of course and we also have to import images coming from do/ constants and we can render the image with a source of images. Mt with a class name equal to W of 270 pixels and H of 215 pixels with a resize mode equal to contain and there we go now we can see that we cannot find anything let's also add a text element to make it a bit clearer and as a matter of fact we can copy these two text elements we had in the homepage right here text and text we can paste them here and we can indent them properly the first one will be a small text with P medium gray 100 and it will render the title of course that title will be coming from props and subtitle 2 the second one will be text XL with a text Center property font DP semi bold text- white and margin top of two to divide a bit from the top and it will render the subtitle no videos found be the first one to upload a video I think it might make more sense to modify the subtitle to be the title and title to be the subtitle that way we can see no videos found be the first one to upload a video and we can even change them around there we go this makes more sense finally we can render a custom button which is now super simple as we have already created that component before we can import it at the top by saying import custom button from SL custom button and of course we need to pass some props to it props like title off back to explore or even better since we say be the first one to upload a video we can say create video we can give it a handle press equal to a callback function where we called the router which we have to import at the top by saying import router from Expo router and then we can call a push method on it and we can push to forward SLC create we can also give it container Styles equal to w-o and margin y of five there we go that's looking great also it seems like it's not taking the full height of the screen so I can go back here to Safe area View and maybe add a border of two and Border off red 500 just so you can see how it wraps it yeah you can see it's missing a bit of height right here if I add h- full it should make it full height there we go that's better and we can remove the borders as now we know how things look like and that's another Pro tip if you're struggling with positioning adding borders is always helpful with that in mind our empty state is now done which is great we can kind of move it around scroll it up and down but for now I'm going to bring back my array of three fake items that's going to look something like this that way we don't see that empty State and the last pretty cool thing about the flat list is that you can also give it a refresh control inside of which we can render a refresh control component coming from from react native and we need to create some special props that we can pass to it I'm going to explain what this does very soon I'll create a use State field that's going to be called refreshing and set refreshing at the start set to false and I'll also create a function called on refresh which will be equal to an async arrow function there we can simply set the refreshing to true and later on we'll be able to recall our posts or videos so we can see if any new videos appeared once that is done we can set the refreshing back to false so why are we doing this well we can now pass it to the refresh Control Function we can say refreshing is equal to refreshing and on refresh is equal to on refresh and if we save it and if we import Ed State at the top coming from react you can now scroll up and later on once we have real videos to fetch once we implement this recall videos function it will actually try to refetch and show you new videos you might be used to this on platforms like Instagram Facebook even Tik Tock if you scroll up and release it it will start loading new data and I will teach you how to do that very soon as soon as we start fetching real data within our application and now that our homepage is basically done I think it's the perfect time to do that so let's create some data and let's fetch it from within our application very soon we'll Implement our own screen to upload our own videos directly through the platform but for now I just want to ensure that we can see some videos on the homepage and the the quickest way to do that is to create a few documents directly through appid dashboard so let's go to databases enter our single database go to the videos collection and click create document in the read me down below you'll find a section where you can also find the data for a few of these videos that we will add so let's copy it one by one first I will add a video with the title of how AI shapes coding future with a URL of this thumbnail and enter a video URL as well and finally I will enter a prompt that I used to generate this video that is the whole idea of the application to share different prompts and videos that you have generated somewhere else using AI or you can also share your own videos You'll also see that this video is actually mine I recorded it but it doesn't matter the most important thing is that we can upload it and see it within our application and finally choose a Creator since you only have one user now it's going to be you does this make sense find the read me down below copy the data and let's create a couple of videos of course if you want to you can upload your own videos and thumbnails but just for the app to look good I have prepared some for you so let's click next and let's click create and our first document containing our video has been uploaded let's do at least two more the second one I will do is get inspired to code with some kind of a thumbnail prompt and a video URL and I'm G to add myself as the Creator and the last one will be a Dalmation which is a dog breed with a thumbnail video URL and a prompt and I'm going to choose myself as the Creator as well and let's click create there we go I think three videos are enough for us to start showing some data within our application so let's go back to the code let's close all of the currently open files and let's navigate over to ight here we have to create and Export a new function that will fetch all posts by saying export const get all posts which is equal to an Asing function with a try and catch block where in the catch we throw a new error with an error and in the try and in the try we can say const posts is equal to await databases. list documents and to it we need to pass the database ID which is under config do database ID and we also have to provide the config do Video Collection ID and I don't want to every time say config Dot and then config do as well what we can do is simply destructure all of these values from the config object so I'm going to copy them all say const destructure them like this and of course you have to provide commas at the end of each one and then say equal to config this will allow us to expose them outside of the object so now I don't have to say config dot rather I can just refer to them like this finally we can return posts dot documents this is great we have a function that fetches all posts so how do we actually use this within our application well let's go back to home and let's give it a shot I'm going to write it right here at the top of the file first we need to create a new use state which will call data set data at the start equal to an empty array and we also need another use State for the loading so is loading set is loading and it's going to be said to true then we need to create a use effect within which we'll fetch that data as soon as the component loads or the screen in this case so we can say use effect like this with a dependency array that's empty meaning only fetch it at the start and don't forget to import use effect from react within here we can create a function const fetch data is equal to an async function like this and then we can immediately call it right below below fetch data the reason we need to do this is because you cannot use async code directly within a use effect this would be illegal and wouldn't work you have to create a new function inside of which you call asynchronous code here we can set is loading to true because we have started fetching the data and we can open up a try catch and finally block whether we succeed or fail we want to set is loading to false because we're done fetching in the catch we can call the alert coming from react native. alert error and we can render the error. message and in the try we can say const response is equal to a wait how did we call our function get all posts coming from lib upright and then once we get the response we simply set the data to be equal to response and just like that we have data about our videos so what do you say that we consel log it right here below I'm going to say consol log data we are here I'm going to open up the terminal and would you look at that the data that we have added within aite is right here we can see it by how AI shapes coding future the video URL and everything else that means that we can now start modifying our jsx to actually show some thumbnails and videos instead of showing Simple Text elements but before we do that I want to give you another Pro tip we can further optimize this code and make it more reusable by converting all of this into a custom hug if you think about it we'll have to fetch data in a lot of different pages in the profile in the search and in many more cases and the only thing that will change is the actual function of which posts or which users or what data are we getting so with that in mind we can copy this entire kog data and the use effect and these two states and remove them from the home to clean it up a bit what we're going to do instead is create a new file within lib called use aight. JS this will be a custom hook so as with every custom hook it has to be a function that starts with the word use in this case I chose the name use aight and as a parameter we're going to get a function that tries to fetch something so I'm going to call it FN and within here I'm going to paste everything we had before is loading States use effects alerts and of course we have to import use state from react we have to import use effect from react and instead of consol loging the data we will simply return it for now we can say return data within an object like so and then we can say export default use aite now where will this get all post come from well we will pass it as a function through props so instead of calling get all posts let's call FN like this now going back to home instead of all the code that you've seen before that was here we can do one single thing and that is const get the data and rename it to posts which is equal to use aright custom hook to which we pass this function of get all posts which we created not that long ago it's basically just this one so before we had about 203 lines right here and now we have moved that logic here we're passing the getter function and we can try to conlog the posts one more time to see if we truly get them we have renamed it to posts so I open up the terminal and you can see there's a lot of code so that must mean that it has actually done it for the second time there we go so the logic works the same but we have extracted it to make it more reusable we can also make it more powerful by creating this function called refetch const refetch is equal to a a callback function that simply calls the fetch data one more time which is the same exact function which we have created for fetching the data for the first time but if we want to use it here we have to bring it out of the use effect so we're calling it once at the start and we're calling it whenever the refetch function gets called and do you know when that will be well it will be on refresh once we pull our device up so with that in mind let's return the data that is loading as well as the refetch and back in home alongside just getting the posts we can also get refetch and we can recall videos whenever we scroll up or swipe up so we can say await refetch there we go I hope this makes sense I know it's a bit more advanced creating custom reusable hooks but I hope it will make even more sense once we use this custom hook for the second time so you can see how much code we have actually saved ourselves from writing with that in mind instead of just doing a console log in the terminal which doesn't mean too much let's try to actually show some data within our flat list and then instead of rendering the ID we should be able to render something like title and there we go how AI shapes coding future get inspired to code and the Dalmations journey through Italy that's great but we can do better than that we can also show the thumbnails we have uploaded so instead of Simply showing a piece of text let's create a new component called video card. jsx where we can run rnf and we can import it right here as a render item video card make sure to import it at the top right below empty State video card coming from components video card to it we can pass the entire post or we can call it a video equal to item so now we have access to all of this data within a video card and we can D structure it video right here we can also automatically destructure the properties within the video such as the title thumbnail video and Creator and outside of the Creator we we can pull the username and the Avatar pretty cool stuff right now we can use anything we need so just to verify this is working let's give some class names to this view like a class name equal to flex-all so they show one below another items Das Center padding X off four and margin bottom of 14 and let's try to render a text with a class name of text t- toxcel text- white and let's make it render the title there we go everything is working exactly as we thought it would now let's put that text to the side for now and let's create more structure for our cards by creating another view with a class name equal to flex Das row g-3 and items Das start within it another view that will have a class name equal to justify D center items D Center Flex Das row and a flex of one and within it last view trust me a view with a class name equal to W of 46 pixels h of 46 pixels rounded - LG border border Das secondary we can start seeing things now justify center items D Center and a padding of 0.5 within it we can render an image coming from react native with a source equal to URI is the Avatar class name is w-o h- full and rounded dlg and resize mode is equal to cover and now we can see J as in JS Mastery this was created automatically for us by aight let's go one view down below the image and let's create another view this time for the title of our video with a class name equal to justify Das Center Flex -1 margin left of three and GAP y of one with this in it we can render a text property that will simply render the title we can also give it a class name equal to text- White so we can see it font DP semi bold and text- smm and now we can remove this second title as we have the real one above there we go we can also give a special property to this text which is a number of lines one which stops the text from going further if it's longer below the text of title we can render another text and this one will'll render the Creator or in our case the username we can give it a class name of text- XS text- gray 100 and font DP regular and we can also make it fit in one line number of lines is one there we go that's good we can go below this text and one two views down and we can create another view this one will have a class name equal to padding top of two and we can render an image that will have a source equal to icons coming from constants dot menu make sure to import these icons class name equal to w 5 and H of five and a resize mode equal to contain there we go just so we can do some additional actions moving two more views down right here we can finally show the video and this will be interesting first we don't want every single video to play right off the bat so we want to create a new state to ensure whether the video is playing or not so let's create a new use State snippet called play and set play at the start set to false we need to record the use State and for now let's see what happens if the video is not playing so we can open up a new Dynamic block of code where we check play and if it's playing we can show for now a text saying playing else we will show something else we will show a touchable opacity which is basically like a button that will play it but instead of it being a button we will actually show the thumbnail so once you click on it you can start playing let's not forget to import touchable opacity from react native and within it let's render an image that will have the source equal to URI off thumbnail we're going to also have a class name equal to w-o h-o rounded D excl and margin top of three with a resize mode equal to cover and immediately you can see that it takes more screen but we cannot really see anything happening right here so let's apply some additional class names to this touchable opacity such as a class name equal to w- full and there we go we can already see the thumbnail h-60 for the height rounded Das Excel margin top of three relative justify Center and items Center and now we can actually move through three of these thumbnails and our app is starting to look better and better below that image will show another image and this one will have a source equal to icons. playay you can see this play icon so for the images if the source is a URL you have to do it like this say URI and then point to the URL but if it's a local image you can just just do source and then point to the path to that image let's also give it a class name equal to W12 h12 and absolute and a resize mode equal to contain there we go so now it seems like we can click to play it to our touchable opacity we can also give the active opacity of 0.7 so once we kind of hover over it or click it we can see what's happening and on press we can call the Callback function and set play to be equal to true for now that will just turn it into a text and let's also give it a class name so we can see it of text white so if we click play on it you can see that now it says playing and we can repeat the process for every single one of these three videos that is phenomenal let's also go back a bit now it always says playing because it's stuck but if you open up the terminal and press the letter R it should reload it automatically log Us in and we can see our thumbnails once again this is great we can also fix this warning at the bottom regarding keys but for now before we get this video is actually playing what do you say that we implement this latest videos section that's this section right here it's going to show us not the latest videos but the trending videos and it's going to show them in a bit of a different format it's going to be a horizontal list where you can swipe left and right to see different videos in a portrait mode so let's Implement that and then we'll figure out how to get those videos to play do you know where we have to go to start working on these latest videos well it's going to be within our flatlist and within our trending component right here to it we could pass the same posts that we are getting from the top like post but let's create a different fetch function so we get some different posts to show right here I'm going to go back to app prite and instead of get all posts we're going to create a new function called get latest posts but for now I'm going to start with it by duplicating the get all posts one there we go we have it right here I'm going to collapse this one and rename this one to get latest posts you can call it get latest videos as well everything is going to be the same besides an additional query that you can pass right here do order descending and you pass a function of dollar sign created at and we're going to query a limit of only seven because we only want to show the latest few videos that's it so now let's go back to home and let me show you how easily easily we can fetch those posts now that we have created this reusable custom hook you basically just duplicate it we can rename posts to something like latest posts and we don't need a refetch from that and to it you pass get latest posts coming from blip aite and that's going to give you a completely different set of posts in just a single line so let's now use those latest posts and pass them over to our trending component there we go now we can navigate into the trending and we can implement the structure and the presentation of how we want these elements to show of course the end product being something like this first things first we're going to install this great package called react native animat table it allows you to add animations to your react native applications and installing it is quite simple we can just go to our clean terminal and run m PM install react-native D animat table and while we're here we're going to also install another package that allows us to play videos within our application it's called Expo DAV I think that stands for audio video and let's press enter first things first we can import everything as anima table from react native animat table and then we can create a new component right here const trending item is equal to a react Arrow function where we can return a new animat table. view which basically is a view that allows you to do animations within it let's properly close it and instead of rendering a text for each one of our elements we can now render the trending item and to it we can pass a couple of things we can pass the currently active item which will come from the state so we can declare a new Ed State snippet called active item set active item at the start set to posts zero so the first post out there and then we can pass the active item and we can pass the item as well moving back we have to import use state from react and we can get access to our active item as well as the item within this anima table view we can get give it a class name equal to margin right off five and we can declare an animation which will be equal to essentially an object which we want to declare and that object looks something like this const zoom in is equal to an object and we can provide multiple different states zero state with a scale of 0.9 and then we can add a one state with a scale of one similarly we can can duplicate this and create another animation called zoom out where at the start we're going to start from a scale of one and move to a scale of 0.9 which will basically Zoom it out now within this animation if the active item is equal to item do dollar sign ID so if we're currently at that item we want to zoom it in else we want to zoom it out and we want to do that with a duration of 500 milliseconds then as we have done before we have to ensure whether we're playing the video or showing its thumbnail so let's create a new used State snippet called play set play at the start set to fals and then if play is turned on we can return something like let's do a text that will say playing let's also give it a class name equal to text- white else if we're not playing we want to create a touchable opacity like before that will allow us to play something so let's create a new touchable opacity coming from react native with a class name equal to relative justify Center and items Center active opacity will be 0.7 and on press we want to have a callback function that will set play to True within it we're going to use a new component we haven't used before which is the image background so we're not using just the image we're using the image background that will have a source equal to URI of item. thumbnail let's also give it a class name equal to W of 528 of 72 because it has more height as it's a portrait rounded Das 35 pixels margin y of five overflow of hidden Shadow dlg and shadow-black D40 to make it appear like it's floating and there we go you can start seeing those portrait images let's also give it a resize mode equal to cover now as it's a flat list and as it's a horizontal flat list you can immediately just use your finger I was about to say mouse to swipe through them and if you go back to trending I think that's right here if you remove this horizontal you can notice that they should start appearing vertically there we go although it's quite hard to see them there we go that's better but of course we want this first one to be horizontal and then we want the the bottom one to be vertical great below it let's also add an image with a source equal to icons coming from the icons constants doplay and of course we have to import image from react native let's also give it a class name equal to W12 h12 and absolute so it shows on top of the image background with a resize mode off contain that is looking great now as you scroll over them you can see that looks good but for some reason it looks like it's not applying this animation because if I just go for zoom in right here you can see that they're all enlarged but right now it doesn't seem like any of them is and keep in mind this is the UI we're going for so let's check the active item by giving us a console.log active item and let's also console log the item. dollar sign ID like this now we can compare the two by pressing R to reload we get all of this data from before but somewhere on top of it we should be able to see just those IDs I'm after let's first remove the other conso log that I think we have right here within the homepage or maybe within the use app right let's see no that's not it where is this conso log hiding let's search for it console.log we have one right here in trending which is the one we created right now we have the error and then we have error and error okay that's good so we don't have any additional conso logs maybe these are just old ones but no they seem to appear every time which is quite interesting oh maybe that's because this is this active item yeah the active item could be the actual element so we might need to do active item Dot and then dollar sign ID let's try that there we go that's good so now we get this ID and we get the second ID and only for the one that matches we should make it enlarged so let's see if we try and doing active item. dollar sign ID there we go now that one is big and if we switch over it additional ones don't change so we want to actually change this as we swipe and maybe at the start we make the second one bigger by changing the active item to one right here that way it's more similar to what we have in the design but how do we actually use this set active item so that they modify once we scroll well let's create a new function const viewable items changed this is pretty amazing you're basically given this Handler immediately by the flat list I mean what doesn't the flat list do so you can say on viewable items changed and basically this is called when the viewability of rows changed defined by the viewable row so let's say on viewable items changed we call our viewable items change function and let's say changed not changes there we go as the parameter we are getting the item so we can destructure the viewable items from it and we want want to say if viewable items do length is greater than zero meaning if we have more we want to set active item to be equal to viewable items 0. key right below it we also want to modify the viewability config where we can give it the item visible percent threshold of about 70 and we can give it the content offset to figure out when do we actually apply that visibility percentage by saying like X is about 170 pixels now if we go back the active items are not what they used to be now they should be the actual key of that item so here we no longer have to use the ID that I added before and if I save it you can see now the middle one is enlarged but if I scroll they actually change and and in case you want to make it even larger you can modify the scale even more for example scale 1.1 or even 1.2 and you can see how it looks like right now I think 1.1 might be the most we can go for this is actually great perfect so now we have also implemented some animations to our application but the question is how do we now click on it and play it right now we get nothing we have to implement this part right here when the playing is true we have to use this new package we have installed called Expo AV that will allow us to play videos so right here let's use their video component just like so it will be self-closing and it's coming from the top by saying import video coming from Expo AV and another thing we'll use is the resize mode also coming from Expo a within this video we want to add a source of the video which will be equal to URI item. video but that's not enough on its own let's also apply a class name of w of 52 h of 72 so the same size as the actual container rounded -35 pixels margin top of three and background white over 10 there we go so now we can can see the video right here this one is horizontal so it looks a bit different on the vertical view but that's okay we can add a resize mode equal to and now we can use this special component called resize mode coming from the Expo AV and use the dot contain functionality we can also say use native controls as well as should play so the video should play and that way it plays immediately once you click on it and we can also say on playback status update we get access to the status and if status dot did just finish I like the naming of these variables it's very descriptive um if it did just finish we set play to false which should bring us back to the view of the actual thumbnail there we go it's easier than we thought right so now if I go here if I click on it the video loads and it starts playing this one looks better as it is in vertical View and it looks amazing you can also Zoom it in and go full screen I mean how cool is that your own video sharing platform these are just short shorts let's try with this one there we go you can also Zoom it in you can play audio I'm going to mute it for now and play rule number six if the plan doesn't work change the plan but never the goal yep I hope your goal is to become a professional developer which is exactly why you're watching this video and here we have another one where we can also go to the start expand it and the coolest thing is you can actually rotate your phone and see it in full screen if it's horizontal this is great and this is a pretty cool video generated by Sora using a I so this is a beautiful latest video section now let's focus on trying to play these videos below we can do that by copying this video component closing all the currently open files moving back to home and going right here within our video card and going to the part where we actually play something we can paste this video component we can modify it a bit UR will simply be video class name will be full width this time so w full h60 rounded XL and margin top three we don't need the background in this case the resize mode will be contained don't forget to import the resize mode from Expo AV as well as the video also coming from Expo AV we can do that at the top we can use the native controls should play and then we also use the same on playbig status update so now if we save it and if we play let's do this horizontal video and click play it actually opens up and as you know you have full controls and you can turn your phone around as you normally would with any kind of application that you're already used to to view it in full screen this is great we can also do something like that for these videos right here perfect let's see what happens if I click on another one okay that one is now playing and make sure to mute it as there's loud audio coming from this YouTube short but these videos are also playing from before which is totally okay we can have multiple videos playing on this screen this is looking great and I especially love these portraits right here at the top with this slight animation for some reason they disappeared now which is a bit weird but I do think they're coming back and don't forget if you reload if you pull it to the top it will refetch all of these videos at the bottom there might be some tweaks which we can still modify and improve but for now this is amazing I am very happy with the homepage that we have created if there are some tweaks we might need to make we can do that soon next pages that we have to implement are the search page so once you search for something you want to actually show the screen showing only the video matching that search term and then also there is the profile page to which you go to if you click this J or another Avatar right here whatever your name is and of course there's the create page which is basically one large form that will allow us to manually upload those videos and not only view those that we have created from aite so let's do the search and the profile next because I want to show you how easily we can reuse these video components we have created so far and then after that we can focus on the create phenomenal job so far leave a comment down below if you're watching until this part of the video keep it up to get started with our search we can navigate over to app search and then query right here can you see how this file is within square brackets well that means that we can extract the value of that search out of the well not URL but out of the screen so how do we do that well in react native you can say const query is equal to use local search params and this use local search params is coming from Expo router so let's import it use local search for Rams from Expo router what we can do right now is simply make this text a bit larger by giving it a text 3XL as well as text- white and within it we can now render this Dynamic query so let's see if that works what we want to do is navigate to this Dynamic page and if I'm not mistaken we haven't yet implemented the logic within our search input component it looks good but we still have to make it do something on click so right here instead of using this password we no longer need that we can get access to the path Name by saying const path name is equal to use path name like this and we call it as a hook this used path name can be imported from Expo router so import use path name coming from Expo router there we go that's good and we also can create a new use State field and we can call it query set query at the start equal to let's do just an empty string we don't have to pass any props into the search input so let's delete it and then here where we use the value we can rather refer to the query we don't have to make it secure text entry and on change text we simply want to get the event and set the query and pass that event we can also change the placeholder text color to to Hash CD CD e0 which is going to make it pop just a bit then in the touchable opacity we can add an on press this is as if we were adding a click Handler on the button on press is equal to a callback function where we check if query exists or rather if query doesn't exist then we can simply return an alert coming from reactnative do alert and we can give it a title of missing query and a message of please input something to search results across database that way if a user doesn't type anything it should give us an alert next outside of that if if path name do starts with for/ search that means that we are already on the search page and in that case we simply want to set the search per Ram by saying router. set per Rams and in an object we set the query let's also import router from Expo router and else if we're not on the search we want to say router. push and we want to push over to a template string of for SL searchquery and now if you go in click on this field you're going to get this nice orange glow and we can type something like let's see what do we have ai maybe Ai and click search by pressing on the magnifying glass you can see we are redirected to the search page and right now the text is not that visible so let's make it a safe area view coming from react safe area view with a class name of BG primary and h- full and now you can see that we have ai exactly like we typed if you go back and type something like test maybe and press search you can see that now we are on that page where the query is equal to search that is great that's enough information for us to be able to fetch all of the corresponding posts with that in mind let's head back to aight and let's Implement a function that searches through posts to do that we can duplicate the function that fetches the latest posts and rename it to search posts and it will accept the query as the first and only parameter we do the same thing here we call databases. list documents provide the database ID and the collection ID of the documents we're trying to fetch and then instead of order we're going to use a query . search we're going to search by title and we're going to pass the query as the actual search term believe it or not that is it this should give us all the posts that match our corresponding query that means that we can now go back to the query and call our use aight hook to get all the necessary information but if you look at our design you'll notice that our search page is almost exactly the same as has our homepage it has the same search right here with a search term typed in already it also has the heading and then it has the flat list the only thing that's missing is the trending videos so we'll basically be able to copy the homepage and make some slight modifications to implement the search page so let's do exactly that I'm going to head over to home I'm going to copy the entire file and I'll paste it into search first things first modify the component name or screen name from home to search we can do that here we don't need two different fetches we need only one where we call the search posts function coming from lib aight and we also have to pass a query to it and where do we get the query from well we already know that we have done it already const query is equal to use local search params which is coming directly from Expo router import use local search params coming from Expo router that way we get the query then we use the use app right hook to make a call to our search posts and then we get post right here we also get this refetch and we can refetch not by scrolling up rather we can do a simple use effect right here here with a callback function which will be called every time that the query changes so every time that the user types something new we can just call a refetch function now if we save this of course everything will be broken first of all we don't have this refreshing so we can remove this bottom part that's going to temporarily fix it and let's navigate over to query to see how does that look like I'm going to type Ai and press search and of course we get a couple of Errors first we don't have the latest posts which we pass over to trending so we can completely remove this view that says latest videos but before we try to do another search let's go ahead and see what other things we have to change starting from the top we have a safe area view with a flat list that shows items vertically by default we extract the IDS we render the video card item and then we list the header component the header is not going to say welcome back rather it will say something like search results and then below we can say query so kind of giving search results for this specific query and then right below this text we don't even need this logo we can immediately present our search input so we have a text and immediately below that text we can render our search input this time we'll have to pass it an additional prod of initial query equal to query that way we can accept it right here initial query and if we do have an initial query we can set this query by default to be the initial query to autop populate it that way if we come from home it will be pre-populated to save the search term we searched for then let's see the structure here we have one view with margin Y and padding X we don't need the spacing here and we don't need this entire inner view so we can close the opening and closing brace we also don't need this opening view right here so we can remove it and let's indent everything properly so it's easier to see I'm going to make multiple selections and then do it like this so we have the view we have the text that says search results immediately after we have a text that says query and then below we want to have a view that will create some spacing with a class name of margin top of six and margin bottom of eight and within it we want to put the search input there we go and finally we have the empty State no videos found but this time we can say something different like no videos found for this search query see how good it is to make reusable components we just have to change the prop that we passed to it with that in mind let's give it a shot let's simply open up the keyboard and say Ai and click search as you can see we are redirected directly to the search page which looks great by default but we also have to get rid of this Stop Bar I think we can do that within our primary layout yeah you can see here stack search query we have have to uncommon this which should get rid of the top bar I think if we remove this forward slash it will work there we go that's good and we can immediately see the search results for the term AI the AI is also pre-filled but for some reason it says no videos found that's interesting so our search post function this one is not returning any videos that match by title a quick quick way to debug it is to go here and check if AI is within some of these titles and it does appear to be that way here we have a title of how AI shapes coding future inspired to code I guess kind of code or C Is Right Here code and here is coding so maybe if we try that we should hit two of these videos let's give it a shot I'm going to say Cod start off code and coding and still we get a possible unhandled promise rejection export default trending alert doesn't exist this is actually quite good as we can just search for alert and see where it is being used sign in sign up home we're using it here or at least we're importing it but we're not using it in the query also not being used we have this search input are we using it here yeah it's coming from react native that's looking good and we have this use app right as well oh it looks like we don't have it here so here we have to import alert from react native and once we do that we get another error saying that the function is not defined which is very useful because now we can go back to our I believe it's query file and it's basically saying that the search post is not defined even though it's coming from here and it does seem to be defined we're also passing the query to it oh this is a good one so what I've done here is a typical rookie mistake what we have done before is we're just passing the function to the use app right which we then later on call it's similar if we pass for example get all posts right here we pass the entire function declaration without calling it that way here it gets replaced and it gets cold but what I've done now since I had to pass the query is I've actually called the function before so instead of passing the function declaration I'm passing whatever the output of this function is for example an array of some posts right and then that ends up getting all the way to here and it tries to call an object which is not possible so if you need to pass some data into the function when you're sending it over you can do that by defining a callback function like this it might be a bit harder to see so I'm going to put it in a new line use aite essentially you're passing the entire callback function so once this gets called the entire declaration will get passed and it will properly call it right here I hope that makes sense so now we can give it a second shot let's say something like Ai and search okay it says something like search for attribute title requires a a full text index and that means that we have to go right here to databases go to the videos collection and go to indices and create a new index we can call it something like search by title the index type will be full text as the error message said and the attribute will be by title and let's click create it looks like the index name needs to be properly indexable so let's do sech search uncore byor title and click create there we go the index was created and this should allow us to do searches back in the code I will type AI one last time and this time we don't get an error which is great but we also don't see any videos so what we could do is we could consol log a couple of things we can conso log first of all the query to see if the query is good and then the posts that we got back to see if there is anything to show once we do that you can see that the query was all right but the array was empty let's try to search for something like cod for coding and this time we do get back to videos the how AI shapes coding future and get inspired to code which is exactly what I wanted to get back interesting how it didn't get as AI let's try one more time no what if we do both letters uppercased what if we do Italy I know that's another word from our titles okay that works that's interesting maybe it's trying to search for more than two characters let's see what else do we have here inspired Journey let's search for inspired that is great and let's also search for journey perfect basically everything is working but for some reason search for AI didn't work but at least that showed us that our no video screen is working as we get no videos found and then create video so that is great let's go back to homepage one more time we can see different posts we can see the latest videos as well and we can make a search and you get a complete search similar to the homepage but in this new layout where you can keep searching for whatever you want to find by simply deleting it and searching again or you can swipe left to go back to home wonderful it wasn't that tough to create search once we have reusable video card components reusable flat lists and also reusable hooks that allow us to more easily fetch data we can also clean things up a bit as our query is a bit smaller than our homepage we don't need things like like the image refresh control or alert we don't need to use State images trending and all of these other calls from aite I always like to keep my code clean and have zero unused variables the next screen we can focus on will be profile so let's click on profile right at the bottom right corner and we have an empty screen let's turn it into something that looks more like this where we fetch the Avatar username the number of posts and some fake views and also display all of the videos that that user has created to do that we can copy the entire code from our query file close all of the currently open files and navigate over to profile there we can override the entire code with what we copied from the query and rename it to profile right here and also right here at the top that should immediately give us something better to look at there we go it says no videos found it says search results but let's first make it into an actual profile by modifying which posts are we trying to get we're not trying to get the post that we search for rather we're trying to get the posts that our user has created so let's navigate over to app right duplicate the search posts right below and let's call it something like get user post posts where we can pass the user ID so we know which user posts are we getting we also list the documents coming from database ID with this collection and query. equal where the Creator is equal to user ID that's it you can see how simple it becomes once you understand how all of this works now we can go back to profile and instead of fetching these posts and refetch from search posts we can simply call get user posts coming from lib ight like this and to it we're going to pass the user ID but the question is where do we get the currently logged in user ID pause this video give yourself a moment and try to figure it out I'm going to let you know in three 2 1 it's coming from the global context it is right here remember under values we're pass passing the user as the object we can get access to it and the user contains the ID so we don't need the query in this case rather we can say const d structure the user the set user and the set is logged in because from here we'll also be able to log out and we can say that's equal to use Global context which is coming from our context it doesn't want to autoimport it but we can say import Port use Global context from slash no it's SL context SLG Global provider and then we get the user. dollar sign ID and this should give us access to all of the posts looks like it redirected us back to home so we can click to go to the profile again and it's going to complain about the query we no longer need this use effect with a query let's save it now and go back to profile it's going to complain again because we're using a query in a couple of places so let's simply comment out the query here and here and I think that's it if we save it and click profile once again we can see our three videos that we have created which is exactly what we wanted so now the last thing we have to do is change the header of this flat list displaying our posts into something that looks like this we basically want add this user card at the top that lets us know that we can log out and that we're currently on the profile page we can do that by modifying the list header component part of our flat list in this case let's delete everything we have in there right now to make it a bit easier for us to develop it and we can first wrap everything in a view that view will have a class name equal to w-o justify Das center items d Center margin top of six margin bottom of 12 and padding X of four within that div we can show a touchable opacity that looks something like this and we import it from react native within it we can show an image with a capital I also coming from react native with a source equal to icons Dot and don't forget to import icons from constants . logout with a resize mode equal to contain and a class name equal to W6 H6 you can see this log out on top let's also put it at the End by styling detachable opacity by giving it a class name equal to W full items end and margin bottom of 10 that way it's at the top right also later on to this touchable opacity we'll have to provide a function that implements the logout functionality so let's simply declare it right here const log out is equal to a function that looks like this and we call it on press great now below this touchable opacity we want to show a view where we render the user's Avatar so let's do just that view with a class name of w16 h16 border border secondary that looks something like this rounded dlg justify Center and items Center and within it we can show a new image property that has the source equal to an object of URI is equal to user question mark. Avatar that's going to look something like this it's not visible until we give it a class name equal to w- 90% h- 90% as well within square brackets that way it's not going to take the full width of the screen and round it- LG and resize mode equal to cover okay this is great and right below that image and below this View we can render a new custom component called info box so let's create it new file info box. jsx where we can run rnf and we can immediately import it right here info box make sure to properly import it at the top info box coming from info box we don't need the usif the search for Rams nor the the text right here that's good if we save it there's going to be nothing there but to this info box we can pass a couple of props like title is equal to user question mark. username container Styles equal to margin top of five so we divide it a bit from the top and title Styles equal to text- LG as this will be a bit larger title Styles below that info box we'll create a view that will have a class name equal to margin top of five and flex row and here we want to show two more info boxes so let's simply copy this one paste it once and also paste it twice the second one will render the number of posts that we have so posts. length or zero if we don't have any we're going to also give it a subtitle of posts container styles of margin right of 10 title styles of text- XL and finally the last info box will show a number of followers we can say something like 1.2 th000 with a subtitle equal to followers we don't need the container Styles and it will have a title of text- XL if we save it you basically cannot see anything on the screen right now that's because we're not making use of any of these parameters we're passing but now we have the structure so we know which props are we accepting so going to our info box we can now accept a couple of props such as title subtitle container Styles and title Styles we can render a view with a class name of container styles with a text that will render the title let's give it a class name equal to let's make it Dynamic text- White text- Center font DP semi bold and we can also render all the title Styles we're passing like this there we go we can see JS Mastery three posts and 1.2 th000 followers and we can create a new text element right below it for the subtitle that will have a class name equal to text- smm for small text- gr-100 text- Center and font DP regular and let's save it there we go so now we can see one primary info box that renders our username we can see our subtitle of posts and title of three and same thing for the followers and with that my friends believe it or not our profile page has been completed it's pretty crazy what you can achieve when you reuse existing components we have reused almost everything our page our routing structure our flat list from home and search and also the individual video cards which don't forget you can also play and make sure to muted every time especially if you're using these videos as they're quite loud so this is phenomenal so finally let's Implement our logout function so we can log out of the application and maybe log in with another account we can do that by creating another app right function we can say export const sign out equal to an async function with a try and catch Block in the catch we throw a new error with the error message and in the try we can say cons session is equal to await account. delete session and we pass in current we want to delete the current session and return the session that we just ended with that in mind we can go back to profile we can say await and call the sign out function being imported from aite since we're using a weight we have to make this function a sync we also want to set our Global State user to be equal to null and we want to set is logged in to be null or rather false in this case and we want to renate to sign in by importing the router coming from Expo router and then right here we can say something like router. replace pointing to forward slash sign in if we do that go back to the profile and click the log out icon on top right we have been logged out and if you try to go back you can't because we have replaced the URL not pushed it so this is the difference between push and replace now let's see if I remember my username I think I used contact at JS Mastery Pro and I believe it was 1 2 3 1 two 3 1 two 3 and I'm going to click sign in and I was right we are back in we can see all the videos loading it says welcome back JS Mastery and I think that JS Mastery part is hardcoded right now so let's quickly copy this use Global context from profile and navigate over to home let's use that same hook and import use Global context from. slash do slash context and then Global provider we get this user and then here where we hardcoded JS Mastery we can say something like welcome back comma and then here we can render user question mark. username oh it looks like it's not there let's check out our collection it is username yes JS Mastery is the username we can see that right here so let's say user. username I think that's exactly how we have used it in the profile as well right we get the user from the global context and then we're using it by saying user mark. username in this case it doesn't seem to appear though so let's try to conso log it right here on top console.log user. username I'm going to open up this and it does say undefined what if it consel log just the user we get null for user and what would I get if I consol log the user on the profile page let's see if I can do that right here consol log user and navigate to profile it's also null and actually my app breaks you can see it here where I share my phone screen it completely crashed saying cannot read property ID of null so I simply reloaded the entire application and logged out completely it looks like the second time that we logged into our account for some reason it didn't set user to the global context let's see why that is here we have the set user and we're setting it once we get the current user that looks good but then if we move over to sign in oh would you look at that I even left myself a comment set it to Global state but I never got around to doing it and we also didn't do it on sign up so I'm a bit confused how it even let me in and kept me logged in this entire time but for some reason it did so let's fix this the only thing we have to do right here let's do the signin first is get the information about the current user by saying const result is equal to await get current user coming from lib aite and then we can set that user to the state by accessing our Global State const set user and set is logged in is equal to use Global context coming from the global context provider like this and this is supposed to be set not sir and now we can simply call set user to be equal to result and we can set is logged in to to be equal to true and then we point to home so this is now good and we can also copy these three lines and go to sign up we can paste it right here but in this case we don't even have to get the current user because we're creating it for the first time so we already have it the only thing we do have to get is set user and set is logged in in the same way that we have gotten it here import use Global context and then use the hook that we created right here that looks good to me I'm going to save it and now we should be properly logging in and saving that information to the global context let's give it a shot I'm going to go continue with email I will use my contact at JS Mastery and I think my password is one to3 1 to3 one to3 let's go ahead and sign in we are right in and as you can see on the top it says welcome back JS Mastery so now it actually knows your username and if you go to profile that looks great as well I use very high res thumbnails so it takes some time to load but for smaller ones it should be quicker so this is great with that in mind the onboarding the sign in and the signup page are looking as good as ever and they're fully functioning right now the home home screen is just stunning where we can play different kinds of videos make sure to mute them first we can also make the videos full screen which is pretty amazing if you ask me you can also rotate your device we have also implemented search so we can search for as we said journey and press search that works as well and finally we have also implemented the profile where you can see what the currently logged in user has created and we can also log out on top right and finally we'll Implement a screen within which you'll be able to upload your own videos and thumbnails and therefore create new documents and add them to our database and then show them within our homepage so let's click on create right here at the bottom and let's navigate over to the create page and let's get started amazing job so far first things first we got a be safe so let's start with the safe area view coming from react native safe area context let's give it a class name equal to BG primary and h-o for full hide and let's turn this entire view into a scrollable view by wrapping it within a scroll view component coming from react native with a class name equal to padding xo4 and margin y of six right within it let's render our first piece of text on this screen that will say something like upload video and let's give it a class name equal to text- toxcel text- White font DP semi bold and save it there we go that's our title right below it we can render our first form field and this form field isal component that we have created before you can find it here so let's just import it by saying import form field coming from slash do components form field we have to pass a couple of things into that form field so we're going to do that through props we'll pass a title equal to video title and we also have to give it a value and to create that value we can create a new use State field that will be called form set form and at the start equal to an object let's correct the spelling here and let's give this object some default properties such as a title that's an empty string at the start a video which will be null at the start a thumbnail which will also be null at the start and a prompt which will also be an empty string at the start let's fix this title there we go we'll also have to know are we currently uploading a video so we can show the loading so let's immediately create a new US state snippet called uploading and set uploading at the start set to false great now let's go back and let's give this form field a value equal to form. tile we can also give it a placeholder equal to give your video a catchy title and we can also give it a handle change text equal to a callback function where we get the event we set the form we spreaded the previous values of the form and then we just modify the title to be equal to the event finally we give it other styles equal to margin top of 10 and of course we have to import use State coming from react once we do that and navigate to create we can see our nice looking input now let's create a view below that input and that view will have a class name equal to margin top of seven space y of two to create some spacing and within it we can create a new text that will say something like upload video and we can style it by giving it a class name equal to text-base text- gr-100 and font DP medium there we go upload video and then we can create a touchable opacity right below that text which will be our area to click on and upload a video so touchable opacity coming from react native and here we want to see if we already have a form. video if we do we will display a video component coming from Expo AV Audio Video so let's immediately import it at the top by saying import video coming from Expo AV and we also need to get that resize mode coming from Expo AV as well we also need to close this thary operator by creating the second part if we don't have a video we'll create a view that will allow us to upload the video so that's going to be a view and let's properly close this with a class name equal to W fo h40 padding X off 4 background of black 100 rounded - 2XL justify Das Center and items - center it's kind of like a rectangle which we can click to upload a video within it we can have another view with a class name equal to W-4 h-14 border border dashed border secondary 100 justify Center and items Center and finally right within it we want to have an image which we need to import from react native so let's get it get a source equal to icons which we need to import from constants do upload with a resize mode equal to contain and a class name equal to W 1/ 2 and h- 1 over two there we go this is an upload icon and then once we click on that once we upload the video we can start showing it here so we can immediately get the source of that video equal to URI is form. video. URI not URL urii we can give it a class name equal to w-o h- 64 and rounded D2 Excel we can use native controls we can let the resize mode be equal to resize mode do cover like this and we can say is looping in case we're filling in some other fields and the video is done we wanted to start playing once again with that in mind we want to go below the touchable opacity and below the view as well and create another view this time for the upload of the video thumbnail so let's create some space by giving it a class name equal to margin top of seven and space- y-2 and we can copy this same text element that before said upload video and this time it will say something like let's do thumbnail image make sure that this is the text with the text Gray 100 font P medium and text base and then right below it we can basically copy this entire touchable opacity that we have created for the video because we want to have the same thing for the image so right below the text we can paste the touchable opacity and instead of checking for form. video we're going to be checking for form. thumbnail if we have the thumbnail we won't be showing the video rather we'll be showing the image that we have uploaded with a source equal to U form. thumbnail do with a resize mode equal to cover and a class name equal to w-o h- 64 and rounded Dash to excel okay that's good but if we don't have the image yet we have to fix this second part so for now let's delete this inner view right here and let's just keep the outer View let's change the H to 16 and we can add the border right here border -2 border dl-200 Flex D row and space- X-2 and within it we have the upload image with a width of five and a height of five as well okay so now we have different views for the video a bit larger and a bit smaller for image and we can have a text right below that image that's going to say something like choose a file and we can give it a class name equal to text- smm text- gr-100 and font dasp medium there we go that's much better finally we can copy this form field that we created above go all the way to the bottom below the touchable opacity and below the view and this one will be for our AI prompt that we used to generate this video which we want to share with world so we can say form. prompt and we can say under placeholder something like the prompt you used to create this video and under set form we're going to modify the prompt instead of the title in other news or in other styles margin top can be a bit smaller like seven and finally below the form field we can render a custom button first we have to import it right at the top so let's duplicate this form field and import custom button from the custom button pass it a title of submit and publish let's also give it a handle press so once we click on it we want to submit it so really quickly here we can create a new function const submit is equal to an arrow function that is good and we can give it container styles of margin top of seven that's going to push it a bit from The Prompt input and we can also give it the is loading property which will be uploading so if we're uploading that means that we're loading okay this looks good you can see it doesn't fit on my screen right here even it's a large screen but since we use that scroll view right at the top I can still scroll through everything and see what's happening which is great and this is it for the jsx part or the presentation part of our create video form but of course in this case where the magic happens is with the video upload so we first have to do the logic for uploading videos then uploading thumbnails and then uploading everything to our database so first things first we cannot work on the submit function until we have worked on the actual upload functions so let's create a new function at the top const open picker that's going to be a picker for our video or image file which will be an async function that selects the type of the file we're trying to pick and we can open this picker once we click on this touchable opacity so we can go right here and say on press we want to call a callback function where we open the Picker this time it's going to be a video picker and we can copy that on press and paste it to the second touchable opacity and on the second one we're going to say open picker image and make sure to properly close it as well there we go so now now we can start working on the code within this open picker so I can teach you how you can upload actual files from your phone to app rights storage buckets and then getting URLs for those files so you can put them within your app right database and then see the video you have posted on your homepage first things first we can open up a model that allows us to pick either an image for a thumbnail or a video so let's say result to extract the image or video we choose and say await document picker like this and this document picker will come from Expo document picker which is another package we can install so right here in the terminal we can clear our second one and say mpm install Expo Das document Das picker and press enter once we install it right at the top we can say import everything as document picker coming from Expo document picker now to that document picker we can use a method called get document async to which we need to pass options object of type and here we need to define the type that we want to get now in our case the type will depend on which input we click click on video or thumbnail so we'll say if select type is triple equal to image then the types will be an array of image PNG as well as image JPEG and else the type will be a video MP4 as well as a video GIF and now if you save it and if you click on upload video you can see that it will actually open up your recent videos we can also give it a shot with a thumbnail and here you can see some icons that I recently downloaded to customize my iPhone you can also go to browse and see all the different files on your phone in this case just sticking with recents is fine but now that we select a specific image we want to do something within it first we have to make sure that our user hasn't canceled so we can say if not result. canell in that that case we can set state to either thumbnail or video by saying if select type is triple equal to image in that case we can set form we can spread the entire form and update the thumbnail to be result. assets Z like this and we can also duplicate that if right below and say if select type is video then we can update this video right here to results. assets Zer else not else to these ifs but to this outside if if we have cancelled the submission then we can just set a timeout where we have a callback function and we can Define the delay of like 100 milliseconds and we can show an alert coming from react native. alert document picked and json. stringify the result we don't want to replace anything so we can give it null and the space will be two this should nicely show us which file we have selected so let's give it a go I'm going to click upload video and I'm going to select this real and as you can see it automatically got it here we also got document picked assets null cancel to true so this is only if you cancel out but in this case we actually have the asset here the only problem is once I try to play it then it opens up this form once again we'll work on that later on for now let's also select a thumbnail I'm going to go with this nice thumbnail image right here and now that we can select those files the only thing we're doing in this open picker is we're setting them to the state so now we have to actually create the submit function that will upload them to our database so before we submit we have to ensure we have all the data so we can say if there is no form. prompt or if there is no form. tile or if there is no form. thumbnail or if there is no form. video if any of these is false or empty then we want to return an alert. alert that says please fill in all the fields if we get past this if then we can say set uploading to be true and we can open up a try and catch block it will also have a finally Clause right here where we can reset our entire form so we can say set form and we can basically reset it to the starting state by copying the empty values and pasting them here and right below we can also set uploading to fold because we are done with uploading so now if we have an error we can simply alert alert error with an error message right here and how will we actually upload this file well first Let's do an alert. alert where we can say success and post uploaded successfully then let's also navigate to the homepage by using the router functionality by importing router from Expo router and then we can say something like router. push pointing to home so we can see our newly uploaded post and then the most important thing is right here we have to make a call to aite to add this post to our database so let's navigate over to aite and let's create a new function export const create video and it will be equal to an async function that accepts the entire form data as the first pram we can open up a try and catch block and in the catch simply throw a new error where we pass the error and in the try we can first upload our video and thumbnail and then once we have their URLs we can simply create a new document in our database so let's do just that I'm going to say const and I will destructure the thumbnail URL and video URL which will come from the call of await promise. all because we don't need to do one of these one after another we can at the same time start uploading both files and we can do that using promise. all then we can pass an array of calls we want to do and here we can call a new special function called upload file to where which we can pass our form. thumbnail with the second prop of image and we can duplicate that and pass the form. video with a second prop as video as well and let's separate these by commas there we go now of course this upload file is another function which we have to create so let's create it just above export const upload file is equal to an async function where we can get the file and the type of that file and we can upload it to aight storage buckets first things first we can check if a file even exists so if there's no file we simply exit out of the function then we want to get some data or information out of the file by saying const and we can extract a mime type and then spread out the rest of the properties coming from the file we can do that like this and then we want to reconstruct that file because that's how aite accepts them we can say const asset is equal to an object with a type equal to mime type and we can spread the rest there we go so basically what we have done is we have taken everything out of the file and just renamed the Mind type to type as that will help aight understand what file we're talking about then we can open up a new try and catch block in the catch we can throw a new error as we typically do so we can copy this entire thing and paste it here and in the try we can say const uploaded file is equal to a wait we call the storage for the first time right here so we have to initialize a new storage bucket right at the top so let's do it here account avatars databases but now we're also working with storage which is new storage coming from aight of course at the top so let's go ahead and import it there we go let's go down and then we can say something like storage. create file and we have to pass a couple of things into it first we pass the storage ID then we have to pass the id. unique as we want to give it a unique ID to this file and then we pass the actual asset into it so that's going to look something like this and then aite will give you a file URL so we can do something like const file URL is equal to await get file preview to which we have to pass the uploaded file do dollar sign ID and then the type as the second parameter and we can return that file URL and the only thing that's important here is that this get file preview is a bit different for our video and audio file so let's turn that into a new function right here export const get file preview which is equal to an async function that accepts a file ID and type we can declare a file URL at the top let file URL and open up a try and catch block in the catch we can simply consol log or throw a new error and in the try we can check if we're working with a type is triple equal to video or else if we're working with a type triple equal to image and based off of that response we're going to get the file URL a bit differently so if it is a video we can say file URL is equal to storage. file view to which we pass the storage ID as well as the file ID where want to get it from now to get the file URL off of an image we can say file URL is equal to storage dog file preview a bit different not get file view and here we can pass the storage ID as well as the file ID so that's the same but now we can pass the width which is going to be 2,000 the height which is going to be 2,000 and the gravity which is going to be top and finally quality which will be 100 so we can basically pass a few more pieces of information to get the right preview and the right size finally we can also do an else and throw a new error of invalid file type in case we don't get video or image and finally if there is no file URL that we get back we can throw an error one more time and if everything succeeds we can basically return this file URL great so now we have the get file preview which is used in the upload file which is used with then create video which then returns us the thumbnail URL and the video URL which we call both at the same time as we can upload both at the same times they don't depend one on another so they can happen at the same time so once we have those URLs we can say const new post is equal to await databases. create document here we need to pass the database ID within which we want to create that document and a video collection ID which is the ID of the collection where that document belongs and then the id. unique which will give it a unique ID and the last thing we have to pass is an object of the actual data that we want to create so it will be a title coming from form. tile then we want to give it a thumbnail equal to thumbnail URL after that we can pass video as video URL prompt equal to form. prompt and finally Creator equal to form. user ID and with that we have everything we need to create a new post so finally once it actually gets created and added to the database let's just return it right here to our front end great so now we have a function called create video which uses upload file which uses get file preview which we can use within our create form so right here let's await and for that we have to turn our submit into an async function and and what are we awaiting well we're waiting create video which we have to import of course from aite so let's do that going up we can import create video from. sl/ lib aight let's just command click it or control click it to see if we're pointing to it in the right way we are and we're creating the video and to it we have to pass a couple of things I'm going to spread the entire form and I'm going to also pass the user ID equal to user. dollar sign ID that way we have all the necessary information to create a post so let's give it a go I will first upload a video I'm going to go with this Instagram real we can also give it a title of IG real I'm going to post a thumbnail image let's go with this one right here and let's enter an AI prompt I'm going to say something like testing and press enter let me spell it properly testing there we go and I'll press submit and publish it gives us property user does not exist that's okay at least we got an error in this case we cannot get this user because we have never imported it so right at the top we know how to do that we can simply say const d structure the user which is equal to the use Global context which is our custom context hook so we can import it by saying import use Global context coming from. context SLG Global provider now we have access to the user and we can give it another go before we test it out there's one more thing I want to fix right here we have this else that sometimes throws this annoying alert and I think we can safely get rid of it nothing bad will happen we just won't see the alert on the screen so we can hide that and another little tweak that we can do is within this touchable opacity we cannot actually play the video or interact with the native controls because it's within the file upload button so let's simply move the use native controls and is looping that way we'll know the video is there but we won't be able to interact with it so let's give it a shot I'm going to name my video something like IG G real I'm going to upload the video right here we can see that it is uploaded and now you can choose and you can add another one or you can just exit out of it we can choose a thumbnail for that video I'm going to go with this background and the AI prompt is let's say something like testing I think that should be good there we go and let me click submit and publish we got an upright exception file extension not allowed but why is it not allowed that is one of the most basic file formats so let's see where do we disallow people from updating that file extension I think here on the file picker first of all we can also allow people to select image and then we can do for/ JPEG and we can also go back to aite and within here we can go to storage files settings scroll down and we can add JPEG and press enter and click update this should allow us to add this file extension and you can also select others if you want to going back to the code we can give our create one more chance let's go to create let's once again type something like IG real let's upload a video I'm going to go with this one and upload a thumbnail and select a prompt once again I'm going to do test and press enter this time we get the file you're trying to upload is above the limit allowed for your plan okay so the limit is about 50 megabytes for the free plan so let's try to find something a bit smaller and while we're doing that I just noticed one more thing as well if I click here you can see that it actually opens up my files as we're using a document picker and I thought this might be a bit more fitting for videos but still videos images you want to get them from your gallery right so let's use something like Expo image picker instead of a document picker the installation is simple MPX Expo install Expo image picker so back in our terminal MPX Expo install Expo image picker and the usage will be very similar to what we have with a document picker we basically import it and we use it as we normally would but the method is launch image library and then here we can choose which types of media we want to get so let's go ahead and copy their example examp Le go back here and instead of using this we can simply override what we have and let's not forget to import image picker right at the top by saying import image picker from Expo image picker let's see if we have to import anything else no I think that's basically it and let's see media types image picker. mediatype options. all we don't want to go for all we want to choose a specific type so let's say media types if select type is a string off image then we'll do image picker media type options dot I think it's photos or maybe images yeah it's images you can see only images else we can do something like image. media type options Dot videos no I don't see it that it autofills it so we have to make sure that this indeed is the right property to choose if select type is triple equal to image then images else media type options dot let's see I don't see that it autofills anything so let's go back to the docs or even better we can command click right here and see what we can get all videos images okay it's as simple as that for some reason Visual Studio code didn't autofill it for me but it's videos we are not going to allow editing I don't think it's needed and we can leave the aspect ratio and quality as they are and let's give it a shot I'm going to click upload and I got an error and now I can see why it wasn't autofilling videos I forgot to add the dot image picker instead of image at the start so now it recognizes only videos this is great let's save it and let's give it one more shot and you can choose any of your videos under 50 megabytes you might want to do some compression online I have selected one right here and I'm going to upload it this video was AI generated and it looks like Japan so I'm going to say Japan right here and I'm going to also upload a thumbnail there we go I have uploaded a thumbnail th nail and we can say something like Japan in Spring let's say that is the AI prompt that we gave it finally let's click submit and publish and hope for the best this time we got another error at least you can see it on my screen here it says canot Trade property off dollar sign ID of undefined so let's search for dollar sign ID right here and we have only one belonging to the user right here and we are getting the user from our state so I don't think it's this ID this one should actually exist but it also could be some of the IDS coming from aight here if I expand create video we can search for dollar sign ID and you can see that it could be the new account. ID this is in create user rather we want to look into create video here we have nowhere dollar C ID what about an upload file here we have it uploaded file dollar sign. dollar sign ID and do we have any in file preview I don't think so so I think it's pointing to this one right here so as we know that this dollar ID could be the problem the problem is with uploading a file and that could be because we switched from document picker to image picker so this modification we're doing with the assets and the M type might not be needed so just to be safe let's do a conso log where we can conso log the file to see what we're getting back and we can also conso log the uploaded file to see how that looks like and let me just say uploaded in a string right here just so we can know what this is relating to and in the above one I'm just going to Simply say file just so we can easily find it in our terminal I'm going to save it and now we have have to try to upload one more time and I will speed this process up for you there we go we know that it won't work again but at least we can see the logs so let's click submit and publish and it looks like the uploaded is undefined but the file above actually has its asset ID but let's see if it has the mime type it does have the type and it also has the mime type which is great so in this case I don't think we even need to transform it manually as both have their own mime types so let me just reload our terminal and started one more time so what we have to do now is ensure that we pass the asset in the exact right format that aight accepts it in and it's name type size URI so let's quickly copy this and let's start forming this acid from scratch that way you'll even better understand understand why we were doing what we were doing right here first of all all of these are strings and size is a number like this we have to add commas and we have to understand where we get all of those values from but at least that is now noticeable we know because we have conso log the actual file so let's search for IT thing by thing first of all we have file size which is size right here so we can say size is file do file size one down three more to go URI let's see if we have that here we have it there we go URI so we can say URI is file. URI then we have the type in this case the type is the mime type so let's say type is file. mim type and finally we have the name the name is the file name so let's say file. file name great now we're forming the asset in the format that aite should gladly accept it in let's remove those consoles and let me swipe back up from my settings to our app let's reload it one more time just to be sure and let's create I'm going to speed up this process for you one more time there we we go and I will press submit and publish post uploaded successfully that is great now if we swipe up to reload right at the bottom you'll see a new video that we just uploaded and what do you say that we show it on top so let's go to get all posts and like we have done with get latest posts simply copy this query and add it right here below Video Collection ID and remove the limit since here we want to get all the posts so we're essentially sorting it by a descending order that way our new post will appear right on top JS Mastery posted Japan we can click on it and we can see the video that I just posted if you want to you can also turn your phone around and see it in full quality believe it or not this video was created by AI so with that in mind everything is is working perfectly we can see all of our other videos as well and play through them and after some time this video gets back to thumbnail in case you want to replay it one more time so with that in mind we have successfully created the create video form we have had two different file uploads or should I call them image uploads because we're picking directly from the gallery both videos and images we're creating those files uploading them to a storage bucket retrieving their URLs and finally creating a new document within our app right database we also have our profile and you can see immediately that we get this new Post in Japan coming directly to our profile if you want to you can also modify the order in the sending within get user posts right here that way it will also appear on top then you can add a comma and this time without an array simply saying quick very. order descending within the same array right here we're going to sort it and if you go back to home or back to profile you should be able to see Japan appear on top so now we have successfully created our onboarding login and register screens as well as homepage with two different types of posts horizontal view as well as a vertical view a search page where we can search for different things as well as a profile page and a create page and with that in mind you can see that three out of four of our screens at the bottom bar have been implemented home create and profile but bookmark is still empty and that's for a reason going back to our design you can see this saved screen which is almost exactly the same as search so I invite you to implement this page on your own it will require a small bit of almost everything that we worked on in this video it will require you to first of all add a heart icon within each one of these posts within the homepage then once you click on that heart it should make an aight update request to add the users's ID that like that post to somehow Mark the post as liked by that specific user for that you might want to go to databases to videos and then there you might need to add additional attributes such as liked and that will be a relation to users so it can be an array of user IDs that have like that post once you have that going you can make a new fetch that fetches all of the liked posts by the current user and then you can develop this screen called saved videos where you can show the videos that you fetch it's not simple but you can do it if you want to have some more practice and if you don't want to do it one thing you can do is just search for bookmark that's going to be right here within the layout and we might want to remove or hide this tabs screen as it's currently not functional so if you do it this way you can still see this triangle at the bottom right so to get rid of that we can just remove this bookmark route as it automatically picks it out so if you remove it and reload you can see that now it is gone and you have three fully functional apps leaving you with a fully functional react native application that is full stack amazing jab if this is your first react native application you have ever coded well huge props to you for coming to the end of this video and building it out and learning a lot about what react native and Expo have to offer and if this is not your first react native app but you still came to the end congrats you learn how to create a full stack application learned a lot lot about the latest and greatest of what Expo and react native have to offer with file based routing Expo AV package for audio video image and video uploads and making the app full stack with aight if we were on the web now we would deploy the app very quickly and easily but the native mobile application game is a bit different we have to deploy our applications to their respective stores to Google Play Store if you're Android and to Apple Store if you're an iOS and for that we have to build out our native source code create an account on one of these platforms and get our app out there if you're interested in learning how to deploy your applications to App Stores let me know down in the comments and download our react native guide that I mentioned at the start that way once we do release a video or a course on that topic I will let you know via email once again thank you so much for coming to the end of this video and building this app with me but you should be thinking to yourself actually because you have invested your time into improving your skills and that's what matters the most so once again great job and I'll see you in the next one have a wonderful day