Building Universal React Native Apps (Expo Router, Tamagui, Tanstack Query)

good afternoon everyone welcome to a new stream sorry I got a bit confused because of course as always my stream setup broke just 5 minutes before the stream but here we go Welcome to the Black Friday stream here on galaxies. I hope you had a great day I hope you already could save some money I have no idea where my audio is coming from but I hear audio and I don't want to hear it so let me turn this off uh let me know in the chat where you from did you already did you actually actually did you celebrate Thanksgiving if you did so I hope you had a great uh Thanksgiving time yesterday we actually did in the family although we live in Germany my brother bought back the tradition from California so we had turkey yesterday and by the way a quick note turkey is actually not too special it's just the male version of something we eat anyway in Germany so nothing too fancy but I'm doing my best actually I hope or I was hoping that I would feel better today um so it's going to be a quite hard stream uh I guess towards the end 20 people already good afternoon good morning wher are you tuning in uh we got a lot of fun preparare today so let me give you a quick glimpse of what this stream deck right I use it like I needed one time in five hear myself even twice oh that wasn't good I hope you can still hear me uh I hope you can still hear me so I got to do the transitions manually why why do I have a stream like 400 okay so this is what we want to do today um we want to try and build this little application right here this is the plan for today it doesn't look like it's a lot but they're going to be a few interesting things so uh first of all I want to show you Expo St uh which is a new tool to bootstrap your applications can I do this like bigger yeah maybe like this okay so we're going to talk about a new tool to boot strip react native applications um then we will use a configuration which allows us to use tamagi which I also haven't used before on this stream um we're going to use uh what is formerly known as react query which is now called T query to make API calls uh T query is actually latest version I think six so that just dropped uh we're using all the latest stuff we want to use a handful of animations if possible but that should mostly be from tagui so nothing too fancy and if we do have the time we might also talk about mm KV so um I hope this is going to be fun um basically this application as you can see we can search for a movie so I can search for lord of the Rings which will not give me the trending results but it will give me these results so we're going to pick the best movie which is of course the first uh then we're going to have this detail page with some more information so if we get to mm KV we're going to talk about this here to favorite the stuff and if we do have enough time we will also get into building our own menu which will then allow us to list this stuff and then get back into it again it doesn't look like it's a lot but there are a lot of cool things included so I hope you're G to enjoy this so uh hello uh this will be great looking forward to the see this product please touch router yes yes we're going to talk about routing Ahmed welcome Chella Francis the sight snake I don't like too much tamagi we're going to see if you still don't like it afterwards um is tamagi going to be a paid version or free version tagi has a paid offering for a startup but as far as I know it's going to stay free itself uh welcome to Nigeria to Aro Edward mono repository when next I actually want to do something about Mono repositories in the uh in the future but probably not today uh also special today of course um we got a special going on at uh of course I'm going to do it like here uh we got a special Black Friday sale in Galaxy so in case you don't have a Galaxy account yet which I honestly can't understand uh we have a 40% discount on our annual subscription until the 27th of November which is if you watch this Monday so throughout Monday you can get the annual Academy membership for 40% off which brings it to just 135 per year there are tons of courses planned for the next time um just the list of the the upcoming courses already interesting uh upcoming is is deep links with Expo router we're going to talk about graphql we're going to talk about super base soonish uh and I also want to do something about tagui so these are among the next courses but I also want to do something about react native testing and there is so much more to come so if you're interested in Great Courses and you like streams like this and what I say and do and how I am then support me you're supporting me you're supporting these streams the videos and of course a small little family here in Germany so thanks for taking the time uh I wish we had some cool music playing but I tried it before the stream I really tried it um it broke everything I had to reboot 3 minutes before the Stream So I was already in panic once again and I didn't try to do it again I thought everything would work but no no streaming from a me is real a pain in the backside um and what so I don't I would really love to to use my stream deck it would be so cool if I could just press my buttons and switch between the scenes that would be actually useful to like at least the tiniest percentage but it's just so it's just the most annoying piece of technology I own it's does it do it oh okay you're doing that stuff okay but I guess you can't hear that because it's a system sound so questions hey s love from Ina inam welcome welcome June welcome Edward we already you Marcel philli what is MM KV mm KV is uh react native mm KV let me show you it's a package from micro saav um it's a key value storage that is a lot faster than what you usually get with acing storage uh thanks for subscribing it's yeah fris says it's the best replacement for local storage yeah for acing storage uh what did mm KV stand for key value memory memory map key value uh if Mark was here he could tell me I think it's memory map key value um but yeah I I hope we'll get to that H okay we we already good seven minutes here in the beginning we're getting tuned up if you could look at this like I got everything around me here's like everything um because I don't feel that well I got like the nasal spray I got tble stuff things Revo um I got food in case the stream is longer I got more food in case the stream is really long I got coffee I got water I got tea and I got a full bottle of water the only question is now where all this water will go when I've drank so you can think about this I I have no solution for that yet okay um uh friend say I will go and don't beat yourself up everything's good [Music] okay ah where do we get started did you have a great did anyone like get a good deal something cool during Black Friday I'm still thinking about getting a PlayStation or something so I'll just put it here get 40% off with code BF 2023 um I'm still thinking about gting a PlayStation 5 I don't know if it's worth it um but maybe I I haven't really gotten anything I want to get a new iPad but apple is not really doing any kind of Black Friday sale so I don't expect them to give me something memory map key value storage nice bro must hate too much CH I agreed Manish I agree Manish Manish has it right uh if I just got my stream deck to work no but here we go we going to start today with Expo detick why are we starting with Expo s let me dis uh not display explain and I will actually close this because this is the the final uh goal and the final thing we want to achieve and I actually completely forgot how I created that in the first place this is going to be fun all right um why are we using Expo St well I talked to Dan stepanov a few days ago for the rocket ship podcast and he explained what Expo St is and I gave it a try and I'm really convinced that this is a great thing to start react native project you know with the Expo CLI it's okay you got like five templates but usually they don't really work very well for me instead what we can do and let's get to like streaming uh here let's go here and let's paste it so npx create Expo stack you can also pass in some parameters but let's do the interactive version so what do you want to name your project I will name this movie star movie star not movie start well it doesn't matter um would you like to use typescript of course uh then I can select between react navigation or Expo router I will use the Expo router um I will start with a St layout and I want to use tamagi for styling and I don't need super base or Firebase so I could get all of this with this one command so npx create Expo St latest name D- Expo rout D tamag D- styleset D NB okay I think I should actually skip these these are like the default that would be added and by the way Simon actually contributed to this repository as well uh there's now also a draw navigation included so the site menu that you can pull up um in case you wonder that was my contribution to Expo St and I'm also super happy to be a sponsor of Expo St yes next to Expo galaxies is sponsor here uh so if you like this I highly recommend sponsoring Den stepanov you can just do like a donation it starts at $5 per month if you enjoy this this is really a great motivation for him and all the others like hosters already also working on this so it's cool it's like really like a community project um howdy from South Africa hello Hanan uh hey Will hey Simon this live will be recorded for your channel yeah you can always watch the live uh stream afterwards but the real energy is really in here today but of course you can watch it afterwards um let's use movie start and let's make this big enough for everyone's eyes Okay so let's drag it probably here let's go for a zoom of four and then we can run our application and just see what Dan configured so npx X Expo and then pressing I to open up the iOS simulator and then we shall see oh I hope I can keep up the view account I know that Vadim from Not Just DE is doing like his startup thing demo day in about like an hour or two hour so I gotta gotta compete with Vadim today on the viewers here okay let's place it here probably making this a bit smaller okay should be fine uh what else do we need I kind of put this above my notes so I don't know what we actually uh Were Meant to do so I can keep this up here um okay yeah the next thing is I wanted to give this as a repository to you because on all the other streams I get comments like oh where's the code Simon where's the code I always forget to create the repository so let's just do it together okay let's just create the repository together I will call this movie Star Stream and then everyone will be happy okay this will be a public repository on the Galaxy Death organization let's hit create and then we can set this up so little exercise for you as well if you're following this at home kids you can do this at home as well are any kids watching I don't think so um so what do we have get status okay nothing great what the shouldn't there be files here like are all the files already committed um ah okay yeah Pro maybe maybe we're already committed that could be the case so let's add the remote um but yeah let's add everything um is there anything included that I don't want to expose yet no we should be fine so get commit um in it to win it as always my current command and then we want to push to our Branch origin Main and voila here is the movie Star Stream repository you can all follow this I'll put it in here repository I really need some some sound here I don't know I'm I'm sure all of you are also listening to something so I want to tune up my lowf fire music here yeah that gives me some nice Vibes H awesome uh well gotad hello from Brazil man rock thank you so much thank you so much uh you all rock the 40 people in the Stream on on Black Friday that's epic so here we go we have created with Expo stick this application it shows the details page and we can go back it's nothing too fancy but we also selected a pretty basic configuration but it is using tamak it is having a stack layout and that's pretty cool so we basically skipped a few uh few items ahead because usually if you're going to start with tamagi what you're going to do is you can either select a tagui starter um which probably has more than you want or you can uh integrate it into your environment and I found the documentation for getting started not too great but I know they're actually working on this so is there like a quick start but now or something um yeah so you can just install tamagi you can also install tamagi uh here's the walkthrough to the configuration and that is pretty much the most important stuff so uh let's see we got the default files here but we got the tamagi config and this just describes tamagi there are few optional things in here for example this creates some sort of Animation uh which you don't need need to have uh and create a bunch of styled components like a container which is then based on already tamagi components so we see stack or text these are components from tamaku and we add additional styling to them and then we can use a container element in our app or main or a title this is a pretty cool setup for creating um styles and themes in your applications you can easily change these colors later as well um I'm actually not really a tamag expert I just try my best and I'm pretty sure that um some of you can help me out if we got questions about tamagi um finally we have the most important block which is the crate tamagi which defines like all the initial settings like the default font animations you want to supply light colors um these tokens so is there anything else no there is just some some stuff Beyond so this is the temp config and again Expo stck it's here automatically which is pretty cool um do we have anything specific yeah in the Babel config you would also otherwise have a block for the chagui config um if you would do this manually by the way why does my stream look so bad is the quality good oh yeah I was just looking at it the wrong way um okay where did I left off uh do we have anything else we have the EP Json well nothing fancy in here then we have our layout which defines a stack navigation with an index page and a Details page actually I'm not I'm not a big fan of the stuff in here I don't know why we have like a custom back button I honestly don't want that so let's get rid of the back button uh we don't have to supply a header left for the details page uh I really don't know why we we even have that um we're going to anyway uh I feel like we should probably already um I mean at some point we're going to add a draw navigation and that's going to mess up everything I wonder if we should just do it in the [Music] beginning could be a good idea um could be a good idea what do you think I want to do a draw right out of the [Music] gate yeah I mean routing is always pretty easy so so let's do this let's do this let's do this uh so then we're going to get to the movie database in the second anyway I have more than an hour today I really have a lot of time I took a lot of time for this so we can do two hours we can go three hours if my voice stays for that long so let's see how we can transform this what we got here into a draw navigation Where Do We Begin I think I would like to um put everything we have in here into a slot simply so we can keep like all the other loading logic in place um and make things a bit easier so we know always we can go back to the topmost layout file for the provider stuff uh and then the routing will be somewhere else okay so we put a slot in here um I will also delete the details page for now and then create a folder uh in which I want to group all the things related to the draw navigation all right and in the draw I will start with the layout for the draw and I also learned that we can use react native functional export Styles oh I was too fast which gives me this nice object I think I don't even need Styles in here now I I got too much and I can releas stuff that's also pretty bad anyway all right so let's make this a layout having a bit of fun with the Expo draw uh we're going to wrap all of this here in a draw oh we need something for the draw right we need expor router draw um and I think if we want to use Expo router draw we need to install something yeah we need to install an additional package so we need to npx Expo install react navigation drawer and then react native gesture Handler at least I think since version 50 of Expo SDK this is required we got a question what is a slot going to tell you this in a second uh let's put all of this here uh let's hit save oh no come on I was a wrong key um this is should be should this be further here we can use more space right we can use this yeah it should be better um okay what a slot uh slot is from let's remove everything it's confusing you in here slot is from the Expo router as well and just renders like the next layout file in here it basically forwards the stuff so uh we' seen right now it will just render our index page we only have one index page um pretty soon it should render whatever we Define here in the draw layout do we actually get the draw already no we don't we're not getting it yet um because we also have to put our gesture Handler at the top so around the slot I'll already put the gesture gesture Handler root view uh style Flex one I'm currently I think on Expo SDK 49 yeah 49 but with version 50 we're going to need the gesture Handler root view also I wonder if we need something else in our Babel config uh we have everything uh I think we have not used reanimated yet so we should still be fine stream just started in time for my two-hour bus trip that's so awesome Angelo nice nice uh hope I can give you some nice inspiration entertainment and fun over the next two hours during your bus trip too where are you going let me know I'm already out of coffee after 20 minutes well well well we got to do this um so I said I want to build the draw right that was my uh my main thing um our draw will have two files it will have a home and a favorites page we could create these Pages just in here I could just create home and favorites but they will also have like their own stacks and it just gets messy so I will put this into their respective folders as well so I will group them like this home and I will place an index. TSX uh TSX in the home folder uh R native function export I will call this page and this is home and then we can copy this and I will call this um favorites and in favorites the page is favorites okay whole favorites whatever uh we can get rid of the top index file and we should see if I refresh it's probably already rendering it's rendering nothing value unpacker yeah whatever okay let's implement the draw we got two draw screens in here so usually it would pick them up automatically but I want to find some stuff for the draw screens anyway first one being home so that's just the name of the file and then we can set some options we can uh do this in a second don't have to now okay close close close and we have a second draw screen uh which is favorites actually I wonder if we need it like this or we could just have it in in the other way uh I will keep it for now I'm worried that it's not working otherwise so we got home and we got favorites going to home to see some relatives we're finally getting some T content yes I'm also happy to see that but first we got to do some some reps on uh getting this stuff done um is this rean where am I using reanimated ah for the the site menu do I have reanimated installed rean I don't have reanimated yet I wonder where this error is coming from I will just start npx Expo start D- clear uh so that should clear the stuff in here let's see if it works now um uh we got the draw uh we can already work a bit with a draw I guess but it would be really helpful to see something on the [Music] screen why are you so slow today this will take me hours AI is getting better and better and I wa 10 minutes here on my my build of my demo app well well drawer is dependent on gesture Handler and reanimated okay in that case let's throw in reanimated no problem uh npx Expo install reanimated um is it just I think it's is it just reanimated it's react native reanimated right yeah I was too fast on that one um reanimated and I should uninstall whatever is reanimated it's probably some package that I don't want to have npm uninstall reanimated okay uh if we use reanimated we of course have to go to the Babel config and in the Babel config push this it might look a bit different if you have a different setup um Dan just decided that this works best in case um in which case does it work best in case of his uh Expos deck bootstrapping because it like it puzzles together everything and then it just makes sense to have it like this okay let's see again if it works now that would be really helpful and then we have also reanimated included which can never hurt uh yes also set the reanimator play yes we have that in here so maybe we're going to see something now m meanwhile meanwhile uh what did I want to say uh question did you notice if with chagi when you buil the app with I code it stays stuck at 90 I have noticed that yet I just noticed that it really takes a long time here to build my initial uh application so yeah the first time I think I noticed that this takes some time not a big fan of that I don't know exactly what's going on but I'm pretty sure Nate and the team is already making that better and if there is something blocking then I'm sure he will make it oh God we got it so we got two pages in a side drawer why is this working again this first layout file is just rendering a slot and just wubbing stuff around so it's basically doing nothing at all then the next layout file is our draw layout which defines the home and the favorites draw uh no route named favorites exist in N children um I wonder uh I think is it because of this or because they have no yeah they have no layout file I will give you a layout file wait a second yes yes we can do this um so let's give the homepage its own stack navigation by creating yet another layout layout. TX oh I'm just too fast for the Snippets okay this is a layout and this is going to be a stack from Expo router okay so now on home I have the duplicate header but that's not a big thing we're going to fix that in a second so I would actually like to use a different header color so we're going to switch around between the different layout files to configure this now correctly so we can also set some general screen options for the draw itself so I could say header shown do I actually want to show the header or not um uh I think this is more for in here right now I do have the index page here yeah well we can do whatever we want uh there are few cool other things so there is draw height status bar on open so watch this uh if you said draw height status bar on open and set this to true then look at this area up here when I uh open the drawer so I'm going to save here if I now open the drawer you see it fades out that stuff it's pretty neat isn't it like it's a cool setting I really like that um then I want to use a different draw active background color this is the first time we can use the color tokens of tamagi I really like to use them so you can just import color tokens from the theme and you get access to a ton of tokens so either for dark or light mode you can just pick and then I will go with dark blue and then there are different variations pretty much like you would probably use from Tailwind uh so then you see something like this uh since we have the header bar hidden here this doesn't make a whole lot of sense so we're going to set this to I set this to True um hey where is it should we see this right now interesting uh oh yeah that's just the active icon uh that's just the active icon in the draw bar I forgot thanks if anyone said this um so now we got our drawer somewhat fixed we're going to make this even better wait for for it um so we got a screen let's set some options here let's give it the title home uh the header shown fals yeah we can do it like this um let's see if I now reload uh it's like this uh by the way I will set my home to movie star and I wonder if this is actually doing what I want to do I really wonder room but something that should work is the draw icon but I felt like the two we just used didn't really work at all so yeah there is color and there's also size that we can now use to attach its custom icon I will use ionicons from Expo Vector icons uh name yeah whatever iOS home and that should give us eventually a draw icon however I feel like we're not styling home at all in this [Music] moment yes that makes more sense right so this is also correctly because this is the name of our folder and then it will use the index file so the name should always match the file name um so we got this we got movie star we got the nice background and we have an icon here we can now also change that the icon is closer to this so we could set the draw label style uh to something like like yeah it's not a cool thing but I think this is legit margin left and then you set it to something like minus 20 so then it brings the text closer to the icon okay not the worst setup not the worst setup let's do the same here um my favorites uh I will get a star um star outline and oh what are you mad about are okay you you're still mad because favorites does not have a layout file yeah I appreciate your concern for the favorites file Expo okay so my favorites and movie star they both have their own stti layout now which is just a St we're going to Define some more pages soon okay this is a draw layout with Expo actually I'm working on a video about that as well coming in uh at some point in the future definitely uh I think it's actually coming somewhere in December uh by the way if anyone is getting Galaxy's Pro annual during the stream please let me know in the chat I want to personally thank you um but before that let's check the chat since you have in I think the folder names should be home and favorites uh since you have index files yeah I know it's like it's picking up picking up the first thing um we could I mean yeah it probably looks better anyway it probably looks better anyway let's change this around patch it around 99 bucks in the code okay everything should be done and if I recompile this I get unmatch route because I completely messed this up uh yeah I think if you if you move the files around uh the package like Metro is always going to be confused and mad at you hey IG 33k what a nice name uh Phillip already got a recommendation for me you can better use the color tokens with eg theme Green Forget then light and do mode automatically works this is a great advice and we're going to put this to test um talking of themes I also wanted to theme my application anyway um but maybe we should put something for that on the stream uh thanks for giving May yeah Manish I'm happy I could solve that now we just need to wait 10 more minutes until uh this is done going throw in something we got where you got better um okay home favorite we got this oh come on ah okay yeah well that brings me to a different problem now because it's looking for an index file and it can't find an index file uh but we could have an index here with a redirect I assume that should work let's give this a try um okay page now we'll just return a redirect I think this is a common problem with Expo router um I want to redirect to slash draw slh home let's see if that works I mean this should be the first page that's picked up isn't it yeah and it's doing the read yeah ah but now it turns up here uh yeah I could probably also put it at the top level that won't hurt right are we good now index yes movie star index here and home okay good good uh coming back to the come let's talk more about tamag yeah uh uh let's get rid of this let me do a little commit here I'm honestly scared I don't want to mess something up so we're going to uh draw working going to commit this already commit and push here all right let's go um I wanted to use a theme around my app but right now we can't really see the effect of a theme so where do we start uh probably on home although home does not look like I wanted it to so let's check out the layout for home which defines the uh stack here okay we're going to do screen options up here again and we can now use what uh sorry what was the name Philip recommended so instead use uh theme um do I have to use themes or theme I guess I guess themes uh themes dot want to use blue nope there's no code compilation for themes so that's apparently not the right one Phillip what is the right one is it uppercase theme no that's not the right one so philli is trolling us into using themes and uh then leaving us alone here uh just kidding but for a second we just replace this with the dark color uh type string is not assignable to yeah that's totally correct uh this one is background color yes and if we set the background color then we should also set this okay nice we got a nice blue header up here uh let's check we're going to check the documentation simply for themes um I found this to be confusing as well by the way uh we got tokens then we can use tokens do color okay we got subset themes yeah this is what I wanted to do so I want to wrap a theme around my application I want to wrap this here in the layout around my slot so I will use theme and I will use what is it name um nice I think we got like blue want to use blue theme for this application okay this won't change anything by default but if we put something into your home some some sort of component let's use a I don't know like a card a card is usually a good idea show me the code of that let's too fancy for code demo isn't it let's just try it if I put this into my home file into the view oh goodness that was a very horrible idea I don't want to use that one let's use this one here the Y stick oh no let's just do it to ourselves okay we got a card with a header and footer uh any other component then this got to be import from tagu so now we got like a bluish card as you can see up here if I put something into the header like a text element um header has no closing TCH yeah okay of course the color here is white can we use something from the tagui config so we're getting really annoy to t uh we can use like a container we have main we have title we have a subtitle defined and we have a button [Music] defined let's see okay so if I now do something different uh for the layout if I use like green yeah the card certainly turns green uh let's use red it's like a very very like small contrast change here uh but I hope you can still see it like if you change the theme the default color used for the component changes I really like theming I'm a big fan of theming um with ionic it was also pretty easy uh so I definitely like this uh theming approach however Philip disappeared and let us here with green 4. getet uh let's see if we can make this work without him colors so these are the terog colors uh that we can import that's nice uh but he recommended to use it somehow different with the tokens okay so yeah there are a ton of tokens defined that we can use but that's not exactly what I wanted to okay you can also okay you can get it like uh theme use theme and then H okay good we can do this fam we can do this together so I still want to set this to Blue then my head bar here um okay yeah this is actually the one right here uh if you're worried that we don't have a button by the way uh let's quickly add that so if you go to the home layout and then Define one stack for the uh stack screen name index in that index file which is like the first thing that is shown here close it up here set the options uh set the title here to finally movie star so that should change our title good and we want to set the header uh left button to a custom button and and God bless there's actually a draw uh what this called Draw toggle button from Rec navigation that you can just use and then you get it only thing is we probably want to use a different tint colors so let's use white here and then we got our toggle for the menu I feel like it's too far to the right H I don't know who made them I always feel like there's a little disconnect between stack and draw navigation but maybe it's just me I'm an idiot could be as well okay so let's try this going to use theme in here from tamagi and instead I will call theme. getet uh what did I use in documentation uh theme. color one okay uh the use for returns a you run create T you return themes uh theme Parts mean all have been converted from this into a theme the use theme hook uses proxies background get interesting interesting there's so many things um I to Den stepanov before and he said like the coolest thing about tamagi is not it's not the components or something it's it's really what you can build with it it's like there's a lot more going on with the compiler and Beyond the scenes like I probably I think I just do like a really deep dive course onto this as there's a lot more going on um okay question is what did I use yeah Blues all right uh well then let's use it like this if the cool kids are using it like this we're doing it as well okay um do we yeah I feel like we should do one more thing just to round up the navigation and then we kind of have this finished so once we get some data and can I change this of course not why should my stream deck suddenly start working right uh oh my why should you um so if we click on a trending movie remember the movies application we had we're going to get into the details page and that page can be either a movie or a TV like that's from the API we're going to get different results we're going to calculate that in so we're going to have that in the URL of our application because Expo filebase router what not so we're going to have to make sure that we actually have two pages that cover both both scenarios finally it works finally it works um so in my home folder I will create a new folder that I will call movie I we just probably just do it for movie now uh and in movie we're going to have a file which has id. TSX uh cretive functional export page and in that page we will be able to get that ID by using cons ID equals use local search params from Expo router you can also have this strongly typed with ID string I'll just put a lock a down here by the way that's called turbo lock I always get the [Music] question uh turbo console lock that's the uh thing so you highlight something and then you can just press control L something and it will lock in the next line with that statement just a little information because I know the question is coming up in in the comments I sure the question will come up anyway um we can also um well we don't have to I mean we're now in the ID page so we don't need to use the segment that's good but we should now include this in our layout so going back to my stti layout I will copy this for another one this one is movie uh Slash ID uh title will be nothing and there shouldn't be anything else so let's just see how we can get to that page real quickly we can just put in a link here using the Expo router component link hre 2/ mov1 uh well that is not a right link we're going to have something like draw and then movie one right draw uh slom SL mov one Al oh okay yeah it has no closing Tech um yeah whatever this is just a test okay the H is wrong uh what's the right H draw slome movie in Brackets one come on nice there we go and voila we can go here only got a problem no route name movie ID exists in yeah movie should have no brackets I'm sorry I don't know I confused myself on that one now it should be right okay we just refresh and reload movie one come on goodness okay I tried all the ways it's not working now we finally have the way it works right yes here we go okay okay as you see we have our own stack navigation in that home screen by the way I just noticed that I completely forgot one thing um and that is that if you're interested I don't know if I if I said this before if you're interested in Expo router and what I'm currently doing I'm actually giving a live Workshop in the 14th of December so you still got a bit of planning time it's basically yesterday in 3 weeks it is Europe time 9 a.m. 2 p.m. um we're going to talk about all things Expo router so this is a zoom remote Workshop in which I will guide you through all the navigation layouts the routing Concepts we're going to talk about Universal apps with web support what you get from the router and also a little case example with authentication so in case your company has a budget for training and you want to learn more you say hey I really like this Simon guy uh it's pretty cool how he explains stuff and um I can really follow him for 5 hours then here is the Expo router Workshop link send it to your boss or uh whoever needs to pay for your education or of course you can just sign up for yourself if you're interested uh I really enjoy having you included I actually gave you the secret link with the early bird disc this is actually not valid anymore might might disappear Prett soon the early bird okay um I just want to mention this because we we're doing a lot with the Expo router here and this stuff can really get confusing so I hope this might help some of you 50 people still in the Stream how's the energy people uh my stream network so I'm extremely pleased so far I'm also extremely pleased because we're 50 minutes in and we have basically touched nothing essential so far oh my ah it feels good it feels good feels good to be back I wanted to do a live stream for a very long time I always you know this is already the second second time we have a cold the whole family has a cold Second Time of the Season it's not even winter in Germany yet my watch says I should stand real quickly so let me just quickly get my steps into my watch all right you should do this every like 40 5 50 minutes anyway it's better for you oh come on Apple I did it I should have done it already tell me you did it Expo my finally okay here we go let's talk about the API we are using oh I didn't say okay we're using the movie database this is a pretty cool API I used it before um you can sign up for free at the movie.org and then create an API CU I should have an API key somewhere at least I thought so and I'm going to place it in an environment file here okay EnV all right this is my key going to use this right now uh oh my I want to do so much today it's going to to be a afternoon all right let's put our API calls in a Services folder let's just structure this in a nice way so I'm going to do a new file in here I will just call this api. TS and we're going to introduce 10st query in a second to this as well now let's grab the API key from my environment process. env. Expo uh oh no no no Expo public key I hope that's right and I wanted to also Define some interfaces for the API so let's maybe do this in a new folder interfaces uh the good old bug it's just working on the second try interfaces um so let's do one for like an API result okay uh how do we get an API result that's a good question fair question uh we should be able to V3 API references like we want to get the trending movies want to get all trending movies so this would be our call let's see I think I have something here in vs code is this Postman no here okay I will do a new get request and oh invalid API key yeah uh how is the API key usually included uh's the API key included with question mark API key yeah and API key and where is my AP I key it's here and I have another recommendation so let me see yeah this works experiments type routes through TS config path through yes do we actually have this set up correctly I wonder uh uh uh type rout true no we have not used experimental path yet uh TS config path true I definitely want to have that as well uh but if we want to use that you also have to update your TS config with the path block like this okay you may need to restart view no I think my need that should usually work like this okay so let's say this is my API response if I now want to use that response uh to generate some interfaces I'll will just copy this out hit over here and press Json to typescript convert from clipboard which gives me this nice root object and results array I will actually call this trending result and the results are it's like a result item now we'll make sure that I export these interfaces so we got a nice setup for typescript um there is [Music] also yeah something I want to oh that was horrible English but I was having the okay so we want to export an enum as well can you see this at the bottom I hope I will call this media type so as I said stuff could be a movie or it could be TV so I want to create this one here uh export Ena media type movie or TV and that will come in helpful later trust me it will be helpful okay with that in place uh we are ready to work on our index page I think are we actually able to make the API call in the first place so let's go to our API servers again uh and let's do export cons get trending oh what is this m that's right yeah okay actually uh I will just do it like with page one don't have to pass in anything uh we can now call we can just make a fetch call cons response uh equals await fetch yes the API uh the movie db3 trending all we could use day or week doesn't matter my API key and the page I also want to add the language okay and we got that then we need to convert this to Jason and then we return it thank you so much uh while we here let me do two more things I will actually bring them in because they're pretty boring so what I also want to have is a function to get a search result for a query string which is using pretty much the same stuff and then I have another one to get the movie details this is down here uh nothing really special going on it's just yeah to get our details um what do I want to continue Let's see we are on the home screen um oh yeah we need we need 10 St good good point actually at list item number four that's good so here we go 10 St query version five this was privilously called react query I think we had a live stream on this yeah I think we had a live stream um so there was recently an article that convinced me to always use this um you can find it somewhere I tweeted about this basically yes in simple cases you could just make a fetch call in your use effect and call it a day but there are so many things wrong about that including race conditions and handling errors and whatnot that just makes so much more sense to add 10st query to your application and that totally convinced me to do it as well uh what's going on with my English it's getting too late uh so we're going to set this up it's actually really easy to set this up I hope I don't uh mess things up right now what I want to do is uh what do we want to do that's a good question um I wanted to place this somewhere at the top level I think so I will add a new file and I will call this query client I do this because this makes it easier in case you want to debug that stuff with I think reactron or something I used in the past um and if you have it like this you can import that file somewhere else a bit easier you can also check the previous stream uh where we did all of that once we got that we can heat over to our topmost layout file and now I've wrapped this somewhere here around probably like I don't know around the theme doesn't matter too much I want to use the query client provider query client provider uh and using our query client so that is the thing we just added and the query client provider comes from uh come on you can do this from 10 stack react query of course okay um do we not install this like a second ago uh let's see react query yes we did uh query client provide cannot find name yeah yeah yeah I didn't mean yeah yeah that's what I meant sorry about that I of course meant that okay so now we're getting closer we're really getting closer because now we can make our call in home and we can easily use 10 St query are you streaming on Twitch too apparently not I somehow broke my connection to Twitch and I fear to make it even worth I know my streaming is like it's a total mess at this point um but usually like I had five people watching on Twitch and 50 here on YouTube it didn't really make sense to me so let's get back to the homepage and create our trending query so const trending query equals use Query this is how you use tin State query this is not how you use it oh my oh my oh my okay use Query and we're going to use the query key so this is where your result is stored I which key because it's essentially a state management uh and then we have the query function which is pretty much any kind of uh asynchronous function in our case we can just put in the function we' wrote like five minutes ago it was get trending uh with a page yeah let's just return let's just remove this and just set page to one for now okay we have the trending query that means we can build our view uh I probably need to reload the whole fun here yeah let's do a Reload better that's better uh unable to sofy client you C could not found in the project or in the directories query client from query client I'm pretty sure it is there I don't know where it should be else like this is the place to be um we have the query client it should be there right query client did we forget anything is anyone having a decent eye in checking uh you import from at query and yes I did but that was intentional because I created the query client up here [Music] uh when I run the end buak says but I run the npx Expo command I got the following I cannot find module disc compile Cod gen that sounds ugly uh hly I don't know is it like is this new or this it like okay use the Expo CLI and by the way we we we fixed this problem here so now I want to do some tamagi in here I will try and use the main component which should work hopefully yes uh I also want to use like an image background up here which is by the way uh not a special Tamar component Source equals Yuri and I had a Yuri prepared I just need to find this somewhere um I want to give this some styling so yeah that's not the style I wanted um let do a full width and a he of I don't know 200 or something I had an image somewhere here from yeah I found this on the movie database this is it nice we're getting closer we're finally making progress um my main component again this comes from the predefine of Expo stick Dev it's just main uh Flex direction of column so nothing too fancy and by the way what we can do is of course as well we haven't done this before checking out the stuff here um on web why not uh because with web that's actually I mean that's one of the cool things with tamagi that the output for web is really really epic as well um so we should pretty soon see our application come up here uh at least in a second meanwhile we can continue so I want to wrap the whole rest in a container and I want to use a y stack from tamagi so you can imagine what a y Stak is X Stak would be this or from here to there and Y Stak is like to down um in the Y stck I'm going to put a title I think did we Define like a title yeah um I don't want that stuff that was a bit too much I just want to do it like this um where is my title and voila okay here we see actually the title in the other case we don't see it yet uh good the container uh has Flex what is the container in our case flex and some pading Maine does have Flex one and the maximum width I actually don't want to give it uh Flex one because that's not really what I want so let's check the tamag config and I can change for main also if I don't want this come on I want you this one here um oh it actually spans the full thing is it not using the maximum WID of 960 or am I not using okay I use main from tamagi in that case it makes sense but if I would use main from my actual config so the component I prepered then it should have a maximum width of 960 so it ends here and all of this is free so I definitely want to change that therefore I go into my T config I change this commment this out for now and now we have it so the life reload for the web is really that fast I really I really like it it's really really cool okay so title uh is for some reason not yet displayed uh we got the container we got the Y stick we got the title um why is there like where's my title H I also need an input field just trying to put these on the screen for now yeah place or search okay we're here why are we below the image background and why did it work before in my example oh what did I [Music] do um I probably changed something in my tamagi config although I don't think so actually uh let me do my I no I can't see a difference everything good default body font animations sh something shorts themes tokens nothing changed what's wrong with my image background if anyone sees or notices a problem here let me know do I have to oh yeah yeah yeah yeah yeah got it got it got it of course the image background should be the background of this container that was the whole point of having it ah nice thanks thanks for the fix people nice mustache thank you that's the spirit that's the spirit honestly I wanted to like I wanted to just try this uh early November I just wanted to always try this I want to to be honest let's let's say Theo looks cool and the prime agine looks cool I just want to try it out and was November Aaron Rogers is doing it so I wanted to try it and it didn't look as bad as I thought and I kind of wanted to let it grow back over the last couple of days and my wife was yesterday like I kind of like it it's okay it's good keep it so here we go I'm keeping it for now for the moment it's here it's here to stay what's here to stay is also my cold it's annoying super annoying I have like 12 days okay implementing the search is a different topic we're going to talk about that later um we're already doing this an hour and I say later and everyone's like no I need got to go I need to work today no no no all good all good okay um so you see we can use some pretty cool stuff uh on our things actually what I found as well to be really easy from tamagi is using something like uh enter style so you can easily enter style um so when this enters it should come from an opacity of zero okay let's just try the easiest possible example if I now refresh this oh there was an error uh no animation prop given to Pro these Styles will be ignored oh yep uh next to the enter style we need to define the animation so in this case the animation I will use the animation quick I think we defined this in our yeah we have these animations created here I think they like the default um yeah are you seen that it was like it was very short you can of course put in more so let's say I want to use scale 1.5 uh and Y - [Music] 10 okay we do it like this then it should like vom come in okay that's the uh the dream let's see okay you've seen that it's not too big but I wouldn't make my animations too big just like a tiny thing going on and I think this is pretty cool um by default H by default I think it's using animated from the library you could uh you could if you wanted to also plug in uh reanimated or something else so that's totally up to you on the web yep doing that thing on the web as well I just like that it's so easy to add stuff like this uh so I will keep it okay where do we continue we got this stuff uh we wanted to do the trending right so let's do it down here I will use my subtitle component um sub typle component should say something uh so we're going to do either a trending query or a search query I wanted to do like a little switch here so I'm going to copy this and make a second query this is like my search query so people can either instantly get the trending stuff or see a search query okay that's the idea uh for now I'll just keep it like this uh so this means we also should have a search string with use State that's connected to our input field where's my input field here I want to say search for a movie TV show Person something else uh I want to make the placeholder text color white so that should look a bit better yes okay although it wasn't too bad um I'm going to give this a border with so you can just use all of this directly now you see just do like a border with four you see how it changes here so that is really cool of tagu you can just use everything directly here I really like that um you can also do like size tokens um not LG you can do like dollar four oops I don't want to close this so I think this is more like you see this is smaller this is a bit better for is I think for is okay right yeah four should be okay uh then we have the value of course which is my my search string and then onchange text I want to set the search string so we have our search input field good um next thing is the view with the results so this subtitle I will just say trending for now uh yeah that should have probably some petting if you want petting just give it petting it is exactly like you would think so just P1 you could also do petting top 10 or pading left it is exactly like Tailwind CSS bit on react native components I really like it I think I'm going to use this more often um you can also like do now more uh entro animations in case you like want to just animate this from an opacity with an animation and what did I break now yeah that just fades in a bit okay um if anything is loading I want to show a spinner so if trending query is loading uh this brings us back to we're using 10 step query which is really really nice if if this one is loading or my search query is loading in that case I want to render a spinner we can do this from tagui as well um do we have to okay yeah then we have to this or fall by I mean we can do it a different way where the cool kits if this or that and and this okay uh let's turn it around so we finally see the spinner for debugging a bit better to just turn around negate your Expressions uh the spinner can be styled as well uh let's use size large and once you get into tamagi and how to use this stuff it becomes really really easy and you you can really do your applications in a really fast way I can now use a color attribute also on every component and you see I got access to all the tokens here which is really nice I will use like blue 10 and I have a blue loading spinner writing it feels so refreshing actually to um not write any stylesheet and any CSS today I think we won't touch CSS at all today so let's do now a scroll view for our components down here this will be a horizontal scroll view uh it should not show the horizontal scroll indicator um and then we can go over the results what is this co-pilot are you correct you can't be um carard does not have an image no it's not working like this my friend it's just not working like this um I want to do anyway something else this is a bit tricky but we're going to have either a search query or a trending query and the way to make this as easy as possible is probably going to have to do some refactoring later into its own component do we want to do it in an own component right now it would be cleaner but it would be maybe confusing oh let me take a sip of coffee it's actually [Music] tea ah by the way for everyone new if you missed the beginning of this stream I just want to highlight that I heard that today at galaxies. def you can get 40% discount on the Black Friday on the pro subscription check it out Black Friday BF 2023 is the code you can use during checkout oh no oh what was that bullet dodged I don't know what happened but that was terrifying me for a second I should not do that again I should not do that again all right um oh you said you want to do this in the custom component right mhm I heard you I heard you say that let's do it let's do a new file uh thank you once again the buck component SL moviec card. TSX okay uh type movie card props it will get a movie which is of the type result item okay now our types com in really handy con movie card and we can D structure this we can get our movie from the props and we can return something actually if we just return something we can also use just the regular records uh we don't need anything else um can we say export um do do I want to use like I know there's a difference between export default movie card and Export I just uh KY dots could probably explain this better than than I can so I will just use it like this um what you want to put in here uh I essentially want to put in a link from the Expo router which is an P ref to The Details page so the details page in this case would be/ draw home uh Slash movie slash movie ID mostly correct yeah and then we're going to do everything as child um that will just say text movie card for now okay um let's do text oh come on just import the text I don't care where it comes from U from tamag let's add some imports up here from T okay now we can use that to create our list so let's go down here and we can create a movie card uh we don't do we need the key yeah we need the key uh the movie is the item so now cannot read property okay trending query data results uh map we should probably rep this actually we don't have to I think I mean we shouldn't have to should work just like it is okay debugging what's the problem cannot read property map of undefined yeah uh trending query. data do resultsmap I mean only do it if you have results right data do results and and something um I need [Music] to it's getting a bit o in here for my uh this is really a bit ugly now and I don't know if this is the way to go yeah it looks like it is um are we actually doing a trending query that is a good question uh get trending I'm going to place a little lock statement here and then we shall see Jason invalid API key you must be granted a valid key okay that makes sense um okay I got a Expo public API key that other one is good uh where's my Expo public yep I messed that up that wants on me yep we're getting stuff we're getting stuff so you see we have a horizontal scroll bar and now it's easy now you can just ask co-pilot hey please create me this movie card it's really honestly that's like probably the best way to do it we haven't reached a lot of uh AI today I'm I'm sorry we could do more we could certainly do more um we also got to check here movie is actually not correct in the URL we have to check if movie. media type is equal to uh movie so only if that the that's the case I want to use movie in the URL otherwise uh we have something like TV or so oh but then will complain yeah then the HRA complaints to-do uh got to-do here too at movie uh at TV type okay good we hopefully going to fix that later now let's create for every movie a little card here instead of the boring text element so let's use a card from tagui uh we got that and we can start with uh with some what do I want to put in by the way I want to put this in the card. header I think so in the card header comes the image uh Source should be no that's not correct the source is a bit different so the movie poster is I think not the whole thing and image uh what is missing oh yeah Yuri that should be the right way to use it and it is not Source but Source okay uh we need a little styling here okay not too bad not too bad right we're making progress huh that's something I think we're doing good I honestly wish somebody could bring me a coffee now maybe we're going to have to do a little coffee break in a minute just a quick coffee break um so now I want this to have no petting so uh I will say zero does this work nice yeah I really likeed I really like tamui I really like it it's cool it's cool okay let's try to generally give that card some styling I want to make this an elevated card um I want to give this a width of 150 and a he of 260 so there will be some text below the elements we can also do something like a scale here why did I use this I wonder okay yeah because then we can have it like this uh and what I found pretty interesting is so if I use this now I can click to it and I get to The Details page and same here on the web I can just click it and get to The Details page but tag wouldn't be tamagi if there wasn't hover Styles and press Styles so now we get hover on the web Isn't that cool I honestly hate if you want to do like Expo or egg native web it just sucks honestly it just that great but here I even get like hover out of the box this is so great if you want to do anything Universal please just use tamagi uh and even here if I press this you notice like you get this press thing going on that is so cool you just get this like this so just Define what happens when you hover or press I'm really impressed by uh by temp way uh and I'm going to make the animation for this use our bouncy animation yeah now we're going to reload because everyone's mad at me so now it looks oh come on this is like the best hover effect I ever did you get it like out of the box with tagui like I don't know what did I do before I really don't know okay uh let's use uh width of 150 because I think can use like the full stuff and maybe a hate of 200 okay looks better looks better looks better let's do a footer for the card as well um and that while we use a y stack so Y St is just basically it's Flex Direction row like everything below each other and X stack would be Flex Direction column in a y St I can now place my text Elements which I can also Style easily and this will be movie. title or uh movie. name so TV shows and movies they have different name uh properties I want to use the color something like um light blue or so I should probably use it from the theme but I just want to use light blue uh also this one should actually have some sort of petting mm okay yeah better um and in the white stex so this text should also have a font size of 20 so for everyone still watching we still have like 53 people in the Stream I know you're on the bus to your relatives you're at work you're just having this on in the background I know I just know how it works I know that you're not there the whole time to watch me coding I just know it you would just want to hear if Simon gets into a problem and then tune in and then watch it but I would like to know you see now tamaku how we added to the components um how it works in the native application how it looks in the uh web with hover and style what is your first impression of tamagi just let me know in the chat like do you think it's cold do you think it's hot do you think like me uh I really love to know what you think because I was really really impressed when I got this uh to work so please let me know while I take a sip of Cofe uh it's still tea I don't know ah and meanwhile I will also uh get on a bit with a with a code um so we can the duck is a bit messy yeah Francis I 100% agree on that uh the the getting started stuff it's horrible it's like to be honest real talk it's the worst thing I've ever seen it's so confusing I know that Nate who was on on the podcast as well is doing an incredible job and what tamaku offers is really incredible not just the cool component in stuff but everything beyond that the tokens the themes the uh optimize compiler everything is really really amazing but documentation getting started explaining what tamagi is got to give that really really bad note uh but maybe maybe that's getting better over the next time and then um yeah then we're going to want to see if more people come into it so what am I doing here um I wanted to do something like uh yeah yeah yeah this is probably going to crush right no it's not oh that's interesting um you also give it a theme right here I wanted to try this out so I want to use like uh I think you can use like an alternative theme ah this is so interesting there's like so much more than you can try out with tagu uh Al is not L2 is a theme right uh applies a theme to this element this is so cool like the whole theming thing I just I definitely need to get more into this uh okay what do you say it's good but for me I like to have mono repo starter react native remakes Tami yeah I mean why not yeah why not you can also have Expo with solito uh friend say lot of infos but duck is not so easy agree it's good but I still prefer glue stick they're close to each other yeah MO mohanad I agree I think I had some contact with the glue stick guys as well so going to maybe look into that as well uh okay great first impression wondering about pricing and stuff you you can use Tamar for free it's it's totally free um tamag it's it's like Tailwind it's free the only thing that's cost something currently is take out so tamagi takeout is like an opinionated starter is a mono repository with Expo and solito with tamagi and a lot of things and screens included this C this is yeah a paid thing but you don't have to use that um you can also come up with this yourself if you want to by the way I think it's currently on like there like a Black Friday discount isn't it have a coupon code I don't know didn't Nate say something on Twitter about this or tamagi let's quickly check this out uh t uh I think they tweeted some something about this uh something 40 Black Friday yeah so you can get 40% discount with Code Black Friday yeah which brings it oh I got this again which brings it down to 113 I think I'm going to G to actually get this after the stream just to support Nate in the project and I think it's going to be helpful um at least to see some stuff uh what else do you say uh great first impression I a freelance react native developer and I'm traveling the world as a digital no but I'm trying to improve myself with your videos keep coding thank you for that uh I hope you're doing great hope you're having a great year 2023 and hope you're having even better 2024 uh but I'm pretty sure you're killing it also if you're following my videos you're hopefully going to pick up a few things here and there uh which brings me back to this one here so we have kind of completed our movie card silently um I think this looks pretty cool but to our scroll view we add uh some petting so I want to add some uh y petting uh like 40 and I want to add the content container style um gap between the items of 14 thank you for this and I would like to also include a petting left so it's not starting huged to the screen voila oh no I forgot something we don't have the search yet ah okay that should be easy that should be easy let's do this let's do the search got a pumped I'm pumped for the search um search query is different now so we just copied this this is of course totally wrong what is right is if we that's search and the search string now hear me out on the search string if I type something in here and immediately start the search it's going to cost you I mean not you but if you implement this with an API it's going to cost you so usually you have like a debounce time a debounce time is I type something and when I stop typing that's like a two three 400 milliseconds delay which is the debound type and you want to add that to a search bar and I found different ways to do this um I think the one I ended up using was having my own used debounce hook yeah I know sounds horrible there was actually also something you could import but let's just do it like this use de bounds. TS uh you will be able to find all hello okay just open that file what is this like what is this oh you made use debonds as a path of that that is so so wrong use debound dots okay so this is it it's actually not too fancy but I found this I think on stack Overflow it's basically just doing exactly what I just described it's debouncing that value and after a certain delay it will set your state so it will update the state okay so let's just introduce this in our page and maybe before I do that I just want to quickly uh generate a commit message and push the code before I mess up everything here in the project okay back here so we can now use uh debounced string using our own hook use debounce we're going to pass in the search string so after a certain delay it should use my search string and then set that argument of type string is not where is use debonds no I don't want to use debonds from tamag okay tamag seems to have used debonds as well but that totally didn't work for me I want to use my own debound string okay now I can use the debound string as the query key in here and for the query function I want to use my previous function as I need to pass something to it I need a bit different syntax so get search results from Services API using the debound string and I will also only enable this if the debound string is longer than zero character test oh why do I do this the whole time oh it didn't do this in the past that is interesting like on a stream it's just making this white when I I don't know why I have I have no idea anyway okay I hope that makes sense um because otherwise we would always query the API with a search right here actually would be cool to like add a little look so let's do a look here um search for so let's just do search and then query okay so we're going to have a little look here and we should always see when we do a search query so if I do this no search query yet um now we got to check if I type something like Lord and you see oh come on it annoying show without like I just want to have the screen brush why is it so I don't know what this is I just want to show you the screen brush but it's opening up this white screen of Doom here okay I can't paint today's stream anymore oh oh my um so we got we see the debound stuff is working and I get the result here that means I can now integrate my search query so if we do have a search query I want to show something else than trending in the subtitle so I want to check um if search query. data. results exists then I will say yes search results and other SI I will say trending okay yeah good if I go back then I'm back at trending good we fixed that one uh now we just got to check down here this is going to be a bit more complicated I guess uh if we do have search query data I want to have this and otherwise I want to have that but going to have to do a bit different syntax here we got to do it with brackets like this okay uh I probably need a fragment here as well I think I just made this work let's see it works nice oh my two hours in we finished the first screen but well we we accomplished really a lot we talked already about routing uh styling tamagi app setup uh re query I think it's not too bad and we got this cool View and I now want to go back I'm back to trending with an empty array and I can go into details nice nice I should work nicely on the web as well pretty pretty cool and I'm really like a big fan of that har Nate Kudos this is so great I like it I really like it okay I should not sleep on this uh because we got still a few more things to implement so first on the movie page um let's do a let's do a quick commit here as well yeah now everything seems to work at search functionality deon's time commit and push uh okay okay I got tons of emails so if you if you went Galaxy's Pro during the stream I'm very thankful thank you so much for supporting me um I couldn't look up all the signups Friday November 24th they are there a lot already so thank you all uh thank you thank you thank you so much uh back to the details page or well it's not really yet a Details page oh this is like a long page okay we could do this um so here's the thing we have movies and we have TV shows and we need to distinguish between them um I wanted to have them with different kind of routing so I set up a movie folder and I think I will set up a TV folder I tried making this work with segments and probably we can refactor this later but for now what we're going to do is I want to copy the movie folder and call this TV um and then we're going to place a Details page in components so this is a totally leged way details page. TSX uh Details page okay and then in both movie and TV we're going to just basically display that page so on the movies page I got the ID and then I'm going to render The Details page from my components I will pass in the ID so we're going to have to uh use that and then I will use the media type we should probably Define the interface then it makes a whole lot more sense so on the details page type Details page props uh that will get an ID string and also a media type which is a media type can you just import that thank you all right and then we can grab it in here ID and media type D structured from The Details page props cool okay back to the movie page and now it makes sense to pass in the media type in this case the media type would be movie so I can just use my enam media type. movie uh and that makes it basically that's it okay so this is the short movie page and I can now take this and do it pretty much exactly here the only okay I can just take everything makes more sense uh and just say this is TV okay good so now we can simply work on our Details page component instead of on in the different folders I think I might uh okay we got a nice comment from Michael I got to check this out in a second uh but before that I'm going to have to change my layout here so now we not only have movie ID but we also have TV ID and also there's like no back up there I would really like to have a header back title um something like this I think I think this should work with the header back title yeah better it's better uh the movie list would look better if you set a mix with and self Center so it looks good on web as well as the search bar yep very well we're going to do this let's do it so the movie list and how the movie list appears on the web uh okay yeah uh we probably okay that's now the problem of my I mean I could limit the container in my maybe that makes sense if I use mix withd for the container that won't hurt uh container why does it still use that one uh I'm using the container here I mean the image background should stay like that but the container should now have a maximum WID and AD justify content self Center oh no if it's just not compiling right now again or what uh what do you say [Music] um is it a line it I always get confused with both cell center and everything else uh but we could probably also set this uh on our own somewhere else we could set this directly in the index page I assume so on my [Music] container uh can we set like a [Music] maximum okay yeah okay you should probably check out different sizes from tamagi yes the member is uh ready what is this search for a oh yeah I'm I messed up the container I messed up the container uh where's my tamag where's tamagi mro saavy uh configuration theme stack [Music] tokens how can we make it to 20 no this is like I was I think I was there before was somewhere it's like here right okay this is like size this is space space this is not super helpful like even the biggest size won't won't do um I wonder why I can't set my container width to or maybe I had the container width oh yeah I'm checking the container with for that stuff up here and we're talking about the scroll view right good point good point the problem is if I've wrapped this around my scroll view it looks yeah it looks totally different on mobile and I have some petting here that's definitely not what I want so how can I give my scroll view a maximum width of maybe just like this um maybe just like this if tamagi works as expected then n no this doesn't work yet why is it not working yet well maybe we're going to fix the styling issues later and for now continue with the details page uh maybe you can also do like a poll request on the GitHub repository while I code that would be pretty awesome uh we wanted to do the details page uh on the details page we're going to make a query for the actual movie details so we have a movie query here equals use Query and again same setup same setup it's not that hard to use um uh 10 St query it's really not at least not the basic stuff like there's a lot more about caching invalidation mutations and whatnot but the basic stuff it's really easy and you should do it you should certainly do it um passing in the ID and the media type right yeah that's what get movie details expects okay uh once we got that let's do our main view here actually on this one going to set this can we import this from my config okay let's go to the opener stuff um and then let's place in a nice little scroll view I don't know really if we need the scroll view from t we I don't think so but I will just do it anyway image background once again uh this time I want to use a different Yuri let's see uh I want to use first of all the backdrop path so this is the first one I want to use and on that I will then render another image uh on that backdrop I will render another thanks for subscribing uh that want render another image using Source oh what was that maybe copilot had this figured out all along uh could be potentially correct could be let's see uh we got to give this some WID so let's we can actually do it like this so the tag we way WID of 200 and he of 300 yes so here's Oppenheimer this is the okay I can't use my uh thing but here is the poster and this is the background stuff I would love to draw on the background but this is what happens when I want to draw on the background not really helpful I don't know why it's showing I made you know I made some setting in here in my screen brush tool which says hey uh just give me a white background that makes so much sense um use tool tip green activator I don't know I've been using it for very long and it just looks like I pressed some some wrong key how can I get full screen white I don't want whiteboard hide for this display oh I think I got it oh we can draw on my stuff again nice so here we go this is now it just shows on the other screen awesome uh this is the poster image and the background image is actually the uh the sky in the back background so let's give this image also a bit of margin so let's use margin 20 and also a border radius six making it a bit rounded nice all right hello everyone hello Fernando welcome to the special Black Friday Friday stream uh what are you use to draw those lines yeah it's called screen brush screen brush they also like other things you can draw with it but I just use that one basically all right uh we got another thing on the uh no after the image background I just want to render a simple y stack uh padding maybe 10 that could also have some animation right I think there's also an H1 component yeah movie query data title or yes Oppenheimer nice here we go but I want to set the not the col but the color I'm pretty sure you can use um you can use let's not use that you can use tamagi and colors in a way better way I will figure this out now we'll come back to you um says I don't know let's just use a dark darkish blue isn't that in the in the theme of our application yeah something like this whatever um then we can also have a text element after incl or included even in the H1 um just need to make sure that we add text from tagu nobody's able to import text nobody it's just nobody understands the pain that comes from manually importing text all the time okay we got that we got that let's add add another paragraph element here with movie query data. techline okay that color looks not too good let's not use that um let's use it like oh now it turns white um did I want to give this like a background color I don't think so but why is it why maybe I should use L2 maybe that's better we're going to keep this for now we're not here to build the the best looking application so then we got movie query data overview okay that could be a bit bigger so let's do font size 16 uh color is in general already black so we don't really have to do anything let's just keep it like I don't want to do too much on that screen I just want to render some details uh and that's I mean that's pretty much it we could also give the the text some nice enter animations so let's give the yay animation Lazy Lazy and then we can put in enter style and for the enter style I don't know we're just fading it in or if we want to we can also change y so see now it comes in really really smooth also on the web um looks pretty nice I mean the view transition from here to there is pretty hard so I would probably also use the view transmission or you could oh we could use this would really be a nice case for a shared element transition wouldn't it this really screams like you a shared element transition it's really screaming for a shared element transition I don't know do we have time for that why not I mean we could try we could we could at least try to add a shared element transition we do have reanimated anyway um so since we have reanimator let's give this a try for a shared element transition we got to go into home and pick the image which what is the image this is not the image oh it's the movie card right oh that good so you're going to make this an animated image uh so from reanimated image then we can add a shared transition tag um uh what is the share transition take yeah well it's not movie I wouldn't call this movie it's more like this here right okay what a horrible share transition Tech by the way this should now work we can add the remove the to-do okay we have the shed transition Tech here let's see if I put this in the details page as well on the image so this got to be an animated. image as well uh animate thanks for subscribing whoever did that oh if I do this in animated image I can't use the properties I had [Music] before [Music] well well yeah I mean margin can probably do it like this all right uh oh no what is the media type okay we got the media type no Panic we got the media type we got the media type but what is the movie ID okay that's just the ID okay that's even better um can I notot find name media type yeah that's because this is it okay I think we've set up a shared element transition let's see how it works I'm done wow wow it just works nailed it the very first time I nailed it mic drop really oh my honestly I didn't expect that that was Bing I was I was expecting a totally messed up View and it just worked the first time wow of course it's not working for the squid challenge this is even better than I expected I don't know why it's only working for some it's probably having a problem with TV is this live stream beginner friendly you tell me I don't know maybe maybe not uh prob as we are already deep down in the code it's probably not be to friendly anymore at this point um but you can still watch from the beginning or you can check out the GitHub repository that will also help you with a lot of things so my only question here is now yes here's the question that's now we got it now it should work for everything uh I should probably do a Reload now so what is a movie and what is a series like this challenge here yep yep yep yep yep yep yep yep does it work on the web as well or did I no break web okay I did not break web that is okay I mean I think they have like a fallback for web oh I don't have a back button uh there is a fix for this uh there is a fix for this with the Expo router if you have like details pages that you could like navigate to directly you should have in the next layout file something like export con unstable [Music] settings uh and then goodness export router unstable settings initial route name that's what I want to say initial rout name index okay so with that in place what you got is and I hope this works now okay you go here and you still have the back button like if I refresh on that page like if you sent me a deep link or something and then I still got the arrow you might even not want to have that on the web but still I could also use a deeplink for my native application by the way we we also kind of we could talk about custom URL schemes that would be funny as well um so we have a somewhat sophisticated setup here uh what did I want to show you as well I wanted to show you how we can all Al use mm KV yeah mm KV so mro you're making us all happy you're a good guy you look handsome you're smart you're like the the perfect the perfect programmer a perfect being mro thank you so much for react native MKV and uh react native vision camera the only downside is that we need to do a pre-build but the good thing is you learn about pre-built okay okay so npx Expo install react native mm KV and once we got that I will just quickly do a little final commit here before uh commit and push yeah save all committed changes whatever um npx Expo pre-built question from my side for the app Json do we have a scheme yes we have okay friends what is an expo pre-build should we do a quick uh talk through I think so so far we've used the Expo go application with the Expo go Application we can instantly serve the Expo application it's like a safe container to display our Expo react dative app if we want to use a package that is not included in Expo go which is not part of the Expo SDK like mm KV like flash list or like other packages we're going to do a pre-build in the past you had to use eject like three years ago everyone complained about eject eject actually doesn't exist anymore there's now only pre-built with pre-built you basically create an iOS and an Android folder here in your Expo project and then you can either directly launch from there or you can even still use the Expo continuous native generation CNG G with npx Expo run iOS andro roid sl/ device to directly run this native project including the native changes on your device and you can also build like your custom def cine that is something additionally but basically you're not losing anything by going for pre-build right you're going to see this now so I do npx expo pre-build here I just hit enter yes I want to use all these bundle names that's fine and now you see I got a new Android folder and I got a new iOS fold uh yes mm KV does not work on the web this is a little drawback here I'm sorry about that we're kind of breaking the web we could probably implement a fallback for that but ain't nobody got time for that and why do I have 28 emails unread emails during this stream are you all purchasing Galaxy's Pro or is this just random email spam I don't know damn uh if you did thank you thanks again Galaxy Pro check it out I think here down here is a text code BF 2023 for a 40% discount okay so this was the Expo go client let's see how we hello hello little application here okay please go like why am I not I messed up something I can't close this anymore I got to click here okay so the trick is now npx Expo run uh no npx Expo run iOS okay that's what we want to do Omar greetings to Bangladesh you're welcome here in this stream we're two hours in this is probably the longest stream I've ever done I'm so happy when I'm I'm done today my throat is could be better could be worth uh I still don't need to go to to the toilet which is actually plus maybe after this next cup of water um so you see there's now a lot going on like this is compiling our native iOS project uh it's compiling a lot of the pot files and what not all the things we have in that project but once it's done it should really quickly open up our simulator and again I could also deploy it to your device wouldn't make a difference um and then we got the same app we got the same result really um also there's one more thing maybe we can I can show you this already so because we're using draw navigation routes and whatnot I could in theory directly open this either with a deep link or with a URL scheme and by default the URL scheme is actually for iOS already implemented because we have a scheme set up here in the app Json file so if this is set up I can actually use uh a URL link with movie start I'm going to show you this so let's open my app um did I click on open or did I not click on open okay looks good looks good um so let's see a valid URL should look like this movie start so I'm I'm using my custom URL scheme and then let's see how our path looks like we have draw I think I don't even have to include that slome SL movie and then the ID of one of the movies uh Oppenheimer movie what is your ID this is the Oppenheimer ID okay so I could now have this somewhere as a link uh and it should automatically open our application I honestly something I don't understand is why I can't open the the switcher anymore from the bottom this is really a Pity let's see if I go here and put in my link can you see this so this is movie start/ draw slome SL something whatever this wants to open this page in movie start I click open and voila we are in the Oppenheimer movie hello Expo router and thank you for being awesome thank you this is great um this is just so much fun so imagine you could send this link to somebody else who has the app I know it is not URL Universal links or app links Android there's a bit more in url and uh validation of your domain I'm actually working on a course about that for Galaxies but custom Ur scheme and Diving right into it it just works it just works out of the box oh okay um where do you want to continue we want to continue with mm KV um so let's go to my Details page back on the details page uh will this stream be posted yes it will be posted on the stream just make sure you're subscribed to the channel to get notified about all the good things coming coming um what is this I used a variable here and I have no idea why um absolutely no idea what I did here absolutely no idea um oh yeah if we have too long if we have a super long text here we might run into problems do we have something with a really long text uh not really well then we just keep it like it is um also is this part of the universal apps with t and really attempted to pick galaxies with a discount right now yes um I'm still working on that course and while we speak and seeing your questions I noticed that I definitely need to improve a few things and add uh something more about tokens about themes so yes um this will probably we're going to do this as the base in a theme although it's got to be a bit complex with the API interaction everything like the drawer stuff so maybe we're going to like make the layout and routing a bit easier in that course and really try to focus only on tamagi but yeah then it's definitely going to be part and a lot more about tamagi not just using a few components and throwing in a style and a color token here and there uh that course will definitely be a bit more okay so what I want to do now is on my detail screen uh and by the way I I don't know yeah I I said this yeah code BF 2023 will get you currently 40% discount on Galaxy's Pro annual um because MKV is really cool we can now check if something is a favorite um set is favorite and we're not using it like this we will do it like the cool kits what we use is we use mm KV use mm KV oh no code completion come on don't do this for me uh I want to use mmk V Boolean no I don't want to use the Declaration Visual Studio code is always killing like my good moments it's really it's so hard okay so we're going to check if something is a favorite by checking uh media type slid so that should be unique and this just works if you enter that page mm KV will work like this it will check if there's something storage uh and it will be set in a synchronous way so no async call to async storage which is really really cool now I just I don't only want to know if Oppenheimer is a favorite I also want to update a list of favorites so this is just like my shortcut to this I will also keep track of favorites in general uh and for that I will use use mmk V uh object so there's a different import a different Hook from react native MKV that we can use um and that should give us a list or an array of favorites let's do a quick interface for that favorites. TS um export type favorite so really trying to embrace or use a lot of the best practices with typescript here in today okay I don't want all of that uh I want a media type here which is of media type uh then I have probably oh come on uh name name which is a string and a thumbnail which is also a string I think that should be enough okay so now on the details page I can also tell this is an array of favorites that we get okay cool now I need a function to toggle that so const toggle favorite toggle favorite and in here um oh we still also need a button to do this so if you need an additional button and you haven't configured this no problem you can always just access stack screen in here and set this up so now I can just say my options in here yeah this is certainly not what I wanted to do but let's do it for the import um so I just want the options and I want header right actually I could also set the title at this point if I wanted to uh header right will be set to a button I think we're going to use this from our tamag config and on press we're going to call toggle favorite and then inside I will just place an icon so ionicons name if it is a favorite heart otherwise a heart outline yes something like this uh oh yeah no I noticed that at some point I use this 128 for the mix WID yeah we going to have to talk about that later again okay we got a button up here doesn't look great so what we can do and I found this somewhere we can also set this to unst sted um so then we just need to use the button from tamagi I guess and not from our configuration so if I use the button here what have we got so a lot of unnecessary stuff clean this up a bit okay now we got the button up here um the button calls toggle favorite which doesn't do a thing also I don't really like the color can we do a bit different color please and make this a bit bigger um do I have to use the theme now probably like get themes I mean theme [Music] dot blue no uh how did we do this before we used the theme already somewhere in some sort of layout theme use theme and then we use theme blue s get something like this uh I just need to find the page where we editing this okay uh can I read property get that means we made a mistake here by get themes um it's not get theme it's use theme of course okay yeah if we use the same color like the bar it's probably a bad idea yeah better like this we also add a little animation here like a press animation where did we use the press animation who can remember yeah it was in the movie card um maybe like this going to place this on the uh on the I don't know if this works on the icon no not really but on the button I think it should work on the button do I have to set like the initial scale how does it look on the web okay on the BB it's not working because we don't have mm KV that totally makes sense uh cor Pro just purchase thank you so much thank you so much for the support I hope you enjoy it also new office hours coming up soon so there's even more beyond the tamagi course that's included and that's going to be included so um back to this totle favorite tole favorite uh let's check if it's currently a favorite so current favorites um or an empty array actually it doesn't make sense what I just said so yeah this is just keeping track of our current favorites if the thing is not a favorite then I want to add it and I want to add it to my favorites um this is something I want to do afterwards so afterwards I want to set set is favorite not is favorite that's pretty easy but here I want to set it to everything that's currently a favorite and then a new object a new object with ID Media type thumbnail uh movie qu data poster path and the name is movie query data name okay yep current is M uh let's see where did we go wrong [Music] id id is a string and I set up my favorites to be yeah that's totally good better okay if we add something now it will be added to our favorites because it's using this we don't have to do anything else it will be stored nicely um and if we want to remove it we should uh set favorites favorite filter it should check if favorite ID yeah or if fave uh media type une equal to media type yes got to account for that so TV and movie could have the same ID in theory okay if I heart this it has a heart Leo has a heart Oppenheimer has a heart if I go back to Leo it still has a heart and this so how can we confirm that we have these favorites well we could just simply Implement our favorites page um do we have a favorites page yeah we do we do have a little St layout here as well the stack layout here should be pretty much the same setup as on the homepage um so I will copy this over and by the way I will actually copy over these folders as well for a reason that I want to tell you in a second um so if I'm on the favorites list I can go into your favorite and I want to stick or stay within this uh um within this stack Navigator so the favorites page has its own stack Navigator and if I go into a movie page I want to go into it right here or here in the TV page I don't want to jump from the index to the movie here because that means I would leave my current stack Navigator and I would actually use the stick navigator from here I can tell you it will otherwise look totally horrible so so uh on the favorites page uh we can quickly get our stuff that shouldn't be hard in fact it should be exactly the same like we just did um so on the favorites page and it's so incredible there still 50 people on the stream I know that Vadim is having his live stream as well uh while I say it it drops to 40 of course um uh Vadim is having 86 people no no but I'm still happy that 40 people are here and I don't know if you watch both streams and you've maybe silenced My Stream that would make me really sad uh but it's so incredible to to see all of you here in the Stream uh being here helping me out with tamagi asking questions getting the the Black Friday deal um this is really I really enjoy today's stream even if like I guess later I can't talk anymore after this but it's worth method I'm doing this for you we got to have some fun so let's just start with a lock on this page if I now go to the favorites page function not implemented okay function not implemented okay yeah I should probably use mm KV object uh use mm KV import it just added this damn function down there no problem yeah thank you Siri why why just okay here we go and I get a lock with two favorites so our mm KV logic seems to work uh friend is asking so instead of using use layout effect left and right components for back of favorite icon you can use stick. screen exactly yeah this is exactly what you can do with the Expo router I think you can actually also do it with react navigation so Francis is asking about this strange setup of adding my stack do screen here in the view I could also use layout effect it would actually still work the same but I honestly sometimes think it would be better placed and use layout effect as it looks kind of like it's confusing in here I mean it's nice declarative but it's also confusing so it's like I'm not sure exactly if I like like it or not all right uh this is going to be my my main uh didn't we have like a main from the config just just a question all right um and then we're going to do another container here and then I will just favorites map this doesn't have to be anything fancy in fact it should at least be a scroll View scroll view okay and then we have link components key favorite ID this is not two this is still an AG ref I don't know when it will finally understand this um let's see link something should be here okay the hre is of course different the hre is Slash and now it begins draw again slash okay now I can I can show you hopefully soon why uh or what's the problem then we got favorites then we got movie and the ID uh then we have whatever included I will just say as child uh and once this is done we got the brackets we got more records and then we're happy okay Leo and Oppenheimer let's see I want a daughter whatever this is and something else like the naughty n whatever this is and I got my favorites okay so our logic does work in general because mm KV it just works really it just works really great with these hooks from mm KV uh now we have an object with my favorite store I can just prepare a little view here so let's see I want to use a list item from tamagi which is one of the components um uh I actually don't know what belongs into the list item I think the list item has some settings like title so let's set the title to favorite dot name okay yeah not too bad I think it also has an icon um icon equals uh then we got a component that we can place in here so let's place an image inside source URI uh is this correct yeah it's mostly correct nice thank you uh and then we can also change the size in here to I don't know one of these tokens let's use dollar where's my dollar sign here yeah well I've seen better lists in my life uh I've seen better lists but it's okay is there like a list thing uh with tamagi let's check out we haven't used a few of the components there actually so much more so a lot of components uh I could probably give this a different theme right um yeah not dark can I give what if I use light or alternative okay yeah then it's using like this I kind of don't want to have the background color I I think the background color is not good okay I use it like what are we using actually as the background color I wonder did we set up anything here uh subtitle title did we set some sort of gray is it like gray no it's not really gray I don't think the background color is gray no it's not I don't know where the background color is coming from to be honest um background strong press hover background transparent blueish stuff color gray dark one it's probably some sort of gray but I don't really understand why and which um so I will leave it as it was so if I now go here it works it kind of works uh my shared element transition is broken oh this is now like the the next level doing a shared element transition here from an icon that's part of uh the list uh yes the code is I I posted the link to GitHub already up front uh you can all find this on GitHub the whole code I will commit again in a second uh how did I do the shared element transition back here uh uh uh share transition Tex so this is what we need so I will give this to my any ated image okay the what do we got here uh we got the favorite media type uh and we got fa oh no we don't have the IDE we do have the ID oh nice that means in theory we should have a shared element transition on the favorite screen as well that was funny that was funny because it transitioned from that home screen to here because it thinks like oh they have this the same ID we should do in shareed animation yeah this is the right one this is actually even cooler than the list we had on the first screen I feel like this is this is really nice ah I still don't know like I don't know this is all blue theme so if now I can tell you we we set up this horrible file structure here where we basically duplicated the movie TV stuff here and also had to include it in both layout files I think there is a better solution but let me show you the problem for us the problem is if on the if we are now on the favorite screen and we would have only movie and TV under home it would look like this I would go to SL draw slome whatever and let's do a refresh and let's see what happens so this is my favorites and I go to something okay and I go back and I'm like huh where am I you see this is the problem I was on the favorite screen but then I navigated to the stack Details page of the home layout uh of the Navigator and of course if I go back I'm back on the home screen but that totally doesn't make sense I want to be in the stack Navigator of that favorites page so I do have to stay in the stack Navigator of the favorites page all right uh hope that makes makes it really clear now so otherwise you're going to have big problem big problems uh also using the same share transition Tech here and on the homepage is probably not the best idea probably not um let me do something okay I want to commit but I certainly uh don't want to uh commit oh my what is the shortcut going back here uh I certainly don't want to commit my IOS and Android folders uh okay if we now go here yeah that looks a bit better okay commit and push uh let's quickly check out my repository should be here movie Star Stream uh we could probably add a read me can like can co-pilot write a read me for me I really don't want to do this uh readme.md um hey the the empty line said press I to ask co-pilot chat welcome ask copilot please [Music] write uh read me file for this project that explains how to run it and that you need an API key which is placed in the EnV file okay don't make it generic you have access to my repository you have access to everything great outline please make it specific for this project could you please provide details such as a project name it's all here it's all there in my editor just use the damn information I'm asking again um can you write uh read me about this project ah come on I hate you co-pilot I hate you you I don't want to type this on my own this is like movie star live stream check out the full live stream on my YouTube channel why am I not writing anything because I'm an idiot all right check out the full live stream on my YouTube channel uh what is this this is a repository for live stream in this live stream I'm building a movie app it's not Swift UI uh react native in the movie database how to use this repository no there are not many branches I actually Wonder did I commit my EnV file yeah of course I committed my EnV file with my API key that's so genius s that's so genius ah just run yeah well npm install to install all dependencies and then Expo [Music] prebuild to generate oh to create the native [Music] projects then run uh Expo run iOS or Expo run Android to start the app great documentation huh it's good okay let's Commit This for everyone so the repository is not looking uh super boring and empty and then we can talk about some some last last minute changes okay I should really end mhm okay I think this what the sign that we should end okay here's the the final repository I don't feel like I can uh optimize the code anymore at this point uh because I think my voice will leave me pretty soon so I think and I really hope you enjoyed the stream it was 2 and a half hours um we explored xbo de and why it's great we used Tam uh for all of these cool things there's a lot more coming uh that I want to put up on Galaxies we use t St quy because even for simple fetch queries it makes sense to use 10 stick queries we had some animations from Expo stick and we used mm KV to build a nice list of favorites and we can even include in the list that we used Expo router and build a file based routing here just to wrap this up there are things that I would like to improve and I think that could be improved so yes the web UI could be improved mm KV is not working on the web and then this mess of files so you can have shared routes like a folder name with favorites comma something and then it duplicates the files but I just couldn't get it to work correctly here yet maybe in the future uh but maybe this is also something that we going to do uh on my workshop as I said the react native expor router work sh December 14 there's still a few uh slots left um if you are interested I limited to this I think to yeah not too many like really just a a handful of people five to 10 or something so if you're interested check this out link is let me put the link Workshop sign up here going to put this in the comments or somewhere else as well and with that uh I hope you had a great Black Friday I'm thankful for this community for your support a few of you already purchased Galaxy's Pro during the stream using Code BF 2023 I think it's going to be valid until Cyber Monday so if you watch this on Saturday Sunday you should still be able to purchase the annual subscription for 40% discount thank you Francis Edward Andrew everyone who's been part Phillip uh for all the feedback regarding tagui for all the help for the support and all the other videos and I hope you're going to get some some great Black Friday deals uh as well so it's been a pleasure I will sign off and hopefully get my voice back soon so then I will be back next week with something else so hope you enjoyed it if you did so support me where you can or just leave a like subscribe and share this video that would already mean a lot to me as well so have a great weekend thank you and happy coding

Channel: Simon Grimm

Views: 32,664

Keywords:

Id: r_Smo78tv8Y

Length: 157min 47sec (9467 seconds)

Published: Fri Nov 24 2023