Easily Build Apps with React Native

Key Takeaways

call to come in and get the good chairs if you want to come forward. All right. All right. Ready when you I'll just say a little something and turn it over to you. Okay. All right. Okay. Hey, uh thank you everyone for coming. My name is David Mlin. I teach CS50 and work with the whole team here at uh CS50 R&D. We're so pleased to have our friends Nick and Charlie from Expo. And the context here is that this spring semester um I also been teaching a class called CS164 software engineering. A couple of whose students are here with us today. And both of my teams ended up choosing mobile software projects uh for their uh f termlong projects. Um and initially they both started using a new and up andcoming framework called React Native which is both powerful but also not necessarily as easy to use as might be ideal. And so came into the picture something called Expo. And that is exactly the software package with React Native that we're about to hear from from our uh friends here today. So without further ado, Nick. All right. Uh hey everyone. I'm Nick and uh I work with Charlie on Expo which is a tool that lets you write JavaScript like just the same JavaScript code for both iOS and Android app development. Um so just going to dive right in and uh just to get you guys as excited as I am. I just wanted to show you some stuff in the I candy department. So on the left you can see uh an app made by one of my friends. His name is Brent. Um, it's just a list of breweries in Vancouver and um, it's it's just a short video of the app. You can see it's got like smooth scrolling. Um, and it's got like this cool header animation when you scroll around. It's all made in JavaScript. Um, but it doesn't feel like a web app. It it feels native and it's got like um, inline map view, like a nice gallery. Um, you can, you know, like scroll and zoom around on the map view that's in line with the UI. And if you wanted to full screen the map, you can do that, too. Um, my internet was a little slow while I recorded this, so that was just the loading of the map view, but it's an actual native map view, so you'll get the same behavior. Um, this other thing on the right, which is super fun, is um a Minecraft clone uh made by um some someone on the internet named Evan that we ran into like on Twitter. Um, and you can like walk around, jump around, the usual Minecrafty stuff. And this is on Expo's graphics library. And uh this is something we're going to play with today. So you'll get to see how to do 3D graphics on Expo. Um and the controls um on the bottom left uh the the D-pad that I'm using to like walk around. Uh the buttons on the D-pad are actual native like iOS buttons. So you get you get the best of both worlds. to get iOS um like actual native buttons as well as the 3D graphics abilities of WebGL. So um just to give you a short overview of what we're going to um look at today. Um I'll start out with some background on how apps are made like not using React Native or Expo and like the most common way to make them which is either you're doing native development which is like you code the way um the makers of the device intended. So on iOS you'd be writing Objective C. On Android you'd be writing Java. Or you can um do um the same thing that you would do for like desktop web development except like make it for a small screen and and it's a web app and you can have that run through like Safari or something or you could use something like Cordova. Um and just a background on like the pros and cons over there. And then we'll do a basic quick tutorial on um very basic UI with Expo just like buttons, text, and we'll just throw in a map view there just for fun. Um and then I'll try to do a 3D graphics example. Um and uh after that, we'll just open it up for a Q&A from you guys. So um yeah, so uh in the background section, the first uh part I wanted to get to was native app development. So, as I said, like um for iOS, you'd be writing Objective C, which is this language that's like it's backwards compatible with C, and it's got like a bit of like small talky like message passing going on. And it's like um it's it it looks a little complicated and noisy. And you can see like that's the hello world app over there. Like that little black background text that I just squeezed in there. And there's a lot of accidental complexity compared to just saying hello world. Um and then that goes through this program called Xcode. It compiles to some like blob of binary stuff that you then put on your phone uh using a cable that's a physical wired cable that connects between your computer and your phone. Um and you do similar for Android. You write Java and that gets converted to Java's JVM byte code go uh with Android Studio and you still I believe you still need like a physical cable. Um so you can't just like you know remotely like update um apps that easily if if you wanted to do it wirelessly or if someone was on the other side of the world or something. Um yeah and the code is like sort of hard to write like um compared to stuff like HTML and JavaScript stuff like that. But you do I mean a lot of pe I mean this is probably most of the apps you use on your phone are native apps. So why do people do this? because you get great feeling and good-looking user interfaces, right? That like feel good like using Facebook's native app uh rather than their mobile um website like feels way better. Um and also you get native um APIs like the ability to for example um if you have like a messenger app that you want to make but you want people to be able to login with Facebook in that messenger app then it can use Facebook's native login. So stuff like that. Um and yeah, the distribution model is through the app store and the play store. Like pros and cons there. So I just like put in an ambiguous thinking face emoji. Wasn't sure what to put. So um yeah. Uh and the other thing is you can use JavaScript, HTML, CSS, the usual stuff that you would use for desktop um websites, but try to fit it into a small screen and uh try to like emulate the user interfaces of native mobile phone applications. Um and this is uh the coding here is is like way easier. you can get to this level of ease by just adding more and more abstractions on native but like using a live interpreted like language there's just like systemic differences there so for example like the user interface paradigm is like very declarative you just say I want this title I want to say hello world you don't you don't like have to say like um make a new like make a button add this text into it like that's what you have to do with iOS it's like it's like working on a scene graph almost um but yeah you just open what you're working on in a browser. Like it could be Safari on iOS, it could be Android's Chrome, or you can al you can also test it on desktop. Um but yeah, the featur feature wise it's like problematic because um the user interface uh tends to be like sort of laggy. Um it doesn't have all the features that you would get with like a native map view. Um and it's it's hard to I think it's probably impossible. I'm not sure, but it's hard to like jump into the native Facebook login from a browser and then come back to it. Um, and there's a lot of native APIs that you want that Facebook login is like a basic example. If you wanted something like streaming a live camera view onto a rotating cube in in a video game or something like I don't know if you can do that. Um, you can actually do that in Expo now. Um, but yeah, uh, the sharing model is super great though. you can just like send someone a URL and they just see it and if they refresh they get the new code. Um and in and if you like change your code in between they'll get the you know they'll get the update. So um just to compare all of that with expo like I could you know just like lay out the differences to you in text but I thought why don't we just like try it out. So, um yeah, the first tutorial we're going to work through is um making basic user interfaces on Expo. Um and uh for the first tutorial, um we're going to use Expo's web uh browser IDE. Um it's just the code editor for one file right now, but you don't need to install anything. You can just open this web page and just like write your code in there. Um, and on the phone, um, you need to install this app called Expo, which is the thing that you use to view your projects. Um, but yeah, so so you you'll get to see how easy that is. So, let's do let's just do it. Um, so this is a mirror of my phone screen that I have in hand right now using QuickTime. Um, and so this is our website. Um, and the website that I was talking about on this slide, snack.export.io. Let's just go there. Um, and what you'll get as soon as you go there is um, this QR code. Um, and in the back you can see that there's some code which is what we'll get to like after we get through this QR code thing. Um, so the other thing you want to do meanwhile is on your phone um, you want to install um, this application um, which is the Expo app. Um, you can find that on the app store or you can just like find it on our website. Um, but if you go to like Oops, sorry. Yeah, if you go to like expo.io on your phone and just like scroll down and if you're on an Android, you would touch Android, but I'm on iOS, so I'm just going to hit iOS. And um, it'll take you directly to where Expo is on the App Store. And you should be able to do the usual thing to just install it. But once you have it, um, this is this is what you get. Um, and yeah, just hit scan QR code and you get a QR code scanner and just scan this QR code that you're looking at on Snack. Um, which is our name for the online editor because it's like a small piece of code before your main meal in Expo, I guess. But yeah, so um, yeah, that's it. And now you're coding like a native app. So um this is what uh React Native uh user interface code looks like which is like the library that we use in Expo for user interfaces. Um and it if you use React on on the web it like totally just feels like React except the user interface that it's making behind it is not you know the normal web document object model. It's actual iOS buttons and stuff. Um, but over here like the first thing you can do is literally just change this to something else. So like hello world. Um, you'll see it update right away. So that's how quick it is to just like change stuff. Um, but um, yeah. So let's let's uh I guess it said device disconnected. Let me see if it's still on this. Yeah. Okay, not bad. So um, let's like dive right in. Let's try um adding like a background color to this text. So I'll go back to what I had before. And um so what you see over here is um there's a view component inside which the text is. And if if you're if you played with HTML um it would be familiar with you the nesting of the UI that's happening over here. And the view the style of the view comes from this styles container thing. But we could actually just like inline a style right there. Um, I'm going to add a new view. And so this thing's going to try to keep updating to the latest code while you're changing it. So if you have an error, it's going to complain, but it'll like fix itself right after. So don't worry too much about that. Um, let's just say background color white. and uh move this text in there. Um okay, so it seems like it worked out. Um so yeah, now you have um hello world and like white background. Um, if you've done like native coding, like you'd have to like make uh make like an object in Objective C, which is the background, and like change its color and stuff, and like figure out what its coordinates are. I think it's like better if you use their visual development tools, but but yeah. Um, so the next thing we're going to do is try to make it like touchable so that it it responds to like touch when you when you touch it. Um, a basic component to do that in React Native is the um, touchable opacity component. What that means is like when you touch it, it responds to that by changing its opacity so that there's some like feedback involved. Um, and we can just change the view to be a touchable opacity instead. Um, seems like I'm going the same typo twice. That's funny. Okay, so yeah, and when I touch it now, uh, you can't see my finger on QuickTime, but I'm doing it in real life. Uh, but yeah, you can see that it responds with with this thing, right? So obviously you know you want to actually like do something cool when when we touch it. So um let's just pull up like the logs view which which um which is where like console.log messages would pop up. Um and what we'll do is just make it print something when you touch it. So these things that follow the name of the component are called props in uh React. Um it's similar to like HTML attributes. Um we're going to add a prop which is a function that would be what to do when uh you touch it. And that prop is called on press for touchable opacity. And um that function syntax that you see there is like a lambda anonymous function definition in like in like new JavaScript stuff. Um, but we're just gonna say just log touch, right? And so when I touch it now, you can see that and it says Nicholas's iPhone because you could have multiple iPhones connected and you want to disambigate which log um came from which phone. So um yeah, so there we are. So we have stuff happening on touch. So um now that we've seen you know display output paradigms and we've seen like input paradigms let's let's work with the internal like state of your application right so what we're going to do is add like turn this into a counter so that it's showing a number and when I touch it it just like keeps incrementing that number um we'll start off with so the way react works is um you have like each component app itself is a component actually. So you can see that it's a class that extends component, right? And these things that we name in our HTML tag looking things are um components. So this is the name of some class that's included in React Native by default. There's nothing privileged about this class. It's it's the same as like this class that we're writing. Um and what Expo is being told is hey that app component that we made should be the root component of the whole application. So that's like the entry point like the main function or something. Uh which is what you say by exporting it. Um, so components in React can have associated state and what we're going to do is like start off with a counter at zero, right? And um the reason for this paradigm is like instead of you know like mutating state we just like update. Someone tried to like get into my application. Hello there. But yeah so um yeah uh what was I saying? Yeah. So we have current state and render tries to be this pure function that just like maps state to um the component hierarchy that you want to render for that state and then behind the scenes react is like okay this is what we're going to do to render it. So a lot of words there but let's just jump back into doing stuff. Um so we have we have counter at zero. What we're going to do is like you would think, hey, can we just do like counter++, right? But because of this like model of having explicit state and then having render depend on that, you actually need to tell React that you're updating state. Um, and then sorry I was lost in thought for a second, but um, yeah, you want to tell React, hey, I want to set state to this new thing. Um, it's actually not clobbering state with this new thing. This is just an object that'll merge into the old state. So if you add other variables, it won't lose them. Um but over here now we can just render um that state. Hopefully all of this worked. So let's see. All right. Um and if I touch it now, looks like it probably bugged out. So I'm going to have to figure out what I did wrong there. Um let's see. Sorry. Yeah. Actually, also while you were saying that, someone else pointed out what I think might be the issue, which is um that this needs to reference um counter that's actually in this state because this name is undefined at that location, right? Um so what I'm going to use is is this.counter counter and hope that was the issue. Um yeah, so that was it. Um but yeah, also the comma, um to get back to that, you can actually add additional trailing commas and it's fine. And the nice thing about that is like um you don't have to worry about whether something is the last line or not or not. It's just like all of the lines are the same. Um so yeah, um now that we have that, what else can we do? Let's let's actually try to like exploit the component paradigm and turn this whole thing into one component that we're going to call counter and put two counters in our application. Right? So, um what I'm going to do is copy this as I was saying app is a component here and and call it class counter button I guess. Um, and we're going to keep this out outermost view still in app and make this the inner thing. Um, and we'll throw in this is to show you how you would go about making your own component, right? So, what we'll do is like just turn this into a counter button. Okay. So, you know, that's the app is still the same because that's functionally achieving the same behavior. Um, but yeah, you still have that. But what you can do is now you can just copy and paste this line and you have two counters. Um, and they're separate because they each have separate state stuff like that. Um but yeah, so you can see how easy it is to just like um take something you want to do, turn that into a component, and then have that be a reusable thing that you know you or someone else can now play with, right? So um now that we've seen one of these, let's throw in some components that Expo provides out of the box and see what they feel like. So, what we'll do is um let's just um see if I can get these counters to be next to each other. Um just to give you a feel for what layout is like. And then we'll add a map view. Um so, I'm going to put these Oops. Um I'm going to put these into that view and make that view be a row sort of situation. So flex is this paradigm of layout that's actually also used in the web um and is something that um you know react native provides out of box as a way way for layout. Now you can see that the counters are next to each other. Um and what we'll do is add a map view like right above those counters just for fun. So, these are some things that are provided out of the box in Expo. We've got videos, um, SVGs and locations, stuff like that. Let's do a map. People like maps, so we'll put a map in there. Um, so yeah. Um, and this is just a map that you can now use. And this um the it's setting the state to the map region, but we'll just like log map region for now and see if like we get updates on on where stuff is going. So you can see like this is where the map is at the moment. And if I move around, there's like updates on where the map is. Um and yeah, we can also add in like a video and you can just use any URL of of a video and you'll see it. So, this is just like some open- source 3D movie on the internet. But yeah, so that's how easy it is to make stuff on Expo. Um, what we're going to do now is uh try making a different application which will involve 3D graphics. Um, and we're also going to try to like not keep all of your code in this web editor and actually like work on code on your computer. Um and for that we will be installing expose XDE application um which is the tool that takes source code um that's on your computer and serves that in the same way that Snack is serving it so that you can use it as an application um on your phone and also we have ways for you to like say I want to turn this into an app store application and put it on the app store stuff like that and like no one would know that it was made on experts this like feels like an app store application Um, but yeah, on your phone, you're still using the same Expo app as before. Um, so let's just get XDE in. Um, and also, uh, NVM is node version manager, which is a way to get npm, which is a way to get JavaScript packages that you can depend on. And we're going to use 3JS, which is a 3D engine. Um, and we're going to install it from npm. So, um, go back to, uh, expo Um, let me just kill this application. Okay, so now just go back to expo.io on your uh computer and get the I'm on a Mac, so I'm going to get the Mac one, but you can also work from Windows and Linux. And you can make iOS applications from Windows or Linux using um XDE. And you can actually also build them into App Store applications because it builds it on our server, which is like a Mac. So, but you don't need a Mac to do it. Um, so just click this thing and it'll start downloading XDE. I already have it installed, so I'm just going to use that. Um, let me go back to this screen. And this is what it will look like when you first open it up. And these are some projects that I had open before, but we'll just make a new project. Um, oh yeah, so when you first start it, it's going to ask you to log in. Um, we have a user account system and going ahead we plan on making it so that like if you make a project it's just like listed under your user and that way you don't have to like you know scan a QR code or something. So just to make things easier for for you guys. But uh we're going to make a new project under spring CS50 which is like a directory I made for just today but we'll call it 3D thing I guess. So, um it's going to do this um extracting project files thing and uh it's going to run a server on your computer basically which when you open this URL that you see over here will be the application. So, currently the mechanism for getting that URL is to actually send it to yourself. But uh we're going to add that QR code view into XD. so that it's easier. Um, but I'll just send it to myself for now and I'm not going to open my email while I while you guys can see it. But let's see. Um, oh yeah, I got it. So, here you can see this particular email. So, this is the um the link that was over here and I just sent that to your email, my email. And we're going to open that. And it's going to just like for the first time just cache a JavaScript build of your application. And once all of that is done, you should see your application on the phone. Let me just get um this view actually onto that screen. So um yeah, there we go. So I'll shuffle things around a little bit. Okay, looks like I can make this smaller. So, uh, yeah. So, what you should have in that directory is this is just a terminal in that directory. Um, you should have um an assets directory that just has some basic icons and stuff. Um, and your main.js file is where the source code of it is and the rest of it is just like metadata about your application. Node modules is just the dependencies. So, I'm I'm going to open that in Emacs. Feel free to use any text editor you want. Um, and here we are. So, similar stuff. We can change this to hello world and that should update on your phone. Um, yeah. So, we're back to uh the same like high-speed editing process. Um, and we could actually paste in like if if we wanted to do that. Let let me see if that works out. Oh, wait. I actually don't have it anymore. All right, fine. So, I was going to paste in the application that we made on Snack and see if it worked here. Um, but yeah, let's just get to doing 3D things. So, you're going to need npm, which is um this package manager for JavaScript stuff. Uh, the way to get it is to use this thing called nvm, which is um node's version manager, and npm is node's package manager. So, it's all about node. Um, so just to explain that process again, I just Googled NVM, went here, and then this text should walk you through it. There's a lot of it, but this is probably the main thing. I installed it a while ago, so I don't remember what I did, but I think that's what I did. And if you do that, you should get NVM. And then scroll down a lot again and get to this part. And this should install node. Um, which is commonly used. It's used to make like JavaScript servers and stuff like that. So hopefully that's not too bad and you can find uh many Stack Overflow answers to every question you have. So, uh, going back here, I actually have npm already. Um, so we're just going to do npm install. Save means it's going to like remember that in your package JSON file which is the metadata about the dependencies you have. Right now it's this expo and react and react native which are the UI stuff and we're going to um install three. So while it's installing let me tell you a little bit about three. So 3JS is this JavaScript um 3D engine that runs on WebGL which is a specification for OpenGL which is an open-source graphics like GPU graphics specification. Um but yeah it's it's a specification for that on JavaScript which is the environment that we're in. Um, so it works out and like 3JS um in Expo just like runs on WebGL um and creates 3D uh and like makes 3D graphics happen. So I'm going to open the most basic 3JS example and we'll try to recreate that in expo and just scroll all the way to all of the code and okay it's over here. Um, going back here, it seems like it lost this network connection. Um, but it's back. Cool. Okay. So, um, now that I have 3JS, um, if you remember, I installed it using npm install save over there, right? Um, don't worry about all the other messages. Okay, so oops, I accidentally hit command P. Okay. So, yeah. Um I'm just going to edit the main file again. And um Expo actually has this utility um to use 3JS called create three view class. And I'm going to explain when I use that. But first, let's just import three. Um but yeah. Okay. So what we're going to do is like create three view um which is a component class but it's actually like created um we need to inject like 3JS as a dependency into this thing. We didn't I didn't want to make expose built-in library depend on 3JS. So this was the way to do it. If you if you know of a better way let me know. But um what all of this does is makes you able to use a component called three view that displays 3JS as a view in your application. Right? So I'm going to go here and um okay we're going to get get to that in a sec. But let me see if like all of this doesn't break on me. It's going to try to rebuild um the JavaScript stuff because you had a new dependency which is 3JS in our case. And while that's happening, I'm going to start writing actually the 3JS code. So, uh, to make this easier, what I'm going to do is just like copy this, not paste it into our thing yet, but okay. Um, like just open the scratch buffer and put it in there. I know it's sort of weird, but okay, cool. Just to get a reference on what to do, but um, yeah. So component did mount is this method that you can implement um in React which is what happens when um your component is mounted onto the screen which is the first time it appears. So over there, we're going to create all of the 3JS um scene graph stuff, which is going to be a scene. And actually, I think we want to throw that in in this because I want to be able to access it from the other functions. Um so I'm just going to like use that reference that I had. Hope you don't mind me looking at a reference, but yeah. Uh if the hopefully this isn't too confusing. the the bottom half of the of the window is is the expo application and the top half is me pasting in the the uh example 3JS application from the 3JS official documentation. So, we're going to say new three scene, and this is stuff to do with like the aspect ratio and all that, but I'm uh but actually Expo will like automatically set I mean Expose 3V will automatically set the aspect ratio for you depending on like what the size of the view is on your screen. So, we can just like hardcode it to one and it doesn't really matter. We don't actually have to create a render cuz um again that's what the three view does. It creates the webjl renderer that expo would need. We do have to create the um geometry and stuff. So, what I'm doing here is I'm saying I want to make a box that's one unit in all dimensions. And I want to make a material for it that's just like flat and and it has um red as a color. Nope, it's actually green. So this is weird but it's basically like um a number that encodes green um by having like this is red and this is green like like the first two the first two hexodimal digits are red and then the middle two are green and so on. Um but yeah um and we'll also make the cube. So far so good. And what you need to do is um actually instantiate the three view into your application. So 3V takes a couple parameters. Um and I do actually have an example user three view that I'm going to like cheat and look at. Um, but what the parameters are is just the scene and the camera that you created and also a tick function if you wanted to make stuff happen every frame. Um, but let's just have it take the scene and the camera that we we just created above. So if you remember this scene was the 3JS scene that we made and um so that's the camera and we also have same thing with tick. Yeah. So it's going to add a tick function uh based on the tick function that we had in that paste. So they're just updating the cub's rotation. We're going to do the same thing. dt is the delta time since the last frame. And we're going to do dt * 0.1 on the y and times 0.2 uh sorry that was on the x and we're going to do 0.2 on the y. Um I'm really not sure if this is going to work but I'm just going to save it. So here we go. Um so let's see. So three mesh is this first issue but oh yeah it's three dot mesh I believe. Yeah. Let's do that instead. And just uh Oh, yeah. I also want to I think flex this to the whole screen. Okay, so the three view isn't isn't visible, but um it does tell me about all of those three warnings. So I think it's running. So what I'm going to do is like throw in a view um with some background color and um temporarily move this stuff out. um and see if I I see that view. So you get to see some live uh debugging action. But let's see if this view is visible now. So that's a that's a red view. And yeah, you want to flex one that. Okay. So that is red. So what we can do maybe is uh just have this view um and make the three view like a child of that and see if the red thing is still visible through it in which case we would know that it's just transparent basically. Um so there's some syntax issues. Uh, line 26. Let's go there. Yeah, that's not good. So, all right. Um, anticipating all of this, I actually made this project before I came here. So, I'm going to look at that project. But it does seem that that is basically the same thing. So I'm not sure what the issue is here. Anyone have thoughts? Let's see. Uh I'm just comparing these things. three view class. Oh yeah, also one thing we probably want to do with the camera is um position it in front of the object. So we'll set the Z coordinate to five. I don't think that's actually the issue that we had. Um but yeah, uh I created a box geometry material and all that. Okay, that looks not bad. And we still have the tick function. It's a different speed, but that probably shouldn't matter. Well, one thing I could do is just open this project that I had from before. So, I'm going to do that. But yeah, as you can see, uh the code for the other project is basically the same. Um I'm just going to send myself that link. Just get away from my email. So yeah, okay, in this case it did work. Um, but yeah, just to show you like what happens if you change around, for example, the speeds of rotation and things like that. Um, let's just make it only rotate on X. So yeah, that was rotation around the x- axis. Um yeah, so we have 3D graphics or we almost had it in the new project that I made, but this project is is basically the same as um the project that I was creating. Uh there's some things somewhere that I did differently that I didn't have time to figure out in these minutes. Um but yeah, uh there's also uh the Minecraft um example that I showed you way in the beginning of the presentation is open source and online. So you can you can try that example. Um yeah so I just wanted to leave like 10 minutes towards the end for uh Q&A um from you guys. So feel free to just ask me any questions that you have. Um I'll go back to the presentation but yeah. All right. What do you have questions? Yeah. So in terms of deploying applications with stuff like how would you integrate this with like a database you're doing database back application how do you get it up so people yeah um so the application itself is just the client side and um what you'd be doing is you would make a you would make your own server uh talking to the database that you want and um you can make HTTP requests to the database um and there's this API called fetch which is like a JavaScript um API to for HTTP and you can make those requests. Um we could actually do um a quick example of like making an HTTP request like on Snack if you wanted to check it out. Um yeah uh but that's how that's how we've done it for applications that we've tried. So separate a REST API and then yeah that's that's the way that um would go about it for now. Yeah. Any other questions from folks? What what about pushing it out to the app store? Is that is that a lot to do or do you have a certain process for that? Yeah, so um basically um we have this command line tool called X which is a counterpart to XDE and and it's just one command on X. you can just say like build iOS or build Android and you'll get um for iOS it's an IPA for Android you get an APK which are the package files that go into the app store and you get those for your application but um folks have successfully done that from Windows and Linux also so yeah um and yeah so the documentation for that is on the website so go to our website and then just hit docs and guides right um a lot of stuff on here, but building standalone apps is is what you were asking about. And it's got all of the info about how to do that. And there's a bunch of metadata that you end up having to write like the bundle identifier and everything like that, but that's at least as much as you would have to do without Expo. So, yeah. Um, any more questions? Yeah. Are there any limitations as far as um things can with a native app such as um get latitude and longitude or read Wi-Fi signals. Is that all available as well? Yeah. So um for example the map view that I showed you, right? It's something that is a native thing but is built into Expo and just like that there's a location API which is also built in that you can use to to get latitude and longitude. And in the docs, we actually have a snack like for it. So you can just like open that up um and like scan the QR code and we could try it out. But yeah, and there's APIs for a lot of the things that you would want to do like one thing that I added recently was um like you can have a local SQLite database. Um a lot of other stuff like you can get stuff from the gyroscope or the accelerometer and most of those are basically one JavaScript function call or two versus way more stuff that you'd have to do natively and also differently for Android and iOS, you know. Um so yeah and folks have used this location um thing successfully in various apps. Yeah. Yeah. So also um another thing is while we do have a lot out of box it is limited in the sense like if you for example we don't have Bluetooth right now right and if you wanted to do Bluetooth um what you could do is like we um have this thing called um expo kit. So what what you'd be doing is you would um eject out of being a pure JavaScript expo application to being a combination of JavaScript and the native and native code and it's just the native runtime that runs that JavaScript and then you can like modify that runtime yourself. So you can like add in your own Bluetooth API that you can call from the JavaScript. So it it um enables you to like define your own API like the location API that we have. And the nice thing about that is like if you made something that's useful and you and you want folks to use it, you can like put it back up as open source and like you know if it's a good API, we could look into that and think about integrating it, stuff like that. So yeah. Anything else? Awesome. All right. Thanks a lot.