Building a MacOS App with React Native: Is it Possible?

what's up Nigel developers welcome back to a new build today I have prepared something different for you today we're gonna build an application using react native as always but this time instead of targeting mobile devices and building a IOS and Android application what we're going to do is we're going to build a native Mac OS application using rack native Yes you heard it right we're gonna use react native the framework that we love and we are using to build mobile applications we're gonna use it for developing a native application that will run on a Mac OS device so this opens up the doors for a lot of opportunity for a lot of applications and I'm really excited to show you how how you can do that as well how you can get started with react native for Mac OS this is uh thanks to the team from Microsoft which forked the rec native package and made it compatible with Mac OS devices also with windows so this package Microsoft is internally using a react native to build a lot of features for video one of their most popular applications like the office suits and so on like Excel so yeah that's um that's a lot of power that track native has when it comes to building native applications all right so let's uh let's roll the intro and we can get started [Applause] foreign how are you doing guys by the way I have prepared the step-by-step guide as I always do and you can find it following a link in the description below we're going to node.js.dev and here under the blog you can find the building a Mac OS application with react native so if we open here we're gonna have all the steps all the documentations resources that we're gonna need to follow along with this tutorial if you want to build it yourself so I think we can um we can get started and not waste any more time uh from them prerequisites what you will need is you will need the react native environment set up so you can follow the documentation from react native website to set up the rec native CLI in this project we're not going to be able to use Expo and I really nowadays for all the projects I'm using X1 I got used to starting with Expo every time and preparing this project I went for some issues with react native CLI and I remember like oh that's why I'm using Expo but yeah the rec native Macos library at the moment of recording this video is not compatible with Expo but I think it's going to be compatible in the near future because there is some collaboration between the teams to to make it possible so that's why we are gonna use react native CLI and that's why we need the development environment set up for react native development on Mac OS so yeah let's if you have everything set up we can get started you can go ahead and open the docs for the react native Mac OS and also I provided their Repository right it's Microsoft at react native Mac OS which is a forked from Facebook Rec native so here in the documentation you can find more details I mean the documentation is still not very extensive it only shows like how to to get started but the process of getting started I think is really really easy and we're gonna get uh we're gonna see that in a moment so to get started let's open up a terminal and let's start initializing our fresh react native project we start from a fresh Rec native project so let me go to projects YouTube and after you're navigating a project in a folder where you keep your project here we can go ahead and start initializing our react native application we're going to do that using npx react native we can do at latest to take the latest version of react native and let's initialize our let's say Mac OS reminders that's going to be our application or Mac OS application even like that Mac OS app don't press enter yet because we have to specify the version of react native that we want to use when initializing this and if we look in the documentation of react native Mac OS the latest stable version available for react native Mac OS is 0.71 here we can see the laser latest version of supported Rec native version so that's why we need to keep them in sync and we need to use the 0.71 later if it's going to be updated you can check and see which is the latest version supported by the Mac OS package the react native Mac OS and use that for rec native as well so we're gonna use uh the carrot at 70.0 and this way we not 71 sorry 71 yeah let's press enter and this will initialize our application using vam version code 7071 of react native let's wait for a bit until everything is installed in my case the next step is going to fail and I've spent so much time today trying to figure out why it fails and I'm gonna actually leave it like this so you can see and so far I haven't figured it out it has to do something with my versions of Ruby or cocoapods or something like that but yeah like I spend so much time I have so I had angry because I couldn't figure it out and things like this happen like especially with environments set up like I really hate everything that has to do with environment setup I always wish like hey give me a working environment and I just want to build applications I don't want to struggle with setting up environments with going through versions with incompatible versions and so on and here is where that I was telling you about so in my case like if in our case everything is okay which most probably should be just continue uh with the next steps for me it stops at the installing bundler any for you as well you have this issue which I really doubt then what we have to do is um let's open the project that was installed that was created and we called it Mac OS application because when project actually was initialized almost completely successfully well last step that failed for me was installing the iOS pods so I'm gonna go into the iOS directory and I'm gonna do bundle install let's try to do it this way and for for me in the previous step it stopped at this installing Json and as you can see like all of these are with white which means that they are already installed and with Json and the next ones are installing right now so for some reason doing it this way it works initializing with react native init it stops it with Advanced Json so yeah it sucks but uh at least I found a workaround that that kind of works so the next step is let's make sure that the ports are installed so bundle exact pod install while we're still in BIOS directory to install the pods and after that everything is um should be fine but in order to make sure that it's actually fine I'm gonna go one director up in our directory and I will open the project with Visual Studio code I have this code dot that opens this directory using visual studio code if you don't have that one you can open Visual Studio code and from there find web folder so before I um I jump into the Mac OS tab I really want to make sure that this project is at least running because I had some issues with installing so let's go ahead and do npm start to double check if everything is okay with our application here we see them that Metro is at 0.73 but if we look at the package uh the react native is that with 071 the version that we want so the Metro is okay to be at a higher version so from this let's go ahead and try to open it on an iOS device we're gonna wait for for a bit for it to to install and set up on iOS but that's going to tell us like if at least the starter project is installed in configure correctly so let's let's spend around two to three minutes and then we can continue with the next steps to reinstall the the Mac OS plugin is it mandatory to use Mac OS yes I think it is mandatory to use Mac OS the same as building a iOS application using Rec native CLI you need to do it on a Mac OS device because you need the xcode the same way here when building for Mac OS because we are using rack native CLI we need xcode that will handle the building process if it would be possible to do it with um with Expo and if Expo would provide some kind of Expo goal for Mac OS in that situation um you would be able to build it on Windows as well I imagine but I'm not sure like what what it would take like it probably would take a lot of effort to make it compatible with Expo this David is saying quite excited about this one yeah me too I I found out about the rec native Mac OS a couple of months ago and I I just wanted to give it a try and it was so easy and I already have had an application on Mac OS built with Frac native as like whoa I need to do it and now is the time for it so yeah the application is still bundling uh I don't know why it open on a iPhone SC version but it's going to be okay so it's still building how long it will take one code for both Mac OS and windows is it possible to be honest I haven't tried that but I believe it is because the thing is that the application that we're gonna build today this is very important replication that we're gonna build today will Target Mac OS but not only Mac OS we're going to be able to run the same application on iOS we're going to be able to run it on Android and on web for example so that's why it's so powerful like we do not use it only for a specific platform we are using to Target to have one code base and to Target multiple platforms at the same time so by then we're gonna run the application Buffon RAM natively on Mac OS also on our iOS device on a mobile phone and also we'll try to do it on Android so here we have the template that we get started with from react native here we have welcome to Rack native everything is running everything is perfect at this moment we can stop the development server we can close our simulator and we are getting started with setting up for um this project this empty react native project to work with ragnative Mac OS and to do that is super simple like only thing you have to do is to run npx react native Mac OS init and this package will take care of every changes of everything in order to make this project compatible with Mac OS you can find all of this again I'm gonna repeat myself you will find all of these commands here in the step-by-step guide that you can find in the link description below or on node.js.dev you can find it there and yeah like basically just copy paste this one and put it in your command line inside your project and wait for a bit and then your project is going to be ready to run on Mac OS and ankan thank you very much for the donation I really appreciate your support so nice so as we can see everything has built successfully has create installed successfully and what we have to do to run this on a Mac OS is to execute this command npx rack native run Mac OS instead of doing it um instead of running this command let's add it to our package.json inside the script besides Android and iOS so let's add a new Mac command which will execute track native run Mac OS and comma now what we can do is first of all we need the development server as you would need it in for IOS and Android the Metro server so let's run npm start in one of these terminals to start the development server and let's open a new terminal to execute and run it on a Mac OS and for what we're going to run npm run muck and let's see and wait if everything is running this is like electron GS um look I'm not sure how electron Jazz was working if you I think electron.js was something similar to a web view if I'm not mistaken but here we're talking about like native components um running natively so there is a very interesting guide messenger Mac OS react native so Facebook Facebook moved from electron that's what we're talking about yes to react native we moved the messenger desktop application and the results were quite impressive um let me highlight some other things from here yeah here we're talking about partnering with my uh with Microsoft I don't I cannot find here but oh here for example um uploading time after moving first of all after moving from electron to rec native the final binary size reduced over 100 megabytes both on Mac OS and window windows the uploading time was reduced by 50 percent for the majority of users native crashes decreased 15 of Mac OS and wait for it 67 percent of windows so for some reason electron on Windows crashes a lot I don't know why but with react native we managed to decrease back crashes 7 67 percent on Windows so there's just some of the styles of moving and Native Mac OS application from electron to Rack native and good news is that our application is already running and you can see it here let me put it like this so the same application the welcome screen of react native is running but as you can see this is a native Mac OS application what you can do you can do everything that you can do with Macos application you can scroll through it and you see everything there so there is nothing much more for it for for me to show at this moment uh because it's as simple as that we in a blank Rec native project what we do is we execute the command npx track native Mac OS in it and this takes care this package takes care of all the changes and all the migration it has to happen in order to Target Mac OS and what we can see here in our application in our folder structure is a new Mac OS folder so we have Android one which is them which is a Android project which can you can open in Android Studio iOS 1 which is targeting iOS and also Mac OS which is targeting Mac OS devices so um it's that simple let me go ahead and probably do a git status and we're not stopping here what we're gonna do is we're gonna try to build a real application for Mac OS devices and I think that the best application that we can do to get started is the uh the application the native application from Mac OS from Mac OS itself there let me double check if I don't have anything there there reminders application so if we look this is the reminders this is an application that works natively uh on Mac OS but it's also available on your mobile phone or on your iPhones um so this is a great application that we can use to show how we can share the same code base to build to Target to different platforms so before we do that I really want to do a git in it uh does it have an ignore yes it has so let's do git add git commit yes everything is ready and before we uh we do anything let's go ahead and open our up dot TSX and first of all let's just check if the fast refresh is working so if I'm gonna change something here in step one to hello world it automatically updates here on our screen perfect what I want to do now is inside our application I really want to clean up all of the things that we see here so what's going to be the easiest the easiest would be basically we need to to delete all like everything so from our return statement let's delete everything from here inside our application above return statement everything we need just this function maybe with a text hello the component section let's go ahead and delete it we don't need it anymore and at the top when it comes to the import we can almost delete everything to have a very clean up the TSX that is going to be ready for us to start creating our application so yeah the the basic by default one is this structure for our application which one is better electron or wreck native well to be fair I don't have experience with electron but I just show you a couple of Statistics that Facebook managed to to accomplish by moving from electron to react native so let's go ahead let's open our maybe these reminders will help us but I have created a screenshot in our guide so this is the application that we want to develop so the reminders very similar to a to-do list application what we have is at the bottom we have an input box where we can write our reminders our to-do list items and so on they appear in a list on the page we can complete them and at the top we see the number of reminders with some titles so pretty simple but at the same time it will allow us to build a useful and a real application for Mac OS so because there is a lot of things going on let's focus on the smallest things and the smallest things on this page is rendering one reminder uh the line of one reminder and what is it made of it's made of um how's it called the radio button on the left and the text of a reminder on the right so let's do that actually for the radio button we can either implement it ourselves because it's not that complicated where I decided to use um UI Library called react native paper so you can go through their getting started guide documentation to see how we can install it so let's go ahead and npm install react native paper in our application paper I think we also need direct native safe area context but let me double check if we don't have it already so no we don't have it so let's go ahead and also install this save area context and to make sure that we install everything for iOS let's run npx pod install let's see if it will work this way yeah it looks like it worked we actually need to also install and Link the react native Vector icons but I really don't feel like doing that and it only is used for web back action on Android so ah I'm gonna skip it knowing that I'm gonna receive a warning about track native Vector icons um that's another thing that I love about Expo like backtrackers are working by default with rack native you have to install setup link and so on ah don't want to do it right now so now that we have a ref native paper what we can do is from there we can import a component uh Earth native paper write your button now inside our application let's wrap actually our whole component component let's put it inside a view so let's put it like that and this view is going to be our uh page or the main container then we're gonna have another container that will represent our item because inside it we don't have only a text we also have the radio button radio button let's make sure to import view from react native here uh the view is not Styles it's style and for the radio button what do we need to send there we need to send the value so the value can be this value that we see on the screen and that's it we already see something on the screen there not sure if you can see it or I'm not sure if I can zoom in no I cannot zoom in Zoom no not like that yeah I'm not sure if I can zoom in a native window font no okay so is there okay let's apply a couple of more styles for example for this view is going to be our item so let's do Styles dot item a reminder item uh the text itself is going to be Styles Dot item title Okay so what do we have we have this container for the whole for styling the whole page we have item and we have item title so for the container what I'm gonna do is I'm simply going to add some padding to make sure that there is space around the besides unexpected token where there is an unexpected token here at the end yes okay now I see it um and I can also do a background color that is similar to the one from the from the reminders application and in order to make sure that the whole page is with this background we need to make sure that this container expands to the whole page to expand it we're gonna do Flex one to make sure that it takes the whole Space here and um yeah that's it with styling our page now selling our item what do we have here we want to make sure that the redo button and the text are on the same line so let's do Flex Direction row perfect we also want to make sure that they are aligned on the center so align items Center will put them onto the same line um what else what else uh when there will be more of these items uh very we should have a way to I want to move it to our screen here just for us to see the example of the reminders application so as you can see there is a line between the two items so for that reason we can do that with um border bottom width of the smallest one which we can access by stylesheet Dot uh hairline width and let's give it a color border simply border color can be I don't know a light gray that's too much I think I prepared a lighter color for this one yeah that looks a bit a bit better I think you can go even darker for it but I'm not gonna stop on these small details uh and to make sure that this item has some space inside it let's add also some padding vertical five yes now it looks better it has some room to breathe uh all right for the item title what we want basically we don't want anything at this moment I think it's it's okay how it is right now so with that being said if I'm gonna delete the second one we have created the code that can render one one item now having this um this jsons I can render one item let's go ahead and take it to the next Tab and render a list of items so what we're gonna need for vet we're gonna need to first of all um we're gonna need to define a state variable where we're gonna store all the reminders that we want to render so for that from react let's go ahead and import use state I can also leave a react worries now at the top of our application we can Define the state variable for our reminders and set reminders we Define it using the use State hook and here we can initialize with an empty array like this um but because we are using typescript in this application we can take it a step further and Define like what is going to be the type of these reminders for that all we have to do is why do we have this import here I don't know for that all we have to do is to Define first of all that type of one reminder so reminder and not with capital but type reminder equal to what will a reminder have first of all it will have a title which is going to be a string and also it will have a completed to know if the title is completed or not now we can use this reminder type and specify that this state variable is going to be an array of reminders so not simply a reminder but an array of them now we're gonna know that these reminders they are an array of reminders it's going to be helpful in a moment so now that we have a state and we have these reminders uh let's grab some dummy data from the website so if you scroll down a bit I have prepared for you some default reminders here just for us to see without having to go through through the next steps first so let's copy them at the top here default reminders and let's provide them instead of this empty array let's define the default reminders as the initial state of our State initial state of our state variable yeah so now having a list of an array of reminders knowing how to render one reminder to render a list of them what we need is a flat list from react native so let's go ahead and grab it from here and what I'm gonna do also is I'm gonna extract these rendering one items into a separate function called render item and this render item will return the jsx for one item now having this function bigger uh inside our main container here we can use a flat list a flat list needs two properties one of them is the data so the data should be an array of things that we want to render in our case these are our reminders and it also needs a render item function in this render item function is exactly the render item function that we Define on top so if I'm gonna put that we already see three items rendered on our screen because in our default reminders we have three of them the problem at this moment is that we are not yet rendering them dynamically all of them are saying hello because our Title Here is um is hard coded so to get them the reminder that we are currently rendering here with render item function will receive a couple of properties so let's destructure them one of them is the item and another is the index so this item can be used as the item Dot title and we see it there and for the radio button as well we can provide the title of item item dot title you and another way another property of this radio button is going to be the checked or not so status right so the status can receive checked were unchecked how do we understand if the item is checked or unchecked well we're going to look at the completed so if item dot completed then our radio button will be checked otherwise it will be unchecked so not all of them are unchecked but if I'm gonna change one of these for example be happy to true and we also need to somehow refresh it let's try to press R here to reload we see that when radio button is checked we can also adjust the color using Color property and I'm going to use Royal blue and yeah that's how it is here perfect I like it so far the typescript is still complaining that it doesn't understand what type is this item and index but we know exactly what type we are going to be so we can provide the types after these double dots so we can say that the item is going to be a reminder and the index is going to be a number we don't need the index yet but we're gonna need it in a moment so now item typescript understandable this item is actually a reminder and there is a title with and also completed which is Boolean and so on okay the next step is to complete items when we press on them so for that first of all we need to detect press events so we can either uh so this press events will be either on the radio button and this writer button has on press event war on the text but what I say is let's put it on the whole row and whenever we press on this row to check this to complete this item as a whole so for that reason we need to encapsulate all of this component inside a component that can handle the on-press event The View cannot do that what I'm gonna do is let's use either pressable maybe a pressable or a touchable opacity or something like that and replace the top the root view of um rendering one item with this pressable component now this principle can have a on press event which we can call what let's call a function that we will Define in a moment toggle completion foreign now let's go ahead and implement this function const toggle completion it's gonna receive the index which is going to be a number and what it should do is it should somehow update in our state our reminders to make sure that the reminder position index is um is basically toggled if it's completed it should be unchecked and so on so what do we how can we do that well one way would be to do reminders at position index dot completed van false the problem with this is that our state variables should be immutable we shouldn't update them directly here what we should do is we should create an copy of our state updated reminders is going to equal 2. reminders using the spread operator we can create a copy of our state variable then we can do our changes on the copy itself and I'm not going to turn it to false but yeah let's let's keep it false for now and then we can set back our updated reminders like this now if I'm gonna select one of these completed if I'm going to select but be happy it's gonna turn back to false if I'm gonna press now nothing is happening but what we want to do is to toggle it if it's false we need to make it through if it's true we need to make it false so to do that I'm gonna take the whole value here and I'm gonna invert it so that gonna make invert from True to false and from false to true now if I'm gonna press on them then I'm gonna turn completed and if I press again they will be unselected why not using tamagoi for UI I haven't worked with tamagoi but I really want to give them a try a matter of a creator of tamaguyad Abdul chess super nice guy so we have the functionality of checking and checking the reminders and so on let's go ahead and go to the next step of adding new reminders to our list for that we're gonna need this first of all a state variable for our new reminder because we need to keep track of what the user will be typing so it's going to be a use State initially it's going to be empty string then for the text input we're going to use the text input itself from react native so where we're going to render it well after the flat list let's render the text input now we're not going to see basically anything on our screen but if we're gonna first of all add a placeholder for example add a new reminder we should already see it at the bottom here um if I'm gonna write something it happens but we need to bind our state variable new reminder to this text input and we need to bind in the following way first of all the value from our state variable will be the value of a text input so new reminder will go to the value and whenever the text input changes it will fire the own change text event so when that happens what I'm gonna do is I'm gonna pass the updated text to the setter set new reminder and This way everything is still gonna happen the same but whenever we're gonna submit this new reminder we're gonna be able to access it from the state because it's going to the state is our source of Truth um let's um let's maybe add some styles Styles dot input and for the input let's define it here what should we do with this input maybe let's add some padding 10. maybe a border with as well a very small border and maybe border color as well this one and Border radius to make it a bit round five yeah looks good at least something so the last step is how can we send this new reminder to the list well for that we need a new function called add reminder that well let's say console warn adding a reminder sorry sorry for that um and I want to um also show the text that we want to add so when do we call it we could call it we can add a button and call it when we press that button or we can simply do on submit editing we can call this add reminder and this function on the text input will be called whenever we press enter so we see here adding reminder and the value of our text input perfect so what should happen here in the add reminder um first of all yeah we need to to in in a similar way as we did with toggle completion we need to create a copy of our existing reminders but this copy what we want to do is after all the existing reminders I want to add a new one here and the new one should have a title and the title will be our the value of our text input the new reminder and that completed is going to be false now let's go ahead and set new remote not set new reminder but set reminders we've updated reminders like that okay after we set an estate we can reset our state where our in the value of our new reminder we can reset it to empty string now if I'm gonna do enter here all of a sudden our item goes there and I can write more and I can write more and so on I think if I just press enter it will still go here so we should double check if new reminder dot trim is equal to empty string then let's return let's not do anything here so now if I'm gonna do enter nothing is going to happen even space space enter nothing is going to happen because stream will remove them and if I have some text it will end it here and maybe the the title itself can also be trimmed so if we have a lot of spaces at the beginning and then some text it's going to remove spaces around the item awesome perfect now to make it more beautiful we can add the title for the reminder and the number of reminders and that's gonna be just above our flat list so let's go ahead and add there to text box because they need to be in the same line I'm gonna wrap them inside the view and the first text is going to be a reminders the second one should show how many reminders are there so we can take it from the reminder State and we can access the length of that array so now I see already here reminders nine but what I want to do is for example in the style here let's put them into the same row so Flex Direction row and also let's spread them to them two sides of a screen to do that Flex justify content space between will move a nine to them right side here and let's go ahead and add some styles Styles dot title and the same one for the second one this title we can put it somewhere top and the it should just have a very large font size like 32 f128 bold and also the color should be changed color royal blue and just like that I think it's quite close to the original reminders application maybe the view itself can have can have some uh margin vertical 20. yeah 15. yeah that's but better and whenever we're gonna add something even this number is gonna update automatically what we can do now probably is going to be as you can see here if you check one of them it goes to the bottom of the screen maybe we can do something similar for that before um before displaying the reminders I can have sorted reminders which is going to be a reminder is dot sword and how we're gonna sort them based on that completed and this way all the non-completed are on top and the rest are on the bottom I can if I complete they move to the bottom perfect bullying is not a time but to type reminder ah I don't yeah it actually should have two of them a and b a and B and but it was working okay hey I don't know and B um minus but it actually works right yeah it kind of works even if typescript doesn't like that we are extracting a Boolean from a Boolean are you using export no for this one we are not using Expo all right so what else can we do in this application what else guys do you want me to do in this application one important part of this kind of to-do list applications is after you basically reload the application what you want to do is you want to save the state so after you close the application open it again you want this state to be there wait a second I'm not even using this sort to remind I'm doing something bad here I am right away sorting them I'm sorting them in place how do you sort a race in in JavaScript is this word method changing the yeah it's actually changing them in place but it's a bad idea to okay to sort elements in array without mutating the original array we need to use two sorted okay it's bad idea to mutate the state so let's use the tool sorted and then get these sorted reminders and use them in the flat list it's not working to sorted reminder to sorter is not a function is this something very new it might be yeah if that is not working we can create a we can always create a copy of these reminders and sort them let's do let's do it like this yeah now it works so first we created a copy and then we sorted that array that is a copy of our state awesome uh the problem is that the now we're changing the index of our items so it's a bit bad because as you can see here I'm pressing on second item but it thinks that I'm pressing on the first one just because the index is changing so it will be a better idea if we are not using indexes but if we're using uh I don't know whole items or maybe like the best way is going to be to use IDs but in um in our case we do not have IDs so maybe I can do foreign let's first of all find the index of the reminder that has this maybe well I'm gonna search by title and then use the index now yeah now it works so as I was saying uh the next step is let me get add come on get and commit minus m uh the next step is to make this application persist data and whenever we close it and open it again I don't want to lose access to my existing reminders so for that we can use a sync storage and I think storage is a library react native sync storage is a library that allows us to write to the to the storage of our device and recessing storage if we look here the first thing that it says supported platforms iOS Android but also Mac OS so I haven't tried it but let's give it a try together and because we are they say that it supports Mac OS I suspect that it should work out of a box so let's get started by installing react native async storage here is their website let's install for iOS we're gonna need to do npx pod install for Mac OS I think it should work out of a box so if I'm gonna do npx for the install and let's go ahead and start using it so the API of um of facing storage is quite easy we have a set item and where get item get item so let's go ahead and import it and let's copy this to our data just in order to save a bit of time so somewhere in our application let's have this store data and also actually we're gonna need to stringify it so it's better to take the second one and reading the data we can do it here and get data I think we and we can even leave the storage key as it is where you can update it to I don't know reminders and here as well reminders um so store data when should we store data I would say whenever our reminders array is changed we need to make sure that we save that on the device so let's add a use effect that will say if that will be called every time we update the reminders and what it will do is it will um save data store data store data reminders like this and a native module is null maybe we have to restart it let's try to do npm run mock what again that's interesting let's try to close it completely try to run it again native module I think is null um you know what I'm thinking maybe the command I'm gonna close this one come on close maybe the command that we ran npx spot install maybe it only installed it in the iOS directory so let's manually install this by going to CD Mac OS and here let's run pod install yes as we can see it installed with green direct native safe era context and react native storage and now I can go back with CD here and do npm run Mac come on build failed build failed let's check the Mac OS and here in the installation they said Mac OS pod file platform mock OS 10 15. hmm very interesting to debunk this kind of issues we can open via application in xcode so let's try to do that and from xcode I'm gonna do open and I'm gonna navigate to the project that we are using so the Mac OS application and from the Mac OS application uh find the Mac OS folder itself open it up and here let's open the Mac OS app XC workspace here we can choose which Target so instead of iOS choose the Mac OS version and let's try to press play here to build it maybe this one will show us some errors hmm the same error here maybe we can look through some errors on GitHub but not Windows we need the Mac OS one so why did we change we added variety of sync storage foreign well it seems that there is a problem running the I think storage on Mac OS were very some issues with my configuration of ports and so on because it has been acting up badly What if I movies one to a new branch add everything here move back to main and let's see if we can run it from here and npm run Mac it also fails but if I do see the Mac OS and do pod install try using 10.14 instead of 15 maybe not sure let me see if the issue was with a pod itself from react native I think storage let's do but maybe it was also coming from us installing a direct native paper because we didn't do a pod installed back then as you can see it it still fails what if we try to remove react native paper see if you're a context paper I broke a project no all right let's try to uninstall I don't know paper and react native safe area context okay now let's go to Mac OS and do npm pod I mean pod install you please work that's my only option no it's not working that's fun X call what did we break uh so here we have our Mac OS building and build failed react code gen Mac OS was that maybe it's my M1 oh incompatible between xcode 14.3 and react native versions prior to 71.6 but I think is bad Iraq native is not is a higher version than that now rack native is 71 10. what's the latest version of change the development version from build settings uh what do you mean what do you mean tell me the change development version of the development version um to to change it from here I'm not sure to be honest but let's try 10.14 71 if I'm going to change the roughly to my quest version to 10 like this and do um and do a ram a ref node modules package J lock and then if we do npm install yeah I'm gonna try it all over cleaning like clean build folder we are reinstalling the packages we're going to do a fresh body installed let's do with npx for the install and I'm not sure if this pod install is actually targeting the Mac OS the npx because it might only work in the for Vios directory but let's see npm run Mac building please work no but actually think it should because we were we now por favor uh select the pod from xcode you mean or from where at this moment I really want to just start from scratch and just copy all the code that we have there but so do you so do you select the pods this one but why would I change it to something higher it's the latest it's then I mean maybe I can go like 11. I'm not sure if that will change anything the error was thrown by which pod it was thrown by the react native coach and something called gen Mac OS maybe or iOS Mac OS so I should do that here like selecting this one and what's up with this boat how to fix it should I do a clean before everything foreign did it fail yeah it failed no I decreased it I can go to to 11 I don't know still fails what if I try a blank new project and just to see what's the difference so the second time doing the reacting it how long it will take let's see I really hate when this happens Rock native CLI why you're like this come on thank you let's try with clean build foreign now it's too much uh okay so here what I have to do is they have to open the folder Mac OS up from here what I have to do is um CD iOS thank you very much for trying to help Faisal like to be honest I myself give up like uh bundle exact pod install I'm just gonna go fresh and see at what step it stops working maybe that will help us I don't know so here is the new project we can also run our Mac osc need here okay perfect um let's go ahead and let's go ahead and I'm going to initialize the project let's go ahead and do npm start let's do npm run Mac but for that we need in the package.json here a new script Mark that will run react native run Mac OS okay stopped working at them I think storage Mac OS in Mac OS pod file 10 Mac OS pod file is currently 1015. yes the stream will be available right after we we stop it so as we can see the application is running as it currently is I'm gonna go ahead and bring some of the code that we had previously I'm gonna give bring it here so from up.tsx let's take everything and bring it to our app.tsx I'm gonna comment out there but no even like yeah we we don't have that I think the only thing what we need to do is to do npm install react native safer context and also their react native paper if I do right now get status we see okay and if I do now NP X pod install will it install both in mac and in BIOS directory or only in the iOS that's what I'm interested it's only a thing for a Mac OS for the iOS directory yeah only here as you can see I'm not sure how the application itself is still working because if I do get add git reminders and now if I'm gonna try to install the pods inside the Mac OS cyber Mac OS folder and if I do pod install here well it's still gonna run native safer context oh it's running here on on red on the Mac OS even though within the assault pods because we are not using like any native pods like Rec native safe area context and the radio button is on is the GS side so that's why it is not complaining but now if I'm gonna do npm npm run mark Willow work please no it fails after I install the pods here so why installing reports in the Mac OS directory Mimi should do with web CD Mac OS maybe I should do bundle exact pod install I don't know I'm having some issues with all of this environment no it fails foreign foreign so at this moment yeah I don't know uh I'm gonna continue exploring this and the solution that I'm gonna find to this problem like why it happens um if I find it I'm gonna try to put it uh at the end of our blog post on the website uh but yeah like so far we have managed to build a lot of stuff uh with the exceptions of installing some native packages and installing pod for our Mac OS Project other than that everything is working uh is working fine and this application will run both on Mac OS on and also on on mobile devices on Android and iOS so yeah I'm gonna continue behind the scenes trying to to understand like what's the issue with the pods but I really hope that you enjoyed this tutorial nonetheless and if you did please consider subscribing to the channel not to miss any future videos drop a like and write down in the comments what other projects you'd love us to try and experiment um yes that was it for today take care guys

Channel: notJust․dev

Views: 4,026

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, CodingTutorial, first app, App Building, Step-by-Step Guide, User Interface, React Native, macOS development, cross-platform development, desktop app development, native components, Microsoft, open-source, macOS program, MacOS

Id: xkYy_6kje9E

Length: 95min 49sec (5749 seconds)

Published: Fri Jun 09 2023