IGNITE HACKING! Let's get Ignite working with the latest NPM

hope the new music is coming through [Music] go post this in the usual areas hey derek the usual suspects um let's see here ahmed yeah derek so um we're gonna have to play around with the uh the audio levels and stuff here with this because i'm you know just trying to trying to get it lined up here and let's see here comment is now following hey comet thank you for the follow i appreciate it i should probably change that color you know so i it actually shows up and works like i can put my face in front of it and then you can see it also i'm gonna go a little more from the side here uh see how that goes but i got some new music today uh my brother linked me over to a website it's your birthday ahmed it's your birthday well happy birthday buddy how how old are you uh let me guess you're 20. you could drop it three decibels okay let me see what i can do here i think i just dropped it exactly three decibels i don't know i don't know what i draw i dropped it a little tiny bit uh let's see here boris baden bought it boris boris baden no capital what do you admit here uh boris bad no capital 17th birthday i for some reason i thought you were 19 but you were 16 and you're now 17. well happy birthday buddy uh you are almost exactly the same age as my son he is turning 17 in just over a month like like five weeks or something like that my email title is still about the monorepo kate kate kate kate oh you're right no what why i'm not doing monorepos today i do not want that kind of pain on a friday happy friday everybody by the way uh so let's see here bad guy from rocky and bullwinkle boris batanovic well i don't know rocky and bullwinkle i do need to change that go live notification don't i um i'll just change it to change it to jaymen is live and that way it's just always fine you know like like you can always come hang out with me you know yeah uh yeah so uh welcome everybody i do have some new music i you know the thing about this new music i have no idea like if it's all good if it's not good like i'm gonna have to kind of play with this a little bit so this one is so this all comes from audionautics.com and it's free to use which is awesome and i'm probably going to go and donate to the dude after a bit boris bad enough oh boris bottom bad enough your favorite character character okay yeah yeah yeah music is sick yeah there's there's some really good stuff in here and there's a lot of content i got it all from automatics so we will see how it goes uh today we're going to be working on ignite stream beats i appreciate that i also have um i just forget pretzel which i actually pay for and that has some good music on it but it got a little repetitive so i wanted to bring something else in you know this one's called pop star you don't hear any music it's very low do i need to turn it up hey akil welcome back the hog live uh don't know if i've seen you around welcome it is low okay uh let's see here where's stream where's loop back loop back loop back loop back loopback where'd you go uh there it is okay loopback um currently have it at 50 but i also have the actual vlc set pretty low there may also be some variation in [Music] like each track so i'll just have to keep an eye on that is that too much so haraznick uh i feel like i need to figure out what your name actually is because i never know how to say it it's is that my is that mateo from uh from twitter and you're in croatia is that you mateo okay well welcome uh i've i think we've been connected on twitter for for quite a while mateo harasnick or harassnick mvd welcome nyog says yeah usually i'm listening while i'm working oh that's cool i was just listening to episode 220 of react native radio i think it was about reacting to live promotion hey always be selling that's what i say ahmed um okay so uh let's go take a look at ignite here real quick so we got a problem where when you when you don't have uh yarn you don't have yarn and you go to like spin up a new uh ignite app let's see here i need to see i forgot the name of the branch let's go look at the branches here and see we have refactor rust which was kind of a fun one i wasn't on stream when i did that harassnic nice how like how hard is the h there is it harass nick or is it just kind of rustic snake like you don't really say that h much like rost um bumper and screen refactor rust upgrade uh maybe i wasn't was that not on a branch maybe i didn't push it maybe i didn't push it um well what we're going to do what we're going to do what we're going to do is we are going to just try it in uh let's see our temp make a directory for uh mpm so npm no yarn right and then here i'm going to move so which yarn first which i need to unalias an alias yarn because it was basically i don't know if you all know this but like if you run nice dash and 10 it will basically tell yarn hey run in a lower priority basically which was important for intel i think it's a little less important for when i'm on the m1 but you know it's pretty hard we pronounce our h's in croatia harassment harass sneak okay that's cool hey den how's it going dan's my brother coming and hanging out with us uh so which yarn okay so now i need to move this to something else right so move yarn to yarn two or like yarn i'll go like underscore yarn okay that will allow me to uh when i'm here and i type in yarn it's just like hey there's no yarn oh i need an alias yarn as well okay so no yarn all right cool so here is where i would go so i need a cd npm no yarn okay we're there all right so in npx ign actually no let's go uh dot dot ignite cli uh bin ignite see now this music right here i think is a little louder so there's a little bit of variation in how loud each thing is so ignite new no yarn we're just gonna like spin up new ignite apps pretty regularly ah see we got a problem right already so could not resolve dependency this is our problem right now oops no i don't want this so let's see here [Music] peer react from masked view i'm curious if let's go cd boilerplate uh what i can do is run yarn outdated and it'll tell me like hey your uh whatever you call it the one that i just uh was looking at is outdated so it's your masked view yeah see right there it's outdated i'm wondering if the latest version fixes this issue so let's go take a look let's go take a look then what are you up to today you have uh you have work today [Music] uh so denton the reason i'm removing yarn or at least disabling it um is because i want to see how ignite behaves when i'm not using yarn which how it behaves is it does this so i'm just using npm right and i have the latest version of npm and it's just like it freaks out and if anybody doesn't have yarn i don't want it to like break so yeah yeah yeah yeah exactly ahmed uh oh you're saying yarn disabled is greater than well see the thing is though you aren't disabled i can't i have to type it out where i can just do like underscore yarn really fast it's easier um so let's look at this latest version here wait two what [Music] react native community i think we need to actually move this from react native community to the new one okay by the way dolmen doc who i've met is from mongolia super cool guy and he is responsible for a lot of react native code he does some fantastic work so i'm feeling like what we need to do is [Music] remove that remove this one so yarn remove that oops yarn remove that and then we'll just run yarn again and see if this helps yeah awesome then have the stream up got some new music going i'm digging this music this one's called serenity some nice uh music from audionautics.com okay all right let's try this again i'm gonna run it again uh i'll pass in overwrite so i don't have to delete the no yarn every time i can just run it excuse me okay wait what directory not empty remove oh yeah so hmm rm does this seriously say arm kids sync that's hilarious arm kids like children right i dried out in my next might dry it out in my next stream by the way denton i don't know if you know this but i watched your whole stream the last one you did i wasn't like chatting in there because i was doing some other stuff but i totally watched your whole stream hey go go follow on twitch if you're on twitch go follow deadslap that's my brother denton's uh channel and he does uh he does gaming um mainly escape from tarkov these days with some friends uh but yeah he's building his channel all right so this is an interesting one uh directory not empty let's let's open up um the new.ts command and i believe the where we're running into this is let's see okay this one's a little too intense energy bed two okay i'm gonna i'm gonna remove this one okay that's gone all right let's go this one's called epic series all right so uh let's see we're trying to remove the pods i guess so uh remove [Music] deletes the given path no matter what it is file directory or non-empty directory so why would this have a problem here in uh rimraf okay so i'm using rimrap somehow okay let's go look at rimraph wait but it's not it we're not using rimraf at all okay why are we using rim wrap let me go uh yarn y rim raft uh what this is why i don't like yarn anymore hoisted from patch package which apparently needs to use it apparently all these do so yeah you're gonna need to keep it okay this is it's a little more intense music but it works mazin okay i'm not sure what you said there but maybe ahmed knows was that a happy birthday oh yeah ahmed uh responded arm kids yeah oh it says happy okay that's that's cool mazin uh end of the tarkov wipe so we're starting the new one on monday explain the wipe then what's the wipe because i think that's a big deal in the tarkov world okay so rimraf or not like specifically using it so something is something is using rimraf fs jetpack okay so we're using fs jetpack here and it's got to be i wish it would actually give me a useful uh back trace here i guess i could just do it with um what is it verbose or debug i guess what's this object object um okay so if i remove oh no no this is what i okay weird all right it worked this time maybe it was because i was yarning in the backside but um let's look here so uh no yarn um mob x 618 where reactatron mst313 which i think is now resolved in the latest version of reactotron mst so let's upgrade that yarn upgrade that to the latest dash latest and thanks to rich evans for doing that basically you lose all your gear and experience so everyone starts over and everyone's at the same level and you go back through all the quests is this something that will happen all the time or are they just sort of doing it while it's in alpha because it seems like it'd be a little deflating to lose everything but then at the same time like starting over and getting a chance to level up would be kind of fun uh okay so we upgraded uh reactotron mst and now we're gonna try to run this again okay got a little no it didn't uh oh yeah yeah yeah we're over to the next one so react to tron react native also needs to be upgraded so you are an upgrade reactotron react native dash dash latest this one's called rock energy title fits uh okay let's give it a shot uh reactron react native is still there's a problem here hmm i thought there was a new version of this out um let's see here let's see here i need to go talk to rich um i'm just looking hold on give me a second here oh that's right if this was broken before uh the react native uh so okay so reactotron react native we do need to release a new version of that um but den says we don't know yet if it's just for the alpha but everybody likes the white because everything matters more at the start it's more challenging plus tarkov gets repetitive if you don't have goals ah okay makes sense there should be something um persistent though between like even if it's just swag like like uh oh here's a good example you know on rocket league how uh you'll have like you'll see at the bottom like on your badge you'll see like um season 12 uh grand champion or something like that um there should be something like that there's swag like boom you were this level at the last or one of the previous ones so there's something persistent that you can kind of like strive for even if you come in totally you know vanilla okay so our problem right now is that uh react to tron react native which i will pull over here uh the build is fixed now that's good um but i need to fix okay pull that down let's here get branch i guess and see if we no we don't have one so get check out a new branch and we're gonna do fix pure depths because there's basically a pure depth problem right now that's why it's complaining it's saying that um let me go verify we need to remove the pure dependency on react uh i think so we have this you can see this pure dependency here then says uh i think they might do something like that but none yet potentially will be fully persistent all the maps will be combined in one world or that's the hope that'd be cool all right so you see how react has like all these different things in here why i don't understand why we would need that um this is just like hey use react native i don't know it's pretty i don't see any reason why we can't just do this so i'm going to yarn reacting to flipper with the range which collides with a dependency of the same name with this version oh man i hate this i hate this there's got to be a better way right let's go yarn outdated oh we got all kinds of things that need to be updated here uh types that's easier to see now um types babble es land a lot of this stuff doesn't matter mitt prettier query string and mitt are the only dependencies and then we have optional dependency of react native flipper whoa latest is 124 holy schmoly okay i'm gonna let i'm gonna let um by the way what's this trash cli what is what is trash cli does anybody use that it's an interesting one move files and folders to throw oh okay i guess that makes sense moves them to the trash i do like this and i have used this before um but i don't think i'm using trash cli i think i'm using a different like brew installed trash or something like that so that's the idea there okay um this really does need to be updated but i think we're okay here so get diff uh remove react pure dependency and let's push that up and do a pull request react oh wow finance now has one inch available justin will be very happy to hear that uh okay so [Music] not a huge fan of peer dependencies to start with but um but in i don't know if i need to put that much in there uh having a peer dependency on react was causing issues i think the more important pier dependency is react native itself it's causing issues with ignite so i'm gonna merge this and deploy it myself and i'm going to tell fix depths bye um i'm self merging this without review because i really need it now if i break something i'll fix it all right cool and also apparently this isn't set up right where it auto deletes merged branches but you know we'll get there uh yeah nice okay so uh making progress let's see let's let's wait this should auto deploy so we should get a uh like a notification there that we've deployed oops um so what is our what have we done so far let me look here uh we removed react native community mask view we added we just removed it okay that's right uh react native navigation stack is also removed i guess oh no it just re it just reordered it yeah i just moved it down there okay that's fine we bumped reactron mst and now we're going to be bumping this to 5.0.1 i believe so once that's released we'll do that um hoping it auto releases wait a minute here why is this broken i thought this was fixed um wait a minute here hold on okay first off oh those are just known hosts okay that's fine um what is our what is the problem with this thing i can't check out the code reference is not a tree okay this is really strange um and also my music just stopped oh i think i know why let's hear playback it is on random okay got some christmas music going here hey we are getting closer to christmas you see that react native 0.99 release that did stay for an hour so and then disappeared yeah i actually saw the uh the conversation about it um in the react native core team discord it was just they were just testing some ci stuff it you know sorry to disappoint everybody's talking about it though everybody's like whoa 0.99 does this mean 1.0 is coming out no it doesn't i'm sorry it does not um but we got a problem here fatal reference is not a tree what the heck really can i just re-trigger this or something let's re-run it [Music] movie theme one that's what this one's called did it fail again reference is not a tree um hmm what is all this [Music] [Music] part of the action code okay um repo i mean this is for github actions not for circle ci uh [Music] hmm okay so can i i'm gonna try to find that one that's that's erroring here [Music] uh wait wait wait what now it's working now it's working oh look at that it just pushed it i don't know what just happened that was weird like this build is dead but it appears to have worked now it doesn't seem to have posted here which is a little odd but 5.0.1 should be out now let's go look at npm uh react-tron react native and 501 is out so that's good okay let's let's uh let's roll with that okay whatever uh yarn update reacted tron react native latest and this should bring in upgrade not update i don't know why those aren't just like come on update upgrade shouldn't shouldn't that be the same thing how's everybody doing this friday did you have a good week i won my two uh hockey games last weekend and i've got two more this weekend both of them against very good teams by the way one was the best team in rec league we're second and we beat them and uh the other one was the one of the teams in sealy which is better like all the c league teams are better uh so yeah 501 comes in let's go ahead and try it again i think that was just a momentary issue i don't know why it it like fixed somehow but i am curious why it's not published or posting here and i feel like i know why so i think it's because i need to add the infinite red um let me go look here the circle ci no it's there is there like a semantic release thing here um infinite red circle ci is there let me go look at the latest uh pull requests here go to a closed one and just go find some random like like this one here and it is the infinite red circle ci so yeah i mean that's there i don't know why it's not doing this comment like it should yeah it never did post anything here i'm gonna go look and see if the release has the release notes yeah okay it does all right well i mean it's mostly working solid week but also ready for the weekend wow you really are with the caps mat week working on my mobx library now so that's exciting well i'm working on better docs that's always a good thing by the way hey thanks for the follow uh carrie carry my mile curtain carry i'll just go with carrie uh did some work on it since last time you took a look hey let's take a look at this maubeck's easy form 0.99 thing is disappointing i was excited about 1.0 just for the new architecture i believe it will be rolled out next year according to react conf uh ahmed make sure you um tune in on thursday for the latest react native radio because we actually talk about 1.0 with a react native engineer i will actually for everybody on the stream i'm gonna i'm gonna let you know kind of what he says uh i said so can we finally go to 1.0 when we have the new architecture and he said we'll see the thing is react native's core team doesn't really see 1.0 as something to really i don't know like it's not like it's uh oh hey thanks for the uh subscribe on youtube as well carrie i appreciate it it's cool that you're uh hanging out with us um but yeah they don't see it as being like this you know something that's like a big deal uh looks like we have detox is kind of the problem here so [Music] i'm wondering if we need to who need who's bringing in detox are we bringing in detox ourselves i think we are yarn y detox uh it's a dev dependency okay so yarn outdated and let's look and see what detox is supposed to be so detox right now is 17 and it's up to 19. so let's go look and see what the breaking changes are on detox because i don't want to break it 100 you know uh releases i don't care about the version at all really the most important thing is that it's stable and evolving yeah that's what they're saying too that's what they're saying too i'm surprised ahmed that you're only 17 and barely 17 today by the way you are you're pretty far along for for only being 17. you must you must really like this stuff i mean i did too when i was 17 i was a pretty good programmer pretty pretty good i mean i had five years of coding and i mean like every day coding by that point so uh so let's see here um let's go to releases and let's actually i was already on releases let's go to 19 not a breaking release uh potential breaking of third-party detox driver blah blah blah don't worry about it uh 1800 [Music] and 18's been around forever and we're on 8 on 17. there's 18 detox let's go look at the full list of breaking changes custom synchronization uh phasing out our earl grey usage we did actually talk about this by the way in um let me go find the link here react native radio rodem reliable re detox so uh it's rnr189 and if you go find rnr189 we will talk about the uh removing earl grey okay so so go check this one out reliable detox with with rotten uh okay uh should work as there's no limitations um so breaking changes i was 13 and above 12 and below are no longer supported tests won't work there no longer it launches the app automatically even if asked to do so you have to launch the app explicitly await device launch app so this is important thing right here just circus i think we need to get up to up to speed on this to send it class i don't think we're doing that uh detox circus environment let's just let's just make sure oops i'm in the wrong one here nope we're not using that good um detox blacklist regex i don't think we're using that we're not good everyone is surprised says ahmed i've been coding since i was 12. doing it only for fun yeah yep yep yep and by the time you're 40 like i am who knows where you'll be i'll tell you what ahmed i learned a lot in my 30s that i didn't know when i was in my 20s and certainly not when i was in my teens and not about coding i was already pretty dang good coder at 30 but just about life and people and you know humility i learned some humility uh let's see you don't need to do this as of 17. um okay so this doesn't look like a big deal like we do need to do this so await device launch app okay before all so there's a weight detox init so we're probably gonna have to also add this right i think we just have to add that and then we just have to update or upgrade uh so yarn upgrade detox latest and do we have any other detox related things like anything else detox in here here uh i'm gonna do this and then i'm gonna go yarn outdated what did you code in like when you first started ahmed i coded in q basic so we're up to 19.3 i'm gonna do a yarn outdated here and then i'm gonna search for detox and it doesn't show up so that means we're probably okay but but we'll find out all right i'm gonna try this again now i don't know if detox will improve everything like the latest version of detox but that's it's a good it's a good thing to try in unboxing npm so far no breakage that's a good oh there we go uh detox 19.3 is saying that just circus so why are we bringing in there's no yarn right here what while resolving just circus okay let's look at this why whoops sorry yarn wine just circus let's take a look at that php says mazin i started coding in java and vb.net okay all right by the way there is music going on right now it's just called navajo night it it's 24 minutes long i have to turn up the music i kind of like it is that it's kind of got a dune vibe to it like you can just feel the sandstorms whirling around you oh we have a dab dependency okay so can we upgrade it it needs to go up to 27 but just itself is at 25 and i don't really want to go up to 27 because ah it doesn't work hmm i don't know about that that one's that one's a little tougher so it's saying um just circus needs to be at 26 greater than 26.5 and which one do we have right now we have 25.5 hmm so let me think this through so they want twenty six zero basically they want twenty six okay let's try upgrading to just 26 we'll try just circus i guess only not a big fan of this but upgrade just circus to the latest version of 26. this is probably a bad idea dune was great yeah i agree have you what have the rest of you watched dune the latest dune movie yeah see i don't think i should be getting out of uh sync with just here i think this is a bad idea but let's just see what happens here this is cool dune was the best movie in a long time i agree mateo just expo now needs to be updated okay let's do that one i think we can do this one the latest dependency hell here right and it's like everything i agree i loved every minute of it too i'm just i can't wait till the next version but that's like two two years away derek says he will see doing asap i i please do and i don't know if it's still in theaters at all but i went and watched it with my son cedric and my brother blair because denton was too good to come watch it with us in a really big like imax rpx top-notch theater situation because i wanted the maximum experience i didn't want to be just putting it on my tv and i'm glad says he'll he'll watch it again i agree that's that's totally a re-watchable it's a rewatchable one all right let's try this again slowly working our way through these dependency things this is good it's got a good vibe navajo night all right which one react power plug all right why are we using that so yarn y react power plug uh it is in dev dependencies apparently we're importing the toggle from react power plug what is that renderless containers uh um okay why are we using this i don't know if we're using this government should subsidize movies like that so we can get them out faster i really hope kevin is is watching right now um i'm gonna ask uh my team why we're using react power plug i mean i'll use it it's fine like we can upgrade it oh hey what do we got here oh yeah that's great yeah last version is 1.0 i don't know about this folks i don't know about this um so it's a dev dependency for one thing wait a minute here the release candidate is the latest one no because there's a 1.0 here so this is not really being it's not really being maintained i'm gonna ask my team what's going on here yeah look at this react hook support there's nothing i don't know this doesn't look right like this whole toggle thing here like it seems a little strange to me i don't understand why this is necessary at all um these these typescript errors are because i don't have it open basically you have to open it uh you have to open vs code in the root directory of the boilerplate in order for it to find stuff properly otherwise it'll just crap out like it is i'm just going to do this so the boiler plate now is is good so if i whoops power plug um yeah see it find stuff well no i don't know what's going on with that just yarn it maybe there's something going on here with this that it'll fix once we get this up and running um yeah that's probably why so yeah okay i fixed it um i mean we are only using it in a few different places and apparently only for toggle and then this state thing which what the heck is this initial and then set state this doesn't you look useful at all to me i'd almost rather like remove this here and get rid of power plug entirely um do we tackle that right now by the way every time i run this it just deletes my pods and my node modules [Music] um hmm so the current problem is that it's saying that you know we have this pure dependency blah blah blah it's old school too let's just fix it this is ridiculous let's just fix it all right so um we're going to fix npm only and this is also going to remove power plug so we're going to replace power plug with whatever i guess it takes to not have power plug um and let's do a yarn start here analysis yarn and then yarn and actually i'm going to alias yarn equals yarn so i just don't have to think about it okay yarn ios all right let's run let's run ios here okay remove react power plug now says derek i am i'm on board with this yeah this this seems this seems like unnecessary so now we have to think about like how do we how do we achieve what we want to do here so we have this state thing um stories add decorator and then we have use a placeholder and label to set the text so the set state thing is interesting um maybe we can just make our own state one so let's go like const state equals um would be like initial right initial and that will just be a value initial value thank you so now we have this and then i would um whoa what the heck really it's just giving me everything here i don't want this state thing though all right so i do want this initial part right here oh it's not letting me const value set value equals react dot use state initial value okay i do want that and then i'm going to return but i'm not going to do this view or no it'll be like a fragment right it's a fragment and then we would have uh we also need um children which will be children will be i'm just gonna say annie all right and then um children but children i need to be able to because i'm getting like a i guess a function back from this and i need to be able to pass in uh value and set value i guess so this this feels like it would probably work i don't know if i need the fragment but that's okay like we'll we'll use the pregnant there what do you stream about organic chemistry so i can study while watching the stream hey ahmed i was actually chemistry student of the year in high school i actually like i like chemistry is fun um i like uh the sort of ideas behind a lot of the stuff hey aditya namaste thank you for uh coming in and hanging out with us again today appreciate it this is a long song we're 15 minutes in and we got a ways to go so i'm cool with it though it's got a good vibe it's got a good kind of you know do my do our thing so uh yeah so like so this is actually going to be a um so we'll have like state which is a any and set state and then we're going to get a node i guess back hmm um not react node i guess why is react node not a thing says it doesn't exist what's the um that's jsx.element i guess where's that coming from react.jsx no hmm okay this is a great use of any because i don't care at this point right now um what i'm going to do is i'm going to actually move this stuff let's see here into a let's see hmm like we have this um we removed uh what was it react um power plug right fragment is good since it tells typescript the function as a react component good call good call i think it has to be state and set state and pass them into an object for physics and math yeah that makes sense should be react react node or react react node but it was telling me that react doesn't have a property of react node oh is it because of this should it just be import react can i do this ah maybe that it's the way i was importing importing it right so let's try this again uh children would be um um props which would have um state and set state right and then it will return react node and now it's fine wait what's this uh set value set value children state excuse me um children oh wait wait wait state and set state would be um any and then there will be like whatever the value what is this it's a react dispatch set state action and it's in string but i'm gonna go any here and what is state anyway it says string initial value has to be a string no it should be the initial value really should be t and then we could go here so this is a generic i don't know why i'm being so like does this this does not need to be this ridiculous i'm being ridiculous here so the forget this all right it's ridiculous this is gonna be any all right cool i mean that i can do it i can make that like a i don't care it doesn't matter um so there's like a utils or something here right utils i could create one that is react power plug and then we could eventually remove this export replaces react power plug which is not maintained to do eventually remove entirely and then we will import react right and we also need to import react react node and also you use state right and we don't even need react we just add dispatch um and set state action all this stuff okay and no this has to be a tsx rename this okay so replaces react power plug which is not maintained and now when i go back to um this i can import state from the utilities which is right here i can actually get rid of this then uh and so now it's just yeah okay good good good good good now let's do react power plug and i'm going to do the same thing for another for the toggle okay so again we're going to go back here we're going to export well i'm going to do it here first but then yeah okay so const toggle equals and then this is where you know i need to basically rebuild it whoa okay that's the end of navajo night uh you have a pair of parentheses extra why that's why i didn't show a react node and the type of children prop you have an extra parentheses i think it's fixed now i think it's fixed you're probably right but i think it's fixed um we'll come back to that okay so let's see what this so the toggle you get an initial all right so we're gonna have um props initial boolean okay and then here oh and we also have uh children which for now is just oh actually i don't know what is it um is it just jsx element no it's not it is a it's a function that has this oh whoops can't do that initial and children which ah let's hear um initial children and then children is going to be uh jsx or or what did we do children would be a react note i guess yeah let's do that so it returns a react node from react okay and then i have some some work to do here on this so um so it returns whoa jeez okay uh i'm confused again now so we have a react node but what does it return it's not giving me so i just leave that blank okay so children react node [Music] okay so props this is the props here and then we're not going to do this we just do a arrow curly and then in [Music] um what am i missing here initial children [Music] okay so we are getting on and toggle and what is on anyway [Music] so the here's here's a situation where we need um no children actually is wrong that should not be an [Music] all right i'm just going to go any for now and then what we'll do here is we'll say children will have [Music] children initial [Music] i don't understand why this isn't working it should work right [Music] i guess only refers to type is being used as a value here how about i just take this drop this in rename it as toggle uh we need to use state before when intellisense didn't show react node it's because of the extra parentheses so it didn't show up in your types but it's okay now does react node type allow passing arrays like numbers dot map um i don't know just remove props oh i okay i'm an idiot mateo so it is what it is but okay so initial the instead of a value we're just going to say boolean here right so this is going to be on or off right and instead of initial it's just going to be initial there all right and then um we're going to say initial which is going to be now the value is going to be boolean so now instead of any here i can say boolean and then we have a set value on and toggle hmm property on do i have to do on and toggle here like so [Music] it's gonna be on and this is gonna be toggle um oh that's why it needs to be this needs to be props here oh that worked we're gonna get on and toggle initial children gonna get on and toggle it looks like it worked okay so let's uh let's throw this into react power plug let's export it which we did um let's go up here and re-enable um by the way we're gonna need that no we don't we got all that already good and we can get rid of anything we don't use which is all this stuff and then um instead of from react power plug we're going to import it from no actually i'm just gonna go like this um control yeah control space and then i just find the right one and then it imports it automatically yay okay now anywhere else that we need to use toggle uh like right there for example we just import it from the other place and i'm hopeful that toggle works the way it's supposed to okay we're making progress this song is called redwood highway now we can remove uh yarn remove um react power plug or not remove not rm i don't know why they don't have an rm seems obvious to me okay nice uh so now after all of that work we can try this again checking to see probably going to go to lunch in about an hour um okay let me try oh jeez it replacing and like removing everything every time is rather annoying uh let's see here so i have to run yarn every time to like get it back yeah it's just broken hasn't broken yet somehow okay we may have fixed that now we have to see if we broke it in other ways but [Music] this is called sailors lament again audio nautics is the website where i found these really cool i mean there's like 13 hours of uh the music i think oh why are you yeah delete okay no apps connected okay well what we can do is um go let's see here yarn yarn ios okay it looks like it finished which is great like that's that's uh that's what we're looking for we really wanted this to happen um so that's a good sign that's a very good sign i'm gonna see what happens when i build the boilerplate app itself making progress and if it works well uh by the way this takes longer because npm is slower the other thing i want to do is um after i get this working i want to do another uh thing which allows us to do pnpm because in um let's see yeah it built it nice oh actually loaded up too look at that okay so now i just need to go to uh storybook default okay navigator let's go look at uh the switch for example couldn't find react that's easily fixed so that would be in um power plug we need to import react okay this thing is really kind of hung right now can't even control c to get out of it okay first off yarn make sure everything's and then yarn start um but pnpm is interesting so like if i go to my let's see here not in the boilerplate but in here in the tools we have the packager whoops not pretty packager and this has like yarn and npm the thing is we want to add another one so if we did like pnpm right uh now we need to handle function pnpm let pnpm we'll basically do the same thing we did there see there same thing whoops is pn pm okay there we go pnpm and then we have this like expo if yarn and then this is a situation where we would do like a priority here else if pnpm and we would do that i think it's install and then we do have to figure out the whole dev thing which i don't know exactly how that works um so p npm first yarn second npm third and then similar situation here where i would go uh pnpm and go uninstall package and then else so we go if pnpm uh pnpm install i don't know what the dash s is i don't know what that is like pnpm whoops now now we have yarn options packagers yarn list i don't know how to do this with pnpm yet it actually came up with pnpm right there um if options packager so what i'll do is i'll all um throw uh pnpm list is not supported yet yeah so yeah i mean there's a to do here right and then what do we have here packager if yarn then we have like the spawn progress thing npm run oops so um [Music] something like this if if pnpm then we would want this but then um pnpm run basically install dev expo on progress okay uh what is package manager yarn or not yarn this looks this isn't quite right so um whoa thank you uh is this what we want return true i want to try pnpm does it work well with react native out of the box or should i do some configuration get it working maybe that s thing is for silent mode okay that's true so the does it work well without reacting out of the box um it requires a little more setup and that's why i'm not quite here yet i mean i was i was like wanting to kind of get a little further along here okay here we go hey it works it works it works it works it works anybody else excited i'm excited that's pretty neat that's pretty neat uh what else was there's a check box here let's let's try this one yeah all right all right that's cool what was the other one um react power plug we have a state one in the text field let's try this the text field one and text field um text field oh no no i was in the wrong spot undefined is not an object evaluating state dot value oh initial is value um what are we passing in we got that state dot value okay okay okay okay i get what's going on here so um i need to just go initial value here and not do this right or it should be initial i think and then um yeah and then it has value there so it's kind of an any situation here like i guess there's a value there let's see what happens why didn't it warn us here about state dot value state what is state oh states any that's why what is value here i guess state it does not exist on um children's state [Music] don't understand this i'm doing something wrong here because it thinks that i need a value any should be state should be so state should be um children should be props i believe so if i go here and i say props oops then set value expected one argument got two children is the children you're getting a state and a set state that's what you're getting so state set state right and then i just go like so okay and then this now is fine with that all right good and it appears that that is working although the text is strange but okay i think we're in a better spot now okay uh cool that it works you should pass state set state to children so you need to make it prop state value any set state whatever yeah uh i had to figure that out myself apparently ahmed i should have watched a chat um i'm curious if this works suspect not but and i should also run yarn ci test we'll see what happens but okay uh while that's going i'm going to continue to well shoot see i just screwed it up here because pnpm is installed on my machine and this is not going to work i don't think so anyway i don't think anyway um so for now i need to say pnpm return false but we're gonna get there we're gonna get there so i'm actually going to cancel that and we're going to run this again all right it's going to take a little while um in the meantime i need to actually go look so your question document about uh setting it up for um so we have ai lab which we're working on right now and there was a we had to do some some work to make this work so um let's hear it examples ai lab native example and then there was a babel config metro react native babel preset i think that's fine metro config we had to bring in rnx kit metro config and then metro resolver sim links this was an important piece of this so i'm curious if we could bring this in to ignite i'm gonna go to the boiler plate here and go to our metro which we don't actually have and set this up for working either with pnpm or yarn and allowing sim links just out of the box you know although is this am i doing too much right now maybe i should be waiting for this and then doing it in a separate like branch i think so but this is what you're looking for ai lab examples ai lab native example and this is under the infinite red repo um make sure to start uh get default config i don't think we need this stuff [Music] i don't actually know what this is but it looks right seem like support and you have the metro sim links resolver our next kit metro config let me go look at the package jason thinks i'll take a look at it yeah it's it's good in shellscape by the way andrew uh powell is the dude who did it and he did a great job let me go to package.json and dev dependencies we have these two dev dependencies metro config and metro resolver sim links so those were very important i think we already have metro reacting to babble preset i could be wrong but i think so yes we do although it doesn't seem to be uh hoisted from there hoisted from there because expo babel preset okay yeah we're good then we're good so yeah i need to i need to add those rnx kit metro config which comes from microsoft by the way all right let's see what's happening here it's still still cranking away at this um oh by the way it's doing all this without yarn and then i'm gonna re-enable yarn and then i'm gonna do it again and then i'm gonna work toward pnpm as well but that'll be in a separate branch all the packagers i wonder how much faster it'll be with pnpm installed this song is called happy ukulele makes sense so um yeah i mean this is uh so i did get some responses from my from my team um by the way um there's like 25 lines of code [Music] okay so uh that was actually pretty fun to like work through this and get it working you know this here by the way this song is called crying in my beer [Laughter] so this should be some sort of uh like a type probably but whatever i don't really care there's a to do to remove that um so still cranking away here hopefully it's not just hung what if it is hung oh that would be annoying that would be very annoying if i am sitting here waiting and it's just hung you need to stream about and testing with detox yeah good call uh derek if you're listening we should put that on the list and maybe get ratham on or somebody like someone from uh from wix to help us alchemist ooby how's it going you're yordis it has been a long time have you been man uh right now i'm wondering if this test is hung that's what i'm trying to do um yeah i don't know i don't know nope it's not i just got a bunch of crushed let's see okay so so there's a storybook issue here and it's probably because [Music] i changed a little bit of the storybook stuff here so that's fine okay uh well it's it's it's it's close um so if i if i go um if i go yarn let's see here what was that test anyway got a diff problem here um story shots test test.snap so if i run it with npm oops test okay i'll i'll install i don't want to do this actually i can do it over here with this uh no yarn so npmi right why are ignite tests that slow well part of it yes yeah mateo thanks for hanging out with us um part of it is because we're using npm because i'm doing npm only without yarn right that's part of it um npm run test see what happens story shots this should fail i would assume and then i'm going to run it with yarn yeah it failed so let's run yarn and yarn test my watch is really really trying to get me to stand up right now you've been sitting down for too long is what it's telling me which is probably true do some stretches yeah we're getting there we're getting there right what i'm curious about is whether yarn test does not fail maybe there's a difference between npm run test and yarn test with the story shots but if this does fail all i have to do is like go into the boilerplate and tell yarn to update it yep okay it failed good so that means if i go yarn first and then yarn test and then i think it's dash u will update the uh the story shots i tried deno lately amazing for clis you can run untrusted scripts from the internet since you control the permissions of the entire thing okay it transformed the script into rust and became 200 or 300 times faster uh dude i was doing some rust the other day uh to see if i could speed up ignite and um which i didn't but i did get it working kind of and it was amazing it wasn't faster the reason it wasn't faster is because most of the time waiting for uh ignite stuff is pretty much running yarn so so we're updating the the the s snapshots here snapshot tests um it's called medium tempo rock hey why is this not okay i'm gonna do it with um yarn just dash you i think it is wait what no it did pass darn it uh let's see here so npm so this here snapshots updated good um run you know what i don't want to let me just do this git add it's here get commit um uh let's see here fixes installs or are in it our new project init when no yarn is installed i guess i'm gonna push that up and then uh this packager thing i'm going to explore a little bit longer but we're going to let ci work on uh did this you know see if this failed i'm gonna let ci work on that so i don't have to be sitting there playing with it and then i'm gonna break out a new branch which will be um support pnpm okay all right now let's do this um so if we get pnpm uh we have all this stuff going on here now the thing that i need to do differently though is um i think that i need to add all of that stuff for um into the boiler plate so i need a what is it anyway so first i need these guys so let's do that and i am using yarn and i'm going to move yarn back into view so that we can use yarn so let's do that so now i'm going to say yarn add dash d that and we also need the other one [Music] yarn add dash d this one and then in uh the boilerplate we also need to create a new file that is called [Music] metroconfig.js i believe metro.config.js and then in there we're going to pretty much drop in this and just remove anything that's not enabled because i think that this works okay so and then i will say here we're using a custom metro config because we want to support sim links out of the box this allows you to use pnpm and or works uh play better in a monorepo you can safely delete this file if you're not using sim links or pnpm or sim links at all however it doesn't hurt to have it either um so delete this file and rnx kit metro config rnx kit i'll just put in star and remove if you're not using pm pmb mono repo or sim links at all okay so um so we have this we have the default config here um asset so we get the resolver okay and then we have the resolver simlinx resolver object.assign can we just uh spread it let go whoops yeah just drop in the sim link support there we have the resolver as well right i don't know which side it needs to be on but i guess just that um so we have the resolver we get the assets and i don't actually know what all this stuff does to be completely honest hey becca how you doing wrapping up your week i just realized i'm kind of slumping a little bit i mean hey it's friday what can i say all right so metro config packager so i guess part of it here is i just want to drop this into um this no yarn thing uh so okay part of this i'm gonna i'm gonna remove node modules yeah i know rf and then i'm gonna i'm gonna yarn it and this will be a little bit my playground for pnpm and then i'm gonna bring that back to uh to ignite by the way did ignite die [Music] did it not die is it running tests maybe it's oh you know what it's probably because it doesn't have a pull request um this new price so um when not using yarn ignite is supposed to fall back to npm however with um recent versions of npm it was failing with an error that looked something like this and i'll just i'll just say that with an error about peer dependencies this pr [Music] upgrades some dependencies to remove those errors and also removes the package um react power plug which is not maintained anymore so just create that uh all right so let's run yarn um what was i going to do oh yarn just u just to kind of update it just got a negative covered test oh were you feeling sick or do you have to go do something hey i told you to update react is not defined oh this doesn't have the fix that i just did where is this anyway this is in um [Music] easier way to do it instead of trying to figure out where it is you just search for that um yeah we just need to react here all right cool oh i did that there we go all your kids have uh covered okay hopefully they're doing okay what is it complaining about now properties of undefined oh man i gotta actually just like replace this whole thing with what i have power plug let's just drop that in there and it should work so um yeah hopefully they're feeling okay um but you're negative though that's good all right so uh so we're good there now what i want to do is do rm rf node modules and yarn dot lock and then what i'm gonna do is pn pm install and it probably won't work which is fine right this song's called counter move slight cold symptoms end of a two week quarantine it's only a matter of time for us [Music] can i load such file script ios auto linking manager um curious that's interesting well first off does that exist um so that's let's look in the pod file real quick excuse me um [Music] so scripps ios auto linking manager so [Music] yeah so it's really it's this one right here require resolve let's just run this and see what it tells us okay then we'll cat that yeah it's only a matter of time before my kids get it um what exactly was the error again okay um let me try this again actually it's cd ios pod install and then it tells me invalid pod file cannot load such file scripts ios cat er is there even a scripts what's that under scripts auto linking um okay so so this uh okay so scripts auto linking let's go ls this no such file okay expo so there is a scripts there okay let's go slash scripts and there's autolinking.rb right there so why is it telling me oh it's trying to find ios out auto linking manager so where is this coming from because that doesn't exist it's just autolinking.rb not that and also why does this only show up now hey alpha happy friday to you as well you have a good week so require scripts auto linking it does find so it is okay so that that's what it is so it is loading auto linking so now i just need to go and cat that whoops rb and then this is where it is trying to load the so it's actually uh this is what it's looking for right here okay let's put that out cannot find that but i think it's because i'm in the wrong directory i guess so let's see the end of this and then rerun that okay yeah that worked okay so now we have this [Music] lsal paste that slash ios let's just see what's in here uh scripts and then there's ios and in there is autolinkingmanager.rb what the heck [Music] it doesn't it doesn't like it [Music] it does not like it all right so let's see here [Music] so it is requiring this but then it's telling me that this scripts ios i'll link it it says that this doesn't exist so [Music] error cannot find module expo modules [Music] can't complain it's been a long week but i'm glad we're here hope you had a good week also yeah it was it was a it was a good week i mean uh sold a couple projects got a really interesting project i wish i could talk about on stream [Music] oh man i wish i could talk about it i can't [Music] but yeah so so really cool a really cool project yeah and uh yeah thank you you know what i'll say is that our goal of trying to become sort of like the de facto best react native agency in the world is i mean it seems to be working you know people are people are finding us and hiring us to do some cool stuff a lot of stuff we can't talk about ever we're just under nda it's just not not possible but okay so can i find module let's go see what this is hey there's cedric he's dropped by our stream before why would gradle be a problem here doesn't make sense this might have something to do with expo for sure um boy yeah this one looks like a a doozy okay um let's look at the package jason and see actually what i'd like to do is yarn well pnpm outdated trying to find here like if anything jumps out at me that there there would be some sort of a i don't know the thing is like if i go so okay pnpm outdated i think it's it's fine yeah it'll do the same thing yeah i did okay so let's do um let's do uh rm rf um pnpm lock and also node modules and then we'll just yarn instead ndas are annoying but looking forward to checking them out once they're publicly released got my m1 max on monday and it's been super nice upgrading to i was using a 2010 mac pro before whoa i bet you are just blown away alpha congrats though man that's awesome i love mine it's so cool [Music] acoustic blues so i do have this in there i'm going to also create it in here just to test it basically what is it metro metro.config.js see like yarn is not having a problem here which makes me think this is a pnpm problem so i'll drop in this metro config but i don't think that will make a difference for that [Music] really curious why this pod file is is failing on pnpm install expo modules auto linking oops pnpm react native see a lot of these i don't think actually have dealt with this okay wait a minute how to solve this doesn't look right so so what i want to know is uh let's see so expo modules auto linking slash package json let's go look at node modules and let's look at expo modules oh there is no expo modules auto linking unless that's somewhere else let's look pnpm y that's from expo is it in expo itself it is ah but this is a this is a um it's a bin there and where is it no yarn no modules pnpm a lot of linking yeah this is definitely this is interesting this is a i feel like let's see here [Music] hmm yep can't find it so cd ios pod install and it doesn't like that so can't find it it's trying to find it but the way that these node modules are linked in so let's say that i were to go here and add a link to expo modules auto linking just right in the node modules i think i think it would actually work because it's looking for node modules slash expo modules auto linking and it's not finding them because that's not how these load so if i were to find let's hear this is in go back to the pod file go to this here llc all that whoops no i just need to print that okay and then i just need to so we have this whole thing right here right uh node modules pnpm expo bevel core blah blah blah blah node modules expo so then in there we've got [Music] uh scripts [Music] right we need to like do the same thing but cat and see what's in there whoops autolinking.rb and then this gives me and i need to actually cd into that [Music] and then i just need to run this again [Music] didn't grab the whole thing [Music] and this is uh where it's supposed to be so [Music] it's all there and it appears to be giving me the right information but maybe ruby is not allowing it to require ruby require and sim link acquiring symbolic links whoa [Music] okay let's let's look here [Music] so my my assumption here is that um basically if you do pnpm you will end up with problems right now at least and that's uh so what i'm going to do is i'm going to do initial support for pnpm issue with um expo and sim links on pod install all right and i'm gonna push that up and i'm gonna create a pull request because i don't want it to be problematic i'm gonna probably wind it down here but um we have a failing test here i may put leon on this oh yeah what [Music] um [Music] yeah i might put leon on this to see if he can figure that out um pm pnpm i'm going to hold off on that but i will push up a pr to that um support pnpm work in progress pr for supporting pnpm instead of yarn npm currently running into issues where expo or on pod install can't find an expo script auto linking script which clearly exists okay so i'll put that there and then this one um yeah we'll do that cool well uh we made a lot of progress today it was it was kind of kind of tedious like you have to kind of work through each thing you know one thing at a time right um and but what we got we got pretty far and uh should be able to knock this out might work on it monday not sure yet have to see what's going on but i hope everybody has a great weekend it was really fun to hang out this morning work on some open source uh congrats on the macbook pro alpha um becca hope your kids feel better soon and i will talk to you all

Channel: Infinite Red

Views: 70

Keywords:

Id: UMjRNZUSSC4

Length: 144min 31sec (8671 seconds)

Published: Fri Dec 10 2021