React Native Moti - the universal animation package for React Native with @FernandoTheRojo

cool guys so welcome to uh to my channel uh this one is going to be a different video although um i have here a beautiful guest with a blue greenish eyes it's yeah his name is fernando and he recently built a really nice animation library called moti which is based on reanimated 2 library uh that's running 60 fps no matter what everything it sits on the native thread uh ui thread so you don't have to worry about dropping uh or having like really sluggish animations uh so yeah i'm here we will we will go through this library because i find it really interesting and and i'll definitely be using it on on my future tutorials and yeah let's let's see uh fernando welcome welcome to the show it's thanks for having me it's been a while since yeah i've actually uh did any live coding or live streaming uh thank you so much for accepting the invitation and i'll start by let's let's give the audience just a little bit of history of i don't know just introduce yourself sure uh yeah i went to penn university of pennsylvania graduated a few years ago i live in new york now i've been working on a few different startups um for the past few years started doing a shoe company then i went through y combinator with a friend of mine from school and we tried to launch a social network and we've just built a ton of products in the last few years using a wide range of stacks but all of it is focused around react native in some sense so that's how i ended up getting here to working on modi cool that's that's really great i i also saw that you're doing a couple of uh maybe like can you can you give him like more details about the project uh from uh for reac native uh like the styling project yes based on team ui or something like that yeah so the first project i think that got a good amount of traction for react native that i built is called dripsy um dripsy is a theme-based styling library for react native and it basically tries to achieve two main things uh creating a really easy theme that you can use throughout your app and responsive design meaning that in your react native app you just specify what screen size you're going to be on right so if someone's using a small mobile phone versus a desktop all you do is specify how you want your styles to look based on screen size uh and so that's that's dripsy i think it's like something like 400 stars on github which is probably my top one right now uh it's pretty exciting and i've been using that in production for a long time now and the idea came about after i used themeui for react web i think a lot of the ideas uh that i've had so far have mostly just been porting things that have worked for years on web or on react and bring them to react native and then bring them back from react native into react native web and that's kind of the same story for modi yeah that's really great actually i i first saw drips the i think two months ago um i had like some work for for side project and i wanted to actually integrate some theme ui components but i end up doing like different different stuff here oh one sec okay uh so actually my my camera went off uh because i'm recording in 4k even though this stream it's in uh 720 but so yeah i'll start sharing my screen here okay my my webcam will be back uh really soon we're infinite yeah this is the inception mode so i'll go here and why you fernando don't start like uh i i already so let me walk you through what i have so far i have just an expo init project like a blank one uh here is the vs code and here is the simulator it's just a plain text right nothing fancy and what i would like to first start first start with is the installation of reanimated to plus multi or what are the dependencies of moti and how we can actually install those sure um so if you want to the firs the first thing you'd probably do since you're on an expo project is uh you just want to install reanimated and do the steps for expo i usually just direct people to expo's website for that but okay i kind of do know them if you want to pull up expo's website you can do that it's just like two yeah yeah so if you just google yeah i actually have it here sure so these are the unreleased docs um yeah this is perfect yeah cool so i i need to install rainy m82 right and i think reanimated2 requires uh so this is the way to install yeah so it's reanimated uh 0 so yeah so if anyone hasn't used re-animated before um basically this is a more performant animation library for react native and you need to use the newer version to to use modi and expo has some experimental support for it that has worked pretty well cool so while this is installing the next step i need to actually modify the babel config okay so i have here babel.config.js i'll paste this on so now it should work kinda so i'll start the project this is something that will complain right but there's no problem you see this error that is actually expected um it's just because expo you know has experimental support for reanimated and yeah it expects to have the older version but that's okay yeah so now i'll just clear up the uh the metro bundler here and hopefully my camera will be on yeah sorry uh hopefully you can see me all right i'm getting some infinite loops here with the sound cool so can you hear me now yeah i think we're back uh i think something's uh yeah something is really fishy um camera oh man oh i think that just one sec can you hear me now not really yeah i can hear you now how's that oh yeah we're getting a lot of feedback still oh sorry yeah [Music] all right it seems that my camera is still not working anyhow so i'll just this is the i i used to use like um obs studio okay you can't hear me now um i just keep getting repetitive feedback um let's see can you okay i think it's good now sorry about that all right i yeah i think i can see your screen so we should be good to go [Music] okay [Music] i don't know if you can hear me on here but you might want to um unmute yourself if you are currently muted because i don't think i can hear you yeah i i think there we go okay does it work yeah we're good now okay if you could just please maybe you can you can do it by yourself like sharing your screen uh no problem because i i think that i need to restart my my camera here uh okay all right i'm gonna share my screen yeah yeah oh it's back cool okay okay everything is good do you think you can pull up your uh your code editor uh yes i'll do it right now cool yeah sorry about that actually i'm i'm i'm recording in 4k so that's why cool yeah so it's it's all yours just let me know where you are cool okay sorry guys we need to the only missing the only missing piece here so we just installed reanimated um now all we would need to do is install modi i don't know if this if you already have that on this project it actually doesn't let me edit the terminal um for the for this project so i'll probably need you to do that so all you have to do is enter npm install modi or yarn add modi yeah sure alrighty cool uh and now i'll just refresh this simulator here just let me double check yeah disable yeah fast refresh is already in place so i'll just close up the um everything so yeah just walk us through what's moti and what you can sure so the simplest thing you can do with modi is just a very standard uh animating anything um i think it's it's pretty common probably the most common use case uh that i find with simple animations i think most tutorials have really cool complex animations but typically for a good user experience you want something very simple like something fades in something fades out when you replace the content so if you appear on a page uh you might want something to fade in down and these mount animations are probably the majority of what you'll do and the second thing besides mount animation is a transition which means you know let's say you have an item that's 100 pixels in height and then it closes goes from 100 to zero you want that to fade smoothly or if something uh changes in size things like that those are transitions so the two things that modi really tries to make simple are the mount animations and the transitions and the final thing is unmount animations so this is something that uh as a concept is very difficult in design in general right if you have let's say you have a square on your screen and you want it to disappear and then bring another square in how do you animate out the first square right ideally you just make it disappear but the problem is it's impossible to animate something that doesn't exist so what modi does is it handles all that part for you you just delete something and it'll animate out and delay the delete so uh i can start by just showing an example of the most basic uh thing you do on modi is my my mouse working on here okay so now it says i can't spend it let's see okay so i can see your yeah all right cool so i'm gonna um i'm just gonna delete this if that's okay or i can go sure all right so we're going how does this does that save okay we got a blank screen all right cool so what i'm going to do is i'm just going to make a really simple um first i'm going to import modi right so i'm going to import a view from modi and this is actually going to complain because we already have a view imported from react native so what you can do here and this is probably what you'll end up doing every time you use it is you just do import view as modi view and what that does is just renames the variable uh in in the scope so it doesn't collide what i'm going to do is just really simple i'm going to add this modi view here and i'm going to make just a box that fades in so i'm just going to make a style called it's called shape and i'll give like a height of 150 width of 150 let's give it a background color or something add some contrast maybe cyan and just for like nice style i'll give it a border raise like 16 so it's rounded edges right now i'll save that nothing will change um but if i give this a style shape then that should be good all right so now we have this the square in the middle usually you know you'd have a variable for this but that's fine um i'll make it a little bit better maybe 250 okay so the typical thing you'd want to do is probably just fade this in and with modi that's incredibly easy all you need to do is say what your initial state is so we're gonna have a from state that's gonna be uh let's say opacity zero and then we're gonna do animate which is what it's gonna transition to and make that opacity one so this is this is probably the simplest thing you can do is just like a simple fade in animation attempted to assign to re read only property yeah let me refresh the uh yeah because i think that you have uh you've uh reinitialized the okay so okay yes if you try uh refreshing the uh refreshing the app and here we see it just faded in really simply um and that's probably the most typical thing now to make it look a little nice for you maybe you want to do like what i like to do is like fade in down so maybe go from 10 pixels up to translate y0 and something to keep in mind this is a very small point of modi but notice how i'm passing translate y directly here for transform values typically in react native you do like you know an array you'll typically do transform with an array and you pass each item i uh i actually changed that uh here you just pass the values directly first i think it's just more intuitive i don't really understand the array syntax and two uh the main reason is that with see now it fades and down the main reason is that um modi actually lets you do something that i haven't ever been able to achieve easily in in react native but that's possible thanks for animated two which is sequences so if you want to have a box that sits at one height and then changes to half you know let's say that something goes from 100 pixels to 50 pixels to 100 to 50. that's typically been very difficult because you need to track the timing of each animation but with modi all you need to do is pass an array and that's uh how it animates so oh wow okay so actually i'm gonna rate it's actually a sequence right right so if you want to make a sequence animation the only thing you need to change is passing an array so i'm gonna try um this is actually one of my less battle tested features so let's see uh if any of it messes up so let's say right right now i have this box uh pretty straightforward and all i want to do is make it go let's say i want it to go up and down a few times let's say like a hundred 0 and then maybe 200 so this should make it go up and down um we might have to refresh it to make that happen um because these are all mount animations so if you want to try refresh and then there we see it goes down back up and down to 200 and that's where it sits that's cool that's really all it takes and if you want to let's say you want to specify this a little bit more um you can either pass primitive values here so like exactly the style values or you can get more customized where instead of you know right now i have 100 as it's translate y i can actually do value 100 which is the equivalent so it'll do the exact same animation but what's cool about this is i can specify different features here so if i want to do for example um notice how this has height and width what i can do don't tell me that you can change actually the spring yeah so i can actually do for this specific sequence i can do type uh say type timing and then only this animation will do a timing one and all the other ones yeah that one didn't spring yeah the last one does the springs or maybe you want to you know maybe you want to delay this step by 500 um you can per step configure any sort of uh see so that one waited up here for a minute and that at zero and then it went back down now the one thing to keep in mind is that this is using the with sequence api of reanimated so there might be some quirks with that another one that i'll show you in a minute is repeat animations so something else i found very difficult with reanimated one was uh looping animations it's you had to do that like clocks and all this very complicated api uh and i just i didn't really find it to be a good experience at all um so with modi all you have to do is pass loop true and something will infinitely uh go back and forth but there are some caveats which i mentioned in the uh in the docs so now that i kind of showed this um example for you know bouncing in and a sequence i think it would be cool to show an example of a loop animation so i'm actually just gonna um i'm gonna delete this maybe i'll put like comment at the bottom i don't really know that what you're supposed to do here for tutorials but just so we don't lose it i'll put this down here so now it doesn't exist and we're gonna lose our box so now i'm just gonna i'm gonna change the color here so we can um easily know that we're doing a new feature of the shape i'm gonna remake the same shape again i have a modi view i'm gonna do style equal styles dot shape so now we have a green green box in here um so now what i'm gonna try to do is fade something in or make something maybe go up and down but have it just infinitely repeat so you know basically we would want something to go from let's say translate y of negative 20 and then we want it to go to say translate y of zero right so typically this would just make something fall down that's that's all it would do in this case it's not gonna actually do it because the from only works on the initial mount so i guess a little hack to that would be if i save this it'll go away and i and it'll come down okay yeah there it goes down so uh there's a there's a feature that's i think is really cool where um you can pass this prop called transition and this is how you can actually edit literally all your stuff right so you can pass you know type you can do um timing or spring yeah it should be giving us a drop down here but i can do timing or spring decay currently isn't working but i do like you know i can do all these things and i have like um you can do a delay or uh you know all the options you would pass for a timing transition um you can you can pass here so i could do like duration you know 5 000 which will make it slower um but again this is only for the initial amount now the the the thing i like the most is you can just pass loop true and i'm gonna just uh you'd either have to refresh it or in this case i'll hide it and then show it it's only the initial amount um oh yeah yeah yeah the duration a little bit too long so i'll probably change this um so the reason i'm hiding and showing it and seeing out now is just looping what's important to note here is um reanimated uses a function called with repeat that's what's used under the hood here for loop true and what that does is you know in css transitions uh or animations you can have a you know uh an animation repeat i think is what it's called and it makes it go back and forth uh this is a little bit different this doesn't actually function function the exact same way what this does is it uses reanimated's with repeat which just goes back to the previous value you were at all that all that means is if you're using loop true you can't change your styles throughout the component's lifecycle it has to be the same when it mounts right so if i were to change this to like uh let's say maybe this like 150 to push it down um it'll go down but then it'll keep going back to where it was before and then if i change this to like let's say 250 it's going to stay at the bottom it's going to start going from 250 to 150 because it just goes back to where it was previously right so the looping animation you just have to make sure that you keep it static like that um and similarly i can just do the same thing if i want i could if i didn't want to go back and forth i could actually set repeat reverse to false and that'll make it start back at where it was so like it'll um refresh here again notice how it's going it's it's kind of oscillating you know going from one spot to the next and back but if you don't want to do that um you would just set the oh and i have to leave true i can just refresh it yeah yeah so here it's it's uh oh it actually is still doing it interesting well maybe i'll have to change that then similarly you could you know do like repeat you know four and then it'll just instead of looping infinitely it'll just do it four times and that stops yeah yeah so doing loops and repeats and things like that i've found have always been a bit of a challenge but with here you just you know pass your value in and it works use someone asked what about use native driver yeah this is the um under the hood we're using reanimated which always uses native driver so you don't have to do that uh yeah it's definitely similar to frame or motion for react native that's that's a big part of the um of the inspiration i'm sure there are reasons for transforms with arrays but um i found this to be a simpler api um and so then another thing that is pretty useful for this is just animating based on state so i think it's a very typical thing i have is let's say you're on a like a netflix style search screen right you're searching for titles and at the bottom of the page you might have like a a loader like a little you know loading indicator that comes on top of the screen and then goes away um i think that with with css transitions this is typically very easy you just say like uh you know if loading's true opacity one and translate y0 and if it's false you push it under the screen and maybe you uh you know you hide it now you can actually use react state in your animations you can all you have to do is um if you pass any values to animate to this to this prop just like frame or motion it will automatically transition so if you were to change height here from or translate y if i just were to change this to um 100 then it'll automatically animate right so you you get this just out of the box everything transitions for you so um you know if you wanted to for example make this a oppressible um yeah and say we want to have some sort of react state here so i could do like uh i can rest here the end press pretty cool um yeah exactly so here you can just toggle it um or set it to true and so then what i could do is if uh let's say if press is true we're gonna make this translate y 100 and otherwise let me get zero and so after that you can just click that and that will change the state and that's all you need right it's a very typical user and it and it doesn't it's also interruptable right it is interruptable yeah that's right that's all thanks to reanimated um someone asked if they can use this with dripsy with a modify higher order component um you should be able to use this with dripsy yeah you can pass any component to modify the one i haven't really perfectly figured out how to get this to work with dripsy exactly um dripsy uses instead of a style prop right dripsy is a component library for styles with react native and instead of using a style crop it uses something called the sx prop it's just um copied from theme ui so what the sx prop does is it lets you use themed values as styles um the problem with using dripsy directly with modi is that you wouldn't really get your themed values so i what i've been doing instead is um dripsy has a hook called use dripsy theme where you can just from the uh dripsy context you can just pass variables so i for now i just recommend using um the use dripsy theme react hook and passing your theme values as variables to uh to intimody he said can you do an example for interpolation um you know what's interesting is there's no real magic going on here with modi's components so you can pass animated values as styles too you can pass animated values you can um you know you can pass plane objects so if you wanted to do some sort of interpolation that actually should be fine right if you wanted to create a shared value with reanimated and pass that through um there is a somewhat of a more compelling use case for just doing that with normal reanimated i think you know i i don't think modi's going to replace every use case of when you want to just directly interact with um with reanimated2 it has some really great hooks like use animated style and such um but i would say for about 90 percent of my use cases when i'm not doing super complex stuff i've found that um that with dripsy or sorry that with that with modi it uh it works well um there is one especially [Music] exciting feature i don't know if uh anyone has seen on twitter that i post about it that is um thanks to um matt perry from framer motion for helping me out with it which is called animate presence this is uh probably my maybe my favorite part of modi i think it's like a bit of a secondary feature in the end but i think it's just it's so cool um you can animate the unmount of components so if it's let's say you destroy a component from the tree you can actually have a specific animation for when that happens um and the second step is let's say uh let's say you want to fade out a component that you've just unmounted you could also wait for that component to unmount and fade out before animating in another one um so those are two things that are i live under the animate presence component that i can show um someone asked again is it running the js thread that uh uh on on native the answer is no right so in ios and android uh this is all running on the native thread thanks for reanimated there are some different versions uh so if you're changing react state it will right so here in this case we're changing pressed um that that is gonna have you know some some interaction on the javascript thread i'm not really an expert on the differences here i think terry would be a great person to ask he gave me a lot of uh recommendations i think his last name is hi deck i don't i don't really know the best uh pronunciation i'll approach there yeah i think he was building the gallery view right yeah he's giving me a lot of good pointers on how to build a performance api for this so uh so far we've covered all the you know just the basics of building a component-based animation um you can also use this hook called use animation state which acts kind of like react state um but for animations and its use case is actually just for variants so i i'll show you an example here um if i can import uh use animation state from modi and what this is for is specifically for creating what's called static variance right so it's kind of you can think of it like when you initialize use state you give it you know just this initial state um or the difference with this is you give it all your initial states right so i i'll create let's say i'll create my animation state and i'm going to call this one let's call this one fade in fade in state and so this f this hook called use animation state it can take it takes one object and you can give a different variance right so the typical variance they're just from into right if you want to do like a just a mount animation you can do from because it types that it seems like from opacity zero and then two opacity one that's autocorrecting there um and so this all you do here is you create this state and then you would just pass uh this there's a state prop on every modi view some type of script issues there and um all you do is pass this in and if you want to just refresh the uh i can take this out this is instead of um yeah here maybe i'll delay it a little bit it might be hard to see when you can delay prop if it passes in there we go uh sometimes it's hard to see when the app first loads so this notice how this uh it has a built-in from and two prop so this is similar to use spring from react spring uh where you can pass a from and a two this will be initial value this is what it'll transition to but what's really cool is you can also create custom variants right so you could uh say something like up like a it's moved up and then i'll read the opacity one but maybe you also want to add like i don't know i'm so let's do a scale this time i feel like i've been very stuck on yeah so can we yeah i think that we can also do a rotate here sure yeah so um you want to toss that in yeah yeah i'll pass it so it's um actually so you know that the the order actually matters so if i'm passing translate and rotate it's going to translate and then rotate but if i'm passing rotate it's going to rotate and it's going to translate based on the rotation initial rotation so if i do here rotate uh have have you seen like the framer motion uh like matt gave a gave a talk at i think versailles or next year's conference and he was actually discussing about those uh things that's interesting and underneath actually also pop motion it's doing the translations first and then uh whatever rotation and yeah yeah i think i actually by accident and also doing the translations first um basically what i'm checking is we can actually just look at the source code that'd be an easy fix if i'm not um basically i'm you know for every style value i just loop through it and there's a special section that checks is this the key of a transform and if so it adds it i think luckily in javascript for whatever reason dictionaries seem to be ordered um so if you do rotate and then translate y it or translate x in this case it should still uh do it in order it's just because there's no array you have to be a little bit more aware of the order in this case oh right yeah it makes sense because yeah it's going to so i think it's like this in the first place so it's starting from zero and it's actually going to but why it's 40 to zero right to have it like uh okay it makes sense cool um and so then what you could do is uh the fade in use animation state um returns this state and so it comes with two values it has a um a current right so you can do fade in state kind of like use ref you can do dot current and this just gives you the current value right so you can read it in all right and it'll be equal to one of the keys so i think if we had dot tsx here give us an autocorrect but um if basically you can make this you can check like um what i typically do is i'll do like an on press that's and you want to change the state so you could do uh if fade in state i mean this is not a very good real world example but if let's say if it were equal to like two then maybe you want to make it big so then we could do fade in state that comes with a transition two function oh just pass it um you can transition between experience okay exactly so you just pass the key of the previous one um and you can similarly read it read it in like this i just want one thing i did yeah yeah yeah sure sure yeah yeah so the one thing i kind of encourage against is just uh the typical thing we do in react which is like restructuring here with current and fade in state um you actually don't want to sorry with a transition too would be that you actually don't want to do this um the only reason is that this this object here is a keeps a stable reference so if you destructure it then your current will not be stable so if you as long as you don't destructure it you can use it like use effect and stuff like that which is pretty useful i think um so just something to keep in mind as a pattern like you technically can but i would just not destructure it yeah and and basically yeah so this i i was playing a lot in the past with the pose uh i'm pretty sure that you're familiar with the react pose it's basically the uh the next step of pop motion and it's actually the predecessor of of framework motion right uh but and and he's doing exactly the same thing right you you have how many keys you would like to have or how many states you would like to have each key is actually an object as you represented here with different different styling properties and you can move from one key to another basically transitioning from a set of properties to another set of properties with with a spring uh animation or maybe a timing animation so this is like really really fantastic and the what i would like to ask you is have you ever considered having this sort of uh this sort of api kind of hidden and make it more declarative like this uh let's say multi it's equal to if it's pressed i'll go up otherwise i'll go from um oh like where you just passed the key directly i think uh framer does something like that where you can say like exit equals a string yeah i mean maybe um i'm pretty open to any changes i guess the the main thing i saw is the animate prop is going to power most of what you do um the benefit of using this use animation state is just that like if you want to do that you could technically just use those conditionals in animate um the one thing i like about separating them is it's very clear what you're getting so in the case of uh use animation state notice how we set these three variants from two and up or as examples um these are static right so if you change these it will not update if you've used react spring you know that um any values you pass to react spring will then update the component these have to be known ahead of time it is more performant when you do that because uh this transition to function actually just mutates a shared value directly it doesn't update any react state um so it is you know it stays more on the native side so if you know your variance ahead of time this is what you'd use um but yeah i mean if there's a you know i i could definitely see a a spring set of variants or a string variant being being used like that if i uh if i saw a good use case for it yeah this this also for for example reminds me of the react native animatable api yeah that was actually a big inspiration at first yeah oh that's great yeah yeah i'll bingo bladder to yeah the first uh i actually if anyone's i mean if anyone's interested in getting my like unfiltered thoughts on what led to modi i actually wrote an issue on dripsy's repository um basically saying i want an animation library that's similar to animatable but they use this react native reanimated under the hood and that's good on web and and uh i really liked their api um but i think you know with nuke uh tech like reanimate under the hood it uh there's a lot more on the unlocked um should i get rid of animatable ah i wouldn't you don't have to do that just uh i i would adopt this incrementally you know this is still this isn't like super battle tested yet um it's very new i just installed this into my actual app a few days ago it's been working well and i've been testing on web i even have um a walk through on the docks for using it with server-side rendering that's a big kind of requirement for the libraries i built so dripsy also supports responsive styles with server side rendering and it's the only react native library that does so so uh that was that was pretty important for me to get modi to work with server-side rendering as well especially because framer has the same uh ability yeah so can you can you also like uh show us an example with the animate presence which i'm pretty sure that it's like one-on-one with with frame or motion right because it's the same naming stuff naming yeah so anime presence is uh a framer motion function or component i should say that lets you show and hide things just based on their react state right so just so if it's mounted or not you don't have to spade anything out and then check if it's completed so all you have to do to use animate presence i might clear this out or just make a new component yeah sure um is i'm going to import animate presence from modi so this is currently just a literal re-export from framer right so this is on par with with framer but there are a few things that aren't the exact same so i'm re-exporting it for modi instead of making people download framer motion um and matt from framer gave me some suggestions on how to you know use anime presence in a headless way um so i'm just gonna like i guess export this and i'll make it a whole new component um yeah i think you you need to name it yeah let's call it like uh presence okay so now i'm gonna build uh let's just start by returning the container that's called so now we're just going to get this blank screen again i assume i have to refresh this happens sometimes with it okay um cool so now we got this blank screen uh and i'm going to add the shape again shape um i'll give this a new color let's this time let's see so it's a little more clear that we're working on a different feature so i'm going to give this one like a let's do like a purple okay um now we have this purple box and what i'm gonna do is um hide it and it's gonna uh animate in and out when it's shown or hidden um i'm just gonna change these colors around okay so you're in the styles okay cool yeah it's it's uh yeah i'm still new to this live show extension i i don't know how to to here so yeah okay so i'm editing the styles here all right so now we got something that doesn't look terrible um so what i'm gonna do is i'm just to create a state i'm just going to say shown set shown and this is going to be a normal react state um like nothing too crazy and what we're going to do is we're just going to show and hide this component so we're going to have something that you press and so here you can just see like if it's shown you'll see this box otherwise you won't right so when it'll be hidden so let's just initialize is true you might need to refresh that so you should next work okay yeah i guess okay so now it starts out as true which is what we want um so i'm gonna actually change the container like we did before to oppressible and let's just say let's just have like a toggle function is going to get clicked and when we call toggle we're just going to um just do the opposite right um people have a few different ways of doing this but this just takes the initial state and switches it so i'm going to do like on-press right now there's no anime presence or anything like that right this is what you typically see in an app so if you try clicking the screen a few times it should just show and hide the box uh nope that's weird it's nothing oops what about this one but wait wait a minute i'm missing something here okay maybe try to an alert and toggle so make sure it's been called it should be right i mean if i'm changing it someone mentioned how do you handle responsiveness on react native um that's what that's what i use dripsy for so dripsy lets you do different sizes on different screen sizes and it also so it's all based on break points and it also exports a function called use breakpoint index so what you can do is call this react hook and you pass it an array of items so let's say on a small screen you wanted a certain value and on a big screen you want another let's say you wanted like a height 100 than 200 than 300 based on the breakpoints all you do is pass use breakpoint index in array with those values and then it'll return to you the right value depending on the screen size so you could just use dripsy's uh hook for that and yeah i'll someone asked me to elaborate on the unmount animations i'll do that um right now once i uh once i get this reactable it work is this one actually working because it seems that you haven't rendered it so that's why oh you know why this is not working uh because we need motive instead right uh it still should should be yeah yeah it doesn't matter so what happens if you just comment this all out does it go away like is this is this working properly okay yeah so it's shown through so if i'm because the onpress handler is not actually taken into account okay so if i hit here refresh yeah so it's not pressable hello that's imported let's see if i just try and alert maybe [Music] i think that's i mean we could try touchable opacity i guess but i'm surprised this is it was working before too maybe uh um oops i don't know if the styles will apply to it um yeah this is still not working let me actually try it on on my actual device here because i'm on the same network yeah so meanwhile this this is working actually i saw some comments about my theme and my phone so the theme it's actually called i do like the font yeah i think i have uh oh i actually switched from using the cursive font because my theme didn't support it so i'm actually curious to see what the one you're using is it's called pale pale knight uh the theme and actually it if you have operator mono's font it's going to automatically use it and the phone it's uh this one which is a fake font uh so i highly recommend you to actually buy it this one it's if you'd like to see it how it's actually working on your machine just go ahead grab this uh but this one operator mona it's actually 200 so if you feel like it's worth it for worth your money just go ahead here i'll share actually both links how to do it so i think that i need to do it like this yes restarting the project that might be a good idea maybe if you if you uh cancel the expo and start that up again it might work oh yeah yeah totally so on my device it's actually working uh okay let me yeah oh that would be a bomber cool so i really know what to name this right here um you know you could name it shown but i think it's not i like renaming the variable is the same thing in a different scope um okay someone asks you can use you can use drips in a bear project uh dripsy actually i don't think has any cool i don't think it has any expo dependencies um it should work fine in any in any app um oh cool wow the touch oh yeah the opacity is intense um let's see if i switch this back to impressible whatever yeah i think touchable opacities are getting a little out of style okay cool so this is what you'd expect or this is what a typical component looks like in react and react native and uh i don't i don't think this looks very good right like when you click it it's just uh it's not a very elegant experience and this is very typical right it's so common in react to say like some condition and and a component or you know depending on how you work your if statements this is very typical so what i want to do is i want to animate the presence of this component and so all i have to do is i'm going to wrap it with this animate presence component which is exists thanks to framer motion um it's very easy to for me to integrate and so i'm gonna wrap it and so far nothing's gonna change right if we uh if you keep clicking it um nothing has changed um but what i'm gonna do now is i'm gonna let's say have just a simple fade in state opacity zero um and let's give it like a it'll animate in that opacity one but again as of now this is just a fading component so if you want to try hiding and showing it again it'll uh um yeah that sometimes we need to come in down kind of like uh we're stuck on the vertical translations today um this will make it kind of kind of dropping down like that um so the missing piece is we kind of want or you know i could also make it like scale but i will do that with the other one the missing piece is when you click it notice how when it hides just disappears it's very jarring it's not it's not a very nice experience but what's cool is once you wrap this with anime presence all you have to do is uh give it an exit prop and let's say um is there anything special you'd want to put here i could be like let's do another fade out and maybe like like a scale of like three like like just explode out okay so now when you click that refresh it yeah yeah oh oh yes we're running the same problem oh yeah but no no but but i think that the so just just bring it maybe like 1.5 yeah yeah i think it's uh all right yeah the animations i chose are a bit off but um so like because of my simulator it might be yeah um or if we just maybe use scale in all of them as opposed to switching the different translate values um so let me see i have an example of this on the readme i think i i just use scale in all of them so i can try pasting this in if i do so you're saying that if you okay yeah so basically you're saying that if you don't have the the property on the old uh the old state is not right i'm wondering if changing the translate or this transform values from from to animate to exit might have some sort of uh yeah yeah yeah so here we see a little more consistency and it notice how this the scale on the and the entrance you can't notice as much um you might maybe if you pass for example like uh yeah so to play with this a little bit but if i pass like a transition let's see if i make this timing if that changes anything um it seems like the opacity and the scale are having a little bit of a conflict um like i don't know if it seems like it's only doing one on the entrance um but i think that might be some sort of reanimated bug um like it happens i don't know if it's just my streaming some of the times it looks like it's not fitting in uh but that's kind of the idea right if you all you need to do is uh conditionally render something and it'll animate in and out based on that um just just the same as uh as framer motion so the last thing is what if you have two different elements right and you want um one of them to hide before you show the other um and so this is what framer motion would call exit before enter um so on it's just a prop on the animate presence so here i could that's an exit before enter prop and at the moment this won't change anything because there's only one item but what you would want to do is have two children instead of just this one or any number of children under anime presence but only one should be present at a time so if we want we could even extract this into its own component and then maybe give a different background color for the two different boxes to show how it looks yeah let me let me do it while sure so if he's gonna make a component called like shape or something like that or box um what i'm gonna do here is i'm gonna have two different boxes so i'm gonna have a box with a color let's call it like background color here again the purple so i'll keep the cyan color and i'll make another one that's like let's see what color would pair well with this maybe i'll make uh okay oh uh one thing to keep in mind here is that color uh just just one small detail um i'm using these values here if you ever want to transition colors in here you need to use hex values or rg bi you can't pass these strings um but since they're not being animated it's fine um so i'm gonna take this out and then we're gonna have like one that's shown and another one that uh renders when it's not shown the wrong variable name but um this is fine for now just for illustration so there's one missing piece here right so we have animate presence i added exit before enter and we have multiple children um but there's so we should see i guess these two we're probably only seeing one box right now let me pull up the right so we only see one of them but it's not it's not animating in and out right as we'd expect none of it's animating and the reason is because animate presence uses the react key prop to know which component is which i need to pass every every direct child needs to have a unique key here so i'm just this is just for illustration i'm just going to use the color values as the keys uh but this is very similar to when you're using a list or anything like that and react you need to pass stable unique keys for the components that don't change so don't use like index or anything like that and now boom animates in and out yeah and all you have to do is add exit before enter conditionally render things and pass a key component or a key uh the key prop um i i think the key just isn't as a side point i think the key could really use more content uh just discussing what it is it's super important sometimes you have components that are controlled that won't re-render when you need them to um and changing the key will work uh another example is if you ever use a flat list with responsive design meaning you have a flat list with columns so you have like five columns and then you shrink the screen you want oh sorry and you wanna have to have two columns as uh screen shrinks uh flat list don't let you change the number of columns on the fly so what you can do is you can pass a key to it which corresponds to the number of columns so that it'll it'll re-render fully on the different uh different set of columns so i think you know just keep the key column uh the key prop in mind and don't forget it when you want an exit before enter animation yeah exactly it's just forcing re-render basically yeah yeah and and i i think that however it's have actually worked previously with uh either react pose actually react pose in general but also framework motion nowadays uh knows that there used to be like a transition api that's actually working in the same way uh but you the key it's really important because you'll let know the animate presence know like what exactly uh should animate from two like which one will disappear on the screen uh yeah it's it's a way to keep track of of the of the elements and yeah that you're also hooking to them right because exactly presence will hook into them and they'll know when they'll be in in will be unmounted yeah it's a it's really impressive work from framer i have to say i don't actually know how it works under the hood um i'm just using their use presence hook and what i do is reanimated uh has the new version reanimated i can actually show this now this is a good example of another uh prop i could display random it has a callback for every animation which is really a game changer uh i don't think it's talked about that much as one of the best features but i think it's it's super cool that when an animation completes you can get you can get some sort of feedback as opposed to like having to time it and make sure you get it right especially for cancelable animations um so one one example is um let's say you well for gestures it's pretty easy but in this case you know building the exit before enter situation all i had to do for the unmount animation is use framer motion's use presence hook and it returns a function that you call once it's safe to unmount so what i did is uh since i looped through each style value that you to the animate prop once the last one is completed i call safe to unmount from framer motion and that's what what's that's what triggers the unmount um so it's uh it was really straightforward and without reanimated2's callback functions for animations it it would not have been possible so the uh one pretty useful hook or i guess prop i should say here uh is this one called on did animate all right so this is in classic react fashion what does it look like when you uh pass a prop function of some action that occurred you know what we call a callback so on here you can just pass an onbit animate and it's a function that has two to three arguments depending on your usage typically just two and i would ignore the third so one is just a style prop um and then the other one is finished which is a boolean that reanimated gives us and this is the key of the style right so what i'm going to do is i'm just going to log these out do you it's a way for you to pull your logs up yeah sure or or i could print them but much easier yeah okay i'm going to i'm just going to do console log let's uh let's put the color here so it's it's clear which which component it was and then we're gonna put the style prop sometimes i like to put them in an object spell prop and finished so what this does is once something one of your enemy when one of your animations is completed it'll tell you which one it was right so here we have um you if you can you want to try clicking it it'll it should give you an order right so here you can see which color which component was it which component or which style prop just finished animating and did it finish um it's my understanding that the finished is related to if it's an interrupted animation maybe like you could try clicking a bunch of times i don't know if that'll ever come up false yeah i think this one is is not going to be yeah so this this is just basically it seems that the finish is basically like you don't actually need to use it um but it'll give you an idea of what just happened now there is a third argument called value but there's basically you're basically never going to use this because uh reanimated i don't really understand how how they decide when to give this or not but basically when you do a with repeat um i think that's the one when you do a repeat animation they or maybe it's a sequence i think it's a sequence in either a repeater sequence i'd have to check they give you um the value that you just animated to uh so when you do with spring or with timing you don't get the value that you just went to you just get finished but if you do a sequence or spring i i i can check that in the docs um in that case you do actually get this this value so it's only in a very unique circumstance that it would ever tell you what this value is but i have it there as and it's it can be undefined um so that's just something to keep in mind in case you're ever doing like a really intricate um and one but yeah that'll that'll be in the docs um when you can when you can use that but in general i'd just use this if you ever want to know like when something just uh just animated and which one it is yeah actually actually yeah it really reminds me because in if you're using like animated api from react native you kind of always need to know the value and you don't have access directly to the value you need to attach some event listeners and whatever but but we reanimate it to when i first saw it a couple of months ago actually many months ago and you could actually access the value directly because it's just a number i was like blown away yeah it's it's it's yeah it's uh yeah it's it's on a different level uh it's it's totally different yeah so yeah i've still been trying to uh i think uh will i think is will and johnny who are doing a podcast on reanimated2 and they were talking about an eslint plug-in uh for knowing when you should be using a worklet versus not and i thought that was an incredible idea i really hope they made that um i think it was william was saying he wanted to make it uh because i still to this day i i think that this is one difficulty with reanimated that i keep running into i don't know if anyone hasn't used it yet basically you have to write the word worklet at the top of a function to run it on the ui thread is my understanding and it can be confusing like i've had times there's currently one function that doesn't work properly in uh modi which is strictly due to a worklet issue where i think it's for sequences if you want to pass a custom configuration for each step it doesn't fully work because the object i'm constructing is either on the native or javascript thread when it shouldn't be and reanimated complains saying you're trying to merge an object from the native thread with one in the javascript thread um so those i think are some issues they still kind of have to iron out from a developer experience perspective that i'm sure they will once they get the core stuff fixed um but that's that's something i'm pretty excited to see fixed it's just i think for early developers it'll be pretty confusing like what the worklet is so that's part of the reason i think something like modi could be useful if you're a newer developers you know you're obviously giving some trade off with not having these shared values um that you can use whenever you want and have more control over but for like 90 percent of the use cases in a real app this is probably sufficient i i have a couple of questions regarding this uh so because it's it's reanimated though i can pass here like 100 with right yeah we've been we've been really respecting the rules of transitions by using you know opacity and scale and all these ones i can also add here color oh but actually we are actually animating uh these yes yeah it's really great yeah yeah and that's all again it's just all different and yeah because uh animating with and height like whoever like from from whoever it's listening to us now it's uh as it is in in in css world uh you can only animate uh without triggering paints in uh using using transforms and opacity yeah but the same applies to react native so you can use native driver only for transforms and opacities but with animated two you can actually do everything uh negatively so everything will run on on the ui thread so yeah one example of this that i think worth mentioning that if you would like to modify a wii from 100 to 200 using animated api from the react native you cannot do it by using native driver it's going to complain uh saying that native driver will only work for transforms and opacities so this is like really important and it's it's really a huge step forward achieving really good animations because uh it's just a number it's just a number and by the way this is not possible in css neither so like uh animating with uh is is going to uh to have some paints on on the fly so uh i think that matt also uh had a discussion i think uh with uh max trevor i think yeah and also uh at this next year's conference where he actually discussed about the sub pixel um uh which is basically the transform and opacity and while you have this sub fixing so pixels so it's it's really important to keep in mind that uh in in reanimated2 especially in moti now uh since it's using reanimated to passing a different width to animate it's not going to to have any uh performance uh impacts on on your application yeah i think maybe it was from matt i forget these guys are really just brilliant does anyone hear me hearing me or i'm yeah i can hear you alone here um are you about it i can't hear you back can we animate height by listening to scroll with modi uh yeah i mean i would assume so you could pro can you guys comment if you can still hear me on here i'm not sure if it's just i'm not sure if it's my mic or um i can hear you just fine i'm not sure how my sound is i think that i i cannot hear you anyhow so i don't know what happened um okay they uh in the meantime i will um running low on computer battery um i gotta go grab my charger in a sec um something i think would be cool to show someone asked if i can animate height by listening to scroll um can definitely do that i i would say you can also do that with reanimated so it's not like a huge j like you can pass animated values to modi but you can also do the same with an animated view so it might not be like the most incredible part of it but something that i think is really cool for animating height is uh collapsible like elements right so maybe you have a classic one is like a uh what would be like an accordion view i think or some sort of you know faq section or something like that where you have maybe like a you know set of sections and then some under content when you click the item it expands uh this has been terrible for me to do in general right i really have not had an enjoyable experience building this kind of uh feature it's always really finicky to do you know like you were just mentioning high performance transitions for heights and widths um but now that's actually pretty possible with modi so i could show an example of of what that looks like also can you can you hear me again now yeah yeah yeah i have those headphones and they they have connected to my phone here sorry about that no worries cool so i'm gonna if you want to go back to the top of this i'm gonna um oh also oh you know what before doing this uh toggle this accordion uh could you could you uh give us an example about an uh color animation is that oh sure yeah i have to say this is a something i'm not like super confident in so let's see how it goes um i'm also my roommate's about to give me my my laptop charger because actually you know you know what you can we can show it yeah um the one thing to keep in mind when you're animating color is to like i said before use hex values don't pass like red or blue it won't work is the first thing and the other one is to use timing transitions so spring transitions i've found with colors make things look weird uh because it like flickers between the different colors in a spring whereas what you really want is a timing from one to the other um so yeah let's see what happens here when you pass some sort of um set of colors to it i'll just modify the box yeah sure so it's going to be from here and to and i'll not animate the exit and the animation is okay i'll also remove this one here and i'll not animate the i'm just plugging in my laptop yeah it's okay don't worry this this live stream is going to be although yeah i mean it's a yolo's live stream so don't worry about it uh yeah uh let's look at the comments really quick while you're setting this up yeah yeah sure so some people have mentioned a few questions about dripsy i can respond to let me just scroll through to make sure i see all these so i don't really know what you mean by making the app look the same on all devices regardless of dpi um what do you what do you mean exactly by that it's my understanding that the app components will just render based on screen size right so with dripsy at least all you say is like if if you're in the first break point you show this if you're in the second one you show this if you you know optionally so for example if you look up theme ui basically for dripsy doesn't have very extensive docks i mostly just point to theme ui because it's it's effectively just react native this version of theme ui but they just use arrays for responsive design um i i find that to be a really good um api i i do i have kind of changed my perspective but sometimes you want to render responsive design not based on screen width but based on a container width i think that in an ideal world that would be the best practice so the way dripsy does it is like i guess maybe not perfect right maybe it should be um you know maybe maybe it should be like based on container width but this breaks server-side rendering and it's just a lot harder to build so they're like a few use cases maybe like one out of 200 in an app well uh where i will measure a container and then say like you know give fixed widths to items that are children of it or things like that but in general i i avoid doing that um components look bigger on some android devices to be honest i don't know i'm not sure if this is a i might have to look into that i i really don't um i don't really code a lot for android also like i i haven't done in a while i've mostly been focused on web these days um but is this released uh it's not not technically yet um but you could install it i mean if you look at the installation instructions at the beginning and i'm kind of hesitant i know what it means once you release an open source project that people expect a lot but uh if you want you can i can comment on here for the people that are uh that are watching who want to beta test it um i'll give the link to the work in progress docs here so if you guys want to try that in your app um this url i just sent should be this doesn't actually have a domain yet um but that should work uh and try it out hopefully it works and if there any problems with it just try to bear with me because it's still quite early oh this this is like really good yeah i i i really like this this idea of having um this is really easy i mean yeah it's it's incredible i mean it's incredible because it's also on the native thread so could you try something uh i haven't actually done this with colors could you try adding loop true and see what happens in the transition it should work right i mean yeah then you'll just have to refresh it um yes if you want to have just an oscillating style like this you know i something else i thought this was really exciting for is uh skeleton loaders right so i think gradient animation isn't something that's really possible um but with a skeleton loader what you could do as like a kind of a hack is you have just like a gray background you know like a like placeholder content you have sort of a gray element and then you could create a off-grade gradient and have a container that has overflow hidden and then you just move the gradient set back and forth and for that all you need to do is like translate x from negative 50 to 50 and just set loop true and there you have a skeleton loader you don't have to set up timing you don't just set up callback functions for animations or any of that you just set uh set that to true so gradients uh gradients would not technically work to animate but there are hacks for this so it's the same thing in css you can't actually animate a background image uh which is the css property that uses for gradients but what you can do and what i've done in the past is there are a bunch of different ways you can animate gradients linearly so you could you can superimpose a number of gradients on top of each other and have so for example let's say you want like a red to a blue you could create two different gradients a red to transparent and then a transparent to blue and then you just hide and show you know you superimpose a bunch of them and then you just use opacity to show and hide different ones and it looks as though the gradient is animated so that's kind of what you have to do when you want to animate gradients is just use opacity and change that and it gives the illusion of a gradient animating but actually this would be a great component idea for someone to extract is like a modi animated gradient where you just pass it different colors and it creates the multiple layers for you um i'm really excited to see what people build on top of this um because it seems like there's just so many you know like building a collapsible height thing would be so simple as a library so many things like that um yes i'm gonna ask about the skeleton i haven't actually made an example yet but that's one of those one of the examples i want to put on modi specifically because i've i've still i don't have a good skeleton loader in my app um that i've ever been that happy with and i think it'll be pretty easy to do now there are a lot of ones to build on um so i'll be trying to build that this is incredible man this is like oh i i mean i mean passing an array it's even like uh oh something i forgot to mention here uh uh sequences don't work with loop uh renomated doesn't allow with repeat with to be go with with sequence that's in the docs but that's probably going to comment out loop here but yeah it's uh the array syntax is something that kind of changed my life or design when i was doing dripsy because in dripsy again this is something that i don't want to confuse people with with dripsy you pass an array and it gives you a different style at a different break point and with modi you pass an array and it gives you a sequence i think that this simple approach to design is just very intuitive everyone can unders and actually i think i took this from framer i think framer has or maybe rack spring but i believe his framer they call it keyframes i think this is you know because of css keyframes and then this is the closest thing that we've gotten to css keyframes in react native yeah i think i think that's also like something really powerful in in regnative animatable because you can you can actually pass frames right i mean yeah i've used that a lot the from and two values are great and and you can also specify like in percentage so it's like it's it's incredible i mean uh yeah but it kind of makes sense because uh yeah if you if you pass a sequence why you would like to loop it somehow but yeah right yeah it is that is an unfortunate shortcoming i mean i would love for them to add that feature and reanimated so that i could combine with sequence and with repeat um i haven't had a question i think twice now is there a way to animate the layout when any component unmounts so i assume what that means are you talking about shared layout right between two elements i think that's a common feature used in framer that unfortunately is not possible actually if you go to my twitter i think on the latest post of modi somewhere deep in there there are a lot of responses and i was responding to someone who asked a similar question and matt from framer actually chimed in he says that uh it's not possible to do the same thing in react native quite yet um i think i don't know if he was discussing that just layout animations in general apparently because they um they use the dom in the browser to measure and there's no real way around that so you you would see a flicker uh to be honest this is not my area of expertise i would love to add that feature it's kind of like i have no idea how to do animate presents before like two weeks ago and then they walked me through it and i added it in an afternoon i think that's kind of the way this goes so if someone can figure that out uh that would be awesome i think the closest thing for shared element transitions and i know you've done a bunch of videos on that which i've which i've loved are the what's it called react native shared elements um yeah by hein great great library uh api server is a little bit complex if you're not using the navigation one but um very good low level library uh but as for just normal layout animations it seems like that's not something we could um do right now but yeah i would i would love for that to be to be solved yeah i think that you you can you can actually use the layout animation anyhow like it so i i think the question itself was if you if you have like three different elements on the screen and you suddenly remove the the one from the middle are the other two uh going to animate and and uh uh fill up the the empty space in between it's i think this was the the question uh and and i think that this is not related to animated presence anyhow uh i mean on react native side so yeah um okay so there are a few other examples we could go into i don't know if there's anything in particular people would want to see um i have it for example are we running this one how long we've been doing here i've been out for a minute it's been a while now is anyone still watching oh one and a half hours i know doesn't i don't think it's telling me how long the video's been going yeah i'm actually running it on my device here so so well yeah i think it's one and a half hours or so oh wow anyone's still on here with us cool uh please don't forget about the accordion um yeah okay i guess we could close out with that yeah if you have uh if you have time here um all right so i could just make that if you want to put together a new component i'm going to look at the example i have for it um let me actually remove everything sure but not the styles actually you know what i'll do the same thing as you did and maybe at the end i'll just share the the gist so i'll do here export default app so uh while he's doing that i'll kind of explain what i'm gonna do i think i took this from react spring they have a such a good example someone in their docs of this hook called use measure um and then there's a react native community library called hook react native hooks or something like that and they have an on layout hook so i'm just going to make that on here it's super simple um where we're going to keep a component's layout in the state so i don't know if it's a i guess we can make it like an accordion item component and then we can render a bunch of those and each one of them will have its own height that that animates um we don't need to like literally make an accordion here but we can just show you know what what are the kind of core features so typically an accordion has two items it has you know kind of an element has a it's heading and the expanded content so uh i can just make these really quick um let's say we're gonna have like it's a normal view this is going to contain all of it and then let's just make another view for the heading and and here we'll have a text with like some sort of title um later and then um below this we're going to have another view that's going to be the collapsible one so this is going to be a modi view right so this right here is um i'm going to i guess i'll show it not animated first and then we can change that so this right here is gonna once we save it you'll see that this is gonna be the bottom content and this is gonna be the header so the other thing i'm going to do is make this hook called um it's called use layout this is going to measure the content inside of the collapsed item right so here we have this view is gonna be the collapsed item this is gonna be the container of the collapsed item and what we're gonna do is the container the collapsed item is gonna start at height zero and then i'm gonna measure the child and we're then gonna when it opens apply that height to the parent so you'll see what i mean here in a second um let's start with uh you could call it height let's just say layout so we can if you want to change width you can do the same thing so layout set layout have a uh react state here that i think we've been doing react dot so far with that syntax we're gonna have just a height zero you could also have a width here here if you want but in this example just keep it to height and then we have a function called on layout and on layout is just a prop that gets passed to view right so here i'm creating this custom hook and it's going to return on layout and then in my actual accordion component um i'm going to call i'm going to get access to this online function that's currently empty and i'll pass this to the child view so if you want maybe i can yeah we'll just look like that so i'm going to go to the docs really quick and just see what the arguments are for on layout um oh it's event even natively yeah right okay even native event there are just instructions didn't they uh i'll keep it on the structure it's just clear it says event.net or event and then i'll do set layout event okay cool so what this does is you know i'm sure you guys have seen this a lot of videos once this mounts and it has size it's going to update the state and so um let's see that i just put some do we we have a description here okay cool so i'm gonna put a description here uh if you want to fill those in and would you like me to render all of them uh yeah we can do that maybe oh you want to put that in the app um so i'll keep the my screen is down here i don't know where you guys are scroll to um yeah so you know this part is all pretty straightforward um if you've if you've used rack before um and i'll just address this question while you're doing it like layout animation yeah unfortunately i don't have any layout animation for react native this is something i would love to get done it seems like the best thing you could do at the time is i guess you have two options in native you could use the transition api from reanimated which is like kind of experimental they don't even have it on their docs anymore so i don't know if they want to maintain it or you can i guess use the layout animation api uh you're just not gonna get a consistent experience across web and mobile so i if anyone can think of a good way to just consolidate maybe like frame or motions layout with layout animation from native that'd be cool but unfortunately there's there's really no cross-platform way i know of right now um all right so i'm just gonna give this like a a quick uh style improvement so i guess we can um let me go down to the styles i'll create understanding this is the header right right so we have that okay i'll make a style for you here i'm going to just style this this item so let's call this movie dynamic style because the height is going to be layout here but this is the container for the item that's going to expand and the height is going to come from the layout um i guess the one missing pieces we want to know if it's expanded or not so we're probably going to have a second piece of is this item open or not open set is open use reducer can sometimes be better for this if you're just toggling but you can just um pass it a function that switches um so what i'm going to do here is the height of this if it's closed is going to be zero i'll just say if it's open sometimes don't like having tern areas in the style here but and if it's closed it's zero um so in this accordion item we have here's a header section of where the title is here's the item that expands and what we're going to do is the height is going to be zero if it's not expanded and if it is expanded it's just going to be the height the height of its of its child so that's that's all we have to to start oh oh this is looking beautiful looking good i like it all right and i'm just gonna add a um let me do this impressed with this uh feature of the escort stuff it's a bit thick but it's actually george okay a little bit of styling for the item too so we can separate these let's keep going to border with oh this is like really nice i mean the uh the sharing the live live sharing it's it's it's incredible yeah um our id title is not uh oh you probably don't have that font loaded in um the georgia font oh no no no no [Music] no it's awful anyhow so i like the mono one that you put in earlier they are what was that the middle of the floor yeah it's the default so the default one was facing this looks cool um all right that'll do for now so let's uh let's just add a you know pressable um as so i'm going to change this right now the header is a the title section is a view so let's just change this to a pressable um classic and when you want to toggle it just let's say i don't know if you want to make the whole thing oppressible because maybe let's just leave it at the header and then we'll just do like on toggle anything we did before and we'll just when you click this it should just um i don't know if that's saved we'll see oh the only thing that's missing which i'm actually not sure why this isn't this should be showing now i think actually um is the description is there any i'm trying to think of why the description isn't showing let's see if i just take out the style because i don't have overflow hints i would expect it still show i actually took out the height styling here and the description still doesn't show oh it does there okay cool um so then so i'll say the height it's gonna be if it's open let me get the description uh if it's open we'll do layout about height and otherwise we'll do zero so we want it to be collapsed right now i haven't made it a motiv or anything like that we'll just leave it as uh oh actually no yeah yeah sorry about it that's cool yeah you can perfect okay so let's see just clicking it expand um oh yeah okay yeah this is what we would expect to happen okay so that's good so the missing piece now this is what i thought before is to add overflow in to the title container now what we see is this so you want to try uh clicking on on one of them and seeing if this expands uh i need maybe to refresh it nope maybe we have the same issue oh yeah it's on toggle being called i don't know let me check it on my device here yeah from time to time i don't know why the the keyboard is not working properly yeah yeah but he's not working here on on the simulator what something that could be cool for next if you do this again is uh you can put out the tunnel link so then people can actually have their phone open right now on expo and using this exact app uh you can put that in the description i'll actually do it now if you just hit d and then uh it should give you a tunnel yeah let me actually move these here here and you're saying to do it download right [Music] looks at the video we'll probably be a few seconds behind so we'll see what we're making right before it okay and i've copied it do we still get nothing if you uh if you click it nope i can try putting like an alert in there or something and see if that maybe i'll it's it's almost there on my on my device but okay i'll just do that something that's really cool about expo the ability to just uh do a tunnel to everyone is it's pretty cool um yeah i'm not working on my real device either someone asked how you can install iphone emulator on windows i actually don't think this is possible yeah interestingly you can run an iphone simulator on xbox snack through a browser but um i don't think you guys cannot do you guys could turn that off if you could shake your phone and turn off remote debugging that would is there a way to disable that that's going to slow down yeah i i have a pretty good internet connection actually but anyhow so martinez okay nice he is really nice to see a lot of users yeah but yeah just please stop stop debugging it uh but anyhow um okay so do you want to try just running putting an alert maybe there yeah so so this one is working right now okay yeah it's suppressing uh does it look like i can change it oh i put a broken console.l here yeah if you if you put a log in here does it does it um nope we're having trouble with the with the uh pressables i'm gonna try this on my phone does anyone else see it okay so it seems like other people are pressing it and it's yeah yeah it's it's pressable now as well uh and i think that this component uh with yeah anyhow because this one this yeah we try logging in i'm gonna try and see what happens if we uh yeah we can put it there oh but i've i've just canceled logged it so it was working so okay so there we go oh so the height isn't we're getting a zero height interesting oh but you know why because you've set it to the right height zero right so indeed this one is not going to happen right that's interesting why aren't we doing this way this is because the overflow hidden is not going to work right right that's right so then we yeah the problem the problem is we're still the same so now we have it right and oh we can uh really what we need to do is we need to measure the child and let it fully expand without preventing the parent from actually being height zero now i guess one solution which kind of ruins the point of this is we could give a you know fixed height to the child but then that that kind of defeats the purpose because really we want is a dynamically sized but actually you know what yeah because we have this example from react spring where they measure the child and then pass that height to the parent um but i guess that i think that we can move we i think that we can move this style here uh like this but instead it's going to be the height of the header let's harcode this 60. someone said use layout effect okay yeah and we should yeah you could try setting it to auto the thing is we want it to be zero when it's collapsed so we have the parent the parents what should be animating and what we really i mean we could try physician absolute um for the child that's a bit ugly but let's say that we let's say that we had the parent at height 0 and then the child at position absolute with height auto that if we have left and right as zero then it might ignore its parent's height and just go beyond it and that made the child involved position it absolutely is going to be relative to its parent right right well its height also being i think the height might ignore the pair someone said why not make the child invisible and then make the container expand oh yeah you can mix oh oh oh oh yeah wait what if we just conditionally render instead of it giving it a height zero or opacity uh well i think if we um if we can conditionally render the child and then but you you need this on layout right right so what i would say is it's about this one so if we for the on layout um what we should do is uh transform sk no we don't need the skill what we need to do is measure an element whose parent has a height initially of zero because we want it to if we could have fixed heights this would be really easy the problem is we need to measure the child which so what we could do for example is hide it and then show it um problem with that is we will get an animation because we need to know what value to animate to um i don't think you can animate auto with reanimated um now what's interesting i i actually had an example of this in the docs but it uses fixed heights um let's see what we got here okay there's one example i can think of potentially that's a hack which is we this would maybe even be its own abstraction but we would um we would absolute position something and give it height auto and then uh its child would be would should expand beyond the content but it might be a bit uh elaborate to just i can try and figure this out um afterward or something also we could try to piece this together yeah you might have to do dot height because i'm initializing that yeah that's an interesting idea but the thing is i start a zero so it'll never be true initially i think the problem is that before calling on layout it'll be set to zero so that this will never actually on its initial render uh trigger so if you refresh this won't um yeah i totally understand um let's see it's an interesting challenge to do live so i'm rendering outside of the of the view here right oh but wait and if it's open i like to do it like this otherwise it's zero right cool yeah can you hear me that's smart okay yeah i can hear you oh i cannot hear you can hear me okay all right well in the meantime while he gets reconnected with me i'll finish this off by seeing if i can make this animated so basically it looks like what you did is you just made a clone component one of them is measures uh that's a smart way of doing this so what i'm gonna do is turn this one this is the one that we want to expand right um i think that's right so what i'm gonna do is call this a modi view and change this to enemies see what happens here here it's not loving that i think it's because it's re-measuring as it is it re-measuring as it changes i wonder if you would need to have like a like a only layout on the first time oh but i think that cannot pass like this right yeah maybe pass this as a style and again you should be able to possible to just yeah you don't actually need a from value it'll it'll default to the animate value if you don't give one but um we can try this okay so it oh but you know what let's do a transition it's type right yeah type looks at the overflow still a bit yeah it's it does have some interesting flickers oh you know what uh because because the text it's actually wow that's really all right so is there some sort of text wrapping issue going on yeah exactly so can we pass what do you want to pass oh but to know oh it's the text wrap is that um yes yeah you know i'm not this is an interesting one well i'll have to see if there's a solution for this once this is out i mean people can technically download it into their projects now yeah you you need to make it absolute actually yeah there's no other ways i know right that's what i would think should work um and you just made the the top zero and the left and right zero and then measure it as it grows cool well this one was a difficult one to end on but um i think i think someone will be able to figure this out and and send it my way yeah thank you so much francesco for joining and and show us moti i mean i'll definitely be using it in the future uh in the future tutorials um if you if you wanna i don't know say some ending words or where people can follow you actually that will be sure you can follow me on twitter uh just fernando the rojo uh rojo is the last name and yeah just follow me on twitter you'll see my github post there and that's yeah that's basically it um also try it out um try to be lenient with it and if you find issues make sure that they're reanimated issues first it's it's a still alpha library so i've found that people like spamming open source projects so just uh you know try to make sure that you isolate the problems before you push issues but yeah just follow me on twitter and you'll um you'll hear the latest thank you thank you once again for staying more than two hours with me yeah thanks to people for watching yeah it's happening we had some difficulties down the road but it's live yeah yeah it's it's okay i i it's okay yeah uh oh and someone asked me at the end yeah yeah someone asked how to get the unpublished docs uh it's just uh modi dot versus dot app is uh the unpublished docs um yeah i just uh last thing just thanks so much for having me on i'm a big fan of the of the podcast in general and i always watch all the animation libraries my favorites are the flat lists so uh yeah keep keep doing that for us so cool thank you so much and yeah see you in in maybe i don't know in the future we will see i'll i'll start doing more uh maybe maybe we will do like a small session in the future with with web because we haven't covered it now yeah but yeah totally cool thanks a lot once again ferrando and yeah see you definitely on twitter [Music] thank you so much once again see you later see ya bye bye have a nice day guys bye you

Channel: Catalin Miron

Views: 11,002

Rating: 4.9781423 out of 5

Keywords: react native moti, moti animations, universal animations, variant animations, react native animation library, react native animation, reanimated 2.0, framer motion, 60fps animations, Mount/unmount animations, keyframe animations, react native animation api, reanimated 2 expo, moti, react native library, learning by doing, live streaming, npm package author, react native animation beginner, css animations, React animation library, react moti

Id: ynSfSf9w99M

Length: 108min 48sec (6528 seconds)

Published: Mon Feb 08 2021

Reddit Comments

[u/[deleted]]

Looks amazing, thanks for doing this and sharing!

[u/shapboyz]

Amazing content, I hope your YouTube channel grows alot.