My new M1 is here! 👨‍💻(after restart) - React Native Live with Jamon

derek says i am the band hammer i like it i am the one who who knocks i did have to restart four times by the way but i think youtube's back looks like youtube's back tell me if youtube's back [Music] gotta make sure i'm on multi-stream there uh huh [Music] okay it appears that everything's back [Music] and refresh it's not showing that i'm live oh yeah yeah there it is okay by the way i now have this new uh just chatting thing yo what's up adrian how's it going man [Music] uh make sure you subscribe by the way um derek says please give a quick summary of what today's stream is all about i will i am live good good good good good thank you sir thank you thank you thank you um yeah i'm gonna do that i'm gonna do that you know derek and you're gonna roll your eyes a little bit but wouldn't it make more sense if chat was over there so when i'm looking at chat i'm looking at chat by the way i apologize i have a little bit of a cough i don't know i think it's allergies so i have some some cough drops lemon flavor happy friday to you ahmed hey thanks for the uh the pr's by the way we're gonna be looking at those very short actually i already merged one did i merge i don't know if i merged it no i i approved it i haven't mercy yet i'm going to thank you though you are awesome to the left and the layout no rolling of eyes i like that idea says derek love infinite red and their contribution in reactatron says arvind chakrabot chakraborty is it arvind arvind uh happy to help says ahmed i really do appreciate it it's it's awesome and then speaking of help oh i don't have my i need to actually share see now it makes sense like i'm looking at the code right sorta yeah um so this is the other thing that ahmed sent in um as a help argument which is cool pre-added this and pr no that's cool that's good that's good it's good good call on that i like your code ahmed i like your code is it really npx install cola loco and not just npx run install color loco really i thought it was in oh npx does npm run are you sure that's what we want ahmed but arvind um i appreciate your your kind words there react-a-tron is is pretty awesome and it's going to be getting some more love this year or next year i should say so just stay tuned we're gonna be doing some stuff with it uh help if it includes h or dash dash help then uh automates installation of react native colo loco which allows you to co-locate your native files with your javascript files and by the way derek i will be giving a a little overview of what we're going to be doing today pretty soon usage npx install local loca or yarn install cola loco um defaults use the defaults app name source folder and package name usage info skip working tree install with dirty get working tree this is great this is fantastic i love it i love it so i'm gonna i'm gonna merge this in love it all right uh i do need to merge first so let's squash and merge by a7med m-a-h-m-o-u-d and i'm gonna go feed sure i'm gonna merge it i'm gonna go here and i'm gonna merge this whoa complex um okay i don't think i need to do anything else with that that should be fine uh continue or commit all right nice yeah this is this is good stuff this is good stuff um yeah let's go to merge that we're also going to do a feature here by a7med mhmoud and merch cool yeah so welcome back everybody i had to do like four restarts but loot back is now working loopback is now working um so i'm getting this how's my audio how's my uh sorry my voice audio compared to [Music] the pretzel music um okay so good good so uh so today what we're going to be working on is i do want to finish getting kololoko working on ignite out of the box so when when you create a new ignite app it's going to you like spin up cola loco uh and have it available so you don't even think about it it just works audio's fine says rv all right sweet thanks rv um it's good to know enable kotlin in ignite by default that's going to take a lot more work that's probably going to be the vast majority of what we do here obviously you know i'm on my new m1 so part of this is like how's this gonna work is it gonna be faster you know by the way uh so this is kind of cool um if you open up activity monitor it has this kind column here and you can see that some things are on apple apple silicon and some are on intel why is turbo boost still on so this i don't know why this is still happening because i thought i deleted that turbo boost doesn't make much sense here um let me actually empty my trash because i did delete it okay and then this thing i need to kill quit um and then yeah there's a few things here like uh loom background music device drive maybe loom for example i don't know maybe loom uh apple m1 uh does it arm.com that's actually a thing okay well let's just go look and see if they have a a mac version here desktop app ah they do have an apple silk conversion for loom so see this is the type of thing that i need to do download these and then um when i install it which i do need to like kill loom first exit quit loom okay drag it in here it'll replace the one that was there which was an intel version which was running on what they call rosetta turbo boost should be kills in activity is that an m1 thing it is not an m1 thing so turbo boost was an intel thing that came across when i imported because i used the migration assistant there so um by using the migration assistant um it brought over like all the apps and like startup and everything and um that meant that um uh whoa yeah okay um so uh that meant that some things came across that i don't need anymore turbo boost is an intel thing it's not an it's not a apple silicon m1 thing so this is the main reason that i don't ever use the migration assistant a new laptop always gets set up from scratch with new app versions then i move over my documents and stuff manually i normally agree with you mark but actually migration assistant did an amazing job it really did it saved me so much time and it just set it up how i wanted to i've had it puts around with a few things here and there but honestly probably i don't know 10 of the time of setting everything up myself maybe maybe less like it's it's been like honestly migration system is good and i can just sort of like move stuff over as i want to and not necessarily have to like um yeah like like i probably should like turn off some of the startup items and stuff like that let me actually see uh okay key base um let's see here so like startup startup apps i think it's in no not in there they call them login items ah there it is so turbo boost switcher is there and you can see that exclamation point probably means that it's not working anyway i don't know what arc oh i was using arc for a while i don't need that i really don't need loom open all the time i do need paste dropbox i should probably keep fig i don't remember what fig is i'm gonna get rid of it key base i don't need open turbo boost switcher doesn't need to be on there background replace i think was a thing i was using for a while but i don't need that or wait it won't let me remove it maybe that's just a thing that i okay so all i'm loading now is paste helper in dropbox yeah um derek says that's what i mean from intel down one you don't need turbo boost to run anymore yeah exactly mark says i'm sure it does an amazing job but i don't want all the legacy gunk and hidden files and folders and old configuration for things i don't use anymore yeah the other thing here mark is that this is a relatively my old one or my 2019 i didn't have for like super long so it really wasn't full of too much i had it set up how i wanted it i love the editing of login items from users and groups very helpful yeah it really is it's nice because sometimes you're like why is this opening i don't want it open you know um so like yeah uh by the way i had to replace a bunch of stuff in brew so like i had like an old brew thing here and this used to have a whole bunch of stuff in it it doesn't anymore oh it's it's it's you know it's not there and then i have brew and i moved all these over so a lot of them now are like uh m1 compatible looking forward to a clean slate on monday when my new mac comes yeah have fun with it um cool so we merged those two i need to actually let's see but yeah this is kind of cool with this kind thing here obviously pretzels not stream labs anything that is um electron will not work well not it works but it works on uh if it says intel here it's working on uh rosetta which is basically trans translating so obs um 64 helper pretzel stream labs crash handler process whatever that is paste helper which i'm not sure why that's on intel because paste itself is not but there is is on uh m1 the camera settings app i might be able to find one that's m1 compatible probably not that's not a big deal um apple camera assistant and that's pretty much it so honestly everything else is moved over to m1 most things are moved over to m1 so let's make sure that's good yep that's good and then let's go ahead and open terminal if kind is apple does that mean it's m1 compatible yeah what it means there is apple silicon and the m1 is an apple silicon chip architecture which is actually arm based arm sort of like your phone all right coloco let's pull this down let's yarn it we should probably add tests as well add tests so i'm going to add tests at some point unless ahmed wants to do that [Laughter] but i actually have some ideas on how on on how we might do that so i'm more than willing to do it [Music] make sure i have that is the text okay always be you know like anytime you need me to do something just tell me all right don't be shy like if you needed me to make this bigger oh yeah i already got loot bag working so um get cola loco working night out of the box so it pretty well is um let's let's go to uh i'm actually going to remove a few of these things so like jamin's collab actually no i'm gonna make a i have an archive so i'm just gonna move some of this stuff lab archived move um leopard to archived and move um tiger to archived move vanilla to archived let's see what else do we have uh move the ota hack to archived i just don't need these things right now so uh pizza app move the pizza app to archived okay so we're good here apple arm yep text and layout are good okay yeah always let me know if there's anything that you need me to do like that um cool so let's open up no we don't need it not right there so what we want to do here is we want to run uh ignite oh you know what we have something else we need to do first so let's go [Music] let's go to ignite because there is a big pr that we need to get uh merged before we start doing a bunch of ignite stuff so this pr is by uh leon this is our work in progress thing but we need to upgrade react native to 663 expo to 43 and expo modules so uh upgrade support plate to the latest version 663 43 unit modules are now expo modules react native bear is um [Music] ios and android here right i'll try writing some tests for it if it went well lpr yeah so here's my idea by the way ahmed what we would what we can do is fake the file structure we're going to need to i mean unless you want to spin up i don't know it seems like kind of a pain in the butt but you could spin up like a vanilla app i don't want it to be really slow so you could like commit the vanilla app into your test folder somewhere and then run all your tests against that basically and um verify that it made the right changes to the right files i guess um we need to do it in such a way ahmed that it doesn't um we don't want to be in a situation where the tests are so slow or so annoying that you don't run them or you're just constantly like oh i gotta go deal with the tests again you know they need to be fast they need to be simple straightforward just do their thing um even if you do spin up a new app like you should probably just delete anything that it won't touch you know what i mean like get rid of everything except for the pbx is that link for langsdorf yeah nice jason how's it going man good to have you with us here today oh raided dude i thought it was just uh langsdorf coming in but he's raiding with a party of 61. hey everybody welcome to the stream appreciate you all coming in uh did you have a good stream what'd you uh what were you doing hey arf arfy sorry arffy live [Music] it's kind of fun i think that's actually my first uh big big raid so thanks jason you're awesome um by the way i have the uh follows follow alerts uh pretty slow so if you follow me on twitch it's gonna be like coming in slowly just like that let's see here whatever the fk his name is has followed thank you for the follow appreciate it uh just so you all know what we're working on right now i'm actually doing some react native this is react native live and uh so i am on my new m1 max uh uh computer i had a like a 2019. what's up mad fury happy friday to you welcome back by the way but yeah like uh i'm trying to make sure that everything works on my m1 max i think it does but uh you know it's process like sometimes things are like you know they work but they're not like as fast as they could be because i need to upgrade certain things to the the arm version essentially [Music] fahad how's it going uh yeah so uh anyway um what we're working on right now is uh we have a few things going on but we are working on a thing called react native colo loco and react native colo loko is a package that i've been working on allows you to co-locate your native modules and components with your javascript jsx files so react nate of course you can you can write native modules you can write native components and this just makes it super super way easier so like in your screens let's say you have like a welcome screen or something like that you can just drop in objective c files java files kotlin files swift files actually kotlin we're going to be working on today but all the other stuff works so uh yeah sure i'll share the uh the link into chat uh so yeah so there's uh so essentially we have a readme most of it works already and so you can go through it and check it out but the other thing that i'm doing is um i'm i am going to be working on getting react native upgraded so that we can make sure that ignite works with cola loco really well ignite is our react native boilerplate which essentially lets you spin up a new react native app really fast so yeah well hopefully everybody had a good stream over on uh learn with jason um it's uh it's always a it's always a fun time over there so yep what is the uh c9 demo i think you should close the readme images issue on real uh loco repo uh yeah maybe at some point uh because i might i might dump in a few more but you know usually i'll keep it open just uh to easily find it you know like it doesn't have to be open to work but yeah so uh this pr is a pretty big one that leon one of the my software developers awesome dude works or lives over in daegu south korea and it upgrades the boilerplate to react native 0.66.3 which is the latest version and then expo 43 just came out so uh doing that unit modules is now expo modules so that got changed as well this looks like it all works it's got it all dialed in here sdk 43 uh he's got a few got a few commits there let's look at the files see what you know what it's all about uh welcome everybody new by the way why are there zero viewers on youtube while i'm watching on youtube uh ahmed i i don't know it lags way behind see right now it finally shows all of the the viewers who came in from jason's stream it shows 44 but like uh you know it was it was showing like seven before so it's one now yeah it just lags it's it's a little slow uh so far this is seems to be working pretty well by the way m1 i did have to reboot this morning but it seems it will be working all right so a lot of this stuff i assume is just has to do with the new upgrade architecture is to build negative code for in debug okay that's good is this this is the groovy file so this is build.gradle it's written in groovy which is a cool language it's a groovy language i'm sure that joke gets done all the time it's a it's actually pretty cool it's it's pretty solid like you can see you're creating so def instead of let right um you're defining a variable and then uh get properties this looks a lot like javascript right um yeah this looks pretty boilerplatey so probably don't have to review that too closely youtube's back yeah timmy thanks for tuning back in i'm also streaming to facebook which is like my mom might actually actually click on it once in a while look at it for a while and then be like i don't know what's going on and then click out yeah uh todd we got raided by uh learn with jason so jason langsdorff raided which was awesome and uh we got a bunch of uh new new viewers kind of checking out what we're doing we're working on some react native stuff so uh import expo modules so this is a java file this is mainactivity.java by the way for those of you don't know me i'm jamin holmgren i'm cto co-founder of infinite red i'm also the uh host of react native radio podcast and this is my twitch streaming which i do monday wednesdays and fridays from 10 a.m to about 1 p.m pacific time so feel free to follow if you want to see some react native work we do a bunch of code it's fun we it's pretty chill we don't go too intense but we also do we always we're always doing something fun like always interesting and we're working with a lot of different languages like the last time that we did a stream i think well i probably worked on four different languages and i explain stuff that's going on if you're a javascript developer i tell you what's going on so you're not lost so this is java here it looks a lot like javascript people who say java and javascript are not related at all don't actually know because there are some things that are similar um you know like this looks pretty javascript-esque of course there's some things that you that you probably wouldn't see in java javascript sorry um but yeah so uh will this change what we need like i need to watch this stuff uh for colo loco nope looks fine uh unit modules is gone expo modules is in and [Music] interesting is this this we need this for cola loco so where did get packages go ah it's right here so i think we're still good it looks for the return pack ooh actually no uh we're gonna have to see if this still works with kololoko we may have to make a little change here kali po has followed hey thanks for the follow i appreciate uh you hanging out with us today let's see here the thing i love about groovy is that i can choose to type my code or just make it dynamically typed it's cool yeah so it's like optional typing type inference pretty sweet [Music] um so this so the reason i was worried is because i think i'm actually including let's actually go look let's go take a look at ko loko for a second i'm going to open up enbs code and let's go to install cola loco this is the script it's a node script that you can run to obviously install colo loco in your react native app get this set up here maybe we can go a little smaller okay so um we have a let's see here so there's this and then there's this packages so patch it package init string we're gonna ah see this hmm yeah i don't know if we can fix that so here's our problem i don't know how many tabs there are you know and when when he's changing the number of the the amount of tabs that are happening here because like this indentation right here was that far but this one's shorter and if i don't hmm i don't know like why it's formatted differently it looks like everything was just moved over uh m reacting is new so it's like it's formatted rec native host rapper so okay i see it's because we're using a host wrapper now not just a host so this is non-ideal but we can more or less just do this and then this return packages may be tabbed over too far or not far enough and there may be a way for us to just go in there like parse this and figure out but i'm kind of lazy right now so this will at least work i guess is the big thing so what i'm going to do now is i'm going to release a new version of color loco that has this we're just removing the spaces there and initializing the package and then return packages added onto the end so yeah um remove indentation requirement from setup script all right so we'll push that up and then i'm gonna do yarn publish yeah i mean groovy is a pretty cool thing really it is this is your point actually we're gonna go 0.6.0 because there are a bunch of stuff that came in from ahmed ahmed uh has been helping out yes i did yep i did get pull thanks ahmed so that's all pushed up there and it's now published as 0.6.0 and that's good okay now we can go back we know that that should work um configuration change we're bumping up to 30 point so instead of 29 ndk version goes up even central instead of j center i guess that's a thing now maven central um gradle 4.2 yeah it's doing some other stuff here to grab [Music] wow you folks have some interesting names here nigel and i drill thanks for the follow appreciate it thanks for hanging out with us today it is a friday and happy friday to you all we're not doing jcenter we're just doing maven and flipper version bumped up to 0.99 which is the latest version gif support in react native images okay uh webp support that's all good stuff that's nice obviously you can remove those if you want but that's in terminal bit from the bottom edge you mean it's like too far up uh yeah all i want for a friday noon cool hosting yeah jay jaylen uh jason langsdorff hosting cool react people totally he's an awesome dude uh i live not too far i mean i'm like i live across the river from him but he's in portland i'm uh i'm in vancouver washington not in canada not canadian a lot better now ahmed cool um here's some expo module stuff here iphone development target goes up to 12 instead of 11 that's good you know 13 is out but we'll go with 12. unit module is removed rct convert comes in app delegate changes how uh the interface okay so oh we don't need that um this property this is objective c um don't be too scared by the square brackets all they mean is like call this function so like this is take this class and call this function on it and then with that you create an instance and then run this init with module registry provider method and then this is again module anyway we're getting rid of that anyway so it's gone uh if available ios 13 um background color or white color um uh extra modules if you need some other stuff uh rct bridge modules we're not gonna do that so it just goes back to just being uh empty array i guess yeah oh yeah this is something that kept on being a problem so ignite up should this be ignite app or should this be hello app i think this should be hello app or hello world uh let's see here so the reason that it needs to be hello world is because it does a um it does a search and replace for hello world and that way your text gets changed to whatever your actual app is ignite no up swift so he enabled swift there which is good pod pile erden let's see here erin is i hey thanks for the follow uh thanks for hanging out with us today on react native live i'm jamin nice to meet you let me know in uh chat where you're at what country you're from if you want what part of the country city province county whatever else um use expo modules instead of unit modules apply xcode 12 m1 post install workaround that's helpful that's helpful uh use flipper apparently you don't have to say what version of flipper it is anymore um so yeah that's good uh package expo now is uh expo 43. i'm from mongolia nice welcome from mongolia what time is it there it's got to be pretty late there hey or no early wow yeah this is like middle of the night there it's it's yeah um uh i know um doc from mongolia i don't know if i said his name right but domino i think he works on the react native core team and uh really cool guy i met him in poland for react native eu people upgrade react native apps are the real heroes that is a fact let's see react native async storage what are we removing here oh there's react oh we're adding react native that's what we're doing okay itself all right don't transform that um someone else followed segu thanks for the follow appreciate it expo 43 react react native we're bumping those up 1702 um and you're unlocked this all looks good i think we're good to go i just need to make that one change uh just one tiny change i'll commit it and release thanks so much leon he did some amazing work on this really really cool so i'm going to go ahead and commit this suggestion here change [Music] boilerplate app name to hello world in what is this again this is the storyboard all right let's uh go ahead and do that commit that and then we just need to wait for the uh tests to finish the tester running okay cool uh let's see what happened to your scene is there something wrong with it or are you just talking about the changes i needed more like code space to be honest so derek and i worked on it yeah it's a lot different yeah derek and i worked on it uh put more stuff over here on this side just kind of like vertical and then uh just leaving that that everything over here just a giant screen as big as we can make it uh i have a big i have a lg ultrafine 5k display and honestly like what you see here on the screen is nah it's it's a little over half but there's a lot of just empty space to the right so i can put stuff over there but i also have another monitor over here so amit as geolocation is deprecated what do you recommend any third-party library that works well with background location fetching um so are you talking about uh geolocation in react native uh let's see here so i actually haven't worked with this very often or very recently i should say um to be completely honest uh mark says react native background geolocation is that the one you've worked with mark mark is one of our developers by by the way principal software engineer here at infinite red so uh ahmed if you posted something on youtube it didn't come through on my multi-stream chat well enough i don't know what's going on there oh jsxhtml yeah um i'm not sure how to fix that everybody make sure that you're drinking water by the way all right so uh let's go back here this is still getting ready to merge so in the meantime we're going to go back to coloco um and continue to just explain what it is so that people understand what we're working on so we're basically the two things we have ignite and we have co react native color loco which i built 16 days ago is when i first started i guess um and it lets you co-locate your native swift kotlin objective-c and java files with your react native javascript typescript files so uh you have everything you have your tsx or your jsx or your javas js files and then in react native you can also add java files objective c which is dot m you can add swift files and it will actually bring those in automatically link them in you don't even have to open no opening uh xcode no opening android studio now digging through a bunch of you know a bunch of stuff so yeah hydra homies someone tell that streaming app that i won't cross-site script jamin's live maybe there's a way we could like mark you as safe you know and then you can hack us to your to your heart's content uh not supported on expo not because you can't run it on expo well you can't run on like managed expo but or not yet but like uh but mostly because i just haven't tested it yet uh so you just add react native color loco and then you run this script which is yarn install color loco um you know what one thing i don't like is how this is a text block i mean a code block but these are just inline and this here so let's fix that really quick let's go to the readme all right let's see here uh let's see here the provided installation script so then let's just do this and we'll go or so we'll do the npm stuff and then yeah npx um lastly run uh let's see here install pods and run the project okay let's do this here so npx pod install npm or yarn ios vm run yar uh android or yarn android okay i think that's going to be a little easier to read um oops wrong thing here so um just to verify that i'm going to go ahead and hit the the preview so we have a installation uh add cola loco then run the setup script okay this part right here actually i'm not gonna even say that because like we talk about that above already don't we uh yeah it's recommended okay there yeah yeah yeah so let's go back to this so um so basically you install it then you run it uh install color loco and then you run yarner os or yarn android and then yeah we should be good there so um those don't matter that much so i'm just going to push them straight there yeah so uh let's see um let's go back see if it has finished yeah it has good so on ignite when i um merge this i want to merge it as a uh feature bump um so essentially it will let's see what's the latest version of ignite anyway i forget it's like seven point six yeah seven point six so i want this to be seven point seven by doing feet colon instead of like you can do fix that would be a zero point seven point sorry i mean six point seven point six point one if i go feet it'll go seven point seven point zero and if i did breaking change it would actually do 8.0 and it's all automatic leon skim kim.com uh so we're gonna go ahead and merge that and so upgrade react native to 066.3 let me actually go like i'm going to do this i'm going to do uh no i'm going to leave it just like that that actually makes sense so just merge that and it will now in it'll it'll uh start the process of releasing the new app or the new version of ignite so we're gonna watch what goes on here in the releases side of things and this should uh 7.7.0 should pop up after a bit we'll take a look at it cool okay yeah this is this is cleaner see those blocks it kind of gives a little visual space little breathing room you know in between blocks of text so add color loco oh wait ha that doesn't make sense once you've installed native cola loco you can try running our setup script then run the provided installation script uh i just said that so let's try this again here um yeah here it is this will attempt to automatically patch the necessary files um okay um read me tweak push that up all right better better better very nice okay cool so uh now basically when ignite is done releasing we can spin up a new ignite app and make sure that it is working right out of the box um i'm gonna go to ignite though and i'm in a feature right now so i'm going to go to i'm going to pull it down the latest uh changes i'm going to go over to this branch and now i'm going to merge master and that will probably have some conflicts no no conflicts whoa okay nice no conflicts how often does that happen to you a bunch of changes like that you merge in and there's just no conflicts by the way this is one reason why i don't like to rebase on uh branches which i squash merge anyway so rebasing doesn't really do anything squash merging means that rebasing doesn't matter at all you're doing is pushing one new commit at the end of the um the uh the branch so um but yeah like merging tends to avoid some of these uh like like uh conflicts there are some like smart re-basing strategies that avoid merge conflicts and like having to do it over and over and over but you know i used to not like squash merging because i was like well you're losing all this history you're losing you know all these these commits that i did and everything and this big thing is just one commit but then i got over myself and realized it's actually better at the end of the day just one commit one pr link the two things together just keep your pr's relatively small if you can so yeah all right let's see uh doubt it's out yet yeah it's not out yet i might go let's see here uh i might go see if it's going to let me yeah just jump over to circle ci ignite so it's running it right now on circle ci the test will take a little while ignite tests are a little slow okay enable kotlin and ignite by default so um i did find so there is a so mazanchami who works with us and gentleboard have been working on uh some instructions on how to um how to enable colin um and let me go see what i thought it was in here let me go to kotlin what oh it's because i have this okay yeah uh yeah here we go okay dive into react native update now i don't think this is live yet so you won't be able to go there but this will be coming out soon in the form of a blog post in a open source uh repo so just uh yeah mark says i'm the king of pull requests that break all other open pr's well you're like me you you do these like sprawling updates which there's a reason why we do it it's like we we want to like make things clean as we go and stuff like that i'm kind of a fan of that i know some people aren't though okay so uh find the installed kotlin version um all right let's open android studio which i did by the way install the m1 version so it should load faster ah so much faster still slow to like drag uh and resize the window but okay i don't really want that um okay so what does it say find the in the top menu click on android studio preferences uh languages and frameworks okay and then kotlin auxman says circleci better than github actions uh depends on what you mean by better um tokyo hackers hey thanks for the follow appreciate it um by the way will we have gant on react native radio soon actually the first episode i listened to was his episode talking about ml and react native uh he's actually in the middle of a pretty intense project right now he's working on a project that involves machine learning and react native tensorflow js and uh he's doing some really cool stuff over there so i don't want to bug him and have him come on the podcast but when he's done we might do an episode just updating people i'm like okay now that you've done this you know how to go now you've done it on like a real project etc so um there's a new version yeah why not let's install the new version of kotlin okay so so found in step one so what 202 1 5 21 and we're going to be at 1 6 0 is going to be what it is so android build oh you know what this is going to be tough because like you can't we don't know what version of kotlin they'll have installed does that mean that if we we can't like automatically detect what kotlin version i don't know that's that's a little more difficult um this makes me think that maybe we should not enable kotlin by default because here's the thing like if we do this and then they have a different kotlin version and it just breaks their build what happens then you know i can do all this stuff uh kotlin version again uh code convert java file to kotlin file convert java file to column file you know what i feel like if people want to use kotlin we're gonna have to just tell them to go do this we could probably script it or we could enable it as i kind of put in my project plan for today um enable kotlin by default in ignite but if we are dependent on what they have installed here so okay activated after restart let's just go ahead and restart android studio but if people are dependent on what version of kotlin is installed like how like if it doesn't match exactly is that a problem could be a problem and we don't know what they have i just upgraded for example yeah 1.6.0 uh early access or um yeah they could be on an early access version um so if we go in there and make some assumptions and say oh you're on 1.6 because you know like you're obviously going to be on 1.6 that's probably not true they could be on something else this also doesn't look like it's a uh like a like a like a project specific thing either so they could could be working on some other project that has a different kotlin version and you then they have to change it yeah i don't know math structure or sorry i always read your name and think it's the mass structure the maths uh it's going really well um we're i'm working on the new m1 so i have the new m1 here i'm on a mac os monterey i have 16-inch 2021 apple m1 max 64 gigs seems to be working pretty well the migration assistant did really great which is exactly what uh what mark rickert loves to do um uh can't android studio handle version conflicts and download the new ones kind of like when using different radial versions ooh that's a good question if so then yeah i mean i'd love to just make it kotlin by default although um i will say like i wouldn't i definitely would not do like you know what let's try it let's try it with a few different versions uh maths you said have you worked before with mongodb i have um i like mango mango school um so ahmed that's the big question right now oh ahmed i forgot i don't know if i totally answered your circle ci question so circle ci uh i like it um github actions is nice because it's super convenient but i had a bad experience with gab actions where it wasn't showing me some pretty critical information like but you know like errors this is early on though i haven't tried it as much recently so i use github actions where it's convenient i use circleci for react native apps matt's why are you asking about so uh i think we should try it i i do actually think we should try it that's that's a good point all right refreshing here 7.7 upgrading react native to 66 point or yeah 0.66.3 so i'm gonna actually tweet about this um new version of ir ignite released with support for react native 0.66.3 all right i'll just say 0.66 expo sdk 43 is it 43 yep 43 and replacing unimodules with the expo package [Music] even uh um note you can still use ignite without expo if you want but you'll get the expo the actually i'll put this in a follow-up tweet so um uh let's see here you'll get the uh expo package the lightweight pre-configured um let's hear the lightweight expo package pre-configured for convenience if you ever want to use an expo baggage pm package okay um i should also i should also mention that um uh also this version uh enables swift support by default working on potential kotlin support by default and something else that will be pretty cool jump on stream if you want to see it always got to be selling right twitch tv dream and homegrown all right okay cool so that's tweeted out i spy my repo says mazin yep thanks uh it's actually this will be helpful and if you are able to stick around and hang out with us uh maz and you may be able to help us hey vamshi welcome back uh so the question i have is whether i'm on 1.6 but people might have anything installed 1.5.21 etc um i kind of wish that i hadn't upgraded but that's okay um so let's go to react native live and let's npx ignite cli new and um i need the name of a cat i'm gonna go puma i'm just doing cat names for my for my uh test apps okay we're we're trying this by the way the bundle identifier isn't actually the capitalized puma i don't think i could be wrong i'd have to go look you can you can customize that with bundle with ignite but we are spinning up a new react native app or 3d printing one as this says so uh while that's happening this will take a little bit it's a little faster now with the m1 uh but still takes some time it's something i'd like to continue to to speed up but we're on 7.7 um now oops uh let's see here so i'm gonna open up ignite as well because we're in the middle of uh implementing kololoko within it we have cola loco right here right installing uh react native koloko the big thing here is like like if cola loco works on this um then uh i'll start working on making essentially making uh kotlin work by default so uh let's see here in the boilerplate android so let's go look at mazin's thing here so oops wrong one right here okay so find the installed kotlin version we're on uh just refreshing memory 1.6.0 in the following android build gradle file we're going to add these things i'm actually going to close this gradle plugin i'm not going to do that actually i'm just gonna quit android okay so uh android build gradle so let's go to android build.gradle okay and then in the ext we need uh 1.6.0 is that in the build script it is yeah so we have that and then we're going to add kotlin version is 1.6.0 uh update this to your version of kotlin i guess right okay this finished so let's go to uh puma puba that's different uh yarn ios so this is me like slow some things down uh okay yarn start okay building the app this is gonna take a little while we're gonna let it go um what what else do we need to do dependencies we need to add this okay do not place your application am i in the wrong i don't think i'm let's build that gradle right yeah it's build.gradle in the android folder yeah we're there uh individual module okay so not application dependencies but this is like a kotlin yeah this is good all right um it's building it actually builds a lot faster on the m1 max i've noticed there's it's probably takes maybe 60 of the time it used to so that's that's pretty cool um in the app build gradle so we're going to go in here and go to the build.gradle then we need to apply plug-in at the top of the file okay and then in the dependencies we need to add this at the bottom of dependencies so like that hmm so this is unfortunate um i'm just going to run do a niche what working tree okay um it's unfortunate the so that that error i've seen this error before i think so swift right i don't know what the problem is here um it's just it's unfortunate that i have to do that you know what i mean like [Music] it feels like i shouldn't have to do that just build from xcode it's also possible like i could just support it oh swift three why is it swift three and then it says use uh use xcode okay let me see if that still is a thing here i wonder if um leon's on like an old version of xcode or something does not support building or migrating swift three targets i don't want to go back to xcode 10 that's how old this is 13 right something's wrong here let's go see if there's any other option here um let's see okay target and project setting swift version should be five so let's see how do i do that that's in workspace systems uh so target and product okay so let's go to the project settings actually project here build settings [Music] swift this swift 5.0 uh language version was unspecified i guess well that will that help this one's set to swift um okay let's close it and swift version five name pods is removed weird all right but let's open it and see if this is problematic testing testing testing am i back sorry about that sometimes i have to restart my mixing console and i don't really know why so that's probably what happened there hey did you notice that there was no error this time um oh wait a minute [Music] pretzel was uh running in the wrong the wrong audio channel here um just gonna restart pretzel because i think it picks up once i do that okay so yeah you notice how this is like doing what it needs to do here so i feel like what we could do here is um probably just take a screenshot of this uh and then update that come on pretzel um and then yeah just comment on on stack overflow here um okay there we go um update project swift version so it was like it was like unspecified um update your um open xcode and change the projects swift version to the latest it'll say unspecified um before i s before i before i say that though i should probably um i should probably make sure this actually does work so let's let's go yarn ios again here okay audio's back sorry um is it still not working on twitch audio on youtube is working i'm gonna ask um so yeah that didn't actually help yeah it's clearly like an old version of swift or something like this could not find or use auto link library swift dispatch hmm bx pod install i almost wonder if this is a pod issue [Music] [Music] so twitch says that they don't have any audio um i'm sending audio out like seriously out of sync [Music] hmm wonder what's going on hmm uh and it's not any better kind of sped up like the chipmunks maybe it's catching up um i guess we can give it a little bit of time to try to catch up oh i wonder also if i open loopback um let me try i'm gonna turn it off turn it back on actually i'm gonna turn it off kill loopback open loopback turn it on and then go back to streaming audio all right uh not yet caught up okay hmm [Music] hmm uh let's see what happens here i'm going to go back to this just let it go a little bit here sorry about that everybody jump over to youtube if you want uh just go to youtube.infinite.red yes broken again um these just warnings is an error um so linker command let me see if maybe i can hmm yeah how's audio still still pretty bad so still not working how it should i might actually go to twitch tv jamin holmgren and listen and see now this seems like it's that seems to me like it's good try uh closing um twitch and coming back because when i opened it up here it was actually sounding pretty decent um oh yeah this is the issue that i got this is march uh no i don't want to use rosetta [Music] excluded architectures and the builds okay so exclude the arm 64 architecture in the build so this is kind of interesting do we want to do this or do we want to do this um um this pod file plus excluding xcode project um this may lead to deadlocks okay already excludes it um rosetta terminal um well uh i guess we could try this so so this goes this goes in the pod file let's go let's go take a look at this and it's in the uh post install m1 post install work around m1 workaround i don't know if this is worthwhile i don't know hmm i don't i don't like this it feels this feels dirty it feels like it's not right but let's let's see if it fixes the oh i put in the wrong one i need to actually put it in the actual [Music] uh reloaded twitch and audio is now fixed in sync and not chipmunk's sounding that's good to hear yeah let's uh let's oh i didn't enable paste here okay gotta enable paste paste helper all right sweet there we go let's try it again i just don't know what this is going to do is this going to make it so that it doesn't run on the iphone properly sorry the uh the right simulator or it will be running like some okay that didn't work all right let's uh let's remove that actually let's let's try it at the top if that doesn't work then we will remove it and we'll try the uh open from a workspace and we'll go in and look at let's see oh you do have to clean pods and reinstall remove pods remove this okay so i probably need to do that stuff um [Music] that seems a little overkill to do all that pod install let's just pot install build settings hmm uh 31 it doesn't like this oh uh i think i'm actually supposed to be in ah yes i need to do this okay so post and okay so yeah that's it um that's in the react native post install all right that's after the rack native post install i'll put it i'll put it at the end here all right yeah i just didn't do it right okay maybe i should actually pay attention i never like blow away caches and stuff unless i have to i do that as a as a second you know as a as a next resort so i'm gonna now i'm gonna go to the next one i'm not gonna blow away everything but i'm gonna go rm uh i o s pod okay i'll just do that rf and then um then npx and i'll actually rm uh ios pod file.lock and then now now if i do npx pod install it should reinstall you know completely what can why do you choose react native over flutter uh this is actually a fairly common question um and uh happy to answer it anytime um let's go yarn ios see if this breaks again so uh flutter is is really cool in a lot of ways and it's a it's definitely a viable option uh but it lacks one of the most killer features of react native and that is that a react native app can share code with a react app and it can not only share code but share developers share third party modules react js is the most popular web framework in the world and so you get the benefit of having that vast ecosystem flutter has nothing like that there's flutter web but it's it's completely not on that level so that's the most important thing there's a lot of other things you can talk about they're both you know great systems in their own way but until and they won't so until flutter has the biggest web community in the world they're never going to really be in the same level so um failed to build um why did you fail to build same stuff so uh all right so the other thing i want to try before i blow away all the caches and everything is exclude this the build setting of the project open xcode proj on xcode so um in the target excluded architecture arm 64 and uh build setting of the project so the project's here um oh yeah okay here we go so excluded architectures um and then in release and uh debug again what is this doing like why you know um flutter draws every pixel so any existing native module can't be used whereas in react native you can interpret it in the native side to existing native modules like dagger yeah and actually uh react native kololoko which we are ostensibly going to be working on at some point here let's see excluded architectures i actually don't want to swift version weird ooh why why is it swift version like that hmm i don't know this this seems strange to me i don't i don't and yoga um yeah it's still still running the same issue here um i don't believe this i don't believe this is what is the problem i just have this spidey sense i have a spidey sense that we're on the wrong path here so i'm gonna keep doing some googling um okay so there's that whole thing where you can just like create a file and and then supposedly it fixes it i can try it create bridging header yeah that didn't work uh nusa file bridging header uh library search path okay xcode project in the file explorer under targets okay i'm going to delete this by the way when we figure this out um i'm gonna update ignite so so xcode project targets build settings okay uh library search paths okay debug and release okay so add that swift 5x i guess i should have read afterward it's got 11. each of my targets um [Music] okay so add this too so needs to be the first all right let's try this js okay so add this and apparently it needs to be the first so let's move it up here and there's this swift thing here so um tool chain swift platform name okay okay that needs to be after and then there's this one but i don't want to put swift five like hard coded in unless i have to so i'm going to try this wait did that actually work hold on that was only a debug let's go this and add right here this one okay okay uh you're in ios some combination of this is gonna work right some combination of this well i'll add the five one swift 5.0 all right i'd like to figure out which of these is solving the problem that'd be ideal okay pot install and then we'll run your aos so we got those added to the target now i don't know if i need to do this on the project as well uh so i might need that other one sdk root move that there i'll try running it from the ios project as well well what the it just worked i think i think it just worked guys okay was that the only thing that needed to change because if so all this crap you know needs to go away so let's let's go look we got all this stuff here right um all this configuration okay so i'm gonna do get reset hard okay and it should now not work right whoops um this pod install and then uh what i'll do is i'll come back to this and reapply just the last thing i tried maybe i should have done a little commit there just to make sure but okay i don't whoops yarn ios okay so when uh that finishes i think all i need to do is add this all right we're gonna let this go it should crash it it didn't it didn't do anything so this is this is really helpful just add this so interesting oh 5.2 okay still building i must have when i did yarn ios or uh pod install probably like threw some things off look how many tabs i have open okay i think we've got that fixed so i'm going to um well okay yeah it crashed good uh so let's go add that let's go here library so just here add that and then i'm going to make sure that that's first and then in yarn ios and that's all that needs to happen nice i can just do a pr to um ignite that just adds that one thing so it's just adding this to the library search paths i don't know why the name pods goes away it's a little weird a little weird but yeah yeah okay it did work so that was all that needed to happen that was it so that means that if i go to um ios which i'm in the feature color loco thing here i don't want this i definitely don't want this um so let me go to the pod file and undo my stuff here so these are just some build gradle things all right so uh kotlin work in progress colin and i'm gonna check out um i'm gonna check out master and then uh pull down latest and i'm going to jump and i'm going to get check out um fix m1 and i'm going to go open ios hello world or no it would be open boilerplate ios hello world.xc workspace we're going to open that i'm going to go into the hello world here go here build settings library search paths go there add that move that up there and then quit um fix ios ads uh library search path for sw uh swift error and i'll do a pull request and push that up and we'll get that released so infinite red all right okay um on my mac m1 i was running into this error and i'll go details summary expand error summary details uh this pr adds an additional library search path to fix the swift error okay let's see do i still have it somewhere or did i um so i do have it here i have to go quite a ways up i think to get the original error these errors are just so verbose it's like i don't need to know everything like this initial part here or something two warnings hmm so there was like a uh so it was this one it's actually [Music] yeah is this this part right here so i'll grab some of this i guess and drop it in more omitted a minute okay um so let's create that hmm i don't know why this thing isn't properly there we go okay so update the comment there and then uh yeah expand i'll i'll do i'll do this um edit among many others okay yeah that that's better all right so this just adds that uh library search path and then i think we're i think we're good we can just merge this one so let's squash and merge um fix ios squash merch all right nice so we we know this is working so what we need to do now is um i'm going to get out of puma entirely and in here i'm gonna get check out the check out too many branches i need to get rid of some of this stuff yeah feature coloco get and then i need to actually go back to master pull it and then get merged master and now we have the we have the update that is needed because like i don't want to be like spinning up a new new app and having to go in there and do that every time all right so what we were doing when we got distracted by that get rid of all this stuff and by the way also update your projects build settings library search paths to include this and at the top and maybe i can do i have xcode open still i don't um yeah i'll open uh boilerplate i'll open this up and just take a screenshot of that so that people got that you know here we go it's going to have two different uh project names but hopefully that's not too confusing add picture so this will be library search paths all right okay good enough hopefully that helps someone all right uh let's go back so add that implementation there we got that open java we don't want to do that don't want to do that welcome layout welcome view no i don't think i don't think we need anything else there i'm gonna have to play with kotlin but maybe that's all we need to do to make kotlin work if so that'd be pretty sweet um so all right so what we're gonna do now is go to arden live and we've got uh so what i'm gonna do is i'm going to go to ignite cli bin ignite so i'm running ignite locally here and i'm going to say new and i need a new let's do a bengal tiger so we're just gonna spin one up kill that i'm gonna oh i do need uh metro well no metro will be once we get it up and running uh cola loco this is ignite this is puma we can get rid of puma and we don't need the pod file open we probably don't need that stuff open all right spinning it up with ignite cli with colo loco how's it going everybody it's a good time to stretch get some more water so uh i've been doing uh a uh intermittent fast because i need to lose some weight and um that looks like i can end fasting now so uh i actually started fasting yesterday at like 4 30 p.m which is really early and i did get kind of uh hungry but i stuck with it and now okay sweet bengal is now created let's uh let's go to bengal and yarn start and yarn ios so hopefully we don't get the same problems we did before so that would be really nice to not have to deal with that also i believe colo loco also installed which is really fun so that's cool uh but yeah i've fasted now for nearly 20 hours which is actually kind of ridiculous i could have eaten breakfast at 8 30. probably should have actually this is uh it's a little a little beyond what i probably should be doing [Music] but no worries i will be able to do that after this i just may be a little spacey um well i'm often spacey but okay so there's that uh big question is gonna be like is cottonland working so i need to go see did we don't need that we don't need that is there so let's see create welcome native that imports the native view looks like it built and that was fast did you see how fast that was that was awesome that was really cool fasting is okay for cleansing the system but for losing weight not sure not so sure yeah we're gonna find out derek we're gonna find out no it's not like multi-day fasting this is just intermittent fasting uh looks like it works cool let's try yarn android let's see how fast it goes this is not it this is an older version hey i'm going to resize my emulator and see if everything blows up nope it worked okay here we go and it's compiling i have not seen the same uh performance increase on uh the android side of things for builds i'm actually curious um gradle i'm not seeing gradle um java is intel java's intel that's is that why oh that's why why is java intel why is java on intel that's weird um java arm m1 nightmare on arm street um that doesn't sound good i think that's why this is being slower that's gotta be why java where how art thou oh uh maybe i do need java 11 instead of eight um adopt open jdk only as linux and windows distributions no mac os um oh belsoft azul zulu okay um it shows you how to install java and m1 but it's downloading the x86 version so it's indeed a running job on top of rosetta too which is not very desirable um okay okay thank you juan i appreciate the the info that's really helpful but yeah this is definitely slower because of that by the way it's doing compile kotlin so interesting uh mark says i do intermittent fasting most days because i forget to eat while i'm working so unintentional intermittent fasting i usually only drink coffee from when i wake up until about 3 or 4 p.m that's kind of where i'm at right now that's maybe why you're so thin compared to me um opening jdk 11 um operating system architecture um yeah i don't see anything there let's open jdk so uh mac os 64-bit oh you can do arm here so okay and this did fail image loader expo modules image loader does not exist why is that why is that hmm error package you know modules where is that coming from uh java is intel because you use the migration assistant yeah but if i but i actually reinstalled it using brew i removed it and reinstalled it marcus didn't but only because he refuses to use the migration assistant um maybe someone's already figured out how to do this i think i know what to do but uh that's older i uh let's see let's uh let's open up bangle and let's look for oops we don't need the error okay there it is um unimodules core interfaces package we don't want that base package list where is this coming from is this like expo screwing up here because like why are they including modules or unit modules um um this feels like a bug to me it's also the only place that it exists and do we even need it it doesn't look like we do there's package right here so where is that coming from where is that package list coming from um okay i'm gonna have to go look at the expo unim modules migration see if there's okay let's go see what they say here because something screwy here okay react native yuna module should be gone right yeah it's gone all right good good good um expo pre-build uh we don't want that um hmm i'm i'm really curious why expo itself is bringing in unimodules core interfaces package because that seems wrong is it like just org.expo i don't think so but um also this is probably gonna get regenerated as soon as as soon as this runs so um uh expo modules okay expo modules yeah that doesn't exist okay um let me go look at uh let's hear expo modules um expo modules core it's in expo this is something where honestly i wouldn't mind some help from the expo peeps i'm gonna go to packages excuse me um expo expo core android main modules these are kotlin interesting okay um so i actually want to see where this exists there's an issue here ah what uh i mean this looks like the issue these are old so okay let's go to code these are versioned abis whatever that is um so there's a diff right there main activity um what does it think that it needs so import base pictures expo modules core interfaces package expo should use legacy package interface so this should be um expo modules core okay let's see if that error goes away now that it's like expo modules core interfaces uh dot package and then um so that is just searching for it though like what would be what would actually okay so it failed but did it fail with that one yeah okay the well three errors core interfaces does not exist um okay modules core so expo modules core do i need org no i don't need org it's just expo module okay let's try this again hey bx93tn uh right now we're actually working through some kind of annoying expo errors with ignite we're working on infinite reds ignite thing uh yeah two errors now so that one did go away good um expo modules permissions does not exist uh so that's weird it does not exist remove the permissions import from main application that is not included in recognitive unit modules anymore uh okay um so i'm wondering if um [Music] it's not in there anymore let's look for anywhere permissions it looks like it's only been loaded up here permissions package hmm but yeah uh any let's see here wex try two says uh any road map for mid levels are you talking about for uh react native um learning react native [Music] so do i just get rid of these localization no permissions what was the other one image loader and permissions seems weird and why is why is this thing like the base package list oh is that in ignite so code boilerplate let's let's take a look at uh this let's go to android app build generated no source main java generated but this is supposed to not be there this could be a problem that only shows up for um for this um so if i deleted this generated folder um i'm actually curious if i go into the boilerplate and run yarn so npx pod install and yarn android whoa oh no yeah why is this thing there do you auto linking uh do i need a yarn probably need a yarn that's probably what it is okay so here's my here's where uh what i'm thinking uh oh just answer your question wextree um uh [Music] often mid levels it's it's hard to answer that question it's really hard to answer that question it's hard to know where you have sort of holes in your data set in your in your skill set um it's hard to know where you need to focus next um i'd have to know more about you how like how much you know and what your goals are and things like that uh npx pod install okay i feel like i should delete this folder and now yarn android curious if this even works we'll find out i guess uh but yeah it's it's a little difficult to tell uh but yeah essentially what i think is happening is it was picking up on this like generated folder and copying it in which is reasonable but then it was coming in with some stuff it didn't need and so like if i just delete this um and rerun it here i'm hoping that it just works but i'm gonna run this one first see what it does i need to check and see what my next meeting is no i'm good i could actually keep going for a little while i thought i had a doctor appointment but i checked and they actually have me for next week so should be good just gonna kill that i like that this is faster but i do need to figure out the whole um java thing so like open jdk so this is an arm brew nice could i just install it here and would that work yeah see that worked now all right let's run it over here on bengal because like maybe this liberica jdk is what we need um that's 17. i don't want 17 though so like if i go to mac os and then what version is it okay jdk 8 but it wouldn't have the arm stuff um so okay so brew list should show me and by the way yes that worked um although hello worlds numbers okay yeah so um but yeah that one's working so good um so okay react native uh m1 java it's like open something let me go check that again uh adopt open jdk8 um it's not okay so the question i have on adopt open jdk8 is whether it actually runs in uh rosetta or if it's so adopted so let's go m1 m1 arm apple mac os m1 yeah okay ah yeah this one would be nice this is important brew info uh brew info that i guess so [Music] it's exit it's look at this x64 well uh we're just going to deal with it for now that's why this is slower though that's why this is actually slower but we know we know that's the case all right well um i am going to take a break but i'm actually going to be back so you can hang out if you want i'm going to take a little break i'll be back and then uh when i'm back what i'm going to do is i'm going to get um i'm gonna finish uh i'm gonna test kotlin i'm gonna see if kotlin works okay and kind of get my and just do a bunch of testing manual testing on on the uh ignite uh and react native colo loco integration so um feel free to hang out if you want otherwise i will see you next week on monday but uh again like i said i'll be back probably five ten minutes somewhere like that so see in a bit so uh so [Music] [Music] so [Music] so thanks derek yeah so um so i guess uh what am i doing what am i doing so bengal um is supposedly set up with kololoko right all right let's let's add a let's add a uh let's see here co-located nothing in there yeah that's good i'm gonna do yarn android and let that spin up while i think about how like like a kotlin example so um and actually if i go to i can just close some of this stuff here wow okay dive into native i'm actually going to go look at what mazin made wait i ran wrong one yarn ios okay okay there's a welcome view in kotlin this looks decent yeah let's do this one so and there's a view manager as well so let's uh we may have to do something with react native colo loco to make this work properly but let's go into the app go into the screens welcome and we're going to create a new file called it's rn welcome view manager i'm just going to go welcome view manager because it's my project it's my project i'm not going to put rn in front of it i know they say you're supposed to so bengal um so let's just be what welcome view manager we're gonna get rid of that we're gonna now we need to make the welcome view itself kt and this is the welcome view itself and this will be bingo there we go noice okay um so those two are there now if i go back to the let's see let me back up main application uh main package welcome view manager so this is for packages hmm i don't know if it matters let's see react packages only if it's a react package does it should it be added okay so we do need to make some changes to react native kololoka we do cause we don't want if it's if it doesn't say react package in it we don't want it and i'm also going to go look at um let's see the java version as well base java module so it's not just a package oh you know what package isn't the deal it is so welcome to your manager is this wait this is a package welcome view view managers ah okay okay okay okay so we could imagine nope okay yeah i think we have everything what we need we have what we need native modules and view managers one thing uh it's gonna probably add it as a native module it's going to put it down here the the view itself not the view manager sorry the view or the yeah the view itself is going to probably end up here so let's try it see what happens should probably show up down there and then we'll see the view manager here uh okay did it not find it um interesting very interesting um maybe it's the settings gradle do we have yeah it's right there android path hmm but it's not picking up on the kt's so that means that something's not quite working here let's go to the node modules go to react native uh color loco and go to the groovy script and let's let's take a look here so this is the problem we're only grabbing oh i i just realized i just realized i'm off screen doing half of my stuff off screen i need to pay attention a little more okay so you can see right here uh we're grabbing all the java files uh get all of the co-located java files java and kotlin files is what i need okay so co-located files but i need to is it gonna tell me um kotlin files will be kt all right but could i do so file name finder groovy file name finder i do have an example pattern and there's an exclusive so the pattern i'm wondering on the pattern like how that works ant's file set pattern conventions okay because what i need to do is add like kotlin to that right naming patterns okay zero mark within a path name across directory levels one character so this is with slash star okay is there a like c [Music] see slash hmm can i do like this or that you know um i mean i could just i could you know like ultimately what i could do here i'm just going to close the boilerplate for now is just get both right co-located java co-located um combine co-located kotlin files and can you just do that can you just do plus like that would be cool we could try it plus really that's it all co-located okay so kt and java might be helpful just to know um so let's just try this android and we'll go and just kind of watch what happens here um in the no wrong one here let's see here so that's there and in the android folder let's check what's happening hey i found the kt all right cool so it did find both now it did fail uh constructor welcome view manager in class welcome view manager cannot be applied to given types view managers ad so how is he doing it in here uh mutable list of it's just doing he's just doing okay so that's great view managers required no arguments so like welcome view manager right now is react context but the actual formal argument lists differently so maybe what we could do is say that's here let's go to welcome view kt yeah right there create view instance okay um so that sets the react context where else is react context being used wait a minute i don't think that actually is necessary this m color context is not used anywhere else oh it is actually never mind it's right here but that could be color context could that not be the react context because it's being passed themed react context we have con react application context and then themed react context um could i just do this like this is a question i have um create view instance react context hmm hmm so i have a few ideas here one thing we could do is um i could have like somewhere in here right i could say like um view manager instantiation and then put there new my image view manager react context right and then we just copy whatever this is just from the comment and use that uh it's just one more thing to mess with though um i guess the other thing we could do is uh say uh you're gonna get the react context so if you want your inish if you want your see override fun get nate now let's get name uh constructor can i just say welcome fun welcome view uh and put in here react context um what was it again react something context react application context and we don't really need to do anything with it um like we could react application context should probably come from import that okay i don't know maybe that's worthwhile then maybe that maybe that does maybe that fixes it it's a little weird like you you we're gonna have to tell people all right you know you gotta you gotta come in here and your constructor has to conform to you know taking the context okay failed uh react application context where are we getting that from anyway oh it's from there nevermind all right it's kind of useful that um the uh import statements are exactly the same between kotlin and java because i mean java's import statements are totally fine no no reason to like reinvent the wheel on that kind of looks like it's working nope failed okay two errors we have a new welcome view uh okay react context so it takes the react contacts the view does as well well hold on required no arguments new welcome view so i kotlin constructor um for the class header react context react application context okay so that would be how that works yeah so you just stick that in there [Music] and then that curly [Music] type specification do we not need that there now they have it there does it say so simple view manager constructor so um hmm looks like there's a few different options here let me read this unexpected type specification too many arguments for defining so it's in 961 which it's nine yeah so we're over there react application context i guess we could even say like equals null right but what is the problem here like why is this thing why does it not like it that's weird oh i see maybe that's the problem um m react context i guess and you could say react react applique app context instead that's better and then i don't think it'll work still but um oh right here except for i put the null thing right didn't i so it's okay if it's null um so i'm doing something something strange here doesn't like the way that i did this class um kotlin class with actually let me see no constructor there i wonder if do these have constructors parentheses no i mean application uh what's a comma here react application what is a companion object i'm realizing how much i don't know about colin um react native kotlin native component let's just do uh are we having some problems with sorry i just got a message from derek um are we getting are we having some problems with the stream chat here let me do a refresh okay give me a give me a message in twitch and youtube um i don't know what's going on here but i don't know is there an issue with i did a refresh of stream chat apparently maybe it's broken or something like tell me if okay a new message from twitch okay derek thanks i saw that one um any anybody on the youtube side new message from youtube okay derek's got used youtube all right i feel like it's working maybe the refresh helped tell me if i don't like i didn't see anything otherwise so uh if you're having problems getting through please let us know let derek know or something he can let me know he just messaged me so um let's see here so this call stack article is good um let me see create view managers i think the reason i needed the let's see if i go if i go to the view manager no application called loco the view manager passing in the react context actually if i go to the where the react so the color context is fresco that's the m view and we have to pass in apparently react context and the caller context and this is where we run into problems because okay but let's let's go look let's go look at what call stack has so youtube player view sorry uh react image view it's not in here um you know what let's do this kotlin so the thing about react image view so we have yeah see they have this right and then they do contacts and they do color context yeah yeah yeah yeah okay um don't think this is it but react damage view these are just used as type annotation it doesn't look like it's doing any uh so hmm image view instead of react image view overhead from fresco react well but we want to use fresco okay uh yeah all right well um all we need to do is figure out how to allow taking video manager oh the view manager view manager itself probably needs to take the react context right uh react app context okay um ahmed yeah no worries what was the math video about is it like school okay so unexpected type specification and then there's an expecting parenthesis and this is in welcome view dot kt um okay parentheses all right i got to go back to this so uh constructor can i just say constructor because maybe that helps calculus limits in relation to e i never took calculus furthest i got was trigonometry okay let's see uh expecting a top level declaration what are you doing uh class okay but if you im if you inherit so classes and objects um um instance a class member's inheritance all right let's go look at inheritance here simple view manager oh wait a minute so view so class colon oh wait a minute here no that's right so like does this mean that i have to put this before that maybe i do maybe i do so if that's the case this looks this does not look right um this does not look right but i'm gonna i'm gonna try it does not look right at all if this works that's weird i don't know kotlin very well yeah sorry about that ahmed i didn't see anything i honestly didn't see anything uh it was not popping up i had to refresh the chat so my bad i need to make sure um you can always chat you can always ask uh derek like what's going on um let's see um null can be not be a value of a non-null type of that okay we're getting closer can i just do like a question mark here or something like that that'd be kind of interesting um i'm kind of throwing stuff against the wall i don't recommend this um so if something can be no no it doesn't like that um so it can't be null but let's let's just say okay it doesn't need to be null um because we're going to be giving it the reaction app context every time anyway okay welcome view 964. okay so this one must be initialized no value passed so this is uh welcome view manager 13. so right here is where it's like hey yo even though we're not doing anything with it with the react app context just passing it around i think we're getting closer this is not ideal i think there's probably a better way to do this but if we do it this way see here unresolved react app context do i have to do a val i might need to have to do like val let's do that okay i think val will like automatically make that a property if it seems that your youtube chat messages are not being addressed in the twitch stream please please reach out to me and i'll do what i can yeah um so a couple things can happen one is the the my chat can freeze so it doesn't actually work or it's only showing one of them you know another thing is i can accidentally just be on the twitch it's really hard it's really easy to accidentally only be on the twitch side of it no suitable method found for add welcome view manager view managers dot ad is not applicable why oh why is it a shouldn't be a should be a view manager so this is interesting so um implements react package create view managers um and here it is so we have the no my image view manager extends simple view manager and it gets a react image view um okay so simple view manager list of view managers lists of views yeah derek is awesome there is very awesome okay so why do i need that why do i need that at all let's go to our cola loco view managers see it's creating all these view managers co-located view managers um couldn't i just add them all as views what does a view manager look like anyway all right java let's hear react native java ui component native all right let's go here i'm going to read through this more carefully so the react image manager so it's a simple view manager of type react image view type manage so i feel like this view manager is just wrong this view manager is doing the wrong stuff see it's create view managers and create native modules i don't want that it's doing the wrong thing so uh what we need is more of like a kotlinized version of this um so simple view manager simple view manager and then what was it it's a react image view how about can we just do like a react view um oh this is literally a view manager right here that's our problem so okay that's our problem i was i was confused and actually um i'm going to see if uh i think that mazda needs to make some changes here so we can delete this entirely and i'm just going to rename this to view manager yeah that's our problem here kt react app context and view manager it is a simple view manager no we don't want that actually what did we have before let's just undo back to where it was [Music] text view yes yes that's it that is what it is all right we're making progress we're making progress um so now here's the deal what we're gonna be doing is um so yeah there's it's a view manager we don't need the view we need the view manager [Music] okay um and then i think i'm missing something like the parentheses right there or something text view what is floppy thanks for the follow two two two right here the uh the text is hard to read unless i put my hand there what is floppy now following thanks for hanging out we're working on some java well kotlin code uh for react native um null cannot be a value yeah it doesn't like that so again i have to kill that with fire all right so i think i just had it there's a couple of issues with um the dive into native thing this should be view manager and then this should actually be a create view managers let's see it should be a package is what it is this should be welcome view this should actually be um dive in a native package right here that's what this is and this should be welcome view manager so these are named incorrectly um hey a build was successful now oops that's iphone android here so now we have to actually load that up so that was a lot right my bad but we're getting there um welcome viewers there right so let's go to our app itself and i can kind of like close this stuff down and go to my welcome screen and i can say um in here we want to go we want to create or what is it require native component and then i just say here um const welcome view equals require native component and then where we import that is going to be right below the bowser and then i think i need style full and um it may not like style there um set text from prop so it'll be text right name is text yeah so text equals welcome from kotlin and then um yeah it doesn't like any of this stuff so style equals full i guess and i'm just gonna go annie no it's not gonna complain i mean you would obviously provide an interface in your actual code yeah no problem what is floppy hey you know what at this point in my uh streaming career i appreciate every single follower i don't think that'll ever change but you know what it's early for me i just started not that long ago okay hmm so [Music] did that not like work two views of the same name welcome view is there i'm curious like curious if it it doesn't look like it showed up let me actually get rid of that okay so that is good that does work now what about welcome view like why is that not there text style can i just get rid of style full where's it doing that okay that's not all right well we have a little more work to do uh create the view instances text view and then the text is that um did you hear about jet back composed can we use it in react native with kotlin support um i believe so i don't know a ton about it's essentially swift ui and i actually know leland the guy that invented it but i have not used it in like a react native project yeah that is life i try to find good people before they get famous and ignore everyone i don't think that's ever gonna be me i mean i guess obviously there's a certain point where you're like you can't literally can't keep up but i that's not me like i have 12 000 followers on twitter and stuff and like there's like people that engage with me i consider them friends because there's a lot of people that don't you know a lot of followers or whatever but they don't actually engage um so do we need to do like um set the view size okay i don't know okay all right i mean that shouldn't work you know oops i guess i have to re oops um oh you know what dang it that was supposed to be yarn start there yarn start this one's supposed to be iron android okay uh you shouldn't have to do this um it is text that's the react prop right right null object reference okay so i guess i don't know android widget text view um set size set text size set text um not font size but like width i guess whoa um setting string max width min width set max with set width okay so you can do set with i guess i guess height i think this is oh yeah that's the wrong one that's why so um you shouldn't actually be setting the width and the height here it should be well maybe full is the wrong one what is full anyway oh and i took that out anyway style equals what was full it's flex one um let's just go with 200 whoops i need the extra curlies height 200. it makes me happy when jimin replies to my dm's and mentions because other people don't reply at all hey i'm just happy to have someone hanging out with me you know what i'm saying like plus you guys always help me like i don't look like quite as much of a dweeb when you are helping me hey look there it is working so all i needed with the was the width and the height so it is absolutely working um can i change the fonts the color no it doesn't doesn't want to do that so uh let's go uh text color white and then we just have to go into here and do another property which will be text color set text color from prop um and then this will be set text color oh and it even does the like uh two color thing okay let's uh yarn android here [Music] i'm confused java kotlin javascript how does it work [Laughter] oh what is floppy welcome [Laughter] uh to color okay apparently that's not really a thing and maybe i need to do that i don't know who knows so this is called uh react native color loco i'm gonna put it into twitch chat you can click on it and go look at it but this is react native of course um set text color unit defined and widget to text [Music] so it's here filled [Music] uh oh it's like an in integer okay text view android text view hex code let's see if we can do it with like a hex that's colored.red but like get color so get resource get color why doesn't it just give me colored up parse color okay that works that works let's go back that's better it's not as good at kotlin uh github co-pilot so what is floppy uh essentially what we're doing here is uh we're allowing um co-locating uh like kotlin files with your typescript files and stuff why you fail again unresolved oh i have to import that import color like it where's color come from android color module it is [Music] what it's android graphics import android graphics color okay there we go so yeah what this tool does is it it automatically links everything up um okay [Music] yeah so let's set it to that let's see if we can change it to like red or something whoops uh okay and then i don't know why but it doesn't like this yeah there you go hey it's working guys it's working so our kotlin view manager is working sweet uh let's see set tab tab come on why can't it just be four where's the button for that tab size come on tab size is two um kotlin tab size uh maybe it's noticing something else somewhere else okay can i go just no it really wants to do tab spaces space tabs tab i don't know is there what do you do for this i cannot remember there's a button for this somewhere language mode kotlin tab size two no hey you're not you're not helping you're not helping uh editor.tab sizes two um editor dot indentation um okay well uh let's see i'm just gonna close that and reopen it and then i'll just go here and i'll go two spaces right and then i'll go and see if yeah okay that worked and tab those and then i think oh i did this wrong that goes over all of these go over and now we're good okay man i missed prettier so here's the deal uh welcome view manager we have pretty much what we would want here um and i kind of want to do the same thing let's go to let's go to readme and update that okay um so kotlin where's colin okay um if you so okay there is the the question that we had at the beginning of all this dude it's almost two o'clock [Music] it's almost two o'clock we probably need to wrap it up here um let's see here so i know this is pretty well working with kotlin now um native i really wouldn't mind these being just one tab instead of two get these kind of fixed there and then these as well and these and these and then um i need to do the same thing right here okay and then um actually just just pull this whole this whole thing down there yep native android and then i'll just put in a kotlin example if your project is kotlin ready you can drop in a kotlin view manager and use it like so um okay let's just grab the whole welcome view manager here um instead of bengal this will be my app right and then stanch uh then in your jsx tsx uh we will of course we don't need the any because this is not typescript function my welcome view return [Music] welcome view style equals with 200 height 100 and then we'll also put in the text in the text equals welcome and what was it color text color um there we go really okay i guess if it's gonna do that it's fine uh so yeah i guess i could just put in this style somewhere else no that's fine um yeah so i don't have like what one of the two do's i'd like to do here is like align this with the ios version so it shows sort of like how to do both um but yeah um my text so actually we don't need yeah no i i want to do that so let's let's actually do welcome or just do this and yeah there we go okay that's the last thing we're going to do today added kotlin example now what we need to do is tell people how to set up kotlin but i will say uh the ignite boilerplate is now pretty much kotlin ready the big thing that we are running into is that why is my get diff not working properly it's not i need to get my better diff set up here yeah look at this um but yeah um so don't really know what all this stuff is um see i don't know if i like this either yeah okay so that's that's fine uh okay what do we have here to add ios i guess we can add everything because nothing there that's all that useful um okay so yarn and pod install okay all right it's it's pretty close so um yeah we're in a decent spot right now we've got kotlin and you know enabled by default seems to be working um and the big question from this is like what if they don't have the right version of kotlin installed um stuff like that so we're gonna have to do some more testing next time but until then uh i appreciate everybody hanging out today it was it was a lot of fun we got a lot of stuff um oh and you know what's weird by the way my stupid stream chat froze again ah my goodness i'm really sorry about this everybody um is it possible to use xml files to write native views for android yes you can what android native developer or native android developers do correct um i someday will do that on stream but i'm not going to do right now uh mark jamin is definitely good people i've been friends with him for over a decade now you're the best mark um hi now i feel bad i don't know if i'm even a good person anymore maybe better if i just go it's okay fluffy i'm just saying you found one of those non-famous good people uh 12 p.m 12 am says ahmed it's time for you to go to bed uh floppy says seriously what are your favorite tools your bread and butter react native typescript seems like you can do every type of mobile apps yeah pretty much we can do anything but what we love is react native typescript and now uh like native modules is gonna be pretty pretty straightforward so native modules native components all that stuff should be straightforward but thanks everybody for hanging out i'm gonna go ahead and sign off go get a little more food because all i've had so far is protein bar it's not enough um but it's it was fun uh everybody have a great weekend and i will see you on monday oh uh before i go apologize um i'm going to check and see if there's anybody worth uh so anybody worth raiding here um go to the stream manager whoops raid channel got welland chris griffin yeah i don't have anybody online right now that i would uh raid i mean i could raid chris but i think i think we'll call it good i think we'll call it good uh so yeah thanks everybody for hanging out i'll talk to you on monday don't fast go to golden corral and get your money's worth derek that's hilarious that's hilarious

Channel: Infinite Red

Views: 211

Keywords:

Id: NK2kOsvuO0M

Length: 225min 9sec (13509 seconds)

Published: Sat Nov 20 2021