🔴 React Native Todo App with Firebase and Expo

good afternoon good afternoon I think we're live uh we should be hey everyone what's up Simon back here uh especially welcome to Blind Ray good to have you back and do you notice something is different in here right I got a nice uh new background uh kind of upgraded my whole equipment new camera uh it's like a real DSLR camera new light setup microphone still the same background new sign new passive lights new lights new fun stuff in the background a lot going on uh so yeah let me know what you what you think about the new setup I think it's awesome and I love it um if also I don't know I don't think it wasn't any any uh video yet but I still think it's pretty damn awesome um by the way today we're talking about something interesting which is my most popular YouTube video ever which is building a to-do list react native and Firebase yes for whatever reason this is my most popular video because I don't have enough YouTube enough angular and ionic videos I don't know what went wrong with that but for some reason that video just took off uh thanks Josh great rising to you um let me quickly uh join for some epic uh react native development today put this up um there we go all right eight people already in the chat that's good good start um 10 already getting more by this second so um did you also notice that I have a new stream UI hmm so over the last weeks I've been kind of busy updating a lot of this stuff and even see this I don't know can we zoom into this I even got my own swag for next week's launch of galaxies.dev so um gotta be an interesting stream I'm gonna share a few things uh how do we go through my main desktop why should my stream decks it never works uh okay anyway here we go uh I prepared have I prepared something I think I have at least I thought I had uh but anyway we're gonna uh see how far we get the idea is that let me show you this um how can I go to my channel there we go um on my video section we're gonna see if I filter by popular this is what we see building a simple to-do app with react native it's it's kind of cool to have 100K views apparently I'm kind of sad that this is my like this is my maximum I thought I could have more um but anyway uh we're gonna try and do it better because in that video well let's see hopefully you can right oh the good old Dev tactic intro let's give it to me hey everyone what's up this is Simon from Death Tech with a new video tutorial on how to create a simple to-do app with react native and fire that energy in that video is epic it's just it's just unbelievable uh thanks for everyone who's been following me uh since that time it'll be we've come a long way seven years ago so today we're trying to do it again uh and edited 26 minutes back then so we should be able to do it probably even faster to do uh today yeah we should maybe look make it look even better oh so interesting how Firebase look back there it looks totally different now um so no I don't want to go to fireship uh but while we're advertising stuff yeah fireship is great but definitely also check out galaxies.dev right now it's not yet launched but it will be in about in in six days in six days is the launch of galaxies uh which I should definitely check out I can give you a quick really quick sneak peek this is what's gonna be available next week for the launch of galaxies dot Dev uh I prepared quite a lot of topic I try a lot of content um there's a lot going on on the page uh there will be many courses including courses from people like Simon a nice learning experience filtering experience tons of content that you're going to be able to dive into uh you can create free account or GoPro for pro courses I'm going to share all about that next week for now let's go to not fireship but Firebase uh Firebase Simon why are you doing this with Firebase and not with Super Bass that would be the right question for the chat I don't know why you haven't made that question usually you're quick quite fast with why are you using react native and not ionic is ionic deprecated or anything um but I'm using Firebase simply because we used it in that video back then and I just want to use it exactly like them it was the most viewed tutorial just for fun just want to do it again I actually created a fire app but let's do another one the fire uh video no fire Stream app let's call it like this so if you want to follow along create a project in Firebase you don't really need Google stuff for that but what we need is a new react native app so that's the next thing I want to create um actually I got a template I want to use so I want to use create Expo app followed by the name fire app uh and then I want to use the Expo template blank typescript right because a Expo is great I'm working on the video why Xbox great and B typescript is great that doesn't require a video typescript is simply great hey Omron welcome to the video everyone else tuning in today uh oh wait I need to my cup of tea too many drinks okay project is ready uh let's get Visual Studio code up my other project here is ready as well let's see I'm gonna have to bake this quite big my new stream setup Gonna Leave a bit of space for the preview in fact that's what we can do next one two three four okay for you today I'm going five in that should be fine for you uh and then we can install following the documentation of Expo so Expo has a package for using Firebase and why not use it because Expo is pretty great so we're going to use the npx Expo install Firebase can we wait a second and now we can start uh installing please install hello is my connection on that won't be bad no it's not uh I can actually run from the package days I can run Xbox art as well let's go with Expo start that should bring up this QR code I don't know what happens if you scan this QR code can you also access this I I don't think so but it would be quite interesting um so if you're interested uh scan that QR code with your phone it should open the Expo Go app but I don't think you should be able to connect to my local Expo that would be kind of strange but I can and that's cool so I'm opening it up right now as we talk on my phone and I'm actually also pressing I to open the iOS simulator we could even use the web preview if we wanted to with Expo which is pretty nice to um quickly develop something but I also already got this up and running here uh yeah great that works perfectly uh but anyway we got the iPhone here anyway oh that fits so nicely right It just fits right above my head I could even make this a bit bigger until here hmm nice what a nice setup and there we go that's our react native application running only this code if it's launched uh no I don't want anything like that and if we want to connect our app to Firebase which I want to do uh we have to initialize this in our project so I should create a Firebase config.js whenever I read JS I always think like nope I'm going for TS so here's the Firebase config tiers and they are creating it like this um I don't really need that yet but what we need is the usual Firebase configuration and we can just grab this directly from our app here in Firebase let's zoom into it a bit um before you get started you have to add one app I'm just going to add a web app yeah call it web app I'll call it whatever you want to and click register the only thing you really need is that configuration block which should come up right here there we go grab that and paste it hey megamax welcome to today's stream uh nice to have everyone on board I think it has been quite a few weeks since we had the last stream um ah way too hot way too hot um at this point when you initialize Firebase and also something interesting and that is um I recommend that we export a few things after initializing the episode in all of our other react Pages uh we're gonna need that object so I'm doing it like this at the same time uh this is totally not how it's done uh things why is the Auto Import not working um pity and why do we have an import for Firebase app we shouldn't have that in the first place so I want to export these tokens then it's pretty clear that we can use them like that so let's update this up here to use all the functions that's using the I think it's worth nine of Firebase yeah nine point Seventeen of the SDK which introduced this modular concept just by asking what is Expo so that's interesting um Expo is basically or I'm creating a video on this right now it's it's actually a suit of different tools so if you check it out um expo.dev okay this is opening my internal Area Community just sign out um it pretty much helps you to easily run your react native applications it offers a lot of things so if you go into the documentation as we've seen we can easily create our app with Expo I can then use Expo in the Expo Go app to easily get a live preview of my app by the way ionic is also working on this again they had this in the past so if I now shake my device let's see if I shake the device yeah I got it that will bring up this debugging view which is pretty nice I can reload the app open debugging or go home and this is the Expo go application so it's basically an application that all kinds of modules and plugins already installed and then it just presents your application it can do this unbelievable fast with live reload on top of that Expo has tons of other functionalities um if you check out the documentation there's an expo CLI there are packages that you can use um if Expo has or Xbox has some limitations or had some in the past and then you can use a bear workflow a pre-build Expo can build your app in the cloud with the Expo application services so there's really a lot and pretty much it's like the the recommended way today to build a react native apps unless you really require a lot of native modules and have specific reasons not to use Expo but otherwise I really I just recommend going with Expo and it makes life a lot easier oh good thing I'm skipping through the Ducks here uh we also need to create this custom Metro config for the bundler in order for Firebase to correctly work so let's run that as well Metro config and within that Metro config uh we're gonna paste in this thanks happy to explain it yeah I've been I've been asking myself the question if I should use the react native CLI or Expo because it's like it's a real big decision but apparently it's really a good idea to use it like this okay um let's create a new folder I'm going to call this app and under app I'm going to add a new folder screens just to structure our views a bit and I'm going to add a file list.tsx so I could just render this um I'm going to use a react function uh react native functional export component um I could just render it like it is but uh we also want some kind of navigation so in order to get navigation we can easily install um I had this open somewhere there we go I actually had everything opened I wanted to show you uh we can use react navigation so that's pretty easy to integrate and uh gives us nice benefits so let's do this we can run npm install react navigation native and then we need to follow that up by some Expo installs exponents.org native screens and react native safe area context and I think there's one more thing uh if we want to use like stack navigation yeah we also need this here uh the react native stack so there we go and we should have everything that we need and we can create this stack navigation I think we're just gonna do it in let's just do it in the app it's not the on the best place you can also all usually have a different place to do this but let's just initialize our stick in here I'm gonna call this like whatever you can just call this stack or root stick and then you can create your stack then you wrap your whole application in the navigation container and then we put in our stack dot Navigator and then we Define the different screens for the stack so it's a pretty straightforward setup let's call this my to-do's and the assigned component is the list okay and at this point we should hopefully see yeah so we now have this header bar which says my to-do's can you see this by the way it should be let me know is the simulator big enough can you see uh all of that or should it be can I actually make it I can't really make it bigger apple is showing me the icon but I can't do it okay um this is the stack screen so we can have multiple screens one had like a Details page now let's do this for fun because the navigation with the react native is really easy so relax native functional export we got a details screen and then I would include that as a second screen here let's call this details and attach the details component to it and by the way remove the Styles not required anymore um and now I could go from the list to The Details page by just using uh button react native oh come on give me the import Ed from react native what's your problem I don't know uh on press oh no we got it on press I want to use the Navigator which is injected into every component by the navigation uh I don't want to do like the whole typescript thing so please kids don't do this at home uh don't do it like this we could have like a nice typing and instead but for now I'm just gonna use navigation or is it called Navigator no I think it's like this navigate and then I want to navigate to what do we call this the details and that should work that button needs a title it's called this open details then we should have yeah exactly open details oh yeah of course call it like this there we go that's our stack Navigator uh uh always upload source code yeah I will try and do this and upload it to a GitHub repository and put the link into the chat uh once we're at a nice stable um anyone else getting questions about react native so far um happy to answer everything that you might be interested in [Music] until you come up with some questions I'm gonna continue because all we want to do now is connect this to Firebase so if you don't know I think seven years ago nobody really cared about Firebase uh today it's like the biggest and most used uh Cloud backend so um it's just I've used it in the past many times until I use now Super Bass in most of my pre-kate cases you got everything out of the box but Firebase really authentication Cloud fire store so you get a database um you got real time you get storage to upload you can host it you got Cloud functions your push notifications and so much more in Firebase uh today there's like infinite stuff A B testing even I haven't really yeah admob I think I used some of this but definitely not all of this so seven years later it has grown really a lot uh we're gonna go ahead with Cloud firestore now and I want to start in test mode so by default it will start in production mode and disallow any rides I'm just gonna allow any variety because I don't want to implement authentication today so I'm making this a tiny bit easier uh uh things is this a subscription or is this like a donation I think someone subscribed so thank you for subscribing um okay let's enable this all right I cannot enable fire I don't know I had this recently again but it yeah it already started this so strange so strange yeah I'm just gonna allow it if right true perfect security rules also don't do this on production now let's see uh what's the fastest way to create it to do maybe we're just gonna do this by hand uh let's use use effect uh empty dependencies here and then in use effect I want to access my um my firestore database so uh the first thing we need to do is we need to use our firestore database coming from here firestore DB dot um it is like this oh yeah of course need to use the modular system from uh Firebase today that me uh uh should use um add doc to add doc we need to pass a reference to a collection so let's create that reference to a collection and to the collection files we need to pass our firestore instance and a pair let's call this to do's okay and at doc has the reference and then the actual data so let's put in some data uh let's say title I am a test done false so this should now run when the app refreshed and we should be able to see some data here if we did everything correct uh async storage has been extracted from what the uh okay looks like we didn't do anything uh it can be nice see what is this cannot update a component while rendering a different component to locate the set state that sounds interesting uh uh where are we and where's this button I added like a second before it has magically disappeared uh let's see let's probably let's define a function and do it a bit later oh there's everything wrong with that function there we go it's better let's use doc equals this and put a print in here so many raw things in here anyway now we can probably just use a button and Trigger that so let's give it a try button on press I want to click add to do uh add to do button please add the import from react native it's not that hard oh yeah we need a title um add to do and then I don't need this I can close it immediately in here okay better now let's do a sync test I'm gonna reload the app uh what is this async storage has been extracted from react native crore and will be removed to a future release can now be installed in power rank native async is this relevant I feel like it is relevant to me although I haven't seen that error before um also after clicking my attitude it definitely didn't add the to-do so I feel like this is important to me using storage do you have to install this did they just do it like yesterday and asynchronous I'm going to encrypt a persistent key value storage for Rick native anyone ever encountered this ah there was actually a question should I use async storage about this well looks like we have a nice question here uh can now be installed I feel like I don't want to install this but is there is used in yeah it's used in Firebase oh it's used in Firebase authentication that's good uh because I actually don't plan to use auth right now so probably uh if we're using authentication we should look into that uh um does the Expo documentation mentioned this let's check it out [Music] any other things like native Firebase Firebase install blah blah we do have that Metro config I think yes we do um oh then it's just guiding me here that's so nice of you uh so kind so kind but it looks like we probably have to install this local storage um anyway can we now use our ad to do that's a more important question uh nope we can't let's see why uh we got the button on press I want to call add to do now it added the to do I can feel it oh it actually added it already twice so there we go we got data nice oh it's time to take a sip uh my question how do you keep a user signed in with Firebase when closing refreshing the app usually this is handled by the package it's a Firebase or Super Bass they usually manage the the session and the token in the background so uh usually there's not much you need to do about this and if you're using um Firebase all like this you can usually use something like on off State change from Firebase auth to subscribe to the changes and passing in Firebase off and then having the next Observer should be like a function and then within here you can check like uh the user or something some kind of object yeah user so if you do have a user then do something else now and then you could easily connect this or have that inside of your app um inside of your app function and set a state like logged in or locked out and then return which screen you want to activate so that would be the whole idea to using um authentication in there now let me remove this again and I'm going to comment this out since we're not yet using it anyway uh hello from Indonesia hey ask me hey Jonas uh thanks Ray great great happy you seem to love this um Walid is asking is react native worth then flutter for no reactive um probably not I think probably not I think I think react developers really benefit from react native as they can use their existing react skills from from web development and bring that over to react native and easily build cross-platform applications I do think for everyone else like for angular probably ionic is really the way to go Angola or just capacitor in general or if you really want something else then yeah I might look into dard and flutter um but you don't really have to get into Rec native like all these three tools shine in different cases so I got this question the other day again which was the best framework um there's just no best framework uh will this tutorial have authentication let's see how far we can get um so I'm gonna add a little State now to our view uh so let's add to our list to Do's an array and a to-do that we can add as an input um and then we're gonna have to create a little view we also need to create some styles to make that look nice so let's do this super easily with a style sheet I'm intentionally not throwing in Tailwind native base or anything else today um because it's actually like we can just do CSS it's not that hard so let's try um we first of all need the input so I'm gonna add another view in here I'm gonna give the first one styles uh no style and then Styles dot container and then we're gonna have a view that should host the elements so a text input element [Music] placeholder and new to do on change text I wanna add the text or set this as my current to do and as well have the value of to do so there we go that should be a text input okay it doesn't look good but we can style that in a second after that text input I also need a button button on press so we can have kept that button from before I just notice also just pass it like this add to do title and to do it should probably be disabled while we don't have a text so let's say disabled when to do equals an empty string okay uh looks horrible but it somehow works and we should be able to add some Styles so let's first of all give the container a bit of margin horizontal in general so then we got that then we should craft something for the form let's call it form I'm gonna give this here form um and that form should have should definitely have the flex Direction so then we have yes everything by each other then we're gonna give the input field a flex of one so the input field should expand the Here style equals style start input so now the input is taking up all the available space in that form we also want to align the items Center then the add to do should be on the same level or is it uh form let's style also the input field it's a bit hard to see this but it looks it looks correct let's give this a bigger hate it's definitely too small to use 40 or something then we want to have a little border with we're going to give it aboard a radius as well to make it rounded uh-huh okay yeah then we need some inside padding yeah it's coming along nicely um probably as well background color we're gonna give it a white background that should uh let's give the form some margin vertical yeah that looks better it's not too bad isn't it so we got a border radius we got pretty much everything if I remove this it's gone nice I like it that's not too bad we could probably change the Border color but yeah for now that should work um this is also connected to our to do so instead of using title here I'm just gonna pass in my to do and once we're done with this we should probably await that call I'm gonna set my to do tune empty string so that means we should at this point be able to add documents to that collection so let's add the collection for testing and then let's see if my first to do and to do and voila my first to do perfect nice that works great hmm so after doing this um uh we should probably now get the to-do's and display them and then we can see if we can also introduce or add another login page shouldn't be actually too hard so let's use the use effect hook another setup we're going to create a reference to our collection just like we did in here so that's our reference to that collection and now we can subscribe to the changes like we can also get one snapshot of that collection but then we'll have to manually update our local data and edit or remove it so instead we're gonna say cons subscriber equals on Snapshot from Firestorm and we now need to then we add the import yes now we need to pass in the to do ref and then the Observer so that looks a bit strange we can have a next function here that handles the new snapshot and I could just now say I can lock the snapshot but it's actually a pretty boring snapshot so I'm just going to create an array of to Do's we could probably add a type for that right uh yeah maybe we've got to do that in a second hey Jose what's up welcome thanks for joining in today's stream about Rec native something different today um I'm gonna get all the docs from that snapshot and iterate them I kinda let's use four each why not I'm using for each really rarely I don't know if you're using for each a lot I usually use something else um but at this point we can push each of those documents uh to our array and I'm just gonna use because usually there's a lock that can we lock this out now after reload uh oh my goodness uh is this a document yeah I think it actually is so that's a problem of that doc it is really horrible and you need to call doc.data to actually get the nice and clear data let's see yeah then we get this done in title the problem is there's no ID so we also want that usually if we want to update something so as a little hack we can now just push all the information from duck.data but before we do that we also integrate ID and set this to Doc dot ID so that's a nice little heck here here that means once we got that we can set our local to Do's array to these to do's now I'm going to put in lock updated so we can see whenever we change something okay uh no we also need to make sure that we get rid of this subscription once we're done here so we can just call it like this okay now um we can actually display all the to-do's at this point we have all the information we need so after our form could create another view and I could now go ahead with to-do's DOT map and then for every to do I'll just render a text saying to do dot whatever then we call this title and then we should see yes we see my first to do oh yeah we should pass in a key okay everyone happy yeah my first to do let's add something second to do and it immediately appears in that list because as we can see the snapshot was updated and that was what I always found so amazing about Firebase like it is so easy to use real-time data whether a classic rest API you gotta make another get called post or you gotta use socket for that and with Firebase and yes also a super bass or upright and other things you get these real-time data binding and stuff just basically out of the box that's so cool so um it actually was pretty like seven years ago people would be super excited about that kind of stuff and today's like yeah yeah I can get it here and there and it's not that cool so it was definitely a lot cooler seven years ago but anyway um let's also now wrap this up by creating a little uh list for our items and if we got time we could probably create a quick login page as well so in that view here I'm just gonna render that view if to do stuff length is greater than zero and then create that view and in that view what I want to create is a flat list probably don't need actually don't need a don't actually need the view around it but anyway flat list data will be our to-do's array um then we got a render item function to which we need to pass a function that renders every item and then we also need the key extractor or we can easily set this to to do to do that ID I should come up with the interface export interface to do oh come on so this should have a string a title um done is Boolean and then also the ID which is I don't know if it's a number or string okay so this is actually an array of to-do's uh oh yeah that can say as to do who I can can I also say this cool set is fine I don't actually know which kind of um version of typescript we're using here so that should be fine then I can also have something like this I have a to-do then I get easy completion here and same for uh same and there was a place where I also wanted to use this I don't know we're gonna probably Discover It Again In The End God damn that item and let's maybe create a new function I'm gonna call this one render to do um it gets an item one half code completion here that should be fine and then in this function I'm returning let's just for now again return the text to make it simple and I'm going to use item Dot uh is it actually that item if it is passed to it item we're gonna try I'm gonna give it a try so let's see I'm gonna pass render to do to my flat list and if it still renders the same then we did everything right yeah it is it does yeah nice that's that's an easy implementation for flatless I was actually expecting this to be a lot a lot harder hmm it also means now I can just yeah build my to do item in here with whatever kind of functionality only thing I'm sad about is that this item here can't just go like this uh the item does not oh it's not titla it's of course title yeah but then render item complains right um um can we pass render item how does render item usually like hey from God hey Rafael thanks for tuning in uh render it takes an item from data and renders it into the list I mean you know that to-do's isn't to do arrays so every item we get here list render item info oh no not to do yeah okay you're definitely not happy about what we're doing in here uh but I'm pretty sure there is a way to do this um it's not this way uh so we're gonna go without code completion here we will fly blind uh in this case um anyway so instead of using a text now for every view we're gonna return um um let's return a view so we can inject some Styles and in that view we're going to put a touchable touchable opacity um and on press I want to call the function so I'm going to add that function in this render to do I'm just going to call this uh toggle done async and then while we're here let's do another function toggle done delete item so then we're gonna do our toggle and delete function [Music] um uh we just need to call that here and put in some styling as well but most importantly we will also have our text with item.title and probably in front of it we could have some icons so if the item is done uh we're gonna display I think we can use the ionic cons from Expo or at least we should be able to do so let's see import uh what's the import at X something with Expo right Expo icons what's the Expo I import for it's Expo ionic hunts uh something like this yeah but that never worked let's give it a try uh if it's done I want to display I don't know a check mark MD check mark Circle can this work I have no idea it's use not done yeah it is displaying something that is good news uh whatever I done no I didn't want to do this so now we just need to cover both States so if it is done we display this check mark it is not done um I think there was no item previously when I looked them up uh can I find this like Circle there's no empty circle I just want like an empty circle from feather okay uh is there nothing else really just a circle I thought something from in typo uh let's see yeah they also have a circle let's use that one can I just import that one okay that means we have that empty circle and we should be able to toggle this state uh we also need to make this look a bit nicer because it looks horrible right now at the same time I also want to use a trash bin after this so let's add this as well now we just need to align this it's as easy as that right uh let's see for the to-do container uh so that should be like the wrapper I'm gonna add a to-do container then we have the to do text and then we have the actual to do so let's put in the Styles here The View gets styles dot to do container so for the to-do container I want to align everything in a row just like we did here that should already make this look yeah a bit nicer a bit more friendly and once again align items Center thanks for that um maybe I'm also going to give this a background and we can distinguish them better so background color okay now every Juju has a white background let's for debugging use something else okay let's do it like this and then we're gonna give it a padding of 10. so every item has a bit more space but also some margin vertical so we have some margin between different list items I think that looks quite good um I think that's okay it's four of you now the only thing is it's not really aligned like um our touchable opisity has a has an issue so this definitely also needs a style dials dot to do oh no I called this Dias this should be styles why is nobody telling me this are you even watching uh okay just a few places uh so for the touchable opacity we gave it the to do Style let's see what we need um we want to also give it Flex Direction row and align items Center then we have everything aligned and now if we give to the to do text Flex one again it should take up all the available space if we assign this to our text uh let's see text Style Styles dot to do text and then we see oh where's the where's our remove hmm let's go back to white color okay it's it's there but it's not really there uh let's see we got this we got for the to do we should probably also have a flex of one yeah and can we have I think the problem with the to-do containers we can't really have any gap between them so I'm just going to give the to do text a petting horizontal of like four so it's not so close to this so at this point we have our list uh and something and it shows up in the list and we just need to connect this to the toggle and delete functions I think for in terms of the UI this is not too bad uh let's also connect our uh button here yeah with the on the elite and the touchable is with toggle okay that's good so this is now actually pretty easy we only create for every to-do item one reference we create the reference to a specific document so before we have the collection in firestore and we were adding a document to that collection and now we just accessing one specific document again the reference to the database as the first argument document please import from firestorm and as a second argument we have the path so the path in this case is the path to one to do item so it should be something like to do's slash uh item dot ID it should pretty much exactly be the place and now with toggle done we can use the other modular functions we can use update document on our reference and we're gonna set done to not item done so we're just inverting that and for delete we're just calling delete document on that reference and that is all we have to do so let's explore this I'm going to open up here and we're gonna see let's see my first to-do I'm going to toggle this and it changes to true I can toggle it again and it changes back to false I can also remove it and I will remove my to do this is the power of Firebase real time in action now the only thing I don't like is how our icons look so the circle um let's make this a bit bigger making the circle a bit bigger then once it's done the check mark should be green ah doesn't it look good let me know what you think cool to do so it's that easy I love it love it nice uh yeah what a relief that it worked Rafael would you be using the original Firebase Plugin or some custom package I am using Firebase with Expo right now for react native Elsa can you make a video like how to perform Google login using passport.js and Expo oh that is a nice question yeah that sounds definitely interesting and doable can we do this there is on Google login Google sign and I probably won't find it like this in the documentation my current Visual Studio codes theme is the shades of purple if you like it I kind of like it I'm pretty happy with it I'm placed I'm using it since quite some time already um yeah while we are here let's quickly add a screen let's add a lock in the TSX I think we probably won't complete that um but anyway we can maybe do this um if I just copy some things from our view here just text input and button stuff so let's see add all missing Imports oh then we encounter the problem again with uh with the authentication stuff right Ah that's gonna be challenging uh I'm going to use the same input stuff we had on the list page where's my input that we got so I use this stuff again um I'm gonna have a function of const sign up and also a second one for sign in I actually don't know if we've enabled this in our app so you have to check that out under authentication yeah probably not so I'm gonna hit get started we don't really have any security rules but I will just enable email password I don't want to have email link right now so this is now enabled this it's called this one sign up then we need a state for the two Fields or we could also just use um but I would always use something like use hook usually let's call this email said email password sad password Key State from react and then this one on change will call set email and this will be the email field I don't have a label but I'm pretty sure you can figure that one out uh email and we got a second one which will be password can we have a type here keyboard type uh text content type password place all the passwords set password value password let me just um need to integrate this into our stack so we got sign up we got signed in I would probably call this create let's see uh we're going to the app.tsx so instead of using the details page I'm actually going to use my login page here login and now I'm gonna say that the initial route name is login so then I would start on the login let's restart the app there we go now we're on the login page The View should have some styles Styles dot container and I would look make it look nice we got styles.input um we don't do we have a form around this did we use something like form oh yeah I just gave that view uh okay yeah whatever Style Styles dot form and I think I added just all of that into the form well that's kind of it's well not really what I wanted to let's not do this I actually looked better like this I also don't know why we don't have the text input does have a height of 40. um so I'm not exactly sure why the input is not using styles.input should be used but anyway um oh I can't can I click into this what's your problem give this a decent Heat uh Flex Direction column padding vertical I'm not sure what you're doing here but those text inputs are way too close to each other they both have the input why is there hate not working okay okay now we got this so now we would just have to use um from Firebase sign in with or sign up with something so that would be from the authentication provider I could actually call just get off here and pass in the Firebase app I don't think I actually have to pass in any kind of app so I think I can do it like this let's give this a try get off and then when I'm here to sign up I can say oh Dot uh uh what is the call currently to create something they always change the name uh update current user tenant settings emulate current user config before on Earth they change and it's certainly not what I want uh uh also like Rec native with expert I find it hard to use but I find it hard to also use capacity yeah well you can't use react native and capacitor at the same time that's uh definitely not working but why can't we use authentication right now what's the call uh app off get off and then we do create uh create user create user with email and password damn that was a long long shot and then we need to pass in email password and that would hopefully uh create the user and then this is probably another call to sign in use sign in with email and password yeah and actually same stuff like before so this should most likely return a user uh let's see I'm gonna just lock out and alert um check your emails so let's see okay now we're getting this issue again with uh react native persistence so let's see uh what I should probably just ask check GPT about this and was added your packages and isn't clear realizing the trapped in the Navy Firebase nine six eleven what are we using I thought we had something like nine 17 we have 917 we're far ahead aren't we uh take advantage I want to use initialize all the custom persistence uh okay so there's so we need to call initialize auth before this well interesting does nobody talk about that react native Firebase auth or ity native Firebase so we could also listen to those changes yes and this is not what I wanted to but probably maybe we can extend this uh the next time so this is definitely something I'm gonna look into and figure out because I'm gonna have to read a bit about this um and why it exactly is not working yet but this would be pretty much my Approach and then just as I had before in here uh I would probably uh his effect and then on odd stay changed have something like uh const authenticated set of authenticated if you state false and then we want to return [Music] probably going to break the initial route name something like that or just check if the state is so something like authenticated then we would return I could probably even have this before that could be interesting we could definitely show this next time um so far we had some fun with Firebase and I think we did a quite good job so far I'm just gonna go back to the initial route name of my to do's and reload my app so this is what we've built I think this is pretty cool we get this really really fast with super with Firebase uh if you're interested in doing this with Super Bass as well maybe leave a comment below the video and of course as blind Ray already said uh you should definitely check out galaxies.dev which is launching next Wednesday 1st of March uh you can still get on the initial launch list so you don't miss out on uh all the deals that I sent out during that launch and of course thanks for joining me for two days uh live chat uh there will also be a live chat next Thursday after the launch of galaxies so I currently plan this with the team of galaxies so our designer and developer might join us here so we can talk a bit about like the technology behind galaxies how we've built it and how it started the idea and how everything came together because we've been working on this for a month and um it's just like there's really a lot to this big project it has a modern technology stack and third-party stuff and um everything was quite hard but I think it could be quite interesting to give you a little look behind the scenes and of course we're gonna talk a bit about what's already included in galaxies then so make sure you join next week uh launch of galaxies will be next Wednesday live stream should be usual time next Thursday so tune in and uh have a great week until then of course again thanks everyone for joining in the questions thanks Ray that you've been part of this and you've been waiting for it half an hour before we even started already love it uh so hope to catch you next week as well and until then epicoding

Channel: Simon Grimm

Views: 41,679

Keywords:

Id: TwxdOFcEah4

Length: 64min 43sec (3883 seconds)

Published: Fri Feb 24 2023