React Native MacOS App Tutorial – Book Management System

Key Takeaways

in this course you will learn how to use react native to build a sophisticated Mac OS app that allows users to search and explore books using the Google Books API and manage their personal bookshelves you'll also Implement AI powered summaries and ensure smooth navigation and State Management by the end you'll have a fully integrated app with Advanced features and understand how to build your own Mac OS applications Brian maguana develop this course he is an experienced developer and course creator hey everyone in this video we'll be building a book management Mac app using react native so let me give you a quick demo you can search for any of the book we are pulling the data from Google Books appi and we are also integrating the react navigation for multiple screen support you can add this book in your bookshelf so we are using Zan for managing the state across our app at the bottom you get this AI summary we are also implementing the Google generative AI to get the AI summary and on top of that we'll be using the t St quy to manage all of our loading and error State as well as you can see you get the a summary in the back you will get the book sell screen here you can manage all of your books even if use reload the app we won't lose our data because we are storing them locally as well so without any further delay let's get started so to create react native project for Mac OS you need two things on your Mac so first open your browser and search for nodejs download the nodejs all right once is download just open the package continue and install all right so the package is successfully installed just minimize the browser the second thing that you need is the xcode so open App Store and search for xcode you can X you can install the xcode from here so that's the only two requirement for this project now come back to the browser and now let us search for the react meos all right so this is the main GitHub repo it's from the Microsoft and it's actually a fork of react native so let us go to the documentation here build for meos all right let us copy this command to initialize our project and open your terminal move to the folder where you want to initialize this project and paste this command and don't forget to write your project name let me write book app it will take some time do you want to install C PS now so you can opt for the know at the moment we will do that later and once your project is initialized you can just open it on any code editor of your choice you can use vs code I'm using Zed all right so this is our project come back to the documentation now we want to install the maos extension this part is most important so just run this command and if you encounter this same error just scroll through the error and copy this Command right over here and run this without the S flag just remove the S flag and run the command now run the command to install the Mac OS extension again as you can see it's successfully installing all the dependencies if you come back to the browser this is the command to run the app so we will just copy this and go to the packet. Json and we will add one more script Mac and paste it over here all right let me save this and now to run the project Yan Mac okay so it started the Metro Bund as you can see over here and here we have our first Mac OS app as you can see it's running natively on our Mac OS so come back to the code editor so I'm going to close the app for the moment while we make some breaking changes all right so first we will create a source folder let's name it SRC and move this app. txx file into SRC folder delete everything create create a new folder let's name it screens at the moment we only have one screen uh and later on the video we will implement the react navigation to support multiple screens so let's name our first screen as home screen and let's export a reactnative component you can use Snippets for it all right let's create some Styles let's create a style call container it will be Flex one so it covers the entire screen and let's provide the background color all right it will be a dark background all right currently it's giving us the es lint error for the self closing element so we will fix that in a moment let's first close it and in the app. TXS file this is the main file that render on our screen we will simply return the home screen here all right let's go to the index.js file here let's import it from the SRC app all right that's it for now yeah Mac and let's run it again reload all right as you can see we have nothing at the moment all right all right let's create our first custom component search bar in the SRC folder create a new folder call components we will put all our custom component in this folder and create a new file called search bar. TSX and Export our react component let's go to the home screen here we render our search search bar component all let's save it and let me put this screen side by side let's import text input to take user inputs provide some style over here styles. container let's say style. input styles. create and the container all right we can't see anything yet all right in the input let's Prov the background color white as you can see we have our text input let's provide some padding let's say 15 all right now we can see let's increase the font size to 15 let's add the color black all right this is our input let's provide some placeholder text search books and let's provide the styling for the placeholder placeholder text color will be black all right now let's import pressable using Pressel we can create buttons let's add the text let's say search let's add Style of button here let's say button text all right here we have button let's provide some padding horizontal let's say 15 let's add the background color you can add any color you want all right we want these both component in the same row so let's provide Flex Direction row and this text input will basically take the whole entire space available so let's add x one all right all right now let's add some padding to the entire container let's say 15 okay that looks good and add some Gap over here as well let me reload this one all right let's add some border radius of that's a 10 maybe 15 all let that looks good and in the button let's say alline items Center and justify content is Center let's increase the font size to let's say 15 and I font weight to make it a little B bold let's use text transform to capitalize all right let's add some border radius of five let's say we want to add it to the button container all right let's increase this Gap to 20 and here in the button let's add ping horizontal to 20 and we decrease the Border radius 10 all right so now we have our first custom component for the search bar here we can search for the book all right all right now let's talk about the Google Books API go to your browser and search for Google books API integrate with the Google Books repo come to the using the API so here is the documentation for using the Google Books API we don't really need the API key for authorization we can make the request without it and if you just scroll down here we have the API uint that we are interested in so let's test this API key let's come to the postman post m is a tool uh which allow us to taste the apis just logged in with your account you will get a dashboard like this let's create a blank collection let me name it book Macos F and let us create get a request add request search books and let us copy this API endpoint and paste it over here as you can see it picked up the parameters it has one parameter called Q here let's pass the book title let's say clean code and send a request as you can see we are getting back the data under the items it's an array of object and each object is represent a book it has ID volume info under the volume INF for we have title subtitle authors description Etc so this is the information that we need to show in our app so now come back to your browser and go to your home screen now let's create a state to store whatever user enters in the search bar for that we will create a state called let's SEC query set query and we will use UST State hook initial value will be empty string if we save this and if you have over this query you can see that it has the type of string because we have provided the empty string here but if you want you can exp specifically provide string like that but it's not a requirement typ script infers the value from the initialization that we have created all right so let's pass this query and set query to our search bar let's say value will be very and set value function will be set now let us modify the search bar to provide the props it will take props and the type will be I search bar I prefixed it with I because we are going to create an interface but if you are comfortable with type you can also create a type interface I search bar at the moment it will have two types value will be let's say string and set value if you go back to the home screen and power over this you can find the type of the set query so we can use that it has react dot dispatch re dot set action and the type will be string we don't need to memorize this you can just find out from here just hover over the element and you will see its type all right and props let's destructure it over here value and set value so our value will be the quy and whenever user changes the text we want to set it to the VAR so we'll pass the set value over here all right now let's install a library called exos you can also use fet to make the API calls simply do Yan add xos all right now let's create a function which will make the call to the books API let's name it search books it will be an sing function all right exos dog here we will pass the AP and point so if we go back to the postman here is our API end point and we will provide the query in param Q and the query will be this query that we have just created and simply return the data but if you see this in Postman the data holds this one object but we are not interested in that object we are interested in the items array so we will actually returns response do data do items and since it's it's an Asing function we will have to avoid it let me save this all right now it's fine now if you want you can pass this function down to the search bar and call it on this button click but we we don't want to do that because uh if we do that we have to create a state ourselves let's say books and store all the data in that books and we have to manage the error and loading State well so what we're going to do is that we will be using a library called t St query it will take care of all the states and it also provides the casing functionality so let's come back to the browser and search for Stand St p hold right read the docs go to the installation here you can see the Yar command just copy this and past it over here it will install the react query which is also known as D1 St qu if you go to the Quick Start these are the input that we will need so simply copy this all right now go to the app. TXS file which is our entry file and paste the UT here as you can see we need to create a query client so let's just copy this and create a query Cent after that we have to WRA our entire app in this query client so let's just do that and in here we will Ender our home screen so now our entire app has the access to the the perant now let's get back to the home screen now let's import the use Query hook and we will call this hook here now let's pass down the query key now query key is very important while using the use Query because because it based on this Keys it provides the casing feature in your app it takes an array of string so we will pass the query itself as the key then the query function the function that we want to call we want to call the search books function and now if you save this code it will fire up this function search books as soon as this component mounts onto your screen but we don't want that we want to manually trigger it so you can provide the enable as false now it returns data and it also return the refresh function so that we can manually trigger our query now we can pass down this refresh function in search bar all right now let's go to the search bar and make necessary changes in the props it's a function let's destructure it over here let's call it whenever user press enter while typing over here on submit editing we will call this function and in the pressable we will pass the onpress event all right back to our home screen let's just console lock the data as of now all right let's search for clean code and if I press enter hopefully we will see the data in our terminal and here is our list of books now if you take a look at our home screen component here it's basically responsible for for the data fetching and the rendering of this component as well so ideally you should always separate your data fetching logic and for that we are going to create a custom hook so in your SRC folder create a new folder called hooks in that create a new file called let's say you search and make sure that whenever you create a custom hook it always start with the use SK but because that's how react is going to know that it's a custom hook all right let's export it now what we need to do is that copy this entire code and move this in use search all right now first let's fix the import set all right if you see we are getting the error of query because we have defined the query state in home screen so we need to pass that as an argument where let's say the string let me just save this and we don't want to destructure it over here we simply want to return the entire result the use quy return us all right come back to the home screen we don't need this function here anymore and we don't need to call the use hop over here as well we can simply call the use search it takes query as an argument delete this Imports as well let me save this come back to the terminal all right now if I search for the books let's say make time as you can see we are still getting the same result but if you look at our code it looks much cleaner now now if you hover over the data you can see that our data has any type let's fix that because we haven't provide our proper types in the function let's create a new folder called types create an index file and let's provide a type over here let's export it the iBook you can also create the type I'm using the interface all right to provide the properties that iBook will have you can simply go back to the postman and you can just refer to this data structure it has ID it has volume info under the volume info we have title authors authors is an array of string we have description we have page count Etc all right so let's start with the ID it has a string volume info it's an object it has a title will be of typ string we have authors of array type of string let's say average rating it will be of type number we have description of type string if you look at this we have image links and we have the thumbnail so we will use this thumbnail over here measurings it's an object and we have thumbnail which will be a stram we will use this image for our book and lastly we have page count as of now we will be using this properties in our book component but we will add more types uh as we progress in the video so come back to our use search hook here in the search books function let's say since it's an sing function it returns a promise and our data type of these items is the array of books so let's say iBook and it's an array let me save this now if you go back to the home screen and hover over to data as you can see it has proper type now it has a type of book so this is how you can provide the types for the data now let's create a component so go to your components folder create a new file let's name it book item all right report react let's just return a view make sure to import everything from react native export default book item now let's render this book item component in our home screen all right now let's create a style set do create here let's provide the Styles we'll provide the container we will create it in the later part so first we will have an image of the book so for that let's import the image component it will take a source and we to pass in the URI let's use our D data as of now so you can go to un Splash to find the images let's search for books and you can get any of the books from here let me take take it this one pass it down over here let's provide this style all right in the container list first provide some adding time and image let's provide the width of 200 let's say and height is about 270 as you can see our image is visible here let's provide some border radius let's say 10 no let's say five all right all right let's create another view in this view basically we will display all the information regarding the book Let's name this this info here use the text component to show the title of the book let's say the title of the book is clean code let me save this and you can see we have clean code over here all right let's provide some style it will be title now we want all the book information in the same row as this book image so what we will do is that in the container we will provide the flex Direction low let's provide some Gap let Set this is our info let's make this title a little bigger so provide font size that's set 22 font with 500 let's make it capitalize now let's show the author if you so remember in our book interface that author is not a string it's an array of string so we will have an array of string here let's provide the array let's say Robert Martin whatever the array we will have we will join that so it will convert the array into a string and we will join it with the comma let me save this let's provide this time authors let's increase the font size let's say 16 let's change color you can provide any color you want all right in the info let's provide some Gap let's set well all right so there's a gap between each component in this info container so we have the title we have the authors we are not showing the rating at the moment because we haven't added this support for icons in our app yet so we will do that once this component is finished so let's show the page count let's say 350 pages let's create Pages font size will be let's say 15 just copy this and we will display the description here let's save the font size 16 as well all right for the description let's search for the Book C code and copy the description you can write anything over there we are just doing some dumy data all right it's going out of the screens because we want that info container will take the entire space available so let's proide Flex one over here and we are good to go now we can go to the home screen and release this book item component all right now let's make some changes to the book item so it will take the props the type will be iBook that we have created earlier let's destructure all the properties we have the ID we have the volume info and in the volume info we will have all the information that we need over here let a volume first we require the image so image will be in the image links in the U you can provide the image links dot it will have a thumbnail now not all the images will come with the image it might be undefined for some of the books so for that we will pass the default image URI so if the thumbnail is not available it means that if the thumbnail is undefined then image component will use this URI to show the image now second we need is the title we can show the title over here then we will have the authors all right then we have the page count and last we will have the description all right we are good to go now let's use flat list component from react native as the name suggests we use the flat list to render a list first we need to provide the data itself it should be an array then what we want to render render item it gives us the item this item represent each element from the data array so we just need to render the book item now we need to pass all the properties that the item object holds so we will use the spread operator to pass all the elements as all right item now the third prop is key extractor so each element in the data array must have a unique key so that react can provide the caching functionality under the H so in our case each book has a unique ID let me save this and provide some styling as well let's a ping of 10 and gap of five now let me search for a book let's say make time as you can see we are getting the data one problem though is that the description is too long let us fix that in the description we can provide the number of lines let's say five all right now let's also create a divider component so we can render that in between each of the books book in the components let's create a new file called divider. DSX all right it will be a simple line let's return our react component and let's use a view from RE we can self close it and let's provide some style let's name it container and let's create the sty Street all right let's provide the height of just one background color you can provide anything you want let me WR the white let's give the width of 95% and we want this to be Center so align cell will be Center let's X Port it all right so in the home screen we can provide item separate a component and we will divider for that so if I save this as you can see we get the divider in between each of the book all right now let let us add the support for icons in our app for that you need to close the app all right come to the browser and search for react native Vector icons this is the package that we are going to use so come to your quod data and run this command to add the retive vector arons and their types now if you scroll down to the dogs so browse through your node modules and find the react native Vector icons all right navigate to your project and find out first open the maos folder and open this xcode file in your xcode all right now as suggested in the dogs go to your node modules find the react native Vector icons folder here it is and here you will find a fonts folder here it is all right just drag this folder into a book app and select book app Mac OS not the iOS and create folder references now open the info file just copy this one under book app maos open the info file right click over here add new row and paste application fonts resource path and for the value just type fonts all right that's it just save your file and close xode now open your code editor now we will run our app Yan Mac all right you can come to your browser and need react netive Vector icons explore all icons here you can search for any icon you want we want the star for the rating it's provided from the end design and the ion name is star all right come back to your code editor go to dbook item import the icon from react native Vector icon here just type the end design you don't need the calies all right let's use this here icon name is St let's provide the color it will be yellow let's provide the size let's set 20 let me save this all right if you search for any book as you can see we have successfully integrated the icons in our project so let's display the average rating as well after the author average rating now not all the books might have the rating so we only want to display the rating if it's available so let's do average rating and if it's not undefine then let's create a view and under this view let's copy this and paste over here let's provide the text here we will display the average rating let's provide some style styles do let's say rating container in the text let's say rating all right rating container we want this to be display in the same row so let let's say Flex direction will be row allign items to be Center let's provide some gap of let's say five and provide the rating as well let's say phone size will be 15 let me save this and if you look at this as you can see the clean code has five rating the clean code in Python doesn't have a rating so it doesn't render it here let's search for another book let's say Atomic habits all right here is the rating now let's add the icon in search as well just type search we can use from the feather go to your search bar let's just copy this from the book item color will be white let me save this all right we have the icon and let's provide us some style in the button let's say Flex direction will be row and let's provide some G maybe 10 all right so we have added the icons in book item and search bar as well now let's add multiple screen support in our app this project doesn't have any inbuilt navigation system so we are going to use the react navigation Library search for react navigation there are multiple dependency that we need to install first of all copy this install scroll down installing dependency into a be Rea project copy this command as well all right now come to the hello react navigation and add this stack Navigator as well St navigation basically means that whenever we navigate from one screen to another all of that screen will be stay on top of each other all right here is the example let's follow it import these dependencies open your app. TSX file and past it over here now we need to create a St Navigator paste over here as well now this is the navigation container that will handle all our navigation just remove the home screen don't save your code just yet because you have to go to The Navigators we can see we have two type of St Navigators one is St second is native Stak so we are going to use this St one all right install this as well now install the reative JLA hander all right just copy this import and instead of create native stack Navigator we'll be importing the create stack Navigator and use that yeah as well all right now if we have save our code you can see we are already seeing the header now we don't require header in our app so in here you can provide screen options let's say header Shone false all right now let's create our second screen in screens folder create a new file let's name it book scen import react we will simply return a react component and create a view let's export it let's provide some styling let's create object called container let's do Flex one and for the background color we will be using same as the home screen so let me just copy from that let's provide this here all right if you go to the f. TSX file here now we can create our second screen it will be book screen and name of the screen will be book all right so we have created our second screen now let's navigate from this home screen to this book screen let me just add the text over here so that we can know that we are on the second screen let's say book screen all right now if I go to the app and search for any book let's say clean code so whenever user click on any of the book we want them to redirect to the book screen so let's go to the book item here we have view to add the onpress event we need a pressable so let's let's replace it with the pressable all right now we need to create a navigation object navigation is equal to we can use the use navigation hook now on press event we'll provide a function let's say navigation then we can use navigate and here we need to provide the route name as you can see the route name is book let's say book let me just save this all right now if I click on the C code as you can see we are direct to the book screen so whenever user click on any of the book we need to pass the book ID from the book item to the book screen so that in book screen we can use the book ID to make request to the Google Books API to F the information regarding that specific book so come to your name navigation and here we can pass the book ID and what we need to pass is the ID all right currently we are getting these typescript errors but don't worry about it we will fix that soon now we want to receive it in book screen here we will use another hook called use route all right now we can restructure it from the route do params book ID let's add question mark because it can be undefined because we haven't provided proper types yet let me save this and here in the book screen let's say book ID and display the book ID as of now let me save this in your app search for any of the book let's say deep work and if I click as you can see we are successfully getting our ID here all right now let's come back to the browser and search for Google books API again using the API so previously we have used this API endpoint to perform a search it returns a set of books but now at the moment we need only one book so scroll down retriving a specific volume so we are going to use this API Endo it takes a book ID and Returns the information regarding this specific book all right now close everything and go to the hooks folder we will create a new hook called use book which will be responsible to fetching the data for a specific book all right now it will take a book ID as an argument which will be string let's export it all right now let's create a function let's say get now it will be an ning function we will use xos here we will use this string interpolation and instead of the volume ID let's provide the book ID and we will return response. data we can also provide the return type it's an sing function so it returns a promise with the type of book so we can use the book interface all right now we will use the use Query and simply return the result first we need to provide the query key which will be book ID and second is query function we want to execute the gate book all right it looks good now let's go to the book screen here once we get the book ID let's make a request to use book hook passing the book ID it Returns the data it also Returns the is fetching it's a property that will be bullan and if any error we get the errors all right so if our data is currently fetching so we can type a condition over here we will return a loading State let's import the activity indicator from react native we can pass the color as well if we get any error let's just show the text and finally let console log the data we are getting these yellow warnings it's because of the es link and we will fix that s all right now let's go to the home screen because we also have a console up there let me just remove this and go to your terminal clean everything in your book app let's search for book Deb all right if I click on debug and go to the terminal you can see we are successfully getting the data from Google Books API all right now if you can see we are getting some es link over here and over here to fix that go to your es link file and here just simply paste this line of code it will take care of it all right all right we don't have that errors anymore all right let me make the project and the app side by side all right now let's go to our book screen and work on that here first we need to render the scroll view instead of the view so that we can get the scroll bars and we also want to provide the padding and GAP now we cannot use that property with style for that we need to pass the contents container style let's provide some inline style let's a ping 50 g will be 15 as well and remove the stt now we can go from home screen to the book screen but we don't have any way to go back to our home screen so let's create a back button we will create a custom component because we will require to use that component at multiple places let's say go back TSX let's create a press leg Port this component and render it over here all right we can use an icon so go to your browser and search for react Vector icons we can search for symbol for back you can use any of the symbol let us use this one all right import the icon from react native Vector icons and displate over here let's copy the name actually use this one now we can provide the size let's say 25 and we can provide the color as well let me save this as you can see we have this let me increase the size let's say 40 50 perhaps all right let's give it 45 let's provide this style in cable let's create a style set we only need to pass the Align cell Flex on so so that it only covers this much area otherwise it will cover the entire width and to go back we will use the navigation use navigation hook navigation dot go back now if we press on this all right we are back to the home screen let's search for another book Let's C Ling code all right it works fine let's come back to the book screen now we are getting this data from the book H so we can use this data to render the book item component since it's a custom component we can reuse it data now one problem is that we don't want to render the description over here so what we can do is that we can render it conditionally let's go to the book item let's create another interface let's say I book item and this one extends the iBook in typescript an interface can extend another interface so this iBook item interface will have all the properties from the iBook and additionally we can provide another items so let's add it description property it will be of typ buan let me save this and it will be an optional property here let's say iBook item here we can provide since it's an optional property we can provide the default value over here and the default will be Pro so if user don't specify any value for this description property then we will render the description but if we pass the is description value as false then we don't want to render the description let's come back over here provide the condition so only Ender the description if the description property is true so currently the default value is true but if we go to the books scen here we can provide the a description value to be false as you can see now we don't have the description in the book scen but we have that description in the home screen one more thing is that in the home screen we want to allow user to click on this book item component but on the book screen we don't want to allow users because user cannot navigate from this one to the book screen because we are already on the book screen so to do that let's go back to the book item and provide another property let's say it's pressable it will be also optional property and by default it will be also true so by default user will be allowed to click on the book item and here in pressable we can pass a property called disabled so we want to disable it whenever user pass the whenever user pass the true then we don't want to disable it because the opposite of that will be false all right let's go back to the book screen here if I press the pressable as false in book item it will become true so it will be disabled so if I go back to the home screen and I click on this I'm allowed to click on this but it will won't work here all right now let's close everything and add some more properties to our book interface so on book screen we want to display the categories they basically represent the genre of the book they are of type array of string then we have the publisher of PRP string then we also have the publish date for the book it is also type of string then we have a preview link so we want to allow user to view the information about the book outside of the app as well now let's remove this console from here and D structure everything from data now we can provide here the exclamation mark and by providing this Mark we are telling the Tes script that we know for sure that there will be data available first let the structure the categories and work with it let's first create a view and we will map through the categories array let's name it category we'll also get the index and let's render text text will be ceg let me save this and here we need to pass the key since uh categories will not be updated once it's mounted onto the screen we can use the index s the key let me save this here we are getting the genre of the book now let's add some style to the categories view let's add some styl in text as well let's create the Styles all right let's do Flex Direction row as you can see it's going out of the screen so we want to wrap that we can use Tex R to that all right let's provide some game of let's say file all right let's do category let's first provide the font size let's say 13 let's provide the font way let's say 500 all right let's provide some border WID ping horizontal and ping vertical as well and let's provide some border ready radius of let's a 10 let's change the Border color let's change the color of the font as well all right let's provide the Gap 10 as you can see we are getting this really nice category over here all right now let's work with Publisher and publish State we want to show the publisher of the book and the published date so we can write published by and the name of the publisher on then then we can display the public State now to format the publ state uh we can use another Library called mement so install the library and 4 to to here we can use the moment Library publish date and you want to format it you can see the documentation to see various format offered by the moment as you can see published by the publisher name and the date let's provide some Style publer let's just add the font size of 13 maybe 15 all right let me go back to the screen search for another book let's say de work as you can see we are now showing the categories publisher and the publish date as well now let destructure the preview link now let's create a button for this preview link pressable let's add a text let's say View and we will call a function we'll be using a module called linking dot open URL is the function and we will pass the reving since it's an Asing function we need to avoid let me save this so now whenever us click on this button a new browser window will be open in the book Google Books and we have the information about that specific book all right now let's go back and search for another book let's say C code as you can see all right let's provide some styling let's say button button text let's add some border width border color let's add align cell Tex start Ping horizontal let's say 15 ping vertical let's attend let add some border radius as well all right now button text font size 15 font weight of 500 let's make the text capitalize all right now let's add a icon over here import icon from react n Vector icons go to a browser and search for reative Vector icons let's search for link and we can use this one name will be external link let's provide a color let's give some size let's a 20 all right in the button let's make the flex Direction row and have some gap of 10 and Al items Center as well all right it looks fine now let's destruct the description if we use a simple text to display the description you can see uh the description has multiple HTML Texs so we can actually use these html text go to a browser and search for HTML the actually react native HTML render all right the package name is react native render HTML it will help us to render the HTML so copy this Yan command and install the library now let's follow the docs we first need to import the use window Dimension Hook from ating then we need to get the we out of it all right now let's import this component and we can use this now if you take a look here at the source it has a object and this object has a property of HML so we need to follow that so in the source let's pass an object HTML property and the value will be description here let me save this as you can see now we are getting this list and some of there the font are actually bold so we are getting this from this package all right let's search for another book let's say deep work or here here as well we are getting some styling as well now let's provide proper types in all our routes so go to the types let's create another type for our route let's name it St param list all right so the first route that we have is the home and the type will be undefined undefined because whenever we navigate to the home screen it doesn't require to pass any arguments so it doesn't expect any parameters the second one is the book and it expect a parameter called book ID which is of typ string let me save this now go to the the app. TSX file here in the angular braet we need to provide the type all right now if I let's say just remove this it actually suggest me that we can provide the book typ over here so we are getting the type script working all right let's go back to the book item now now let's create a type here book screen navigation prop here we need to import the St navigation prop all right in angular brackets first need to provide the types for the params St param list now from the book item component we are actually going to the book screen so here we pass the book let me save this and here in the angular brackets we can provide this type all right the typescript error is gone if we H over to the book ID it's properly typed now it has a type of string now let's provide the type in route as well so let's go to the book screen here we are getting the types require for book ID all right let's create book screen rout prop here we need to import the route prop here as well we need to add the stam list and after that since the this is the route for book screen here we pass the book in the use rout hook we can provide this book screen rout prop and now we don't need this right let me save this now if you hover over this book ID we have the proper uh type of string now let's Implement uh drop down picker so that user can select from various bookshelves go to your browser and search for create native drop down pick here is the package that we'll be using you can go to the homepage and copy the UN command to install the package in your project now you can go to the usage and they have a really nice example that we can copy so go to your code dator let's create a custom component in components folder let's name it select book self if we come to this let's copy this much and return a Rea component all right we need to import the use State and we also need to import the drop down fer all right let me save this and Export it so what it does is that it has three states first is the simply for the value for the open so it uh determines if our book self drop down C is open or not then we have the selected value and then we have a list of item that we want to render it has apple and banana all right we will change that in the future first let's render it in book screen as of now let's uh render it just after the preview link save this all right here is our drop down pickle if you try to open it uh we get a warning from the scroll view component so to fix that come to your select book self component and you can provide the list mode as scroll view right now you can select any of the value as you can see it works perfectly fine now let's provide a couple of more prop let's say placeholder select book sell all right we go back as you can see we are getting the place select book cell let's provide some style and let's create a style set for it we only want to control the width of the overall container currently it's the width is taking the entire width of the application so let's create container provide the width of let's say 300 all right it's fine now now let's change the data we want to render three book self so first one is the want to read second one is the read let's copy this and the final one will be currently reading all right now we want to change the value as well so the first one will have a value of zero second one will have one the last one will have two now the problem with providing the value like this is that we required to use these values at multiple places so it's very error PRS even if we make mistake in one of the values the result will change drastically so what we do is that we will create an enm for that enum is basically a group of constant let's name it let's name it book s okay so the first book self is the want to read second one will be read and the third one will be currently reading now by default the first element will have the value of zero the second one will have one and so on but if you want you can provide the value manually here you can also provide the string value over here but we leave it as it is so for the want to read we can just type bookshelves dot want to read this way we don't have to remember which value belong to which book all right as you can see we are getting our three book cells now let's move it from here to here for that go back to the book screen let's create a view and this we will wrap the back button and the drop down pick Let's provide some styling let's say header let's create header we want them in the same row so Flex direction will be wrow now you will encounter an issue if you try to open it as you can see our book component is take over to the drop down pickup so to fix that go to your book item and you can provide the Zed index minus one as you can see now it works perfect ly fine go back to your book screen let's do align item Center and justify content space between all right now it's rendering at the end of the screen all right now if you open this you can see we are getting this sck icon now let's customize this and provide our custom icon let's create a component called tick icon and we will use icon from the retive vector icons so let's import it all right go to your browser search for reative Vector icons you can use any of the icons let me search for check all right let's use and typo all right so the icon name is check you can provide the color let's provide this size let's at 20 and we can rent it over here s TI icon component let me save this it's a react component so export is a react component all right now we are rendering our custom tick icon component now let's create our next screen which will be book self screen so go to the screens folder and and create a new file let's name it book self screen all right let's export a react component and let's simple view export it let's provide some simple styling Creator style SE let's name it container Flex will be one so the screen covers the entire space available and let's provide the background color similar to the home screen so let me just copy from there and provide it over here all right let me save this all right now we need to add a route in our types we already have two routes let's add the third one book Sals it will be undefined because we won't be passing any arguments there now let's go to the ab. TSX file and add another route over here it will be book self screen and name will be Book Sales all right now let's add a button over here so that user can actually navigate to the Bookshelf screen for that let's create a component and let's name it go to book Sals we do the we do the same and we will actually render a simple pressable with an icon reable let's export it all right now come back to the browser and let search for an icon called book sell we can use this icon from Material Community icons now let's import the icon from retive Vector icons and we will copy this one paste it here all right now let's render the icon the name will be book cell let's provide the color let's add this size let's say 45 let me save this now let's render this component in home screen let's create a view which will be wrapping component for the search bar and the go to Book Sales buttton let's move it all right let's provide some style let's name it header and create it over here we want them in the same row so next direction will be row all right we want the search bar to take the entire space so let's go to the search bar add flex and remove the padding from here because we'll be adding the painting to the entire header component all right as you can see let's add some gift all right now let's add the navigation to this button let's create a navigation object using use navigation hook in the onpress event we will simply pass an function navigation. navigate and the route name is book cells it's giving us the typescript so let's fix that we will do the same as we did with the book screen let's name it hell screen prop we need to import this Tech Navigator prop here let's pass this Tech Pam list it holds all our available routes and since we are navigating to the book cells let's pass the book cells over here let me say this and let's use this is in use navigation hook as you can see the error is gone now if we ever go to the book app and let's press on it we are now on the book self screen now on the book self screen we need to render the segmented buttons group it looks like this so we will showcase all the available bookshelves we have three want to read read and currently reading and user can toggle between them so if you go to the select book cell we have created an array it holds all the book cells so we can actually reuse it let's create a separate variable for it and Export it let's copy this past it over here and we can use that here all right now we can go to the book self screen now let's create a state to keep track of the currently selected book self let's name it selected book self and we will use US state now for the initial value we have created the enum if you recall here is the enom we have all the bookshelves here so we can use that book selves do read all right now let's come to the components folder and create a new file let's name it segmented buttons all right let's export a react component from here and return a simple View at the moment all right come to the book S screen here we want to render our segmented buttons all right so the first thing that we need to pass here is the array that we have created in the bookshelf book self array let's name it buttons