Back Streaming!! Let's look at what I've been working on - React Native Live

[Music] [Music] [Music] [Music] [Music] [Music] [Music] hello okay i don't know what's going on here sorry one second while i figured this out everything's all messed up right now um loopback that's not what i meant to do everybody saw all my hockey stuff hey kate i got a problem here see if i can get this figured out okay can you hear me and the music wrong webcam still though oh ah there's my logitech you can hear both thanks derrick no let's see which direction do i go here everything's all discombobulated after uh being gone [Laughter] uh okay lubeck's set up and i think why is the logitech so far behind um maybe it's okay no it it yeah why [Music] okay is this is this better yeah it still seems like there's some delay here um is it better might be better i had uh buffering for some reason on okay i'm gonna go away from this for a second i'm gonna go back hit done and maybe it's better now i don't know still not perfect is it what would cause this thing to be off like that like i don't know all right i'll clap yeah [Music] it's not bad but like it's a little off isn't it it's very close all right let me go to my uh ultra fine which is not a good one um and tried it here that seems like it's right on so if i go to the brio that seems pretty close pretty close pretty close not perfect i hate it when it's not perfect [Music] the brio seems good okay all right um let's see [Music] see if i can get the pretzel thing to work here [Music] yep okay good it's showing the uh the current music all right [Music] we're getting there we're getting there [Music] um let's see here good enough okay you're the one to let me know if it's not good enough i need to quit a couple of things here [Music] just to make sure that we have [Music] have what we need here so quite a few things [Music] don't need that on don't need that on okay good all right all right so um [Music] i am going to be showing you all something that i've been working on only streaming viewers will see this i'm not talking about it on twitter uh speaking of twitter i need to tell people that i'm streaming so i will be right back but i will be showing you something cool that i've been working on and if you're on my team you already know about it [Music] uh okay streaming now and then i need this i need to post this in a couple of places here um and drop this into announcements and let's see okay i dropped it in a few different places there cool uh there we go all right so here's uh here's a little bit of what i've been working on um i have a thing called uh and gant won't like it that i'm revealing this but that's okay i need to work on this and this is the best place to work on it a thing called react native colo loco i have katab i have kadab thanks for the follow and uh happy monday to you how are you doing this wonderful monday okay so we have uh interestingly in this little react native package which is actually more of a build pipeline package not really it's not a runtime react native thing hey mark happy monday to you we have two scripts we have a ruby script [Music] we have a groovy script um not long both of them are 50 to 100 lines of code and golo loco golo loco uh did you write all that groovy um define right how much of this was uh github co-pilot i will never say this is all i did i would just write stuff like this and then github co-pilot would write this [Laughter] uh it's fun it's fun um looking at the readme uh it's an experiment this library lets you co-locate your native files with your react native javascript files this is an announcement but don't tell anybody else outside of the screen stream well you can i don't care it's fine i'm not gonna do a big splash until i have it totally working but i was working on this last week i had some help julie and gluckenko helped specifically github co-pilot helped a lot and uh and others helped as well but essentially you're going to be saving it to your development dependencies so it doesn't get shipped with your bundle nothing like that um you do have to add a couple of lines of code to ios um you do have to create a couple of things in your this is so the thing about the android installation is this is stuff you have to do anyway if you want to like provide any sort of native anything like ios this is all you have to do on android you would have to do this stuff anyway and i'm thinking that like on ignite will probably you know add all the stuff you know for you but uh rnco locate i actually need to rename that to coloco so anywhere that rnco locate exists i'm going to replace that with cola loco so and replace it there um is it all just here might just all be here what do you think why do i think of un polo loco [Laughter] now mark nah generator colo cola loco un poco loco dev satish thanks for hanging out with us by the way audio out to your ma is that finnish that would be like car nation in finnish uh automa i don't know like is it actually like uh a finnish thing everyone needs some namespace variables although i doubt kololoka will conflict with it if it does i'll be impressed and by the way this is all stuff you're writing so you can change the name to whatever you want you know um but like uh let's see so you do all this stuff right now i'm going to actually do this in ignite so let's do uh ignite cli new and we're going to call this um uh pizza app all right and you cannot do expo because expo doesn't do doesn't technically do native at this moment i mean there are ways but yeah i don't know mark like i know everybody says name space i'm a rebel though wasteland and or desert aotearoa uh what language wasteland desert that's cool is that actually finnish it is finished um i i yeah i was looking at like automa would be something different but out the omaha ma i think that's how you pronounce it would be different that would be like strange land right actually otoma would be a very cool uh if it's real like if that's a real finish like word or phrase that'd be kind of a cool phrase or name okay so uh what changed here oh co-lo loko right there nice so we do generate it actually that was the altru says kevin yeah it was awesome uh actually quite a few people og comes in quite a few people uh said that it was their favorite all tree so this script this groovy script will write a manifest which is the colo loco class it generates a bunch of modules that are in your code and and basically links them in properly derek says my personal favorite all treat so people who don't know what an ultra what our all treat is it's our retreat and our whole team got together mark says i gained eight pounds i played hockey twice this weekend lost a ton of water weight and still was like where i was when i left which means i gained a lot should have got really sooner i'm just waiting for for todd's uh reply there um so yeah we do have that man i wish ignite was faster maybe that's something we could work on on stream at some point making ignite really really really really fast to generate maybe like uh yeah too easy i know uh maybe like um like like a rust script or something would that be kind of fun honestly it would kate kate's being nice so uh writing her app name in the sand um so react native co-locate native uh do i want to change this probably do actually kololoko here so let's look at anywhere this exists and change that to set up react native cola loco replace all instances replace so set up react native color loco uh jamin could you please share some general information for us about groovy um yeah absolutely so groovy is a language that's built on top of the jbm the java virtual machine um and what's cool about groovy is it kind of looks a little bit rubyish it kind of looks a little bit um almost pearl ish uh has kind of a neat syntax that's i mean honestly not bad at all like like uh this is ext dot like it's sort of like exporting so i'm creating this this function which uses curly like a curly on the outside and then you um have a i'm defining a map of custom options if there is none then this would be like an empty map that would be sort of like doing this in javascript right and then the arrow is like i'm done defining my options and then let's move on to this pretty cool and one of the cool things about or one of the way places you'll use groovy is in your um gradle setup files so if you've messed with gradle at all you've used groovy that's the language there so i'm going to run yarn ios to spin up the react or the uh the ignite react native app here and just see if it is working right out of the bat and we'll also do the same thing for wow that's small okay okay then we'll do the same thing for android once this is done so yeah so that's groovy um so this script right here will find your native files your java files for now yeah no problem derek uh your native files and it will um essentially link them in um and you can look at this the source if you want to kind of see how but this the ruby side of things this is ruby here so uh with this you see that there's def ruby also def um and we're essentially going to use a gem ruby gem called xcode proj which is already included if you have cocoapods and then look for header files uh objective c implementations c files or swift files and drop them into a an xcode file group called co-located and that's how that hey alpha yeah uh it wasn't really a week off it was a week well it was a week off from this but it was a week with my team actually so we we got together at a lodge in the columbia river gorge and we spent the week together and this is something i was working on i think you'll be interested in this andrew um it's called react native colo loko i haven't announced it yet but all of you awesome stream followers will get a chance to watch me test it and play with it and see how it works so uh going back to the readme for a second um yeah we did we did have fun it was awesome it was a lot of people said it was the best all treat that we called an all treat it's an all team retreat that we've ever had so i'll show how to once this is done building i'm going to show how to use coloco and we will need to bring in all this stuff right here in fact why don't we do that while this is building open uh the s code see some native interactions so you definitely have my interest yeah stay tuned um my computer's being slow right now i have an m1 max on the way it's not here yet but we'll get there okay so to set up uh let's see here this is still loading still compiling still building okay um and actually i'm going to bring up this react native colo loco thanks to um i think it was ryan linton and mark rickert who helped come up with cola loco if i'm wrong about that please let me let me know all right um this is not yet it's still a private repo but it'll it'll pop up pretty soon uh lets you co-locate your native files with your react native javascript files uh got i get my new m1 max this week hopefully it says mark i'm so jealous when is it supposed to arrive i heard they're getting pushed back as far as mid-december yeah it could be that for me uh i didn't order right away and so that was a big mistake i should have and uh kate says ryan says coco loco and mark said colo loco yeah so they both kind of collaborated on that shipping delivery window says november 9th through 15th got the base model co-locate well you'll see in a bit it's all right todd i was kind of waffling myself and then i had a stream like this where i just couldn't like do anything it was just like i'm still building okay so uh this is all you have to do for ios you just add this to your pod file after you yarn at it right we're going to be doing that in just a second here in fact i can do that while it's building because it won't affect builds so let's do that so we're adding react native colo loco we'll be adding this to our pod file so let's go grab our pod file in the ios folder right here and it can be right at the top by the way uh app name needs to be updated so pizza app right and the app path is just app which is true that's where it is cool so link co-located native files i probably should standardize that between the two gradle and pod right so link co-located native files i think that's what we want link co-located native files um maybe there we go yeah i think that will work better of course the version of kololoko that i have installed will not have that still building all right uh by the way that night bot thing that just popped up there it says you can add james streaming schedule to your calendar by copying this url and adding it as a calendar by url i've actually been having some problems where it's not updating it's not updating with the new schedule and i don't know why it's a little frustrating because it seems like it should work i don't know if others are having the same problem hey we have 18 people watching on twitch and three on youtube by the way did i miss any youtube comments because if i did i was on the wrong tab here my bad my apologies if i missed some youtube uh chatter here uh i don't i don't see an easy way for me to go back and look at it derek uh if you're out there could you go look at the actual youtube stream and see if anybody made comments because i i can't pull that back up if i don't have it on multi-stream to start uh he's working on a new library that allows you to have your java and objective-c swift files with your react native files in the same folder structure instead of having to put instead of having to put everything into xcode and android studio that's it alright so we added so we added this uh okay why did we just ios simulator later deployment target set to eight that's a warning what's the what react huh fatal error module map file react core module map not found [Music] um ios version xcode and pod file all right let's do this yarn pod install oops sorry npx pod install [Music] very interesting is there any code generation happening on the native side to support this um it is a build time well in the ios side it's a it's a cocoapod script like a ruby script that's triggered during pod install um on the android side it's a gradle script and both are doing things to link it basically is auto linking it's auto linking for your native files um which is pretty cool all right so let's try this again yeah see it's going off of the workspace so i don't know why it would say that it's not using this workspace what do we got here uh okay don't know what that is bunch of down votes bunch of down votes blah blah blah down votes restarting mac okay man everybody seems to be having different let's go back down here uh m1 uh it's gonna be nice to see all the m1 issues xcode build settings blah blah blah wow uh okay maybe this use flipper thing is the problem huh man it's like everything there are so many uh what we got going on here did it get further maybe it got further nope could not find or use auto link library swift concern concurrency that's a warning undefined symbols for architecture so these are compile commands that appeared to have run normally but then we got this whoops undefined kind of wonder how much people time people's time is spent debugging errors from third-party tools instead of fixing the code of unfolding yeah no kidding flipper is made of by the devil the thing is ahmed i i get what you're saying while you're saying that and i've kind of felt similar sometimes but man flipper has some cool cool stuff which i'm going to show off at some point too many people have the same issue but different solutions i know right uh undefined symbols swift force load reference from that all right let's look at that jeez [Music] uh you know what let me just open up xcode because sometimes i can just like load up xcode and and uh run it once and then it works after that makes my m1 macbook pro overheat because it runs under rosetta oh i didn't know that really interesting okay all right uh xcode's open let's go ahead and open ios pizza app dot xc workspace all right i'm actually going to get out of this and load it in with yarn start here so [Music] [Music] more [Music] [Music] um am i back the music is going through the wrong the wrong thing i need to restart my music i think let me do this again here pretzel can't hear me anymore uh you should be able to hear me now right how about music can you hear the music that was weird i had to turn off my mixing console and turn it back on and then shut off or like like restart my music it's kind of quiet music right now i don't know what xcode did there i'm blaming it on xcode all right uh can you hear the music let's go with an iphone 13 and let's just try running it we do have an iphone 12 up as well okay good good good good all right let's try this hey we're up to 26 people on this stream that's pretty amazing welcome everybody happy monday to you all uh delay between the video stream and the messages on the chat yeah sound okay my finish isn't very good but uh when i can use it i'll try um okay so here is what we're doing right now we're building this project uh hello from brazil smith 11. hey welcome thanks for tuning in from brazil what part of brazil are you in build failed okay we did get a failure let's see what it is [Laughter] um no we're getting the same thing the swift force load problem um i don't know why i mean i don't think i added did i i did add these shoot maybe i shouldn't have maybe i shouldn't have done that uh so what we're gonna do is maybe i maybe i was like jumping ahead a little too fast here i don't think so though but yeah xcode wasn't the issue what version of xcode are we on here uh 13 1 okay all right all right all right um i'm gonna quit xcode for now um and [Music] i need to actually look and see don't know we have snapshots okay which i probably should just turn that off right now because uh just stop all runners we don't want it running tests in the background it just slows everything down you know okay so i have a feeling though if i run this again um yarn ios just for the new people tuning in i know we have a lot of people uh tuning in here there's a new library i'm working on called react native colo loco it allows you to to put your swift and objective c and java files right next to your javascript files and your tsx and jsx files and it will link them in automatically and you'll be able to access your native modules right from there i still have some work to do before it's ready for kind of a big announcement but it's it's kind of working my biggest problem right now is that unfortunately ignite is giving me some problems so if this doesn't work what i'm going to do is i'm going to back out of here and i'm going to do just a basic react native project and um i guess it's possible that ignite i wonder i should just go look github all right let's go grab it what really pulls up bowser but not ignite okay does it use code generation to link the native files with the native folders for ios and android respectively um on the ios side it's using it adds them into the workspace or sorry the project using xcode proj rubygem and on the uh on the android side we're actually doing hard links and then generating a file that that essentially instantiates each of your modules it is doing code generation from a like on a script uh doesn't mean we can make changes in those files and these will be converted back into native files behind the scenes i'll show you what it means it's not quite like that um not no it's you yeah that'd be kind of cool but that's not what we're doing here so okay so i'm gonna check issues and see if ignite's having problems so there is this um that seems different so uh yeah we do need to have someone look at this that was a month ago 1800 uh now you understand what it does yeah um very interesting looking forward to seeing the implementation once it's open source yeah that would be very soon uh yeah we're getting the same problem here so this is weird because it's a different force load swift data detection okay i'm gonna look one more time oh that's great maybe i'll remove some of the quotes here i guess react native um this looks promising october 1st andre kurochenko says when running yarn ios and encountered this adding libswift webkit tvd into link binary with libraries help to solve the problem okay [Music] there's a new library in xcode that needs to be added to the link binary okay lib swift webkit tbd well that's a little bit odd and maybe we need to like um maybe we need to do that automatically in ignite to make sure that this doesn't happen i should have someone else you know try it on their machine and see if see if it happens there so what we have is the project target and the build phase let's go grab that so let's go here let's open the uh why am i blanking on where this is okay right here uh build phases and then we go down to link binary with libraries right here and we have to add one called ios 15. okay so this is new if i run it again now with that let's see what happens if so that's pretty cool i mean it's not cool that we had to do it but it's cool that we fixed it still building uh so we are going to have to do some setup stuff here and actually as you saw i did have in the pod file a couple of lines i did comment those out until we're ready but um you have to require relative which is similar to other stuff like your react native scripts and community cli platform and your unimodules these are all normal stuff that you have to do in this case i'm requiring uh the ios.rb file and then i'm linking the co-located native files giving it the pizza app name and then also the app path which is going to be right here okay still building libswiftwebkit.tbd i'm gonna put that in chat we may need to do this on our uh in ignite i wish i could um play like a wider variety of music i could i if i go and like find a bunch of indie music i could play that but looks like we're loading did that build successfully yeah nice okay that did work then so this does need to this does need to be combined multiple playoffs i think so uh this does need to be worked on though derek might want to make a note of this um let's go look at pretzel here so i mean there's a lot of different stations we can do like ambient some of the stuff doesn't work like if i go to alternative rock and i do this it will tell me ah there's no that's because i have youtube safe on chilled uh bass is what i normally do edm we could do edm there's piano as well now let's do some medium and i could play some um uh fat rat he doesn't care where it's played all right still loading up yeah kind of like this bundling i assume this is the bundler that's it's using yeah it is see you there bundling index.js all right almost done maybe i should close this other one although i think i'm gonna wanna yeah i'm gonna want to actually load it up on this one too yay here we are okay all right everybody we got square one all right i am killing this simulator and i am killing uh xcode as well to show you that you don't need xcode in order to do this which is if you've ever done native code in a react native app you will know that that is unusual so let's uh go ahead and uncomment those we already have react native cola loco added i did yarn add dash d so that it would do a just development dependency let's look at that go to my pod or sorry my package jason and you will see um yeah go away react native golo loko right there 0.30 all right so uh we added that right there now all i have to do is run yarn ios sorry npx pod install and it will run that uh a script all right now what i'm gonna do here is um i'm gonna go into my app folder here i'm going to go into my welcome screen so this is the screen that pops up first once it's done i'm going to actually run yarn ios so that it makes sure that it actually finishes building okay and in here um i'm actually going to create a new file which is going to be well hey what you doing um this is going to be jmon.h all right i'm also going to create a new file it's going to be jmn.m these are objective-c headers objective c header file hey danny i still haven't emailed you uh what am i working on today so you see this tsx file here this is just a normal react native typescript you know component right and right next to it is a dot m and a dot h file what the heck how how's this possible how can you do this that's weird right so let me go grab my uh dot h file here so let's uh let's go ahead and create a header file for objective c i'll explain it here we have and by the way i need to add support for objective-c apparently uh where's my objective-c which one do i do better objective c plus plus um there's c plus as well does this one do objective c um i don't know why that one pops up let's try this one okay and then you're excited yeah uh let's hear language there we go all right so objective c so we have um we're exporting this uh implementation um this dot h file wait why is it say oh i'm in the wrong one my bad it's supposed to be the dot m all right and we do need the header file as well so let's grab that and that's very short so we'll drop that in there so we're bringing in the rct bridge module and then we're defining an interface which is just an object which is jammin the and it implements rct bridge module so that we can talk over the bridge right objective c is right under better objective c i did see that but i think c c plus plus works with objective c and then um dot m we import the dot h excuse me uh we export our module we also export one method called hello and then we have this uh dispatch async dispatch get main queue we're basically saying we need to uh call we need to create an alert but it needs to go on the main thread so we created an alert a ui alert view we initialize it with the title of hello from native this is from jma.m we provide the delegate of self we're not actually doing anything with it with it so this could be nil as well if we wanted to i'm probably going to set it to nil and then we have the cancel button title and the other button title so you'll see right here um you notice that uh i just added this right next to my other code so let's go npx pod install right pizza app this sounds like my kind of app it's kind of a convention ignite actually came out of in part an app that we were building for a pizza chain we worked on an app for a company in canada called panago pizza it has poor reviews but that's not our fault i won't explain any further but we did really good work on it um so [Music] that's why pizza app is sort of a thing so uh now let's yarn ios this thing and uh meanwhile in the jamin i'm going to go ahead and limpo i'm going to import from react native i'm going to import native modules okay the native modules i'm going to go const jamin and i'm going to destructure from native modules and then i'm going to say jamin.hello [Music] actually i'm going to go um let's put it in this like next screen button whoops so i'm going to say jamming.hello right there and then we're going to navigate to the demo so if you click this continue button right here [Laughter] mad fury thanks for the follow all good things start with pizza hey matt fury how are you doing where are you from thanks for uh hanging out with us here correct danny you do you don't need to create your objective c stuff inside of xcode anymore correct still building by the way it's not just objective c you can put your java file in there too we'll do that in a bit ah come on what's your problem in turkey my name is samit nice to meet you yes nice to meet you as well summit thanks for hanging out doing really well did i do something wrong these are warnings these are not real errors oh wait wait wait what do we got uh uh undeclared ui alert view ah what no it's being used maybe i just have to leave it as self i don't know use of undeclared identifier alert i mean i literally am setting it up right there what it's in line 13. 5. uh do i need to import ui alert view maybe so i did this uh in a different app let me go just check um it's this one app okay german.m no i didn't import it there it's the same stuff right like this worked when i did it this totally worked so i'm just going to make sure i copy this whole thing i guess excuse me and just drop that in no difference none whatsoever um there's no imports it just works supposed to work i don't know music from the 80s and 90s is wonderful i always like that um yeah i don't know i don't know what's going on there that's a little weird uh use of undeclared identifier uh you're right though ui alert view um actually i think you are right i think i need to import like ui kit or something um let's go take a look at that uh uh it's probably closed bracket for the method is that my problem so maybe i'm missing some sort of a closing bracket here we've got uh this one goes to there then we have our curly our parenthesis no this all looks right i'm going to try running again but i don't clear the screen there um maybe something missing the dot h possibly yeah uh we got the import square brackets no exporting this method um i believe it probably hit the same issue yeah use of under okay let's do it um undeclare an undeclared identifier alert it does seem like something's missing here export module import gma.h so weird this is so weird hmm like all this seems right you know like i don't know what would be the difference here um yeah well what we can do is we can open it in uh xcode which i did not want to do this is a failure a demo failure uh import uik dot h i actually that is possible is possible let's go take a look at this i'm revealing behind the scenes what's going on here so is there an issue here let's run oh yeah okay so it's giving me that same thing again so it it's coming up with that uh use of undeclared so okay let me go ahead and import that import if i get uikit.h i don't think that fixes it maybe it does oh man really all right it was not xcode that solved us there it was danny danny code all right let's do this uh let's run this again so apparently we do need to import ui kit okay by the way notice i edited in xcode but where did it show up it also showed up in vs code so uh oh you put in the dot h yeah that's probably better actually i'm gonna actually do that and i am going to put that in um [Music] in the readme here so that it does it is available all right sweet [Music] all right so we're building again uh this time hopefully it works we'll see uh meantime i'm gonna go and uh start looking at the java example so we do need to do a little bit more in java uh but this is a little bit unavoidable it's something we have to do and at some point we could probably automate this or whatever but uh let's go to app source main java com my app blah blah blah blah by the way it built so that's cool so i'm going to go in your app source main java.com pizza app and then i have to create in here a new file that is called uh my app package so it'll be pizza app package dot java and then here i'm going to oh yeah i'm i need to configure my java this happens every time um so my app is gonna change to pizza app and so my app is gonna change to pizza app here and then um so all the rest of this is kind of like it's fine and then uh by the way let's test this let's make sure so if i click this it should show an alert hello from native this is from jman.m it actually does work uh all of those issues that we ran into beforehand had nothing to do with my package they were just like dumb things you know obviously i didn't have that import line and stuff like that but there it is so you can see i did not actually do anything in xcode other than edited one file that i could have edited elsewhere um i did run pod and or sorry uh yeah ran pod install which you do need to do uh but you can see here that the the header file and the uh m file are right there and all i had to do to import it was bring in native modules from react native right and then uh you know export or like uh destructure jaimen from the native modules and then use it wherever i want when i call it it works it just does its thing you can also do where you return like a promise and then you can and it would communicate over the bridge so uh it's it's pretty awesome you can now this this is just for ios right so uh if i go back and click it again it works again sweet so uh but this won't work in android it'll actually be like jmon is undefined it doesn't exist in android right so we're going to be creating a new file here called jman.java and that jman.java is going to be and i'm just going to pull it from here by the way i do need to go into main application java so let me go so i created this pizza app package go into here and in here i add pizza app package right that would be under get packages did i do it right get packages i believe this is right uh we add the pizza app package this is actually not my package specific this is what's in the react native documentation and then in the gradle settings i need to grab all of this and i'll just go to my should be settings.gradle this is a groovy file and so here we just need to go underneath this drop this in react native color loco again we're applying from scripts and this one's android.groovy right does this work for native module libraries um what do you mean by that by the way this wasn't this isn't the right because i haven't released this yet so what was it before it was like setup react native co-located native something like that and then i need to change this to pete's app i think that's what i have to do let me just verify what the name of this is um set up react native co co-locate negative that not let me grab that co-locate not co-located okay so uh i've added into our settings.gradle uh this script i've also gone in and created a pizza app package which adds from colo loco the co-located modules it adds all of them into the modules which creates all the native modules and we do pass in the react context from there okay can i use it for building a native module in a separate package um this is more for sort of like native files mixed in with yours not necessarily building a native module outside you would probably want to do something more with auto linking with that and use react native bob or something like that to uh to generate that then we do need to actually add the pizza app package to our packages so this get packages in our main application.java so those are done we don't need to mess with those anymore they're done now we have a jamin dot java right jamin.java will have something like let's grab there's a swift example here we'll get to that in a bit um i didn't update this yet um but i do have it so hold on a second here cat jamin.java okay so here's our java class i'll just copy and paste it and i'll explain what's going on there so uh we do pizza app here so it's in the same package and then we import do a bunch of imports and then we have our react context based java module we instantiate it and then our public string which is what comes into that native modules uh like if i put jman x here it would come in as jm and x and then we have a hello method which is a react method it allows it displays a pop-up alert and so uh new alert dialog builder blah blah blah set message set title set positive button builder create and then dialog show so that is the android side of things let's uh let's go back to our pizza app and run yarn android this is going to take a little bit does it work with kotlin i have not actually tested kotlin yet but the option is that it will by the way this was a test that we did earlier so ignore it i need to actually delete some of these because my my uh simulator is just ridiculously low on storage for some reason i need to fix that what okay whatever um so we are now building android and notice i don't have to run pod install because this is this happens in a gradle script before you uh before you like compile what a huge emulator my bad my bad it is huge isn't it see my screen is so much larger than what is actually uh how do i make this smaller come on i don't it's not like oh there okay it's kind of big still i'll bring this down it's like not letting me grab the corner here ali hey how's it going did you get your new m1 max already no unfortunately i i ordered it kind of late and so it's gonna be a little while it's gonna be a little while probably late november which i guess is just like three weeks from now i hope it's not december but we'll see that's why this is being so slow by the way did i miss uh a couple of follows somehow just use a pen and gabriel zero zero uh thanks for the follow i don't know if i missed those um my apologies i'll replay them now we have three by one emulators i know i see that it'll it'll update in a bit but yeah thanks for the follow i appreciate it still building still building it's gonna take a little while all right so let's look at this here a little bit longer so this is how you create a an alert dialogue you you create this builder and you get the current activity and pass it in the activity is sort of like the screen and you set the message you set the title and you set the positive button and then with that builder then you create the actual dialog and then you can show it that's that's just what they do i don't know why they couldn't just have like alert dialogue dot alert and then pass in this stuff and it just automatically shows it but that's how they do it and gabriel gabriel gabriel just java things exactly but you can see here in the welcome we have the dot h we have the dot java with the dot m all mixed in we can add a dot swift although it will take a little bit more work i do need to unfortunately bail out around noon so that's in about 20 minutes i'm not going to be able to do quite as long of a of a stream today let's see here yeah uh i have some stuff i need to take care of but this is this is fun still building still building still building this is why i don't like do like complete app cleans all the time it just takes forever uh in the meantime what i might do is come in here to the colo loco um do i need to import this as well didn't have to before what just failed color loco oh that's right because it's not set up as that yet uh let me go back um part of the problem here is i'm kind of going with older stuff here i haven't released it yet so co-locate i think it's let's go verify rn co-locate yeah right there so this generated folder file is a base package list and this is what expo does we're doing basically the same thing uh co-locate so it did find that good it's rn co-locate all right let's run this again shouldn't take as long when are you planning to release it or why does it take so long first uh nope i missed a few okay so kevin working on upgrading a website from ruby 2.7.0 and rails 5.2.6 to ruby 302 and rails 6.1 and they deprecated update attributes did they change didn't they change it to like update instead of update attributes or am i just misremembering individual update attribute calls yeah that's that's that's a little annoying ahmed says why does it take so long um it's compiling uh and it just takes a long time i don't know uh i think it it's it's much faster on an m1 max much much faster when you're planning to release it uh and is a repo public the repo is not public yet and my plan is to release it essentially when i've verified that it works on ignite and it works on a bare react native project yeah okay just finished should be loading it i'm actually gonna kill the emulator which seems to be frozen or something um markets uh can you hear me again i don't know why it does that i just have to turn off my stream or my mixing console and then i did bring in music again hopefully that's working i really hope the m1 fixes all these issues the emulator loves to break yeah i know sure seems to why is it rebuilding all this stuff shouldn't take that long oh it's installing okay so it is much faster all right classic android emulator move to freeze during a demo all right we're waiting for it to finish bundling okay why is it small here i'll turn it and let's see if it fixes it oh my goodness crazy um waiting it's just bogged down right now the 2x1 emulator is cool be cool if it worked okay yeah it doesn't i don't know whatever but when i click continue what happens that's the question hey that's from java folks that is from java so uh let me give you a really quick refresher here we now don't have to touch the android or ios folder at all let me uh actually try this again so the dot m file or the dot h and the dot m file right the java file uh why don't i use genumotion um i don't know like i i don't know i guess generally speaking i probably use a device more often when i'm not doing demos like this um these work i can change it to be like hello from native or let's let's just say uh hi stream and over on the java side i'll also say hi stream okay and then i do have to recompile of course right because after all uh it's native code gender motion is more difficult to set up at least for me i've kind of noticed the same so [Music] this is uh recompiling that one file and all i did was change it in the source directory in the app directory only when you add a new file or remove a file do you need to go in and run pod install or you know obviously when you do android yarn android it'll do what it needs to do with the gradle thing so installing loading why is this thing can i like change it again here it's like tiny why why is it doing that is there a way to fix that that's so weird anyway if i oh it's already on the next screen so let me back up click continue and it says hi stream see that yeah it's just the the whole thing is messed up whatever um and then i run yarn ios on this side because right now it's showing you know hello from native right so let's run yarn ios and see if it fixes that the whole emulator is running at the old size not just the app yeah that's what i'm yeah yeah exactly not really the app's fault it's emulator i need a new emulator anyway because that one has too little like storage space and it keeps telling me oh i'm out of storage space after i install one app why all right successfully built the app it'll install it it'll drop it in here it'll relaunch it and i don't know it says r diff app i'd have to go and click and it says hi stream so there you go by the way you can put them in any folder like i could create a folder right here uh just call it native if i wanted to drop all my native stuff in there you just don't have to do it in the android or ios folders it'll do it for you so get diff uh if i go to [Music] you can see that the pbx project file has changed and it has added some file references mh i don't know why it's added so many of them that is a little weird uh might be a different source i don't remember exactly but it adds all of those creates the co-located group does all this stuff okay um and then the other thing that it will do is uh it adds um [Music] the generated folder git add android and then if i look at this it will add the file which is a hard link so this will only work on ios and potentially linux i guess potentially which one is good in the future to build android kotlin or java i do like kotlin and i'm going to be testing this with kotlin um so once we get that figured out then we can write kotlin all day long but but yeah pretty cool what do you all think i think this will be useful so colo loco settings gradle link co-located native files because we have that as well in the other one loco amazing says danny says seem cool no doubt yes we'll be useful yeah good getting some uh some good good feedback here so i'm gonna keep working on this in the next stream and make sure that it's working flawlessly so we don't have to worry about like some of the glitches we had and also work on uh potentially of course supporting not potentially but actually supporting kotlin and supporting swift and then also i'd like to do a pull request to ignite so that ignite supports this out of the box and you don't you don't even think about it it just works absolutely will use it anything to make native modules easier to develop i agree oh and then the other thing is this only right now works with um modules but uh i'm gonna also make it so that we can import native components as well and so i have a lot of work in front of me but let's see here finish renaming to colo loco and then i'm going to yarn publish 0.4.0 because we changed some stuff and we'll push that up so now 4.0 will have the new the new stuff um but yeah uh so wednesday at um 10 o'clock a.m or earlier if i can get to it earlier i'll be working on this again please do join me i enjoy it i enjoy having you all with me uh want to become famous no i don't actually bye followers and band boom uh we get one every single time seems like uh but yeah we're gonna be doing more of this and getting it all working with kotlin of course swift is another thing i didn't even show it today but it already works so you can just drop in a swift file you do still need a m file if you have a swift file to connect it to react native i don't know if there's a way to automate that it'd be cool if there was but yeah but not for now uh we'll still have to deal with that uh the other thing is that there's not really a way to name space it so you can't have multiple files that are that look the same like jama.h has to be unique amongst your whole you can't have another jaime.h in models but that's not something you do anyway all that often so but yeah our pizza app has uh jm.html.java gm.m and then we will add swift we'll add a dot kotlin we'll see how that goes so i'm going to go ahead and shut her down

Channel: Infinite Red

Views: 99

Keywords:

Id: oppeEdTDHCc

Length: 96min 26sec (5786 seconds)

Published: Tue Nov 09 2021