Build and Deploy a React Native App | 2023 React Native Course Tutorial for Beginners

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 which is precisely what you'll learn in this video the first part of this video is the ultimate crash course on react native we'll start by going over the benefits of react native and why it became such a popular choice for developing both IOS and Android applications next we'll dive into Expo a tool that allow us to get our application up and running in no time after that we'll cover the fundamentals of react native we'll discuss its different elements how it compares to reactions code structure and styling by the end of this course you'll have a good understanding of the basics of react native and you'll be able to create your own app using this powerful tool immediately after will put your skills to the test in the JavaScript Mastery Style by building and deploying a react native application that's the only way to retain and expand your knowledge the application you'll build is called job Ed it's a three screen application with elegant UI ux that lets you dynamically fetch data from the J search rapid API allowing your users to browse Developer jobs from the most popular platforms such as LinkedIn indeed Glassdoor and more to make your app truly great will also implement the job Details page custom hooks for fetching data Dynamic styling with the style sheet responsive design across all devices search functionality pagination custom screen headers and much more by building this single react native app with me you'll get the knowledge to build any mobile application you can imagine you'll also deploy to the Internet so you can share it with your friends and potential employers and put it on your portfolio you might be wondering what are the prerequisites for building such a fantastic app this course is entirely beginner friendly think of this as your first introduction to the world of react native we're going to start simple and then move to more complex Concepts as we go I'll explain every step of the way alongside building this application you'll also learn how to develop visually appealing UI ux designs fetch data from an external API and integrated Implement search and pagination functionality to improve the performance and user experience create custom hooks for fetching data from apis allowing you to reuse them through your entire application use stylesheets to dynamically apply styles to components based on their user input and finally you'll learn how to write clean organized and maintainable code with proper architecture following the best practices for react native development before creating a folder for our project code we must first visit rapid API the link is going to be down in the description the making of this entire app is Possible only because of Rapid API we're going to use their J search API that allows Ultra fast and simple job search for jobs posted on LinkedIn indeed Glassdoor ZipRecruiter and more to use this API click the rapid API Link in the description and then you can click sign up or log in I will log in in this case since I already have the account and once you're in you'll be redirected to Rapid apis Hub where you can find hundreds of thousands of apis this was the first step in our video now let's create our react native application and then later on we'll call this API straight from our app if this video reaches 20 000 likes I'm recording a second react native app with that said let's dive straight into the crash course [Music] first on the list react native history before react native developing mobile applications for multiple platforms was daunting you had to write separate code bases for each platform which resulted in slower development cycles and higher costs but with react native you can write a single code base 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 result in better performance and a more seamless user experience react native is used by big companies like Facebook Instagram and Airbnb to build their mobile applications react native advantages on top of the cross-platform compatibility and Native components the benefits of react native are also hard reloading which allows you to see the changes you make in real time making the development process faster and more efficient strong Community Support ensuring 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 Expo in this video we'll use Expo you're familiar with tools like create react app or Veet right well Expo is just that only for react native applications it provides many tools and services that simplify the development process 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 or dealing with Native dependencies Expo takes care of all of this for you so you can focus on building your app Expo also offers pre-built components and apis for navigations gesture camera maps and more overall if you're new to react native or want to develop your apps quickly and easily Expo is an excellent choice it simplifies the development process and allows you to focus on what matters in this video we'll use the latest and greatest of what Expo has to offer the recently launched a fantastic new routing system called Expo router export router takes a different approach to handling navigation by using a file based routing system that is simpler and more intuitive so instead of relying on complex configuration files you can Define navigation routes using the file system structure just like in xjs you simply create a file and that's it your route is set I'll show you how to use it really soon alright let's jump into the exciting stuff we've already talked about the benefits of react native and how Expo can make your life easier now it's time to delve into the code and see how it all works if you were worked with react.js before you'll find that react native uses a similar syntax but of course there are some differences you should be aware of in this part of the video we'll explore the ins and outs of react native code we'll examine how it works how it looks like and how it functions and compare it to react.js to help you grasp the similarities and differences between the two in just a couple of minutes you'll have solid understanding of react native fundamental components and how to use them when coding in react native you use JavaScript just like you use in react.js but instead of rendering HTML elements you'll be rendering native mobile components take a look at the basic react native component example in this code snippet we're importing two important components from the react native Library namely View and text and then we create a functional component called app that Returns the text component wrapped inside of the view component what's interesting here is that we're using the jsx syntax which makes it easy to create and visualize our components in a more HTML like way or something we're already used to in react now let's take a closer look at the text component while in reacts.js 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 now let's talk about the view component as the name suggests it's used to create a container or view for other components think of it as a box or container that holds other components a similar to the div element in HTML but with some added functionality specifically for mobile apps The View component is often used to create layout structures for other components it has a number of props that can be used to control its appearance in Behavior one thing to note is that the view component uses flexbox layout by default which makes it really easy to control how its child components are laid out within the container that means that you can use flexbox properties like Flex Direction justify content and align items to achieve the layout you want now at this point in time I think you're ready to add some interactivity to your react native app as well well you can now get excited because we have some awesome touchable components that can do just that these components are perfect for creating buttons links and other interactive elements in your app so in react native you don't have a button you have something known as a touchable opacity so if you're looking to create a button or another interactive element that fades in opacity when pressed you can definitely use the touchable opacity component think of it as a cousin to the button component in react but with even more room for customization and flexibility what you can see on the screen is an example of how you can create your own button component in react native now let's go to a couple of other components such as activity indicator it's used for showing a spinner or a loading indicator in your app and of course it's fully customizable which means you can customize the size and the color of that Spinner by setting the size and color props now we have two really important components on our list that's going to be a flat list component which is used for rendering long list of items that need to be scrolled efficiently it's like a map function in react but it has extra features like optimize scroll performance and item separation now the question is when should you use a flat list and when should you use a map in react for larger lists with smooth scrolling go for flat lists for smaller lists map function can do the job there's also another thing called a scroll view it is like a magic box that can hold multiple components and Views providing a scrolling container for them it is like overflow scroll in HTML allowing you to easily navigate through a list of items or a large amount of content in 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 and finally we have a safe area view it provides a safe Zone to render your app's content without being covered by the device's hardware like the notch home indicator or status bar this ensures that your content is displayed within the visible area making your app more accessible so this was just a quick preview of some of the most popular components we'll be using in react native apps as you saw they have interesting names such as touchable opacity flat lists and so on but if you know what to do in react you're gonna get used to react native pretty soon in a nutshell react native and Expo together offer a lot of components and elements that we could explain forever but luckily we won't do that on this channel to help you understand react native better I've created an awesome app that covers all the fundamental tools and essential features you need to learn as a beginner so instead of going through this like a school presentation let's get started by learning in the JavaScript Mastery Way by building this great react native app together and putting everything into practice after building this mobile app you can develop its more comprehensive web version by joining the master class the JSM masterclass experience helps Junior and intermediate developers Fast Track their careers you will develop real world applications in a team which is more challenging than simply following a YouTube tutorial but this also means that you'll learn so much more from the experience you'll use modern tech Stacks get personalized mentorship from senior developers and get exceptional hiring support you can graduate in six months land your dream job in the six months after graduating or get your money back if you want to apply click the link in the description or go to jsmastery.pro forward slash masterclass and apply by filling out a 15-minute quiz I'll personally reach out to you before we officially begin with the next cohort so you can be sure not to miss it let's dive straight into the code to begin creating our great react native application we can start from bare Beginnings by creating a new empty folder on our desktop called react underscore native underscore jobs and we can drag and drop it into an empty Visual Studio code window once we are in we can go to view and then terminal that's going to open up visual studio codes great integrated terminal once we have that ready we can open up expo.github.io forward slash router forward slash docs just recently Expo came out with its router bringing the best routing Concepts from the web to Native IOS and Android applications so we're gonna use their quick start to create our new react native application so from here just copy this command go back to your Visual Studio code and paste it that's going to be MPX create Dash Expo Dash app add latest dash e with router let's add the dot slash to create it in the current repository and press enter and for that we of course need to install the create Expo app latest so let's press Y and then enter this process is going to take about a minute so I'm gonna pause this video and I'll be right back and there we go in about a minute your project is ready and we can now run our application but before we do that let's go ahead and check out our file and folder structure right now the only thing we have is the get ignore app.json Babble and the index.js almost nothing is there because we're going to create most of the things from scratch so let's start by creating a new empty app folder inside of the app folder we're going to have the index.js file as well as the underscore layout.js file these are the two most important files in a react native application inside of the layout we can import something known as a stack coming from Expo Dash router a quick Google search leads us to create our first layout route in app underscore layout.js which is exactly what we have done and now we have to import the stack and simply return it later on we're going to use that stack to link to all other pages in our application so we're going to do import stack from export router const layout is equal to an arrow function that's going to Simply return a self-closing stack component and of course we have to do export default layout great now we're going to go to the index.js and inside of there we're going to import view as well as the text coming from react native we already talked about these in the intro you can view the view as a div and the text as a regular P tag and in here we're going to create a const home is equal to functional component where we can return the view like this and then inside of the view we're going to have a text that's going to say home and we can do export default home great now that we have our app and the layout we can focus on installing a couple of additional dependencies as you can see most of the Expo and react native dependencies have been installed for us but we're gonna need just a couple more so let's go to view and then terminal and let's run npm install Expo Dash font we're going to use this to add a custom font axios we're going to use for API requests and then react-native dash dot EnV this is an external package that's going to allow us to work with environment variables and let's press enter great the dependencies have been installed what we can do now is run the application and we can do that by simply running the command npm start so let's do npm start and now it's actually going to build and compile the application and we'll be able to scan it immediately with your phone so you can see it and test it in your own hand so let's wait until the Metro bundler starts and you'll be able to see how easy it is there we go so you can immediately get the QR code or you can also open it right in the browser by going to this URL for now I'm going to go to the QR code and the next step you have to do is to install the Expo go application on your Play Store or on the IRS store so by going to expo.dev forward slash client on your phone or simply by going to the app store or Google Play Store you'll be able to download the Expo go application which makes it so easy to test our react native applications once you download it you can simply open the camera app on your iPhone or the Expo Go app on your phone and then simply scan the QR code and click open in Expo go as you can see this is going to start the application and apparently there's going to be a problem so for some of you this might work right off the bat but in my case it looks like the Wi-Fi is blocking the axis from my phone so let me show you an alternative solution we can press Ctrl C to stop the server from running and then I'm going to show you an alternative command you can run to make your app work on your phone for that to work we first have to run npm install Dash G Expo Dash CLI and you can press enter this is going to globally install the Expo CLI package which we're gonna use from now on to run our application once the package installs you can run the Expo CLI start dash dash tunnel command and press enter this is going to run the metro bundler in a bit of a different tunnel mode which is going to allow us to check our application from our phone so let's wait until the Metro bundler starts and we should be able to see that same QR code we saw before and once again you can open it on your phone and go to your expogo app this time it's going to say opening the project it's going to bundle the JavaScript bundle as you can see right here at the bottom it's bundling it as we speak and in less than a couple of seconds you should be able to see your Expo react native app right in your hand on your phone and there we go the bundle is complete 100 done and we can see our index and the home appear right here which means that we have the Bare Bones of our application up and running on our iPhone or on your Android phone great with that said we can now close the packet Json and open up the Explorer now we only have our app which is great but to speed up our workflow I've already prepared for you a couple of extra folders and files they're gonna make our learning process so much simpler because you won't have to worry about some Nitty Gritty details you'll be able to focus on what actually matters which is coding the logic of a react native application so to allow you to do just that I prepared a starter code for this react native jobs project you can find it linked down in the description and you can download and unzip it inside of that zipped folder you'll find four other additional folders and you can slowly bring one by one to our grade application first of all we're going to bring our constants folder into here and you can press copy folder inside of the constants you're going to see some simple things such as icons images themes and index these are just some helpers that we're going to use to make the development of our application simpler after constants we're gonna also get our Styles so once again you can copy that folder right in here and in here we have the styles for the search page of our great application after the Styles we're going to bring in assets inside of assets you can see all of the fonts icons and images that we're going to use through a great application and finally and most importantly we're gonna bring in the components folder into our application and now you might be thinking oh look at that components folder it is full of additional folders and files am I going to build anything by myself or not really well you will you will build absolutely every single little detail by yourself because if you look into any of these components such as home nearby you can see that it contains nothing inside of here we just have an empty function and it's the same thing for every single other component the only thing I provided you is the file and folder structure which you can learn from right here by looking at it but every single file is actually completely empty it contains absolutely nothing besides the Styles so as you can see the Styles will be provided you can still learn from them but the actual Logic the jsx the react native elements everything else we'll be using is going to be written 100 by you and you're going to create this entire react native application by yourself so now that we have the app assets components constant and styles we are ready to dive into developing our great application of course we can start straight from our app and then index which is our actual home page so inside of here we're gonna have a couple of imports we're gonna first import the use state coming from react we're already used to this right after that we're gonna get the view as well as a scroll View and finally the save area View coming from react native these are react native components and then finally we're gonna also import the stack as well as the use router coming from Expo router think of this as a library similar to react router after that we can import a couple of constants these are going to be colors that we're going to use throughout our application we're going to have icons as well as images and then some screen sizes like so and all of that is coming from dot slash constants and if you're interested to see how these look like you can always jump into constants and for example colors and you can see that we have a couple of predefined values such as primary secondary gray colors fonts sizes and so on great after that we're going to import a couple of components which for now are completely empty as you already know we're going to import the nearby jobs as well as the popular jobs we're going to import the screen header button BTN as well as the welcome screen and all of this is coming from dot slash components we can even put it in a new line just so we can see everything clearly make sure that all of these are spelled properly so that when you hold Ctrl or command you can click into it and go into that specific component as you can see they're all completely empty great now we can Define our router by saying const router is equal to the use router hook like this and we can start with creating our layout instead of here we're gonna wrap everything not in a view but rather within a safe area view if you remember the intro the safe area view allows you to show the content safely without any notches or home buttons or anything appearing over it and we can apply some inline styles such as Flex is equal to one as well as background color is equal to Colors dot light white and we can save that inside of there we won't show the text saying home rather we're going to render the stack dot screen like this and that's going to be a self-closing component to which we can pass some options it's going to be a parameter of options which is going to be an object to which we can provide a header Style and that header style is going to be an object with a background color equal to Colors dot light white now if we save this we can still see home on the screen so what you'll have to do sometimes and you'll have to trust me on this one I want you to take your phone in your hand and shake it literally shake it around and you're gonna see a menu appear yes that's right to allow for regular user replication you can always test it out but if you want to get to extra options by react native or Expo you can shake it and you're going to get an extra menu appear right here for now we want to click reload right there so see what I just did and therefore we're going to get an error the error is saying that we cannot get that dot slash constants so apparently we have an issue with this import even though it's properly pointing to all of these properties so where could the issue be the index is in the app and all of the other files are right here so what if we try to dismiss this error still we cannot see anything if we reload it one more time and reload.js still the same thing now we can open up the console and see that it says that none of these files exist even though they do so what we can do is we can try pressing R which is going to reload the app and still the same thing so let's stop it from running by pressing Ctrl C and then let's run the Expo CLI start tunnel one more time maybe we made a lot of changes to our file and for the structure so it got stuck a bit so let's simply run the Metro bundler one more time user camera or Expo Go app one more time and then we can scan the QR code one final time and hopefully the changes in new files will be there there we go the QR code is there I'm gonna scan it open inexpo go opening project it's building and hopefully it's going to build not to an error but to our regular screen and that is it we can just see the index right there which is exactly what we were supposed to see because we don't have anything there but the most important thing is that we don't have any errors so now we can proceed with the development right below our header style we can also provide the header Shadow visible and this is going to choose whether to hide the elevation Shadow on Android or the bottom border on iOS and it's pretty cool that it even tells you here what it's going to do based on the operating system so let's set that to false and there we go now you cannot see it now what we can also do is we can add an additional property called Heather left and that's going to be a arrow function that's going to immediately return the screen Heather BTN as a self-closing tag this is a component we are yet to create and we can also pass the icon URL equal to icons dot menu and we can also give it a dimension equal to 60 percent next we can add a comma right here and duplicate this below and change this to Heather right and there we're going to give it the icons of profile and dimensions of 100 percent great now you can see that we have screen header button on the left side the index in the middle and then the screen header button on the right side as well and we can also override the header title to be just an empty string that way you won't see the index in the center great now let's focus on adding something below the navigation bar that's going to be a scroll view meaning you'll be able to scroll through it we can also give it a prop called show vertical scroll indicator and set that to false because we don't want to show it users already know that they can scroll it up and down inside of the scroll view we can also give it a regular View and that view is going to have a style property equal to flex is one as well as padding is equal to sizes dot medium now if we save this you won't be able to see something because this view is currently empty so in that view we can render a self-closing welcome component right now it simply says welcome because it is empty later on to that components we're gonna pass some props as well but for now it can look like this below the welcome we're going to also have a popular jobs self closing component as well as nearby jobs so we can change this to nearby jobs and now you can see the popular jobs doesn't exist that's because it has a lowercase j and if we fix this you can see we have screen Heather BTN screen Heather BTN welcome popular jobs nearby jobs everything we need to get started so what do you say that we get started from top to bottom first starting with the screen header BTN you can control click it to go into that component and then right there we can implement it these are going to be buttons so we can import from react native a touchable opacity we learned that in react native a button is a touchable opacity and we're gonna also get the image tag now inside of here we're going to Simply return a touchable opacity component and inside of there we're going to render the self-closing image tag the image is going to have a source equal to Icon URL and that's something that we're passing through props while calling the screen header button you can see the icon URL here alongside the dimension so let's pass the icon URL get it from props did I mention as well and finally later on we're going to have the handle press functionality as well now if we save this you can see that we have this menu icon but it's not looking that good so we can call the resize mode equal to cover that's similar to regular react native with CSS properties and we can also give it a style equal to styles.btn image or IMG and we can pass in the dimension if we save this you can see that we have one extra parentheses but if we fix it we should be able to see the menu above although it is gone so we might need to provide some extra styles to attachable opacity as well Styles such as Styles dot BTN container and if we save that we can see our great menu icon on top also if somebody presses the button we can see on press is equal to handle press so if you want to do something once this button is clicked you can do that now it looks like on the right side we don't have anything so apparently it cannot get the image we're passing right here icons dot profile yep that's because the profile is not an icon it's actually an image so here we can say images dot profile and then in here you can display your users profile image with that said our so-called navigation bar on our mobile app is now done and we can focus right on the welcome part of the application so to focus on the welcome component we can close the screen header button and then hold Ctrl and click welcome that's going to be the next component we can start focusing on we can first import the use stayed hook coming from react but this time since our welcome component is going to be a bit bigger we're going to have a couple of react native Imports so let's put them each in a new line we're going to need a view which is just a div we're going to need a text which is a b tag we're going to also need something known as a text input which is an input a touch of opacity which is similar to a button an image and finally a flat list so these are all different Native mobile components in this component we're gonna also import the use router hook coming from Expo router great now we are already importing the Styles and we're going to also import some constants so let's get the icons as well as the sizes coming from constants great now inside of here we can immediately declare our router by saying const router is equal to router and we can start creating the layout of our welcome component first we're going to have a view and then within that view we're going to have another view this view is going to have a style equal to Styles dot container and if we save it nothing's going to happen because currently it's empty so let's add a text element that's going to say hello Adrian this can be your name right here and we can apply a style equal to styles.user name like so and that's going to make it a bit bigger we can duplicate that below and here you can say find your perfect job and there we can change the style to be equal to welcome message this is going to be a bit bigger because that's the more important thing finding a perfect job now below that view we're going to create another view and inside of this view we'll want to have a search so we can give it a style equal to Styles dot search container and within that we're going to have another view and that view is going to have a style equal to search wrapper or rather Styles dot search wrapper now within that we're going to create a text input component like so that text input if we save it right now is going to be a basic really Bare Bones looking input but if we give it a style equal to Styles dot search input we're going to see that the font family DM regular we're using in this style is not a system font so this is where we dive into using custom fonts now to implement a custom font we can go all the way back to our underscore layout.js within here we're going to import that new font so we can import a couple of things such as we can import a use callback hook coming from react we can also import a special utility function called use fonts coming from a library called Expo font so if you want to use custom fonts you have to have this library and then we're going to import everything as splash screen coming from Expo Dash Splash Dash screen and in this case we simply want to do splash screen dot prevent Auto hide async this makes the native splash screen remain visible until hide async is cold so when the app is initially loading this is going to make the splash screen visible now inside of there inside of the layout we want to do something on top and that is load the fonts so we can say const fonts loaded is equal to a hook call of use fonts and now we need to import them we're going to do the DM bold is equal to require dot slash assets forward slash fonts forward slash DM stands bold dot ttf it's already inside of our assets and we can duplicate this two more times we want to also get the DM medium and also change this to DM Sans medium and we want to also add it right here we want to do the regular as well and change it to DM Sans regular great now we have our fonts and we have to load them onto the screen and we can do that by saying const on layout root view is equal to use callback to which we need to pass an async callback function like this and then we want to check if fonts loaded then we want to await splash screen dot hide async so we only want to show our home page if the fonts have been loaded and this on layout root view also requires a dependency array and that's going to be fonts loaded so you can think of this as a use effect really similar finally we're going to say if no fonts loaded then we want to return null and if the fonts have loaded we want to return a stack with the on layout function equal to on layout root view there we go so the only thing we've done here is we've ensured that the fonts will be loaded looks like I had to properly spell this that's going to be on callback or rather use callback right here and there we go so now we can actually use this newly created font within our application going back to welcome we can now pass the value to this search and the value is going to be a new State field that we have to create and the value for now is going to be just an empty string then we also need to have an on change property that on change is going to be just an empty callback function for now we're going to implement the logic later on and then of course what would an input be without a placeholder that can say what are you looking for and there we go great now once somebody types something in you can test it in your phone if you click it it's immediately going to open up the keyboard which is great so we are really creating a native mobile application now below this view containing the text input we can create a touchable opacity that's going to be a component that's going to contain the image and that image is going to have a source equal to icons dot search there we go so essentially we can click it to search for the term that we entered above we're going to add a resize mode equal to contain and we're gonna also add a style equal to Styles dot search BTN image like so that's going to make it look a bit better now it's hidden but that's because we didn't apply a style to detachable opacity which is going to be Styles dot search BTN there we go and on press we also later on will give it a handle click for now we can pass in an empty callback function great so this is already starting to look like a great application now we can go below the view inside of which detachable opacity is and then we can create another view this one is going to be for our flat list so inside of here we're going to actually show jobs so there we can say style is equal to Styles dot tabs container and then inside of it we can show our flat list as we discussed before you use a flat list when you have more data to render so in this case we can show the data and the data is going to be one of three types which we can declare on top const job types is equal to an array of full dash time part dash time as well and also finally that's going to be contractor great so now we can actually pass the job types to our flat list and we're going to pass them as data data is equal to job types and if we save this we cannot yet see anything because we also have to add a render item which is going to have a callback function that specifies how each item should look like so inside of there we can destructure each individual item or a job that we're going to pass into it and then we have to say how that's going to look like well each card is going to be a touchable opacity because we'll be able to click it so it can look like this and it can have a text element inside of it that's going to render the actual item or the job now if we save this you can see full-time part-time contractor that's already looking better but let's also style it a bit so to this touchable opacity we can pass a style equal to Styles dot Tab and then we can pass active job type as well as the item as the second parameter and this active job type is something we'll be able to switch between so if we scroll all the way up we can create a new use State field and we can say active job type set active job type and at the start it can be full time now if we save this you can see three different touchable opacities which you can actually click so by clicking this will immediately go to the search same thing if we typed something above that is great now let's also style it a bit more so what we can do is we can also give it an on press so once we click on some of these we want to call a callback function and we want to set active job type to the item that we clicked and then we also want to call the router dot push and push it to forward slash search and then forward slash item of course this is going to be dynamic so it's going to be a template string now if we save this and click one of these you can see we get unmatched route that's because this route doesn't exist yet but we will have it soon but just so you know this is going to point to the search page that we're going to create later on great let's also style the text a bit by giving it a style equal to Styles dot tab text we can pass the active job type as well as the item and if we now save this you can see that the only contractor is clicked because that's the selected one right now and if we click full time and go back the full time is the selected button great also in the flat list you also have to provide another prop so if we go right here where we have additional props we can say key extractor is item pointing to the item if you hover over that it's going to say that this is used to extract a unique key similar to what we're doing in react Maps great we also have the content container style so we can specify that the column Gap is equal to sizes dot small and also add the horizontal prop you're going to see that these pills are going to appear one next to each other so this is already looking so much better and also if we had more since this is a flat list you can move them around so if you had a couple more you'll be able to see all of them now we have the search and we also have these select fields of course as you can see the on press is pointing to search which we don't yet have and above the on press is not really doing anything because we don't yet have the logic for it but no worries we're going to focus on the UI first and then we're gonna do the logic with that said the UI ux part of our welcome screen is now done which means that we can go back to the index and we can go to the popular jobs this is where we'll actually be able to show the most popular jobs from the API that we're gonna fetch so now we're diving into the exciting stuff let's get started by creating our popular jobs component to get started with the popular jobs we can first import the use State hook coming from react then again we'll be using a couple of other components from react native so let's import them as well that's going to be View text touchable opacity and then also the flat list but this time also the activity indicator so we're using something new and something old as well great after those Imports we can also import the use router coming from Expo Dash router and we can also import some Styles which we already have as well as importing some constants such as colors and sizes coming from dot slash constants great now we're going to also import some common components which we're going to use later on such as the popular job card so right now we're in the popular jobs which is going to be the entire segment but this is going to be the popular job card and that's gonna come from dot slash data slash common forward slash cards forward slash popular forward slash popular job card now that we have that we can also Define a router by saying const router is equal to use router and we can get started with creating our layout first of all we want to wrap everything in a view that's going to have a style equal to Styles dot container then we're gonna have another view inside of it and that view is going to have a style equal to Styles dot Heather inside of that Heather we're going to have a text element that's going to say popular jobs and it's going to have a style equal to styles.heather title like this and we can save it now sometimes react native is not going to pick up the changes so just shake your phone and then click reload and then we should be able to see the new changes that we made there we go we now have popular jobs and let's also add a touchable opacity right here that's going to say show all and this is interesting it says that we need a text element within a touchable opacity so let's create a new text element that's going to say show all and we can also give it a style equal to Styles dot Heather BTN so now we have popular jobs and show all that is looking great finally below this below this entire view we're going to have another view and this is where our actual jobs will go so we can give this a style equal to Styles Dot cards container and inside of there we first want to check if we are currently loading so for now let's create a demo is loading state which we're going to Simply set to false now to utilize it we can open a new Dynamic block of code where we can check if is loading then we want to show the activity indicator so this is a react built-in spinner that's going to show us that we are loading it's going to be the size equal to large and colors equal to Colors dot primary great now if we're not loading we might have an error so if we do have an error we're going to show like a text that's going to say something went wrong and for now we can also Define an empty error to be set to false as well and finally if we don't have an error we want to render the famous flat list component and that's going to look like this if we save it you can see that we have no errors if we quickly turn is loading to true you should be able to see this great looking spinner and that's going to be different depending on your operating system so on iOS it looks like this on Android it might look a bit different now I'm going to turn this to false so we can create the actual list the most important part of the list is the actual data so for now we can create something that looks like this where we just have the numbers because we haven't yet fetched the real jobs from the API so for now we can do something like one two three four and that's just gonna be numbers in an array the second most important thing is how we're going to render that data so we can have a render item property that's going to have a callback function that looks like this and then we can choose what do we want to render for each one of these items in this case we want to render a popular job card now to get the data for each one of these popular jobs we can destructure it right here within the Callback function so we're going to get the item and we can pass the item as item to the popular job card if we save this you can see that we do get four popular job cards that's because this is always returning a text of popular job card no matter what data we pass to it we also said that we need to give it a key extractor same as we do in react in this case it's going to be item question mark dot job underscore ID this is going to be one of the keys once we actually pass the real beta for now it's going to say that each key in a list should have a unique key prop and right now we don't unfortunately have that but we will once we fetch real data now we also want to give it a Content container style equal to a column gap of sizes dot medium and we want to make it horizontal same as we did for these pill buttons on top so now we can see we have those four popular jobs and we can even move them around this is phenomenal so if we do something like 5 six seven eight and save it you should be able to move these around with your finger and of course we're gonna make these cards look so much better so now might be the perfect time to actually dive into API data fetching so we can get the real data for our jobs to do that we're going to create a new custom hook so you can go straight to the root of your folder and then we can create a new hook folder like this hook inside of there we're going to create a new use fetch hook dot JS like this there we're gonna import use State as well as use effect coming from react we're gonna also import axios coming from axios and that's all that we need for now then we can say const use fetch is going to be equal to a regular Arrow function we can define a couple of states by saying use State snippet is equal to data set data at the start equal to an empty array then we can define a new one by saying const is loading set is loading at the start equal to false and then we can add an error saying set error use State and then we're going to set it up as null at the start so we're just preparing ourselves to later on populate these pieces of data which is great so finally now is the time that we go back to Rapid API and get our key and the endpoint to make a call to the J search API to fetch back all of these amazing Developer jobs so let's do that right away and we are back on rapid apis Hub inside of there the API we want to go for is J search there we go it immediately pops up right here the creator of web search is keeping this API up to date it is verified as well and it was last updated two days ago what we first want to do is go to pricing instead of here you can see that I'm a paid member of this API but for you it's going to be completely free you can subscribe to this basic plan that's going to allow you to make 500 requests a month in case you want to go over that and really make the best of this react native application you can always update to the Pro Plan I even spoke with the open web ninja and if you send them an email and said that you're coming from this video from JavaScript Mastery they're even gonna give you a bigger discount for the paid plans but with that said you can subscribe and then we can go back to endpoints the endpoint we'll be using right here is going to be search so for now we can click test endpoint just to see what data does it give us as you can see the demo query was python Developer jobs and immediately you get 10 jobs back with all of the data we need so how to use it well go to code Snippets and let's copy this entire options part right here once you copy that you can simply paste it right here below our use States const options method is get the URL is going to be this one but we're going to make it just a bit Dynamic by turning this into a template string and we're going to change this API based on what we want to do we're going to reuse this use fetch hook first of all for search and then later on for the job details so that means that we have to have a changeable endpoint just like so so the end point is going to come as a prop to our use fetch hook looking like this great now in the headers that we have right here which we can bring a bit up below the URL and add a comma these headers contain your API key which is not something you want to leave right here for everybody to see so you can copy this API key move it from here and we want to use that as a special environment variable so let's go to our file explorer and let's create a new DOT EnV file at the root of your directory called dot EnV there you can say rapid underscore API underscore key is equal to and you can paste your own key don't use this one create your own trust me you have a lot of free requests to make great with that said we now need to reload our application because the environment variables have changed so it might even say it right here not really but let's refresh it just to be sure so press Ctrl C to stop the server and then re-run the command export CLI start dash dash tunnel that's going to make sure the changes that you make to our EnV are reflected in our application so let's wait until we see a QR code we can scan it and be right back and there we go I'm back but just to be sure I'm gonna also reload the application to be certain that we have the latest and greatest of our data now we're going to get an error because in here we don't have a key it's currently empty so what we can do is we can create a new variable at the start const rapid API key is equal to and now we can get the real API Key by saying import inside of curly braces rapid underscore API underscore key is coming from add EnV and now we can set the key to be equal to this key we're getting we should be able to use it just like this but I found that sometimes it doesn't get it if we don't mention it sooner in our app right here so instead of referencing this variable we can reference this newly created variable we have created rapid API key right here also here we have the statically typed parameters page one number Pages 1 and query is python developer in Texas but we want to be able to pass a dynamic query to this API so for now we can say that params are going to be equal to an object where we spread the query that we pass into this hook so next to the endpoint we can also pass a query to make it Dynamic great now if we save this nothing should change because we're not yet using the use fetch in our code but let's just keep developing it for now now that we have the options we can create a new const fetch data is equal to an async arrow function function and we can first set is loading to true because once we start fetching we want to load it after that we want to open a dynamic try and catch block that looks like this try catch with the error and also we're gonna have a finally so whatever happens we want to do something at the end now while we're trying to fetch it we can say const response is equal to a weight axios dot request and we're going to pass in the options to it once we get the response we want to set the data to be equal to response that data dot data and we also want to set is loading to be set to false now if we have the error we're going to Simply set the error to be equal to error and we can also alert there is an error great and finally we want to set is loading to be set to false now we have this fetch data function but we're not utilizing it so below it we can create a new use effect block where we're going to Simply call the fetch data function like so there we go and we don't have to have anything in the dependence here right finally I noticed that there were some problems with trying to refetch the data sometimes once we click it it wasn't properly loading so what I created is a new refetch function so that's a function called refetch which is equal to an arrow function and there we can set is loading to be equal to true and we simply want to refetch the data if necessary so we have that at our disposal as well now with all of that done the most important part of the use fetch is to actually return some data so at the bottom we can return an object that's going to contain the data that is loading the error and the refetch and we can now utilize this function from within our popular jobs and elsewhere as well so with that said we can now import it by saying import use fetch coming from slash hook forward slash use fetch keep in mind we called it hook without an S so just you know and finally we can utilize it in our code we no longer have to have these dummy values of is loading an error because now we can destructure the data that is loading as well as the error dynamically from the use fetch hook of course it takes in two parameters the first one is the endpoint in this case it's going to be the search and the second one is what we want to pass for it we're gonna pass in the query as react developer and we're gonna also pass the num pages is equal to one finally what we want to do is we want to console.log the data to see what we get back now as you can see react native is complaining about this add EnV directory that cannot be found so even though we installed the react native environment variables it's still not picking it up to ensure this is working for all of you across all of the different devices instead of utilizing this ad EnV we're simply going to put the key straight inside of here so you can delete those Imports and right here where it says key you can go back to your rapid API documentation and copy your key from here finally you can simply paste it and replace it there and add a comma if we now reload that go back shake your phone just a bit and reload hopefully now it's gonna be good and there we go now we have object is not a function which is coming from popular jobs so where could that be and that's coming from react popular popular jobs so straight from here object is not a function and that could be that we're trying to use this used fetch function as a function right but if we go to it if you go to this file you can notice that we forgot or rather I forgot to export this function so right at the bottom we can do export default use fetch there we go and this should already be so much better so to get started with the popular job card we can import a couple of things from react native we can import the view the text detachable opacity as well as the image coming from react native finally our entire card is going to be some sort of a button it's going to be a touchable opacity because once we click it we can visit that job Details page to that touchable opacity we're going to provide a style equal to styles.container and we want to pass the selected job as well as the item and on press we want to call an empty callback function that's going to call the handle press function and pass the job we want to press if we save that we can see some white divs appear right here now inside of that touchable opacity we're going to create another touchable opacity yes you can do that just like you can ask divs Within divs so here we can create that touchable opacity and give it a style equal to Styles dot logo container we can call that as a function and pass the selected job as well as the item inside of there we simply want to render the image that's going to be a self-closing tag and it's going to have a source equal to an object where the URI is equal to item dot employer underscore logo and if we save that you can see that now we have empty boxes right here we also want to give it a resize mode set to contain and we want to give it a style equal to styles.logo image if we save that you can see the logos appear right here we have some great companies and some are empty because maybe they don't have logos so in case they don't have it we want to definitely show some kind of a placeholder logo but we're gonna do that soon great now we can go below our touchable opacity which is our image and we can create a text property where we can simply render the item dot employer underscore name if we save that you can see the name of the company appear and we can style it a bit by giving it a style equal to Styles dot company name and we can also give it a special property number of lines is equal to one so it's going to appear in one line there we go this is looking so much better now we want to add more information about the job not just the company logo and name so below this text element we can create a new view it's going to have a style equal to Styles dot info container and below it we want to create a new text element that's going to have a style equal to Styles dot job name to which we're gonna pass the selected job as well as the item and we want to Simply say item dot job underscore title react native developer lead react developer this is looking great we are already getting all of the positions and you can notice this one is a bit longer let's find it there we go so what we can do is we can give it the same thing we gave to the above text which is number of lines is equal to one so now it's going to automatically make it fit one line which is wonderful below that text we also want to create another text which is going to have a style equal to Styles dot location and we want to render the item that job underscore country and if we save that we can see the us us all of these are based in the US now but later on you'll be able to search for different countries as well and believe it or not this is it for our popular jobs card and we can even click them but right now they're not pointing anywhere later on they will but overall this is looking great now the only thing that is still bothering me is that some of these don't have the actual image so we need to make a utility function it's going to check whether the company actually has a company logo to do that we can go to our file explorer and create a new folder called utils short for utility functions inside of there we can create a new index.js file now on the internet I found a helpful function that can check the image URL and show us whether the image actually exists it essentially tests it and it gives us a 200 if it works now Down Below in the description inside of the GitHub gist you can find the code for the check image URL function and you can simply paste it right here once you do that you can come back to the popular job card we can import the check image URL that's coming from dot slash dot slash dot slash dot slash utils and now instead of rendering just the employer logo we can do some conditional checking we can check image URL and pass the item employer logo we can put this in a new line if it gives a true response then we indeed can render the item.employer underscore logo if it doesn't give a Trudy response we can render a string of a default dummy job post so we can do it like this and you can find this string also in the GitHub just down below it's going to Simply point to a logo that looks like this job there we go but now we have a different problem it's saying that it cannot get check image URL from data slash data slash dot slash utils so let's save it go there and we can indeed see that it is here so let's try to Simply Shake our device and reload the application and unfortunately still the same thing so whenever you add some new files react native development can be tricky because sometimes it doesn't get it right away so let's open up our terminal press Ctrl C and let's re-run our server by running Expo CLI start tunnel and then you can simply rescan the QR code again I know this can be a pain in the ass from time to time but we are developing mobile native applications for both IOS and Android so there are definitely a lot of gotchas here and we can be thankful for react native for allowing us to do that great now let's scan this QR code with our camera app and once you do that it's going to reload it and it's going to refresh it and there we go now if a job doesn't have a logo it's going to have this demo job logo that we are showing this is looking great and with that said we are done with the popular job card we are done with the use fetch as well and we can go back to index and create the most important part of our app which are nearby jobs essentially that's going to be a similar thing we have right here with the popular jobs but rather they're going to be shown in a vertical list instead of a horizontal one so we'll be able to scroll through them so let's go into the nearby jobs and let's start implementing it right away now it should be much simpler because we have already created the use fetch function which we can simply reuse right here great so on that note to get started with our nearby jobs we can go back to index jump into the popular jobs and simply copy and paste everything we have right here that way we're gonna get a great slate to start the work off of on that note we can get back to index.js move into the popular jobs copy everything and paste it right into the nearby jobs now there will be a couple of things we'll have to change and modify which is normal but this is going to provide us with a nice starting point to start our work in this case we won't need a flat list so we can remove that from here we just need view text touchable opacity and the activity indicator okay so that fits in one line right here we don't need the use State hook and also we're going to need the use router the styles are going to come from nearby jobs dot Style we're gonna need the colors we don't need the sizes and instead of the popular job card we're gonna need a nearby job card which we can also switch right here to nearby and also right here nearby we're gonna use that same old hook we can change this to nearby jobs as well as in the export right here at the bottom and in this case we won't need the selected job and the handle card press the only thing we need is the router and the call to the use fetch function so now if we save it we need to make some modifications to Arc jsx as well we can keep the container the header but instead of the popular jobs it's gonna say nearby jobs and we can leave this as show all now we need to check if we are currently loading if we are going to show the activity indicator else we want to show the text something is wrong and in this case we won't be using the flat list rather we'll simply Loop over the data so let's remove the flat list and let's do the data question mark.map where we get each individual job and we want to return a nearby job card for each job that we have and now you can see we have two loadings the popular jobs and the nearby jobs the popular jobs render in a horizontal list whereas the nearby jobs render right here one below another now we can pass all of the data we need into the nearby job card by saying job is equal to job key is equal to let's do a template string off nearby Dash job Dash and then job question mark dot job underscore ID and finally we can also provide the handle navigate function which is going to be a callback function calling the router dot push and we want to push it to a template string of forward slash job Dash details forward slash job dot job underscore ID there we go and if we save this nothing's going to change immediately because now our turn is to dive into the nearby job card and then Implement its UI and ux design so with that said let's get started with the nearby job card believe it or not the nearby job card is once again going to be similar to the popular job card that we had right here so let's jump into the popular job card let's copy the entire thing and paste it to the nearby job card they're gonna be just a couple of things we have to change so at the top the Imports can remain the same then we need to import the styles from the nearby jobcard.style and then the check image is going to remain in this case we're not passing the item we're passing the job as well as the handle navigate and then also we're going to call it nearby job card and we're gonna also export the nearby job card now instead of here we're going to have a touchable opacity that's going to have a style equal to Styles dot container it's also going to have an on press that's simply going to call the handle navigate so this even fits in one line there we go and right now we have an error saying that the selected job doesn't exist that's entirely fine because we don't need it at all the styles for our second touchable opacity are simply going to say Styles dot logo container the image is going to check for the image but it's no longer going to be an item it's going to be a job that employer logo and then job.employer logo here as well after that we also have to change a couple more things that's going to be a log image right here it looks like there was a typo in the Styles so you can switch this to logo image in the nearby job card and then back to logo image as well and then below the second touchable opacity it's going to be a bit more simple we don't need this company name we just need a view that's going to be a text container this time it's going to be a text where we're going to Simply have the style dot job name and then we want to render the job title and below that we want to render the job type as well which is going to be job Dot job underscore employment underscore type and here it's going to be job dot job underscore title so now if we fix this and reload our application it's loading the popular jobs and their nearby jobs and there we go you can see that here we can scroll horizontally and we can see all of our great jobs but now we can also scroll our app as we usually would and we have a list of all of the jobs in a vertical list format so it's a minimal adjustment you can see that it's also the same photo right here as we have it above and it's same information but just in a different format which allows us to show more jobs you can think of these as popular jobs as the top rated ones that should get more attention and then the ones below are going to be some regular jobs where there isn't a lot of info that we need to share but with that said believe it or not the UI and the ux for the entire home screen has been developed if we go here you can notice that we have the welcome we have the popular and we have the nearby now what we'll have to do is we'll have to focus on the job Details page because if you click on a job you get unmatched route so now is the time that we add a route for the job Details page where we'll be able to read about much more information about a specific job so back in the app we can create a new folder called job Dash details and then within that file we can create a new file called it's going to be square brackets and then within it the ID this is a dynamic route that's going to be different for every other job inside of there we can run rafce to quickly create a new file and let's call it job details and Export the job details here as well and let's save that page if we do that come back and click it again it's still going to say unmatched but maybe if we reload our Terminal One More Time by pressing Ctrl C and then if we run it one more time by running Expo CLI start tunnel maybe it's going to recognize the new page that we have created so let's simply scan the QR code one more time and we'll be right back okay we are back in the app and I'm gonna click the first job right here and we still get unmatched route so let's try to reload by shaking our device and clicking reload that might be able to fix it so it's going to rebuild the JavaScript bundle and now we can select a new job there we go so now at least we get something and it looks like I used a div right here but of course div doesn't exist in react native so we have to import a text element coming from react native and now we can turn this into a text and we again click on one of the nearby jobs indeed we have a new page where we can see the job details ID so now is our turn to implement the job Details page let's get started to get started with the job Details page we can first import a couple of components from react native these can be a text element A View safe area view a scroll view as well an activity indicator and a refresh control this is a new and interesting component we'll use now let's also import a stack a used router and a use search for Rams which is coming from Expo router now we're gonna also get something from react and these are gonna be the use callback hook as well as the use statehuck great now we can move to the local Imports we're going to use a couple of components in this file such as a company component job about component job footer component job tabs component and a screen Heather BTN component as well as the specifics component and all of that is coming from slash components and as we always do we can also import the colors as well as the icons and sizes coming from data slash data slash constants and finally we're gonna import the use fetch hook that we have created from dot slash dot slash hook forward slash use fetch great and now we have our job details inside of here we can initialize our params by saying const params is equal to use search for Rams this is going to allow us to get the specific ID of the job Details page we're on and we also want to get the router by saying const router is equal to use router and then we call it as a hook but now that we have the ID from params.id of the jobs we want to look at we also want to fetch the job details data for that job and thankfully we have already created a hook that does that for us so we can say const data is loading error and refetch is equal to use fetch but this time we don't want to get the search endpoint we want to get the job Dash details endpoint and we also want to pass in the job underscore ID which is equal to params.id so now this data is going to be populated with the job details data perfect now we can start creating the jsx of our page first we're gonna wrap everything in a safe area view because we want to ensure all parts of our page are visible we're going to also give it a style equal to an object where Flex is equal to one and a background color is equal to Colors dot light white like this and we also wanna inside put a stack dot screen now it looks like our changes are not being reflected so I'm gonna shake my device a bit and I'm gonna hit reload there we go now we need to click on a job to get to the job details and there we go it is simply empty now inside of the stack screen as props we can pass options that's going to be an object where the header style is going to be set to background color is colors dot light white you can see that change the color right there then we're going to also add a Heather Shadow visible is set to false which is going to remove this line also header back visible and we're going to change that to false as well so now there is no back arrow and finally we can do the header left on the left side we want to have a callback function that's going to show the screen header BTN which is a self-closing component and inside of there we can show the icon URL to be icons dot left Dimension is going to be set to 60 percent and then finally the handle press the only thing it's going to do is it's going to call the router dot back like this and we can save it you can see now we have our custom back arrow and we also want to do something on the right side so we can duplicate this Heather left change it to Heather right change the icon to icons dot share and remove the handle press so if you want to you can implement this later on the share button is going to be right at the top right and of course we also want to remove the header title so we can do it just like this by putting it as an empty string wonderful now that stack screen is going to be a self-closing component which we can have right here and then below it we can create a react fragment inside of which we're going to have a scroll view like this that scroll view is going to have a property called shows vertical indicator which is going to be set to false we don't want to show it and it's also going to have something known as a refresh control which is going to be equal to a refresh control component where we can say refreshing is equal to refreshing and also on refresh we're going to set the on refresh function call right here so this refreshing right here is going to be a state that we can create on top so right here use state refreshing set refreshing at the start set to false sometimes we just don't get data at the time that we needed so we might need to refresh to be able to see the data so now if we go back you can see on refresh doesn't exist and that's because that's the function that we're going to create soon later so we can say const on refresh is equal to to an empty function for now we can leave it like this but that's going to be implemented really soon so if we do that now and click a job we should be able to see nothing so now is the time that we start adding something to this scroll view inside of the scroll view we want to know if we are loading so we can say if is loading question mark then we want to show of course an activity indicator and that's going to be a self-closing tag with a size is equal to large and the color equal to colors.primery now we get an error because we have to have the other part of the ternary as well we're going to check if we have an error so if we do have an error we can show a text element that's going to say something went wrong then we need to make another check and that's going to be if data dot length is triple equal to zero in that case we can render another text saying no beta and finally if we are not loading if we don't have any errors and if we do have data in that case we can return a view component inside of which we're going to display all of the details so that view can have a style equal to an object where the padding is equal to sizes.medium and where the padding bottom is 100. if we save that there should be nothing because we're just preparing to add content so inside of here we're going to have a self-closing company component so this is where we're going to show the data about the company and we're going to pass some props to it after that we're going to show the jobs tab or job tabs rather like this and to it we can also pass some data later on so the reason why I'm doing this the reason why I separated everything into components is to keep our job Details page clean we don't want to have a lot of lines already we will have a lot but we don't want to have too much so that's why you can separate everything into new components now to this company component we can pass a couple of props that's going to be company logo is equal to data 0 dot employer underscore logo and we can duplicate that a couple of times for the second one we're going to pass the job title which is equal to data zero job underscore title then we can pass a company name data0 dot employer underscore name and then we can have a location which is going to be equal to data 0 job underscore country and now we're passing all of those props to the company page so let's move in there and let's Implement its layout this is going to be our usual component where we're going to have a view a text and an image we're importing some Styles and we can also import inside of curly braces icons coming from da.constance and we can also import the check image URL utility function that we have created before now inside of the props we are getting the company logo the job title the company name and finally a location everything is going to be wrapped in a view that's going to have a style is equal to Styles dot container inside of that view we're going to have another view that's going to be used as a Styles dot logo box so that's where the image is going to be that image is going to have a source equal to we first wanna put it inside of an object such as URI and then we want to call the check image URL and we want to pass the company logo to it if that is true we can render a company logo if it is not true if it doesn't have it then we can render that placeholder string that you can find in the GitHub just down below that's going to be that same logo company image that we had before so there we have it and we also want to give it a style equal to Styles dot logo image and there we go we have this default logo that is great now below that view we want to create another view and this view is going to be for the text that's going to contain the job title so text with a style equal to styles.job title and then we render the job title of course we can style The View itself a bit by giving it a style equal to Styles dot job title box like this there we go just to provide some spacing finally below that view we're gonna have another view and that view is going to have a style equal to Styles dot company info box so this is for more information where we can render a text that's going to render a company name and it's going to render a slash after it because we're going to show a country as well for now we can give this company name if we spell it properly we can give it a style equal to Styles dot company name and we can save it we can see signify technology and now below this text we can add a view and that view is going to contain an image a self-closing image tag that's going to have a source equal to icons dot location the resize mode is going to be set to contain and the style is going to be Style Style location image so this is simply going to give us this little pin on the map and then after that still within that view we can create a text element that's going to render the location like so of course we want to style a little bit by giving it a style equal to Styles dot location name and we also want to style The View inside of which the image and the text are by giving it the style equal to Styles dot location box and if we save it we have a great looking company detail page wonderful at least the first part the details about the company now below that we want to show some job tabs and these job Tabs are going to be something like about qualification responsibilities where we can read more information about that specific job so right at the top of our job Details page let's scroll up and let's create a new variable called tabs is equal to an array where we have about about the job we have qualifications and finally we're going to have responsibilities as well there we go so we have these three tabs and of course we have to create a new you State field that's going to be called active tab so we need to know which tab is currently active the first one that's going to be active can be set to tabs zero that is going to be the about section so with that said we can scroll down and we can pass some props to our job tabs so we can pass the tabs prop which is going to be equal to tabs we can pass the active tab equal to active Tab and then set active tab equal to I think you can guess it set active tab and with that we can control click into the job tabs and we can start implementing the actual tabs that's going to be fairly simple as well we're first going to import a couple of things from react native things such as a touchable opacity of course the view and the text and then the flat list as well to render those tabs finally we're gonna also import some sizes for paddings and such coming from that slash dot slash dot slash constants great now our Tabs are already getting some props because we passed them so that's going to be tabs active tab as well as the set active tab great and we can return a view with a style equal to Styles dot container inside of which we can render a flat list that is going to be a self-closing element that has to have the data prop equal to tabs and on top of data we also need to have a render item property where we specify how we want to render those items by creating a callback function we get the item data right here if we destructure it and now each item is going to be a tab button dot tab button is a self-closing component which we can create right here on top by saying cons tab button is equal to an arrow function with an instant return to that tab button we can pass over the name equal as item and we can also pass the active tab equal to the active tab and finally we can pass the on handle search type where we can set that to be the active tab meaning we are searching for that specific thing now of course we have to return something for that tab button so for now we can simply leave that as a touchable opacity where we have a text element that's going to say the name of that Tab and of course we have to get something from props what we just passed that's going to be name the active tab as well as the on handle search type and there we go we can see about qualifications and responsibilities soon enough we'll be able to switch between those now if we go into the flat list below the render item we need to make it horizontal so right here we can make them appear next to each other we want to say shows horizontal scroll indicator set to false and we also need to give them a key by saying key extractor is equal to item pointing to the item and then we want to give it a Content container style equal to an object where the column Gap is equal to sizes dot small divided by 2. now they're going to be divided and finally we have to now style the actual tab button by giving the touchable opacity a style equal to styles.btn to which we pass the name and the active tab so now you can see the first one is active the other two are not and we also need to give it an on press on handle search type so now once we click it it's going to become activated and finally we can style the text by giving it a style equal to Styles dot BTN text and we pass in the name and the active tab that way it's going to know whether it's active or not and there we go we can actually switch between these three really great looking tabs now of course we're going to focus on the content that lies within them so to do that we can jump down and we can go below our job tabs into something that's going to be dynamic and that we're going to call display tab content and we're going to call it as a function this of course does not exist yet but we're going to declare it right here above so we're going to declare a new function const display tab content which is going to be an arrow function and it's going to have a switch case we want to call a switch that's going to have the key equal to active tab and then we're going to have a couple of different values active tab can be qualifications the second case is where the active tab is going to be about and then the third case is where it's going to be responsibilities like so so now we have three different cases that we can return some Logic for let's first focus on qualifications if we are on the qualifications tab we want to return we can return a component that we are yet to create called specifics and it can be a self-clausing component that's going to have a title equal to qualifications and it's going to have points equal to data 0 dot job underscore highlights question mark dot qualifications and we can have a special new JavaScript operator question mark question mark So if that doesn't exist we can simply show n a meaning no data great so now if we save this and if I open the job Details page you can see about is turned on and we cannot seem to see anything yet even though we are returning the qualifications but right now we're in the about not in qualifications so let's switch to qualifications and we can see specifics that means that we are actually passing the data and we are rendering the specifics but we're just not showing anything in there as of now so we can dive into the specifics component and actually render the data about the qualifications for this job that we have to do that we can get the view and the text coming from react native get the Styles and get the title as well as the points from the props because we're passing them right here then we can have a view that's going to have a style equal to styles that container and right below that we can have a text element that's going to render the title like so we can see qualifications and then column we can also give it a style equal to Styles dot title okay that made it a bit better and now below that we can have a view that's going to have a style equal to Styles dot points container and inside of there we want to Simply map over the points by seeing points that map we get each individual item and the index and for each item we want to return a view that's going to have a text element with a style equal to styles.point Dot and that's going to be a self-closing text element and we want to have another text element that's going to be a text with that's going to render the item property if we save that we can see a little dot right here and then an A so let's also provide a style to this View by saying style is equal to Styles dot Point wrapper and key is equal to item plus index to make it unique okay also this is not going to be a text it's going to be a view that's going to show that dot and also the text is going to have a style equal to Styles dot point text like this now if we go back and if we click on a specific job and go to qualifications we can see an a that means that maybe the data is not being properly fetched so let's try to go to some other job as well and we again see an a let's go for this upwork full-time job and we have an A that means that we are not properly fetching the data for these points so let's look into it we're trying to do data 0 dot job underscore highlights dot qualifications and that looks good to me but the API call this with a capital Q letter why is that the case I'm not sure but they did so if we save this we're gonna actually get full job data in this case it's just be fluent in English but if we go to some other job such as this senior react developer we can see a list of full qualifications that they have wonderful with that said the first tab is done and we can move on to the about section so if we are on the about we want to return the job about and we can provide the info to it so we can say info is equal to data 0 dot job underscore description or no data provided like this and we can save that and jump into the job about functional component this one is going to be even simpler the only thing we have to do is destructure the info give a style to this view equal to styles.container this text is going to render about the job and we can give it a style equal to styles.head text like so and then we can render a view that's going to have the style equal to Styles dot content box and finally inside of it we want to render another text that's going to say info and we can also give it a style equal to context text and we can save it and now if we go to the about it breaks because the context text doesn't exist because it's supposed to be Styles dot context text and now if we go into a new job immediately on the about we have the full description about this specific job and just to show you it's going to be different for every single one so we have the job description for upwork we also have for this company right here looking great as you can see writing apps in react native is just using some views some texts and then applying some styling but overall this is looking great so far so let's go back from the about close the specifics and now let's focus on responsibilities so thankfully for us responsibilities is going to look the same as the qualifications so the only thing we have to do is copy the specifics paste it right here under return and then change the title to responsibilities and instead of passing the qualifications we're going to Simply pass you can guess it responsibilities that is great make sure to have the capital r right there and now if you go into a job we can see the about section we can see the qualifications and the responsibilities are an A in this case but if we go to a different job and go to responsibilities it's still n a so it's possible that we misspelled something yes we did I spelled it responsibility test but it's supposed to be responsibilities and I need to change it all over the place as well so there we go now I spelled it properly and we should be good so if we hit responsibilities we can see them we can see the qualifications and the about the job as well this is looking great so now our entire job details is almost done but we're gonna also add a button at the bottom so we can actually apply to that specific job that's going to lead us straight to the browser so it's actually going to open up a page of this exact job in the browser and then we can apply directly there so let's focus on doing that right now by scrolling a bit down going below this display tab content which we recently did below the scroll View and there we're going to render the self-closing job footer component the only thing we have to pass to it is a URL that's going to be equal to beta0 question mark dot job underscore Google underscore link so this is going to give us the actual link of that job where we can apply or if that is not the case we can go to https column forward slash forward slash careers.google.com forward slash jobs forward slash results this is only if the Job Link does not exist but that should not happen often with that said we can now control click into the job footer and implement it as the last part of our job Details page but as you can see everything here is within the scroll view that's really important note the scroll view ends here so everything that you can see is going to be here you can scroll through it but now the footer as you can see remains on the bottom because it's outside of the scroll view just a thing to know know now we can start focusing on implementing this great looking footer and implementing the footer won't be any tougher than implementing our qualifications about our responsibilities the only thing we have to do is import a couple more elements from react native such as the touchable opacity the image and for the first time so far something known as linking we can also import some icons that we have saved in our assets coming from that slash constants and we already know that we're passing the URL to our footer as a prop with that said we can give this view a style equal to Styles dot container and immediately inside of there we can render a touchable opacity within it we're going to render the image that's going to have the source equal to icons dot heart outline the resize mode is going to be set to contain and then the style is going to be equal to Styles dot like BTN image and if we save that you cannot see anything yet but if I give this touchable opacity a style equal to like Styles dot like BTN and save it you can see this heart icon appear at the bottom now we won't do the functionality for this right now but if you want to you can Implement something similar to local storage but for react native applications and then like the jobs that you want great but more importantly below that touchable opacity we're going to have another touchable opacity and this one is going to render a text element that's going to say apply for job that's what matters that text is going to have a style equal to Styles dot apply BTN text like so and also to detachable opacity we can pass a style equal to Styles dot apply BTN and you can see how great that is looking but if we click it nothing happens right now so let's give it an on press it's not a non-click it's an on press and we can say linking dot open URL and we pass the URL we want to open so now if we save this and click apply for job it's going to open that specific job listing wherever it is posted on Google jobs LinkedIn Glassdoor or so on and then you can directly apply right there isn't that great with that said our entire job Details page is now complete we can first find the job that we want read more about it get the qualifications and get the responsibilities as well see the type of deposition in the name the company name what is the country of that company and then we can apply for that job isn't that great now right here we can click on jobs we can see their job details but what we haven't yet implemented is the search functionality so right here when we type react we want to be able to click and get only react related jobs or maybe something else that's going to be up to you so let's close all of the currently open files and go all the way to our index which is the home page and now we have to pass some props to the welcome because in the welcome we have all of these little buttons and we have the search as well and there we can do the logic for the search so let's do that next to our search we need to pass our search term and the handle click button so right here at the top of our home page we can create a new use State field called search term set search term and at the start it can be set to an empty string just like so now to our welcome component we can pass a search term equal to search term a set search term equal to set search term and finally a handle click which is going to be equal to a callback function that's going to check if the search term exists so if search term and only if it does it's going to do a router dot push so it's going to push to a dynamic string of forward slash search forward slash and then search term so we're going to re-navigate to the search page which we haven't yet created great so that's what we're doing right now and now we can utilize that within the welcome component by going into it and we can accept the props we just passed that's going to be the search term the set search term as well as handle click great now where are we actually going to use that well of course inside of our text input the value of the text input is going to be the search term and then on change Handler we're going to get the text and we simply want to set search term to be equal to text in react native you don't have to do that e.target.value in here you immediately get the value great now also I think we have a button right here where we set active job type there we're already redirecting here so I think we should be good to go so if we save this file now once we click the search button we should actually re-navigate to the search or not yet we are going to change the input value but we have to change this search icon to actually do something so right here we have to use this handle click that we have created handle click there we go so now we're going to point to the search page now let's take our phone in the hand and let's type something like react and let's click search as you can see it says failed prop at the bottom let's see what that is all about failed prop I think this is something not related to what we have done recently we're gonna fix that soon but we indeed do get routed to a new unmatched route and it's unmatched because we haven't yet created it so we can do that next we can go to our file explorer and we can create a new folder cold search inside of the search we can create a new file called square brackets ID dot JS that means that it is a dynamic route and this page is going to be almost exactly the same as our home page we won't have this welcome part where the search is and we won't have the popular jobs but we're going to reuse this exact nearby jobs list the only thing that the search is is essentially a list of different job postings based on that search query so for that reason we'll be able to reuse most of the code we already wrote so down in the description within a GitHub gist you'll be able to find a file called search and then you can copy and paste it right here so if you notice that we have a flat list right here and that flat list is just rendering the same nearby job cards that we had before so nothing new when it comes to the way we fetch data you can see that we have the same search as we have in the use fetch we essentially call the API with a search pass over the params and make a request so now the only thing we'll have to do is you'll have to add your own API key which we can take from the use fetch hook so if we go to the use fetch you're going to have your own key right here which you can copy and then you can pass it right here into our headers right here instead of this rapid API key and that should be good great once you have entered your API key we might need to reload our server so let's press Ctrl C and then re-run the Expo CLI start tunnel because we have added a new file after you do that you'll be able to rescan the QR code and we can check out our great search page and there we go we are on the home page and if I search for something like JavaScript and press search you can see that we indeed do get re-navigated to the search page although there are some slight issues we have invalid prop value of type object supplied to forward ref text input expected string so we can definitely look into this but more so we can see our search results we got them back and we also have a proper pagination built in place although at the top of our search page you can see that we have some kind of an object object so let's go ahead and look into that together that's going to be right here we can see that params that ID is being rendered above the job opportunities but for some reason it looks like that param's ID is an object object what if we click part time here this time it works properly part time and we can see the part-time jobs if we click right here for contractor we can see contractor but only if we do a search and then click search we have object object so it must mean we're doing something wrong with the actual search so let's see where that button is to search for jobs it is right here icons search and there we're calling the handle click button now we're passing the handle click all the way from the index so let's see how the handle click looks like and what is it about we're going to router.push forward slash search forward slash and then the search term so this is looking good to me we're passing the search term we want to search for Yep this is looking good so if we go back one more time and we search for something like react this time and press search still the same thing and the reason for that is maybe we're not properly changing the input while we type so if we go into the welcome here in the text input you can see that I put it as on change but on change doesn't exist in react native rather what we have is on change text so we should have called it on change text these are some little differences from react and react native so now we should be actually updating the search term and we should be passing the right search term to our search let's check that out if I go back one more time and search for react I guess I have to retype it again so let's change react and search and there we go job opportunities for react this is wonderful and keep in mind we have full pagination at the bottom as well as we can now navigate to the job Details page of each one of these jobs Isn't that cool and with that the majority of our application is fully complete we have a wonderful looking fully functional home page where we can search for full-time jobs contractor jobs or part-time jobs as well we have loading indicators we have popular jobs at the top we have nearby jobs right here and we can open up the job Details page of any of these jobs to see the about qualifications and responsibilities this is looking great of course the show all buttons right here are not working the profile icon or the hamburger menu but these are some of the things that you can Implement on your own so far this has been a great introduction to react I know that it might seem that a lot of code was provided to you but that really is not the case the only thing that was provided was the actual structure of the file explorer but everything else every single little detail every single little component was coded by you so now we know that we have some touchable opacities images we don't have divs we don't have P tags but we have texts and we have use so I hope you really learned a lot this was just an introduction to react native to teach you how to develop this great react native application so great job on coming to the end of this video it was definitely a great video and a bit different from what we usually do on the JSM YouTube channel now let's close all of the currently open files and before we actually deploy our app to the Internet so you can put it in your portfolio let's do a final few fixes you might notice that we forgot to add the routing on our popular jobs so right now we can only open the job details from the search or from the nearby jobs but we cannot open it from the popular jobs so let's go into the popular job card right here and here you're gonna notice that we have on press handle card press which we're passing over from the popular jobs so let's navigate to the popular jobs component and see what that handle card press does it is here right now we left it as empty so let's go ahead and focus on implementing that functionality trust me when I tell you it's going to be pretty simple the only thing we want to do is call the router.push and navigate dynamically to forward slash job Dash details forward slash item dot job underscore ID and that is it finally we also want to set select the job to be equal to that job now if we save it and Shake our device and reload we should be able to navigate to one of the popular jobs detail pages right now let's test it out let's go with prod aware Solutions and there we go you can see the details and it is also currently selected so now we can go choose a different one that works as well they all seem to be working that is wonderful so we can just keep testing it out for this one we got no data and this can sometimes happen which is why we introduced that refetch function so we can go into our job details meaning the ID file and here we have imported this use callback and we also have imported this refetch so let's try making that work right here we have created this on refresh function which is going to be equal to a use callback hook and you want to pass it a function that we can call with the dependency array being empty there we want to set refreshing to be set to true we want to then call the refetch and then we want to set refreshing to be false essentially in here we're going to make another call to this and it looks like I misspelled it that's going to be use callback so now if we try going through a couple of popular jobs again you can see we're fetching we got it and we can try going through this to see if all the data is there yep so far so good we can keep going and everything is looking great and the app feels so natural in my hand you can just use it as a regular application on iPhone you can also switch back so you can see how Native it feels like right you can go back to the previous page you can open an app you can apply to this job for example and it's going to open it up in the browser that works as well so you can keep doing everything you want to that is great switch between qualifications about and you can open different jobs as well this is working perfectly with that said our application is now fully done and we are ready to deploy it using Expo to deploy our application we can stop the server from running and then we can clear our terminal inside of here make sure that you have installed so npm install Dash G Expo CLI if you have used that tunnel as I have then you already have it installed if not you can install it right now the only thing you have to do is run a command called Expo publish and run enter it's going to ask to publish an update yes that's fine let's install Expo updates as well so this process is going to take about a minute and I'll be right back oh and the build failed we got uploading JavaScript bundles failed with 503 that's usually not an error related to building the code and Publishing it but this could be an internal Expo CLI error so what I did is I just re-ran the Expo publish command one more time immediately after and for me it worked the second time so the publish was completed which is great so just you know if you do get that 503 or any kind of other error you can just run Expo publish again and it should work as it did for me right here now if you control click the learn more page you will be redirected to this site right here where it says when you successfully run es update for your project a project page is created that shows your app icon and description and includes a QR code that can be scanned to open the app in some situations the Expo client for Android can open any app but due to limitations on the iOS platform you're only able to view your own projects or projects published to a development team that you are a member of of course if you want to be able to view it everywhere you can deploy it to the respective App Stores of your operating system so with that said this is how that site looks like this is the link that you can add to your application if you want your Android users to really quickly test it out as you can see we have the name of the application as well as the QR code which people can scan to open your application if they have an expo go application now since this is not going to cover one hundred percent of devices it might be best that you showcase this project only with your GitHub repository with your code plus the screenshots of the actual application and then if somebody wants to they can run it locally and then play with it because this QR code is still not perfect it only works with Android and apparently if you scan it for the first time you're gonna get an unmatched route error and then if you click go back it's going to render the application apparently there are still some issues with the Expo go routing so by the time that you're watching this video that might have been fixed if that is the case you can go through the description and maybe there's going to be a fix there if not just showcase this project by showing your code and the screenshots of the application everybody else can run it locally if they want to with that said we've came to the end of building our phenomenal developer job search application thank you so much for staying with me until the end of this react native crash course video and I hope that you liked it and as I mentioned in the beginning in our JSM masterclass experience we also build an application just like this one but you're gonna have to build it with the mentor help with the help of your team as well it's going to look something like you've just seen on the screen right now a complete developer job search platform there we go you can see it's going to have some latest job cards recommended for you and many more functionalities so if you want to really improve your developer knowledge you can join us in the next JSM masterclass experience cohort with that said huge thanks to Rapid API not only for sponsoring this video but for creating such a phenomenal platform when us developers can find all the apis we might want to use also huge thanks to the open web Ninja for creating the J search API that allowed us to make all of these API requests to be able to see our developer related jobs that's gonna be it for this video and I'll see you in the next one have a wonderful day [Music] thank you

Channel: JavaScript Mastery

Views: 172,436

Keywords: javascript, javascript mastery, js mastery, master javascript, app development, react native, react native tutorial, react native project, react native app, react native app tutorial, react native tutorial for beginners, react native tutorial 2023, react native 2023 tutorial, react native 2023, react native app project, build react native app, react mobile app, react mobile app tutorial, react js, rapidapi, react native mobile app tutorial, react native vs flutter

Id: mJ3bGvy0WAY

Length: 135min 42sec (8142 seconds)

Published: Sat Mar 18 2023