Jamon and Mazen are joined by Krzysztof Magiera, Director of engineering at Software Mansion to talk about all things Reanimated 2, and beyond.
Jamon and Mazen are joined by Krzysztof Magiera, Director of engineering at Software Mansion to talk about all things Reanimated 2, and beyond.
This episode brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Helpful Links:
Connect With Us!
Todd Werth:
Welcome back to React Native Radio Podcast. Brought to you by the dung beetle. We'll remind you, are you feeling down about your own life? Just remember, you could be a dung beetle. Episode 236: Reanimated 2 and beyond with Krzysztof Magiera.
Jamon Holmgren:
Mazen, it's been, I don't know. How old is your son now? Few weeks, maybe a few, couple months?
Mazen Chami:
Eight weeks today.
Jamon Holmgren:
Eight weeks, okay. That's where you're kind of transitioning from how many weeks old to how many months old.
Mazen Chami:
Exactly, yeah. So two months.
Jamon Holmgren:
How's life been?
Mazen Chami:
Good. I mean, at first we weren't sleeping much, but I can say, hopefully he doesn't hear me say this, but the last three days he's been sleeping longer stretches and it feels better to be getting more than three hours of sleep at night.
Jamon Holmgren:
Turns out sleep's important especially when you're dealing with the stress of a new little one.
Mazen Chami:
Oh yeah. But all in all, very rewarding kind of, getting to hang out with him.
Jamon Holmgren:
Yeah.
Mazen Chami:
Hear him, seeing him grow. After every nap, it feels like he's one year older. It's crazy.
Jamon Holmgren:
It's true. I've said this many times before maybe on this podcast, I don't remember. But when I look back at videos of my kids, and my first one was born in 2005 so he's 17 now. And my youngest is eight, but I look back at videos when they were young and I see their personality now back then. So I see this little kid who is just a little kid, a very tiny kid who's acting like Cedric. You can see his personality coming out and my daughter's as well. It's really, really fascinating because you get to know them later. You're going to get to know your son a lot better later and you're going to go back and you're going to know him better looking at those videos and understand him better why he was acting the way he is.
Mazen Chami:
Totally.
Jamon Holmgren:
It's really, really cool.
Mazen Chami:
Yeah. It's exciting and rewarding at the same time.
Jamon Holmgren:
Yeah. It's been a while since I've been in that place, now we're in a different mode of life with the little bit older kids, but this is kind of fun. We have a guest today so of course I am joined by my ingenious co-host Mazen, I'm pulling out that one.
Mazen Chami:
I like that word.
Jamon Holmgren:
Yeah, it's a good one. Robin is not here. She's actually, her daughter has a cold, so she's taking care of her. But today we also have a guest and his name is Krzysztof Magiera. Now I know that's not how you pronounce it in Polish, but you're saying, you told me before the show that to your English speaking friends, that's how you say it, right?
Krzysztof Magiera:
Yeah, that's right. Hello everyone.
Jamon Holmgren:
Nice to have you on here. And of course I'm Jamon Holmgren, your host, friendly CTO of Infinite Red. I'm doing all the introductions backwards today, but that's okay.
Mazen Chami:
That kind of day.
Jamon Holmgren:
It is. It is kind of that kind of day. Just to go back to Mazen, he lives in Durham, North Carolina. Former pro soccer player and coach, senior React Native engineer, works at Infinite Red. And Krzysztof, you're a co-founder of Software Mansion. Software Mansion, of course, big player in the React Native world. We've been aware of you folks for a long time. You're also ex-React Native core at Facebook. You are an author of some really, really important packages in this whole ecosystem. So you've done a lot of open source. Now you're from Poland, do you still live in Poland?
Krzysztof Magiera:
Yeah. We're based in Poland. I'm based in Poland in the company. So based in Krakow, Poland.
Jamon Holmgren:
There's a lot of React Native talent over there in Poland.
Krzysztof Magiera:
Yeah.
Jamon Holmgren:
And that's pretty cool. What isn't in the bio Krzysztof? Do you have any hobbies, what have we not talked about?
Krzysztof Magiera:
For the past couple of years my hobbies are mainly, is my son. Basically still taking care of him and soon he'll be joined by a brother so that's going to be the two.
Jamon Holmgren:
That's awesome, congratulations.
Krzysztof Magiera:
Thanks. So outside of that, yeah. I mean, I've been really involved in my growing the company for the past couple of years and also building those open source libraries so my interests are mainly in that area. But I've been also doing some teaching, for example. I'm actually teaching on the university. I have a PhD in computer science, that's something that a lot of people don't really know about me. And before that, I used to play, I mean I play violin for 12 years. So still continue to do that on some family occasion but no longer in, not that often as I'd like to.
Jamon Holmgren:
That's really cool. Our project manager, Jed Bartausky, also plays violin. He's fantastic at it, but yeah, he doesn't break it out all that often for us.
Mazen Chami:
He should.
Jamon Holmgren:
But it is pretty cool. Mazen, do you play any musical instruments?
Mazen Chami:
No, but if you were to dig through the archives, I used to play a trombone in high school.
Jamon Holmgren:
Oh, okay. That's pretty solid. I played baritone in, not in high school, in middle school and I didn't continue that on, but I guess yeah, we were both in the low brass section there.
Mazen Chami:
Yeah.
Jamon Holmgren:
I did play trumpet a little bit and I've played some bass guitar, a few other things, but all of the musical talent went to my brothers and sisters and not to me so I stick to computers. Cool.
Jamon Holmgren:
Well, this episode is sponsored by Infinite Red, premier React Native design and development agency located fully remote in the US and Canada. Hit us up if you're looking for React Native help, infinite.red/ReactNative. Don't forget to mention that you heard about us through the React Native radio podcast. We also are hiring, go to careers.infinite.red.
Jamon Holmgren:
Also, there's a new thing. We're going to ask the audience here. Audience, you all have some homework. We want to know what weird bugs in React Native that you've run into, any weird bug at all doing a React Native project. And then we're going to do a whole episode on weird bugs that we've found that the audience has given or anything like that. So tag us on Twitter with #WeirdBug and @ReactNativeRdio and we'll take a look. So if you tag @ReactNativeRdio and you #WeirdBug, we're going to find you, and then we'll feature you on a future episode. Talk about the weird bug that you had. Give us some information, some good story around it and then we'll share that with the audience. That's kind of a fun one. I'm going to probably tease that a few more times, but if you have any weird bugs, please let us know about it.
Mazen Chami:
Krzysztof, you too.
Jamon Holmgren:
Yes, we want to hear your weird bugs too if you've got any weird bugs you've run into. I'm sure you have plenty.
Krzysztof Magiera:
Yeah, I've had so many. Yeah, I have plenty.
Jamon Holmgren:
All right. Let's get into our topic for today. So we have Krzysztof here to talk about Reanimated 2, which has been out for-
Krzysztof Magiera:
Two years almost, yeah. I think we initially announced it in May 2020, but it was an early beta and then it kind of hit a RC around I think September that year.
Jamon Holmgren:
It was a big deal because it was a pretty big change from the original Reanimated. And it brought in some really amazing new features that, I mean I honestly couldn't be more impressed with this library. I'm really happy to have you on here to talk about it. So there was a blog post introducing Reanimated 2 posted on the Software Mansion blog, and we'll link to that in the show notes so people can see what that was all about. First off, can you tell me a little bit, you're co-founder, what's the story of Software Mansion? What's its history, the role in the React Native community and just kind of talk about that if you could.
Krzysztof Magiera:
Sure. So we founded Software Mansion in 2012, so we're almost 10 years old already and-
Jamon Holmgren:
Oh, wow.
Krzysztof Magiera:
Yeah, we started with just group of friends who graduated college and we had some experiences working with big companies, but wanted to build something on our own and we were looking for some ideas and eventually started sort of a startup that was a mobile app. Basically that we built within a couple of months and then I tried to get to the market and I start getting some customers in and then users and it turns out that part was more difficult for us because we were coming from a computer science background. When building things were kind of easy for us, whereas selling them and figuring out how we find users and how to find interest on the market was much more difficult.
Krzysztof Magiera:
But we enjoyed working together. We built a team of five, think four or five people. So we decided that we want to actually start selling services and start selling the... And the expertise that we got of building software. So we're a lot of into Mumble development at the time in web development, specifically in Rails. And eventually in 2013, when React came out, we picked that up. Really, it was because I was actually on the internship with Facebook. It was 2012, 2013, I think in the meantime while the company already existed and I brought React from there. It was I think 2013, when it first came out as an [inaudible 00:10:10] project.
Krzysztof Magiera:
And I was really excited about it. And we found the new paradigms that were introduced were very interest in and were a good way of building interfaces. So we started using that pretty early. And while I also had an experience working on mobile, that kind of became sort of natural, that building React Native was something that I was really well equipped to do. And once actually joined Facebook full time, it was 2014, '15, I don't really remember. And where the initial React Native core team was formed, I joined the team. It was, I think five or six people maybe at Facebook working on that and React Native was, then there was one internal lab built for Atlas.
Krzysztof Magiera:
And I started on the Android part of the framework and eventually open source it and came back to Poland eventually after two years and rejoined the company. And we at that time where around 20 people, I think. Had a bunch of different clients and started using their framework, but we not only started using it for our clients, but we also, because of my knowledge and experience in React Native, we know what are the weak points, what isn't the same from the framework and started working together with Expo on improving those things that are missing. So the first thing that we built was the Reanimated Native Driver support. So this is something that I actually built.
Jamon Holmgren:
The original, what was included in the React Native core?
Krzysztof Magiera:
Yeah. The one that was the-
Jamon Holmgren:
The Animated?
Krzysztof Magiera:
The API was a part of the React core. And then also the Native Driver was something that had been built while I was already outside of Facebook, was kind of an outside contribution to the core. And it enabled running these Animated API on the UI thread. So that was the initial, one of the first contribution that we did as Software Mansion. And then, we started kind of going with our own projects or our own ideas to improve the things that are missing or things that just don't really perform very well. And of course we created Gesture Handler library, then Reanimated, first version of it and then we made the screens eventually.
Jamon Holmgren:
Which by the way, I'm a big fan of React Native screens, which sounds really weird because it's this kind of thing that is in the background, you wouldn't think people would be a fan of it, but we won't talk about that right now, but I am a big fan of it. I think it's awesome. That's really great. It's a cool story or origin story.
Krzysztof Magiera:
The goal for us for the whole time was basically to improve the framework so we see this as opportunity for us to grow because then we can work by making Reanimated better, it's actually better for our clients, but there's also better for our engineers that we employ here who have invested their time in learning the framework. So by making it better by having a real impact on how good the framework is, we actually make it better for everyone so that's kind of a win-win for us and that's the main sort of main-main goal and main idea behind us investing open source and then building all those things.
Mazen Chami:
Absolutely. Those are some hard hitting libraries that I think everybody in React Native uses or doesn't realize they're using underneath the hood. So yeah, I mean I feel like I've been using Gesture Handler forever. I don't remember a time when I'd never had it in my library. That's awesome. Pivoting to focusing on Reanimated 2, if you were to give an elevator pitch, so if user was only to listen to this little segment, what's the biggest difference between Reanimated 1 and coming into Reanimated 2?
Krzysztof Magiera:
Sure. So Reanimated in general is the library that enables you to build rich animations and interactions in React Native and when you compare Reanimated 1, Reanimated to the way I like to think about this is that Reanimated 1, I see it as assembly language for animation. So this is something that is very low level and kind of difficult to use and has a lot of traps for you to follow into, whereas Reanimated 2 is a JavaScript for animations because it really is. And then go seek JavaScript do the same stuff, but on a higher level of extraction. So that will be the elevator pitch for the version two.
Mazen Chami:
Yeah, that's awesome, absolutely. In your blog announcement, you say, and I quote here, "We weren't satisfied with the state of the art solution in this space, including the libraries that were created and maintained at Software Mansion." What libraries were you referring to and what did you see as their limitations?
Krzysztof Magiera:
Yeah, so basically the things that I mentioned earlier, so the Animated API like specifically Native Driver support for it and also Reanimated version one were the libraries that we created, just weren't satisfied of how people use it or how they were built or designed. And one of the reasons we actually created, we made it further version of it was in order to build pretty basic interactions where, so when people to FM, then when you do an interactive things because when talking about animations, you may think of animations that you just fire and forget. And those are kind of easy ones that you just tell, "Hey, animate to this point." And then you just don't really care about that animations, whether it completes, or maybe the elements are gone after, whatever happens.
Krzysztof Magiera:
And the second one is interactive animation. So when you drag something on the screen and you actually interact with a touch or with a gyroscope or by scrolling. So those type of interactions are a little bit more tricky. And with Animated API, it was possible to actually hook the Gesture Handler to Animated and have a dragging effect so we could actually drag something and just, and all of those operations would be performed on the UI thread. But what the problem was that you could not really handle the final stage of the gesture using the Native Driver. So whenever you have a continuous gesture of dragging the thing that you have on the screen, that's fine, you could animate that easily. But then when you lift the finger up, then you might actually want this effect to continue, maybe I don't know, you were dragging an arm and you want to snap to some point or something like that.
Krzysztof Magiera:
So that part actually require a run quick to JavaScript in order to get an information what should happen. So you actually transition in between this interactive gesture and this non interactive gesture. So you have an interactive one and then after it's finished, after you've lift the finger up, you want this far and forget animation to snap to some point, and actually over transfer the velocity, maybe of the gesture and stuff like that. So that just wasn't possible only with Animated and that was kind of the main reason why we designed Reanimated to make it more advanced. And we had to introduce some sort of a conditional language that would actually have some sort of condition.
Krzysztof Magiera:
So we could have an if statement and then say that if the gesture is active, then just follow the finger. And if it's over, then perform some other stuff. So that was the main reason and kind of limitation of the Reanimated API as we perceive it. And then as for the Reanimated 1, comparing version two with one that we also created, and we're very satisfied with that, basically version one was kind of designed by us thinking of hey, we want to have some basic building blocks to build those type of interactions and to make it possible to switch between those interactive animations and then non interactive animations and stuff like that. So we want to build a basic building blocks and then wanted community to come up with some higher level APIs for this. So maybe build a bottom sheet component and use Reanimated under the hood. We weren't really expecting people, application developers to actually interface with Reanimated at all. We were expecting that they would always use some sort of an intermediate layer of components.
Jamon Holmgren:
That's really interesting. I didn't know that and I wouldn't have expected that, but that's fascinating.
Krzysztof Magiera:
Yeah. But the reality turns out to be different. So a lot of developers actually ended up using Reanimated and it was really a difficult thing for them to learn because it requires sort of different mindset because Reanimated 1 API was kind of, the way it was designed require you to actually think differently, maybe Lisp language for example. So there was more similar to Lisp than to JavaScript. And when we designed it, we didn't expect that a lot of people would have to learn it. We were expecting the library developers to learn it maybe, but not the app developers, but that actually turns out different. And so we decided, hey, we have this large group of people who want to use the API, so let's make it better. And that was the goal and then to use a familiar language to them. And of course, everyone who writes React Native, they already know JavaScript so that was the natural trace for us to just use JavaScript to define animations.
Jamon Holmgren:
I have three questions that are kind of rapid fire, quick ones based on stuff you've said there. When you say Native Driver, can you explain that in simple terms? Because a lot of people listening to this are maybe not Native developers, they're just... Not just, their job description, obviously more front end. What is a native driver? How does that kind of come in here?
Krzysztof Magiera:
Yeah. So Native Driver is an option that you can enable when using Animated API. And what it allows you to do is for your animation to run off the main JavaScript thread. So in React Native, you have two sort of distinguished threads. I mean they are more actually, but let's say that there are two. One is the UI thread which renders things on the screen and it's also the one that is receiving any events that are coming to the device specifically from the touch screen and the JavaScript is taking care of your application code so it runs React and all the JavaScript application there. And when performing animations, this is something we discovered pretty early that you don't really want to do those animations on JavaScript because you just have more important things to do than animated things.
Krzysztof Magiera:
And animating is relatively simple in terms of, you kind of can offload that work to the main thread. So Animation tend to perform better on the main thread because main thread has the VSync loop, and the task stuff. So Native Driver enabled that functionality in the Animated API that will allow you to define the animation on the JavaScript front and then execute them on the main thread. They were actually executed by a main code so we didn't really run JavaScript on the mainframe because of that, it was actually some transformed data structure that would passed over to the natives in order to allow them, allow the Native read to execute the animation code.
Jamon Holmgren:
It's kind of a DSL in some ways, the way that you're having to describe this in a way that is fairly rich. It's not just duration and easing, there's a lot more to it than that.
Krzysztof Magiera:
Yeah. But Animated API already was doing that. So Animated API was kind of, the goal of the API was to give you a big declarative way of writing animations, much like React as for the whole UI so React gives you the declarative way of writing.
Jamon Holmgren:
Right.
Krzysztof Magiera:
The UI and the interactions that you may actually do with the interface. So the Animated API was kind of similar idea, just applied to the world of animation and that design actually allowed and enabled the Native Driver thing. So that happened just because it was already well designed and ready for this kind of things.
Jamon Holmgren:
Now you mentioned the interactive parts of the Animation versus the non interactive parts of Animation. Specifically talking about the new architecture that's coming to React Native now with 0.68 and 0.69 coming with React 18, does this unlock some new APIs or possibilities? Is this sort of the doorway to Reanimated 3? Is this sort of a thing where you can maybe, maybe some things that you had to work around in the past a lot more, now you can do more directly through JSI or something like that?
Krzysztof Magiera:
Yeah. There are definitely things like that and exactly what you mentioned, like things that we can just do easier in Reanimated specifically because of the fact, for example, that Reanimated 2 is written mainly in C++ so interfacing with also the core written C++, eliminate some parts that were interfacing directly with.
Jamon Holmgren:
So the native part is C++ in Reanimated 2?
Krzysztof Magiera:
Yeah, Reanimated 2 is already, it was I think first JSI enabled library was face, I guess first third party code that was working through the JSI.
Jamon Holmgren:
Oh, that's cool. I didn't know that.
Krzysztof Magiera:
It was two years ago so the JSI was already there and we could actually use it. And because of that, we actually can eliminate some parts of the code there and we had written specifically for iOS and Android because we just interfaced with the C++ layer that Fabric provides. And we were actually now in the process of porting Reanimated 2 Fabric. So this is a pretty lengthy process and it's taking us longer than we anticipated, but we're really close to having it ready and in a working shape and have had already a lot of the demos. So stay tuned for updates from us about that.
Jamon Holmgren:
That's awesome.
Krzysztof Magiera:
As for new APIs, we haven't really thought a lot about that just yet. So one thing I think would be possible with the new architecture, although this is not something that anyone has used just yet is a way of sending synchronous events to the JS. So this would, I mean, there's some pieces of code in the Fabric core that enables that, just there are no uses of that just yet. So that's kind of I think the core team secret. Maybe we'll someday learn from them what they use it for and if it's actually ready to be used. But that kind of thing would actually allow us in some cases to just perform the Reanimated code or the workloads as we call them to make them actually work in the same VM as the rest of the React application code. So that would eliminate the need of having a separate VMs and we could actually use just this one. So not really sure about what the consequences of that could be in specific in terms of performance and just taking the time of the main JS VM and keeping it busy with Reanimation. Not sure if this is a viable option, but definitely something we would like to explore.
Mazen Chami:
Cool, that's all very great stuff. I'm excited to see if it's Reanimated 3 or in Reanimated 2 how it unlocked the Fabric, because we already see the potential of the new architecture and how performant it is. Adding in React 18 and batching and all that kind of stuff that comes with React 18 and then now what you're talking about, I think I've said this multiple times on the podcast, React Native is becoming much, much... It's evolving day by day and very soon, there's no reason why you would pick Swift or Kotlin because they're better performant or insert line here, React Native does it just as well.
Krzysztof Magiera:
Yeah.
Mazen Chami:
In my opinion.
Krzysztof Magiera:
Yeah, I think you can even reveal a little bit of a secret as you already asked about Reanimated 3. So we actually have Reanimated 3 for Fabric, but it's not going to be a groundbreaking change between the one and two.
Mazen Chami:
Sure.
Krzysztof Magiera:
And so we actually releasing it under three because we want to get rid of the Reanimated 1 API. So that's the hope one, because version two was actually a mix of the new API and you could still use the old API-
Jamon Holmgren:
Backwards compatible.
Krzysztof Magiera:
Meant to be backwards compatible. But with the Fabric port, it's actually pouring the whole Reanimated 1 coat. We just decided that it's not something we want to do because it's first, people no longer really use a lot of that. So yeah, there's some use cases where it's still being used, but we want people eventually migrate from it. So we can't really support it for this long, especially that Reanimated 1 was built on native Android and then on native iOS. So it's a lot of code that we would have to rewrite to support Fabric and that's just not something we are willing to do, especially that we don't really know how the release roadmap is going to look like for Fabric, how long it's going to take for the community to adapt it fully. So the plan for us is to put out Reanimated 3 for Fabric and then also still maintain Reanimated 2 with all the updates for people who cannot really part migrate to Fabric. Because I expect this is going to be a process for some people and then might take several months to, or maybe even years for people to migrate.
Jamon Holmgren:
But I'm sure this is the last time that you'll ever have to rewrite Reanimated, this is it. No more changes to the core, we're stopping here. The API's going to be stable, right React Native core? That's what's going to happen?
Mazen Chami:
We'll see. Coming out of the architecture conversation and now to more of the developer experience and being a developer, how do you work with designers and letting them know what's possible? Because I think Reanimated 2 kind of unlocks the box to really bring a lot of animations to the developer's fingertips, but in some scenarios that's where it stops and we don't really relate to designers. So how do you relay that to designers and let them know what's possible so that we can then bring that into our app?
Krzysztof Magiera:
Yeah. So my take on that is that designer that I had a chance to work with are very creative people and I would really feel bad for limiting their imagination and ideas that they may come up with by me saying that you cannot really do that. So it's typically the process from my perspective is a little bit reversed, so they come up with whatever they feel like they want and then we discuss what can we do here? And maybe we can build that, but maybe really take longer than it's really worth maybe investing in building that kind of interaction. But I believe we can really build anything. So yeah, so my thinking is we shouldn't really limit their imagination and.
Mazen Chami:
Totally.
Jamon Holmgren:
I think our designers would love hearing that. And also, what I'm hearing from you is it's a conversation though. You're going to still have that communication between you and the designers. Generally, you can do it. It's just a matter of is it worth it? Is it worth the amount of time?
Krzysztof Magiera:
Yeah, it's really similar to any kind of process of building a product, because when you're building a product, it's also like you have a lot of ideas and some of them just not be worth building. And because the impact of building certain features might not be kind enough or good enough in order to justify the time investment into building those so it's similar process.
Mazen Chami:
Cool. What are your thoughts on React Native Skia, would you say it's a direct competitor for Reanimated 2?
Krzysztof Magiera:
Yeah, so we actually work closely with the folks behind React Native Skia. So with William Candillon and then Christian. So we actually are running a workshop together with William on the App.JS council, that's something I wanted to promote maybe a little bit later, but we are organizing a conference in Krakow from 8 to 10 June this year and we were doing a workshop there on animations and drawings so this will be joined and work by myself and William. So we don't really see this as a competitor. So aa React Native Skia fills a really important gap of enabling a Reach access to sort of low level two dimensional rendering engine. And this is something you would actually use in a lot of animations and in a number of different interactions.
Krzysztof Magiera:
But this is kind of still works within the boundaries of whatever you render with Skia. And Skia, React Native Skia is obviously not something you want to use to render anything on your screen. So things like Xboxes, UI control screens, all that kind of stuff. The things that you can use from the Native platform is not something you would actually use Skia for. So for the things where you use Skia, then it definitely makes sense to use the animation CPA from there directly, although we have some discussions and plans to actually make it more compatible. So actually React Native Skia already has Reanimated compatibility.
Krzysztof Magiera:
So you can use the shared values, that's how we call those objects that you can use for animations in Reanimated. So you can use that in React Native Skia, but also the API in React Native Skia is kind of, it's really based off or inspired by aa So it's really close and we actually aim to make it as close as possible so that people don't really need to learn two different APIs to use one with the Native UI controls and then another sort of API to use with drawings. So that's one direction and maybe ideally even in the future, just make it so that you just use Reanimated directly for Skia because the APIs are exactly the same. They will just behave differently based on whether you use it for the drawing or when you use it for some other components.
Mazen Chami:
So as a developer, when I'm working on animations, what tools would you recommend I use when I'm trying to debug my animations that aren't really working specifically well for me?
Krzysztof Magiera:
So in general, Reanimated runs on the JavaScript VM. So you can connect to it the same way as you connect to the JS VM that runs your application code. Apparently, so there were some plans of building a Flipper plugin, for example, and I don't remember the current state of this but we actually got that working sometime ago. I'm not sure if it's even now, when you open Flipper once Reanimated it's running, it may actually show you a secondary context there, you just need to flip it between these two. So using that for debugging, you can also just use old frame console for debugging. It's actually synced to the main React Native console so whenever you print something, it actually shows in all the places where React Native console also outputs to, so that would be the native consultant, also the packager thing. And if you use Expo, that will actually print out on the output there as well. So same techniques because it's just that JavaScript so.
Mazen Chami:
Perfect, yeah. That's very good to hear and for developers just to know it's pure JavaScript, nothing really crazy underneath the hood.
Jamon Holmgren:
Yeah. And kind of along the debugging side of things and whatnot, what sort of, I guess how would you measure if your animations are impacting your overall app's performance? Is that something that you do as you're building these animations you're kind of paying attention to that?
Krzysztof Magiera:
Yeah. I mean, typically same approach as with any React code. I mean in Reanimated, you don't really have this concept of rendering trees of components, but there's still some pieces of JavaScript, we call them workplace that run on every frame. And they actually run in many cases than they run much more frequently than actually your production or your application codes, because it only runs when the state changes or maybe you click on something, or maybe the request from the internet comes back with the data that you want to process so that kind of stuff. Whereas this animation code may actually run on every single frame for the whole duration of animation. So measuring that is, so you can use similar tools as for measuring performance in JS.
Krzysztof Magiera:
So you have the JavaScript profiler there. There is also in React Native, you have that performance overlay that shows you the FPS. So for your JavaScript code, you have this JS FPS, but typically when the JS FPS drops, you don't really feel like a significant UI stutter because most of the, or all actually the UI code runs on the UI thread. So dropping frames in JS doesn't necessarily mean drops of performance for the application, but UI drops do so. So when you see UI drops, actually Reanimated 2 may result in that. So if your JavaScript code is really complex or you have issues with some long running loops or I don't know, too much complexity, then it will actually hurt the UI thread then you will actually start seeing the UI frame drops.
Mazen Chami:
Cool. Now I guess this is the question on all our listeners' mind right now, should we include Reanimated 2 in Ignite?
Krzysztof Magiera:
Yeah. I was hoping it was already there.
Jamon Holmgren:
To be honest, it's been kind of on the verge of being introduced and probably will make it at some point.
Mazen Chami:
Stay tuned.
Krzysztof Magiera:
Maybe it's already there through some indirect dependency, I don't know, it seriously, [inaudible 00:39:28] navigation and.
Jamon Holmgren:
It's possible, yeah. The way that we include things in the Ignite stack is if we're already going to be adding it in 80% of the time that we're building an app, which is true about Reanimated 2, then we should probably be in integrating. And we like to do an integration where it's just set up already. When you spin up an Ignite app, you just start using it. That's it, it's already there. You don't have to mess with it at all. And there's probably some examples already in there. So I could totally see that landing in future version of Ignite. We have a bunch of ideas to improve Ignite. We haven't put as much engineering time into it recently, but that's coming so watch for that.
Krzysztof Magiera:
I think it would be really good for the users to have that included there just because Reanimated is one of those modules that have a nontrivial installation process, just because you actually need to also install the plugin for babel. So that's one additional step in addition to just doing a MPM install of the package, because normally you have the outdoor linking process that brings the Native code and you don't really need to care about is when you install the package. But Reanimated, you actually also need to add the plugin. I mean, if you don't add it, then you actually get a warning while attempting to run the app, that's still, I think is one additional step is something that would otherwise be seamless for people to using it in Ignite.
Jamon Holmgren:
Exactly. I mean, we're already doing that with some of your work, obviously React Native screens is an example of this and some others, React Navigation, so I could totally see that landing. All right, I have one more question and there's a lot more I want to ask you about this, but we're running out of time. What sucks about Reanimated 2?
Krzysztof Magiera:
And that's a really good question and I think when I talked about the differences between being Reanimated 1, which had an API that was really difficult to learn and kind of require a mind shift for people who typically just work with a JavaScript code based. I think the biggest difficulty for people using Reanimated 2 is that for folks or people who write normally React code or React Native in JavaScript, they don't really need to take into account threading and actually Reanimated enables that. So it allows you to get your JavaScript code and run it on a separate thread. So this has consequences of course, if you are aware of this and know how to manage that, then it makes things easier for you. But there's still cases where people may actually fall into some traps because they might have some state that they want to share.
Krzysztof Magiera:
So we try to improve and make some sort of an automatic detection of those cases so that we can warn people about using maybe React state in work class, because it just may get out of sync if you perform updates from one thread and maybe from another. So that kind of things. This is still a new paradigm for a lot of developers who typically work with JavaScript because you don't really have that kind of concepts there. And I think this is the biggest issue and the source of confusion or problems for people so improving on that. And yeah, I hope that the remaining things that [inaudible 00:43:21] will be able to figure out sooner rather than later. So we're working on Reanimated 3 as I mentioned with Fabric and we're working on shared transition support. So that's also something that people requested a lot to be able to use animated layout animations between screens. So that's kind of going to be an integration for Native screens. So that's one of the most requested feature and something that we also hope to be able to fix soon.
Jamon Holmgren:
Well, I want to say just on behalf of obviously us here at Infinite Red and also just the React Native community, thanks for all of your work on this stuff. It is fantastic. It's really, really high quality. You all really think things through. You're very, very good engineers and it shows and you help us all out so I really appreciate it. Thank you so much Krzysztof and your team. Fantastic work.
Krzysztof Magiera:
Thanks. Appreciate it.
Jamon Holmgren:
Cool. So if you'd like to nerd out more about React Native, check out my Twitch stream, I have a new website now, rn.live so go check that out. Maybe I could have Krzysztof on some time to play with some of this stuff on a live stream. That'd be pretty cool. You can also join our Slack community at community.infinite.red. We have actually a little over 2000 React Native developers in there and I know they talk about Reanimated 2 sometimes so if you have questions there, go ahead. There's a new Twitter community rntwitter.infinite.red and that will direct you to a Twitter community which is kind of cool. There's not been huge amounts of traffic, but every single day, there's some new question or cool thing that's been posted on there. It's been a lot of fun for me. And don't forget to send us your weird React Native bugs on Twitter. We're going to be doing an episode about React Native weird bugs so do that. Krzysztof, where can people find you on Twitter or elsewhere?
Krzysztof Magiera:
Yeah, on Twitter, my handle is K then three Zs and then F, so it's KZZZF.
Jamon Holmgren:
Such an awesome handle. I love-
Krzysztof Magiera:
It's basically the way people type my name after seeing it somewhere so they just see.
Jamon Holmgren:
You do have two Zs-
Krzysztof Magiera:
That there are a lot of Zs and then like this, they see the K at the beginning and then the F at the end. And then there are a lot of Zs in between. So that's how they type it.
Jamon Holmgren:
I love it. And you can find Mazen @MazenChami. You can find me @JamonHolmgren, React Native Radios @ReactNativeRdio. As always thanks to our producer and editor Todd Werth. Our assistant editor and episode release coordinator, Jed Bartausky. Our designer, Justin Huskey. And our guest coordinator, Derek Greenberg. Thanks to our sponsor, Infinite Red, check us out infinite.red/ReactNative, a special thanks to all of you listening today. Make sure to subscribe on all the major podcasting platforms. We are React Native Radio. Reminder, we're hiring. Go to careers.infinite.red, and we will see you all next time.