Learn React Native Expo in 47 Minutes

the goal with this video is to teach you everything you need to know to be a react native developer in the shortest amount of time I timed it all out it ended up being about 47 minutes so in about 47 minutes you ought to know everything you need to know to be a react native developer make sure you watch to the end there's going to be two super secret tools that I'm going to give you that will help you out in your development journey in the future don't forget to subscribe hit the Bell icon let's get started the first thing you'll need is node.js installed on your computer I'll be putting all these links in the description below you'll want to make sure you have installed node.js on your computer you can go to this link to install it for Windows or Mac once you have node.js on your computer you'll be able to create your first react native app it's as simple as saying npx create Expo app and then your app name and if you're wondering what Expo is Expo is something built on top of react native that makes making react native apps super simple this is all you need to do to create your first app the old way to create react native apps is this react native CLI quick start it can take up to an hour to an hour and a half to get this up and running if this is your first time I would highly suggest using Expo life will just be so much easier using Expo so we're going to be using Expo in this video all right so just go ahead and copy npx create Expo app you can go to the directory you want I have a directory inside of my documents that I would like to put this inside of once you've found the directory you can just paste npx create Expo app and name it whatever you want I'm going to say to-do list click return or enter when it's finished it should look something like this next you can CD into the new project and you can open up the app in something like Visual Studio it should look something like this this app.js file is the main file for the app it's what the app is looking for when it's opening the app it's saying to open up whatever's in the app.js file so we'll go ahead and jump straight into some code in the app.js file what we're going to be adding is push notifications uh our global State Management and our navigation and before we get to that I want to go ahead and create the structure the file structure for our app so you can click in the root of your folder click to create a new folder say SRC for Source within the source I'm going to create another folder I'm going to call it screens and also click back on Source I'm going to create another folder called components in the screens I'm going to have two screens I'm going to have one that says home.js the other screen will be chosen task we're going to be creating a simple to-do list inside of the components I'm going to put a header.js also a footer not JS I'm going to open up a terminal you can click command J to open it up or you can come up here and say new terminal I'll put these list of packages in the description below but I'm going to go ahead and install all the packages I want to use in this app a good idea if you're using Expo is to use npx Expo install whenever you're installing packages Expo will make sure that you install the correct version of the package that is compatible with the version of Expo you're using again you can find a list of these npm packages that I'm about to install in the description below I'll also share links to all the articles that describe what these packages are and how to use them go ahead and paste that in there into your terminal and click return or enter once that's done you can come back to app.js we're going to import some things that we're going to be using for Global State Management navigation push notifications I'm going to go ahead and delete this status bar we don't need it I'm going to delete it from the return as well we're going to be using hooks in this project if you're not sure how hooks work we're going to go through how they work a little bit in this video so I'm going to import react and also there's two main things that you'll need to use hooks one is use State this is how we're going to manage our state and also use effect and if you're used to using things like class components use effect is sort of like component did Mount and we'll use it in just a second so you can see how it works in the app screen we're actually not going to need any of this so I'm going to delete it and I'm going to go ahead and delete this Styles we'll go ahead and add those in in a little bit when we get to the home screen and the chosen task screen the next thing I'm going to import is for navigation I'm going to import a navigation container from react navigation slash native and I'm also going to import create native stack navigator from react navigation native stack this is what we're going to be using to create our navigation I'm going to import register in and push token from native notify this is what we're going to be using for our push notifications I'm going to go ahead and import the home screen and I'll go back down to the source file screens home and then I'll import The Chosen task all right and the last thing I'm going to create is something called stack we're going to be using this with our navigation you'll just want to say const stack and then we're going to create navigation stack Navigator we're going to use this function here go ahead and Trigger it all right and we'll go one thing at a time first we'll set up push notifications to set up push notifications go to nativenotify.com click the sign up for you button it's free to sign up there's no credit card required that'll take you to this page click create an app click react native Expo and we are we're going to follow these start here instructions we already have Expo set up in our app so you can skip this Expo setup guide we can go ahead and go to step one we've actually already installed native notify and these things here and we've already imported the register in in push token so all we have to do now is copy this and paste it into our hook function if you are in the future if you do happen to be using a class component with your app instead of a hook you can still use native notify push notifications you can click this right here and it'll walk you through how to use push notifications in a class component but we're using a hook function so we don't need to worry about that we're just going to come back here I'm going to paste this right under push notifications and push notifications are already installed that's all you have to do to get push notifications installed in your app we'll move on to Global State Management This Global State Management is just something I created so you won't find documentation for this anywhere it's just a real simple way to house Global State and I'll just show you how it works first we're going to go ahead and create our hooks for what we're going to be using in this app so the way a hook function works if you're not sure how it works is you type out the word const you put brackets here the first variable in the brackets is the name of the state so for this example we'll say to-do list so that's the variable name the way to update the value of this state is you put a comment here and the second value here is the function that we're going to be using to update the state to do list so you can just say set to do list and to be using hooks you can use this use State function and within that function you want to put the initial data type that you would like for us it's going to be an array because we're going to have an array of to-do list items that we're going to show on the screen so I'm going to put an array there and I'm actually going to go ahead and put some dummy data I'm going to put an object in here and I'm going to say it has an ID and I'm going to say the second item is called task and I'll say the first task is brush your teeth all right and I'm gonna copy uh and paste this twice um and I'm gonna update the values the next one I'm gonna say uh I'm just gonna call it task um and I'll change it to set task and the initial value for this I want it to be an empty string the next item I'm going to say chosen task this is going to be for when someone clicks on a task we're going to open it up in the chosen task screen so we can see the chosen task foreign and this will make more sense in a little bit I'm going to also make this the original value be an empty string and then here's how the global State Works uh here you just say const Global State equals an object and within that object you can just put your hooks your hook State variables and the functions just like this and then what we're going to do is we're going to copy This Global State and in a little bit and we're going to pass it down using navigation to both screens both the home screen and the chosen task screen and basically how it works is anytime you create a new page you can just pass down this Global State down as a prop to your pages and I'll show you how to do that in a second all right let's go ahead and move on to navigation so I'm going to go ahead and delete all of this and the first thing you'll want to say is navigation container and within that you'll want to say stack so that's what we're using here this stack const we're going to say stack dot Navigator and this is what needs to remain unchanged within the stack Navigator this is where our pages are going to go and you have to write this a specific way so that you can pass props down into your pages uh the documentation for react navigation normally uh does does it a specific way that does not allow you to pass down props so you'll want to make sure to do it the way we're about to do it instead um the way we're going to do it is you'll say stack dot screen give the screen a name um and I'm just going to give the name home and then this next part is important to say options um we're going to be creating our own header instead of using the built-in header there is a built-in header with each screen if you're using the stack dot screen but I want to create my own header so instead I'm going to say options and I'm going to say header shown uh false and so this will make sure that I can create the header myself I'm not going to be using what's built in and this next part is how you would pass in props you put curly braces and say props do an arrow function and then you just pass in your uh screen component directly here so my first one I'm going to say home and within home you need to say dot dot dot props so that you're passing down the built-in navigation props to this page and then also I'm going to say Global State equals Global State and then I'm gonna uh close it off like that and so that's how we're passing in This Global State down uh into the page this way I'm just gonna copy this paste it here I'm going to change the name to chosen task so that's going to be the name of that screen and I'm also going to change the component to chosen task again it's real important to write it out this way if you want to be able to pass down any sort of props into your components it's different than the instructions in the normal documentation the normal documentation is something like this where it's just one line but then it won't let you pass down any props you'll just say you can say component equals oh uh or something like that so if you don't need to pass down props you can do it that way um but I want to be able to pass down props so I'm just gonna uh delete this and leave it like this all right so we have push notification set up our Global State Management setup and our navigation setup we can start building out the home page The Chosen task page the header and the footer let's start with the home page let's go ahead and import uh react again and we'll import use State and use effect again so that we can use hooks let's import what's called a style sheet this component will allow us to add styles to our other components we'll import view which if you're used to react I've used sort of like a div instead of using divs we use views um and so a big thing here is instead of using like HTML in your JavaScript there's a component for everything and so instead of div or something like that it's a view view is like the containers we put everything in the next one we're going to use is text so instead of saying like a P tag or an H1 tag or something like that there's a text component the next one is text input and this is uh self-explanatory it's a text input um this next one is called touchable opacity this is uh a button you there's there is a built-in button component in react native but you don't want to use it because uh you can't really make very many updates to how it looks um and so it's it's very limited in what it can do instead what you want to use is a touchable opacity a touchable opacity allows you to turn any uh element component on the screen into a button and you can make it look however you want so we'll do that the last thing is called a flat list what this does is it allows you to it basically has a map function that allows you to Loop through an array full of data and make that data appear on the screen and it'll also make your screen scrollable so if you have uh more data then can fit in what you can see on the screen it'll allow you to scroll down and see more items on the screen also it loads things lazily so it it speeds up your app instead of loading all the items uh in your array all at once it'll load a few at a time so it'll load it lazily and with these six uh components within react native you really can build pretty much anything so these are the essential components in react native and under here I'm going to go ahead and import my header and I'll say dot dot uh to go up a layer and say components header and then I'll import my footer and under here I'll go ahead and create my uh function I'll say export default function home and within there I'm gonna put uh curly braces and there's a built-in prop with navigation just it's called navigation this is what we'll use to navigate between screens the next thing I'll import report is our Global state and then I'll put curly braces there uh the first thing I'll do is I'll deconstruct Global State uh the things I want to use on the home screen are the to-do list that we're going to show on the screen uh the function set to-do list so that we can update what we see on the screen the next thing is Task and set task this is what we're going to be using in the text input so that we can create another task the last thing we'll use on the home screen is set chosen task and I'll say equals Global state and just so you can see how use effect works use effect is a function triggered right after the render sort of like component did Mount in a class component um and I'll go ahead and write it out um so you trigger the function and you create an arrow function within it if you just leave it like this this use effect will trigger anytime there's any update to state so for example if you're typing into the text input this use effect will trigger every single time uh if you just want it to trigger one time you can put a comma after the curly brace and put an empty array this will guarantee this use effect will only trigger one time and what I'm going to do in here is I'm going to add a second item to the to-do list so I'll say set to-do list and I'm going to show you how to use a spread operator within hooks so you could say prev State and what this will be is this is uh the current if you come back to to app and you look here it's the current value of this to-do list right here so I'm going to say prep state I'm going to say an arrow function go ahead and put uh another array say dot dot dot prep state so what this does is it'll make sure the values within this so in this example it's just an object this object will come first and then we'll put something after that and after that I'm just gonna go ahead and create another task and I'll give it an ID of two and I'll say a task go to bed all right and so this is really just to show you how use effects Works it'll add this item to the to-do list immediately as the app loads as the home screen loads under that let's create a function called handle save task this is a function we're going to be using when we want to add a new task to the list within this we want to create an index I'm going to create an index based off the length of the to-do list so we'll say to-do list dot length plus one we'll be using this number uh when we're adding an object let's go ahead and copy what we just did here and I'm going to switch out the number two with uh index and I'm going to change the value of task to just task which we're going to be setting the value of task in our text input in just a little bit the last thing we'll want to make sure to do is set task so that it'll clear the value of the text input after we click the submit button the save button the last function we'll create before we go on to the return function is handle choose task we're going to be using this to go to the The Chosen task screen in here we'll have a parameter called item and within this function we'll say set chosen task to the item and then we'll go ahead and use this navigation to navigate to the new screen so you would just say navigation navigate and we navigate to the name of the screen that we gave it so we gave it a value of chosen task so in here we're going to say navigate to The Chosen task screen and this will automatically navigate us to the chosen task screen all right now let's go ahead and create the return function I'll go ahead and show you how I uh style my pages my screens so you would say view again instead of like a div you would just say something like View and a thing with react native is uh it's all inline styling based and so let's just go ahead and I'll show you what I'm talking about so you would say Style and within here I'm going to say styles Dot screen and before we move on I'm going to go ahead and create our style sheet so with react normally you would import a style sheet with react native normally what you do is inside of each screen underneath the export default function you can do something you can create your style sheet here you would say const Styles like we did up here and you would say equals style sheet dot create trigger that function and then within that function put an object in the function and inside of the object you can start creating your inline Styles so for example I'll say screen I'm going to add something called flex and I'll just say one and I'll explain how this works in a in a little bit the second thing I'll say is background color I'll say uh FFF align items I'll just say sinner justify content I'll say Center all right and I'll go ahead and explain some things about Styles before we move on one thing to know is with uh react native flexbox styling is built into it automatically um and so that's why you'll notice here when I said align items justify content I didn't first say display Flex in order to access this that's because display Flex is already built into this style sheet component so it already assumes you're using flexbox styling another thing is normally flexbox the default behavior is to have the flex Direction be a row like left to right well with react native the default behavior is for um the flex to be the flex Direction column so top to bottom so if you ever want to switch something to be left to right you'll have to say Flex Direction and switch it to row um if you don't do that it's automatically set to column this Flex thing you can kind of think of this as a percentage of the screen the top layer uh which is our screen layer view it's like a hundred percent from then on within that we're gonna have something called a header which I'm going to put this in a different screen but I'll just show it to you now so you understand it I'll say uh Flex one Body Flex eight footer Flex one and then I'll go ahead and put a view with the style of header body and footer paste that body footer and just to really show you uh what this means I'll give this a background color of red I'll give the background color for body blue and the background color for footer I'll just say yellow and let's go ahead and open up the app to show you what uh it looks like I'm using um Android an Android emulator you can download Android Studio to create an Android emulator to view your app on another option is to go to this screen here and download this app called Expo go onto a physical phone like an iPhone or an Android phone if you do that you can actually see your app in development mode on your phone directly but I'm going to open it up on an Android emulator so you can see what it looks like the way to open your app to see what your app looks like you can say npx Expo start if you're going to open it up on your phone in the Expo Go app you'll want to scan this code here in the Expo Go app in Android for iOS you'll have to scan it using your camera app it'll open up your app directly on your phone if you're going to open it up on an Android emulator you can just type the letter A in the terminal oh and you'll notice it's blank currently that's that's because um one of the things with flexbox is so depending on which direction the flex is which right now it's top to bottom you need to either give it a width or a height since it's top to bottom we have to give it a width or you won't be able to see it so I'm going to say width 100 percent and I'll go ahead and add this as well for both the body and the footer all right and so there you go you can see how it's working it's better just to visualize this so the top layer is one and then you can split that one into multiple layers for the header I'm saying one so it's taking up ten percent of the screen for the body I'm saying eight it's taking up eighty percent of the screen for the footer I'm saying one it's taking up ten percent of the screen and basically it'll just add up all the flex numbers within the uh parent view and then it'll divide it by that so say I change this to one each part is going to have a third of the screen the header is going to be a third of the screen body a third foot or a third um so it'll just take all the combined Flex values together and divide it based on the numbers you give it so now that you understand how styling Works let's go ahead and and I'm going to delete these background colors well actually I'll keep them and I'll just turn them all white I'm gonna go ahead and delete all of these two so in the home return at the top I'm going to put the header that we imported above I'll go ahead and create a view and I'll say style equals Styles dot body and then I'll go ahead and put in the footer within the footer I'm gonna put in the navigation prop so that I can use navigation in the footer I want to put an icon in the footer that I can use to go back to the home page uh and I need to switch that to styles I'm going to copy this whole page and paste it into the chosen task page I'm going to change the name to chosen task and for Global state I'm going to delete all of this and just change it to chosen task uh and the first should be lowercase chosen task I'm going to delete this use effect this handle save task this handle chosen task I'm going to delete all of it and just leave it like that and since we're here just to finish off this page all I'm going to show on this page is the chosen task in a text component so I'm going to create a text component and I'll put curly braces and say chosen task there and I'll go ahead and delete the header styling and the footer styling for the background color for the body I like it to be a little darker than the header and footer so I'm going to say one four one four one four and then I'm going to say zero five so it's just very faint also for the body I'm gonna say align item Center and justify items Center so that the text the the task will be centered on the screen and I think that's it for the chosen task screen we'll see in a little bit if everything looks okay but let's go ahead and go back home and before we move on to make this error go away I'm going to go ahead and create the header and the footer so I'm going to import uh some of the components from react native I'll import the style sheet also the view and the text and I'll also import something that we installed at the beginning of this video called constants from Expo constants and I'll say export default function header I like to write out my functions instead of using shortcuts it helps me to remember how to do it I'll find sometimes if I don't write out the basic things sometimes I'll just forget how to do the most basic things because I've become so reliant on shortcuts and so I like to write out uh my my code so I don't forget how to do it I'll say styles.header and I'll go ahead and say text this will be the text in the header we'll create these Styles in a second I'll say my to-do list all right and under here we'll go ahead and create our styles again using the stylesheet.create method just say header for the header I'll say Flex one and actually I'll come back to the home and I'll just cut the header from here I'll put it here and I'm going to give it a padding top um and we're going to use this constant component built into the constants component there's something called status bar height you'll notice up here on the status bar it has a certain height well this is different depending on the device that you're using and so you can't just set a single number here for the padding top you should use something like constant status bar height so it'll know what the status bar height is based on the device that you're using next I want to use this Shadow generator you can find this in the description below this is a neat way a fast way to create Shadow for a container for a react native app and I'll just go ahead and I'm actually gonna I'm gonna switch this to four and I'll copy all of this text here come down here paste it there like that and the last thing the header needs is you should give it a z index so that the shadow isn't blocked by by the body we want to make sure the headers above the body View and we'll say text I want the text for the header to be bigger so I'll say font size I'll give it a font size of 18 and a font weight of 900 and the number for like font weight does need to be in a string or it won't work properly I'm going to go ahead and copy this whole screen I'll paste it in the footer and I'll change the name of this to footer I don't need the constants in the footer I'll go ahead and change these Styles I'll call them footer I'll get rid of this padding top and I forgot with the header now that I can see up here under with 100 I'm going to say align items Center and I'm going to say justify content Center I'm going to go ahead and copy these so I can put them in the footer as well and you'll notice with the footer uh the the Shadow's not as big because it's uh at the top of the screen instead of the bottom so I'm gonna come back here I'm gonna switch this to 12. go ahead and copy this again come back down here paste that there and just to make sure there's also a bit of a border there um I'm gonna say uh border top width one and border top color I'm gonna stick with this one four one four one four uh and I'll try out 20 20 maybe 10 percent all right I think I like ten percent the best instead of text for the footer I want to use an icon again this is something we imported earlier I'm gonna import I'm gonna call it icon from react native Vector icons and for this I'm gonna use uh something called Ant design and before I move on I'll actually show you where I found this this is a directory I'll put it in the description below as well um you can just come here this is a directory of all the vector icons in this package in this react native Vector icons package so if you say home you can find uh the one you like the best I like the ant design one best so whenever you find the the library you like best you can copy the name of it and uh here you can just put slash and then paste in the name of the library and then the way you would reference uh the home is you would use this home text here uh to reference it and I'll show you how to do that real fast so how you do that is type uh icon we're going to put this in an icon and it's going to be a self-closing icon the first thing I'm going to say is name equals home and that should as you can see down there it's real small right now but there's a little home down there the next prop I'm interested in is the size prop uh again these this is based off pixels I'm gonna say 27 um and that looks good to me maybe 30 I'll say 30. um and then the color prop this lets you update the color I'm going to stick with the one four one four one four theme and then this next part there's something called an on press event that can be attached to an icon for this we're going to need to import the navigation prop that we passed down in the home screen to the navigation also in the chosen task screen it's there too we'll need to import navigation and here what I'm going to say is whenever this button is clicked I'm going to say navigation navigate and then you just put the name of the screen you want to go to so if you go back to your app.js file I named the home screen home so I'm going to put that in the navigate it is case sensitive so if you make the first letter in the word uppercase you need to make sure it's uppercase now what this will do is once we go to the chosen task screen once we get to that point if you click on this button it'll take you back to the home screen and we'll see that in a little bit let's go ahead and go to the header and update the color of the header text The Styling so I think the header and the footer is finished the chosen task is finished so all that's left is to show our to-do list on the home screen and to create an input and a submit button so we can add to the to-do list so the first thing I'm going to do is make sure I have the flat list imported I do I'm going to go ahead and show you how to render all the elements within the array in a flat list and a flat list again is scrollable so if there's so many items that it stretches past the bottom of the screen you can still scroll down the screen the first prop we need is the data prompt this is what we're going to use for the built-in map function the next prop is called render item and we're going to create something called a render item function and let's go ahead and come up here and do that I'm going to put this right under use effect I'll say const render item and built into this is something called item this is a flat list thing so it needs to be called item and within this we're going to make each of these items each of these to-do list items these tasks clickable to do that we're going to be using what's called a touchable opacity something about the touchable opacity inside of it instead of just putting text you should use the text component within that text I'm going to put curly braces and say item dot task and what this is going to do is it's going to take the value of the task within whatever object it's looping through and for the touchable opacity normally you would pass in a key like this if it were like a map function but because this is a flat list it's already actually built into it the way you can extract a key to to go with each item returned within this render item function you can come back down to your flat list and here you can say key e extractor it's another prop built into this say item and then you'll notice in each of our objects we have an ID inside of the object so we'll use that as our key for each object so you can just say item dot ID and now instead of us manually having to say key and then item dot ID it just automatically does that for you with this key extractor function so the next thing we're interested in is the style task and then we'll put an on press event and for this on press event what we want to use is this handle choose task function this is the function that's going to trigger whenever a user Taps on a task it'll trigger this function which will pass in this item the item value of this function all right and I think that's good so we'll go ahead and add in the this task dial down here and we don't need this footer anymore because we put it in the footer component so let's go ahead and switch this out we'll just say task delete all of this in here I'll say background color white I'll give it a padding of 10. I'll also give it a margin of 10 10 pixels I'll give it a border radius of 12. I'll come back here to our box Shadow generator I'll switch this back to four copy that come back here paste that there okay and this isn't returning because I accidentally up here for the render item I forgot to say return so I'm going to go ahead and say return put this inside of the return function and there we go it's starting to show up on the screen I'm going to go ahead and refresh the app so that it doesn't have more than it's supposed to have so let's go ahead and test out our function see if uh when we click on it if it'll go to the screen let's go to our chosen task okay so uh our chosen task is actually this an object with an ID and a task in it so I'm going to actually say chosen task dot task that should fix it let's try this again all right there we go that's the chosen task go to bed let's go ahead and test out our footer function and it worked it went back home I'm gonna go back home and for the body I'm gonna go ahead and copy this background color uh one four one four and bring it to the home body as well and I'll delete the white one yeah that looks better I think I'll go ahead and make this tin on both of them so it really makes the task stand out all right so it looks like everything is working the last thing to put in would be a text input and a submit button so we can add more tasks to our list so at the top of the screen I'll go ahead and put in this text input component and this will be self-closing as well first style will create a style called input there's a prop in here called on change text that will trigger whenever you're typing text into the input for this I'm going to use this set task function that we're importing up here with hooks this will just automatically work like this another option would be to put braces here and then paste it like this and you could say uh text pass it in that way text but we'll just go ahead and keep it set to set task like this for our value we'll say task so whatever the value of task is at the time that's what's going to be the value of the input and we'll go ahead and create a placeholder this is text that will show when there's nothing in the input so I'll say to do task I'll refresh the app alright so you can see our input is right there let's go ahead and create an input style I'm going to go ahead and just just copy what we did with the task into here the only difference I'm going to switch padding to 20 and I'll say padding 10 and padding bottom tin and I think that looks a little better for an input maybe make this 15 actually I think that looks a little bit better we'll also give this a margin top of 30. so it's not so close to the top there and then the last thing we need to add is a submit button here to add more tasks to our list so let's go ahead and do that under task input we'll put another touchable opacity within here we'll create a text component we'll just say submit and in here we are going to want to style this text because I'm going to color the background I want the button text to be white and for this touchable opacity I'll style it I'll say Styles dot button and I'll actually bring this down here and we'll say on press event event the unprecedent we're going to be using the function we created earlier this one up here this handle save task function we'll go ahead and paste that there let's go ahead and create a button style and I'll go ahead and copy uh the input styling so it looks kind of the same but for the background I'm going to say one four one four one four and instead of saying margin top I'll say margin bottom then underneath that we'll create our button text we'll give it a color of white so the text is white and we'll give it a font of 900 and for the button I'm going to say align items Center I think this may be done let's refresh the app let's see if we can add more tasks wake up go to work and as you can see it's below the footer so I'm going to see if it's scrollable and it is you can see it's scrollable I'll go ahead and just add a lot of tasks so you can see too with the keyboard gone uh you can see it's still scrollable and you can click on one of them you can go back and there we go congratulations you just created a react native task list so the last couple things we'll do is we'll go ahead and test our push notifications to make sure they're working and we'll also go ahead and Export this app we'll turn this into an Android app that can be published through the Google Play Store and we'll also create an IOS app that can be published to the IOS app store so to test that push notifications are actually working on the native notify start here guide you can go ahead and open up Expo go which we already have it open on an Android emulator you could open up on a phone if you'd like and then down here we'll go ahead and test out sending ourselves a push notification so I'll say test title test message uh and they did end up showing up push notifications are definitely working so our app is finished the last thing you'll want to do is uh create an app to be published to the Google Play store or the Apple App Store the way you do that is using something called EAS and I'll put this link in the description below basically all you'll have to do is Click one of these links here that explains what you're doing so if this is your first app you'll want to click create your first build and down here the first thing you'll want to do is just npm install globally this EAS CLI in a terminal so you can open a terminal paste that there click return and if it says npm error you might if you're on a Mac have to say sudo npm install if it's on a Windows computer it's a different command I'm not sure what it is it's basically saying the administrator is asking to install this and then it'll ask for your uh password your computer password once EAS CLI has been successfully installed in your terminal uh you can log into your account if you don't have an account yet you can just go to expo.dev click sign up to create an account and then you can use those credentials the username and password to log in from a terminal and to make sure you're logged in you can say EAS who am I in a terminal and it'll say your username if you're logged in properly next you'll want to copy EAS build configure into your uh Visual Studio terminal and you can say what you're wanting to create this for what if you want to have credentials for both IOS and Android you can select all and then from there you can just say EAS build and then you can select which platform you want if you just want to create an Android app you can select Android if you just want to create an IOS app select iOS or you can select all to do both at the same time and what it's going to do is whenever you follow the instructions after that there's going to be a link that it'll send you when it's done building your app you can just click on that link it'll take you to a browser and it'll automatically start downloading your your app files onto your computer those are the files that you can then use to publish to the Google Play store or the Apple App Store so that would be the easiest way to build the app files that you would like to use to publish to the Google Play store or the Apple App Store so there you go that's react native development in about 47 minutes if I missed anything if there's other essential react native development related things that people should know if they want to be react native developer please let me know in the comments below I promised you two super secret tools that will help you along your react native development Journey at the end of the video so here they are number one google.com number two stackoverflow.com with those two top secret super secret developer tools you'll be able to learn anything else you could possibly need to know after watching this video if you went through it all you'll know enough to be a react native developer and you'll also know enough to know how to learn anything additional that you need just using Google or stack Overflow there's a component for everything there's a package for everything you can just Google search stack Overflow you shouldn't feel like you need to learn anything else to start building apps in react native if you've watched this video you're ready to start building react native apps so go ahead and start building that react native app you've always been dreaming of if you like this video don't forget to like And subscribe thanks for watching and I'll see you next time

Channel: Native Notify

Views: 55,213

Keywords:

Id: bES5bMSL54M

Length: 49min 20sec (2960 seconds)

Published: Fri Sep 30 2022