Mazen and Robin chat with Krzysztof Magiera about the new React Native IDE, highlighting features like breakpoint debugging and preview mode to simplify workflows.
In this episode, Mazen and Robin talk with Krzysztof Magiera about the newly launched React Native IDE. They highlight useful features like breakpoint debugging and preview mode, and discuss how it's simplifying workflows for developers.
This episode is brought to you by Infinite Red! Infinite Red is an expert React Native consultancy located in the USA. With nearly a decade of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter, core React Native contributors, creators of Ignite and Reactotron, and much, much more), Infinite Red is the best choice for helping you build and deploy your next React Native app.
Show Notes
Connect With Us!
Todd Werth:
Welcome back to React Native Radio Podcast, brought to you by WordPress. Who reminds you we have lawyers and we use them. This is satire. Don't send me a cease and desist episode 3 0 9, react native ID with Shov.
Mazen Chami:
So Robin, given that Jam's not here and we haven't done this in a while, let's have some sports ball talk. Have you been watching any of the multiple soccer tournaments
Robin Heinze:
Going on? None whatsoever. I know they're happening. I do know they're happening because I occasionally hear about them while I'm watching F1, but that's about it.
Mazen Chami:
Well, there's a lot of soccer tournaments going on, so there's a plethora of games to be watched.
Robin Heinze:
How's your team doing?
Mazen Chami:
So on the international stage for Europe, I support Italy not great. They're knocked out already. The Swiss knocked them out.
Robin Heinze:
I thought you were man City.
Mazen Chami:
No, no, no, no. Never Manchester United. The Better
Robin Heinze:
City, the better Manchester man.
Mazen Chami:
There we go. Yeah, but that's at the club level. This is more like international and then yeah, and then there's the South American tournament, which the US was invited to play in
Robin Heinze:
And we said, no,
Mazen Chami:
No, they played, but they're out already and the US is hosting it too,
Robin Heinze:
Unlike the Cricket Tournament Championship where the US just came out of nowhere and won the whole thing and no one in the US even knows about it or cares
Mazen Chami:
And hey, their captain and best player is a software engineer, so there we go.
Robin Heinze:
Yeah, they're like hobbyist cricket players and they won the entire world championship.
Mazen Chami:
It's crazy. Well
Robin Heinze:
Yes,
Mazen Chami:
So as you may have noticed, I'm not Jamin, I'm Mazen and I live in Durham, North Carolina with my wife and toddler. I'm a former pro soccer player and coach and a senior React native engineer here at Infinite Red. I'm joined by my impressive co-host.
Robin Heinze:
Thank you
Mazen Chami:
Robin. Our guest on this episode, shov, who I'll introduce shortly. Robin is the director of engineering here at Infinite Red. She's located west of Portland, Oregon with her husband and two kids and has specialized in React Native for the past six years,
Robin Heinze:
Almost seven.
Mazen Chami:
Our guest,
Robin Heinze:
Almost seven now we got to change that.
Mazen Chami:
Yeah, I'll get on the template. I'll fix the template. Our guest Magera based in Krakow, Poland, co-founder and director of engineering at Software Mansion and this is pretty cool too. Co-creator of React Native and on the founding team of Android. That's pretty cool. Welcome to the show again, shov.
Krzysztof Magiera:
Hello. Thank you for having me.
Mazen Chami:
Before we get into the topic, let's hear from our sponsor.
Robin Heinze:
I think we do the read now,
Mazen Chami:
Forgot. Infinite Red is a premier React native consultancy located fully remote in the us. We're a team of 30 senior plus level React native developers and support staff that have been doing this for nearly a decade. If you're looking for React native expertise on your next project, hit us up at Infinite Red slash React native. Don't forget to mention that you heard about us through the React Native Radio podcast. Okay, let's get into our topic. We're going to be talking about React native, IDE Oph. Tell us a little bit about your background and how you got to be at Software Mansion and be a co-founder.
Krzysztof Magiera:
We started the company over at Beck in 2011, I think 2012 and it was straight after we graduated with a couple of friends, so, so really from the beginning we sort of were interested in creating our own product and startups and that's how the company got founded. We actually had our product that we've been building, we built a team around that, but the product eventually failed and so we had that team and we enjoyed working together, decided to start providing software development services for some clients that we ended up finding and shortly after we founded the company, it was two years later I actually started working at Facebook and got lucky that I actually ended up being chosen for a funding team for React native on Android when the project started was back in 2014. So that's how I got involved in the project and built the Android version for the React native product that was at that point ready for iOS React Native eventually got open source in 2015 I think, and I think end of 2015 I left and I been homes seeking and eventually returned to my home city K crack of in Poland and rejoined the company that founded that.
We founded a couple of years back and since I knew React native, we started working on reactive projects, so was pretty early days and the framework wasn't really very well polished. There were a lot of gaps and we started filling those gaps with the open source projects that we currently maintain. So things like made it gesture, handlers, screens, those are all projects that started because of a lack of support for certain functionality that we needed and we wanted to for our clients. So I think it went pretty well. So thanks to that project we built, we grew the company, we built presence in open source community and we now have a pretty big team that is focusing on React native related open source projects, maintaining the ones that I mentioned, but also on researching other projects, contributing to React native itself and working with Expo, things like that. So yeah, so that's the background and that's how I'm,
Mazen Chami:
Yeah, you all have some really cool packages that I think everyone for the most part uses or even just with screens for example, uses it without realizing using it.
Robin Heinze:
Oh yeah, we were just talking about that a couple episodes ago. Oh, I think it was during the A MA about what packages you always install. I was like, I don't remember the last time I didn't install Gesture Handler and sometimes I forget it's not actually part of core because it feels like it should be and so many of those just always use it and kind of forget you even have it. Our software mansion.
Mazen Chami:
Yeah, and really thank you for putting in the time and effort to do React Native IDE because it's something that is very valuable. I mean I mentioned earlier that I was using it when the beta first opened up. I've been reaching for it all the time now and it's saved a lot of time and effort and we'll get into the different features, but based on that, can you walk us through the development process for building this IDE for React native?
Krzysztof Magiera:
Yeah, so I think we started roughly researching that area roughly around a year ago. I remember the whole idea came from the state of React native survey that my company actually runs every year and I would encourage all the listeners to take part in that survey. This year we've been getting more and more responses and those are really valuable resources for the call community to tell or decide on the direction of things and also just monitor the trends and seeing how people are using it. It's a great source of feedback that we still lack in many areas here.
Robin Heinze:
We honestly look forward to the survey every year and we always do an episode about it when it comes out and I always look forward to the day that the results come out because it's super interesting to see where everything's at.
Mazen Chami:
And I also think I had Bartech who is the founder and maintainer of the survey, we had him on the podcast, I think it was just me during that episode. That was r and r two 90 I believe.
Robin Heinze:
Well, yeah, we'll link everything in the show notes, but
Krzysztof Magiera:
Yeah, it's really interesting to see how people are using it in the wild and get some feedback from real users of the framework. So even the things as simple as just getting to know what versions people are at at the given moment because we tend to keep up with the versions and especially when you work on open source libraries, you always want to be on the newest version all the time, but it's not necessarily the reality. Right.
Robin Heinze:
Yeah, I feel like there's probably been an appetite for an IDE like this for quite some time. I'm curious when you started working on it and why it's taken this long to really get an IDE in the space.
Krzysztof Magiera:
Yeah, I feel like it has always been an area where not a lot of people were really interested in investing time in building that those things. Because historically React native, when it came out it was very unpolished project.
Robin Heinze:
It's kind of a scrappy, it's always been kind of a scrappy thing.
Krzysztof Magiera:
So a lot of people were just using it from the common line all the time. And this was kind of to sort of match the web development in React. So when you start a React project, you have all those CLI tools, you create the project using that tool, then you start a server using Common Line and then you eventually have everything in a browser. But to get to those steps, you need to some knowledge of how you use those CI tools and that's how it also started with React native. So it's the easiest way to build tooling using Common Line interface I guess. And that's how it all started and eventually a lot of companies, a lot of big companies where got into React native started using it, and I think I said that on my talk at JS
Robin Heinze:
That
Krzysztof Magiera:
It's really a testament on the value proposition for React Native, that it is used in so many projects and its adoption is so huge worldwide
Despite the fact that it doesn't really have a great tooling and the learning curve for new developers, it's relatively hard compared to native platforms. So my background is really in Android or iOS native development. That's what I've been doing before React Native, not necessarily the first thing. I started right after the college, but I spent some time building Android iOS apps and in all of those cases you always start with the id. So for iOS you have Xcode, so there's no other way people are already starting iOS development with. So Xcode may not be the tool of choice at some bigger projects because if its limitations are not scaling well enough for bigger projects. But when you are getting into I development, this is how you learn it. You install Xcode, you have a simulator that's on your Mac just right behind the xco, and then you have all the debugger that's automatically connected the building, everything you just do from there, you don't really need to touch the command line and it's the same with Android. So you go install Android studio and you have everything included there and it's similar for other cross-platform frameworks. They all actually start from having the IDs. I mean they
Don't even announce the project until they have the development environment ready. So it's kind of funny that we did it in reverse almost. Yeah, the other way reverse.
Robin Heinze:
It's so true. It's so true. The native engineers are so familiar with IDs, that's just how things are done and you made a really important point that the React native was so much born out of the React connections at Meta that it sort of developed like a web framework would develop and then they sort of bolted on all the native parts and made it work in a organic open source way and there was never this like, okay, we're going to build a mobile framework and build an IDE from the start, like you said. So it's nice to see it kind of maturing and evolving and becoming more like its native counterpart.
Mazen Chami:
I think one big thing when we consult on projects and we go in to do conversions from Native to React native or even just POCs to get buy-in from leadership, one of the biggest gripes that the native devs have is why do I have to install all this? You're telling me vs code is my IDE, but it's not an IDE is just what I use to write my code in.
Robin Heinze:
You're like, so I have to install these other two ides that are not actually going to be my IDE and then also all this other stuff with Home Brew and
Mazen Chami:
The Getting started guide for React native is significantly larger
Robin Heinze:
Than
Mazen Chami:
Getting started guide for just iOS or Android development. Even just if you combine the two, let's say you want to build an iOS and an Android app, the getting started guide for just those two is still significantly smaller than the React native Getting started guide.
So this is, you were right, we put, what is it? You put the cart before the horse in the saying by just starting with it and then eventually coming back to the id. So I think now with this feature, we're almost now bringing the horse back to the front of the cart and being like, okay, now we have our IDE, let's evolve it, let's make it mature, let's take it out of beta eventually and then that'll kind of help us, I guess maybe make the prove that React native is no longer beta even though we're still not in 1.0. But yeah.
Krzysztof Magiera:
Yeah. But as I was saying earlier about the survey, so this was to be expected, but one of the top issues that people have is with the development tools. So that's kind of something we already knew, but the results really confirmed that and it's really after seeing those results last year, this is when I started thinking how can we get the biggest possible impact with the team that we have with the team that we build around React native open source and how we can utilize that. We made it possible to build that team, scale it up to 30 people say, and also make it so that we can really fund the work that we are doing there. So this has become our top priority to have some initiatives in that area that we can address the issue with the development tooling and also a lot of different initiatives already exist.
So for example, expo is also has its own CLI, that kind of a lot of this initialization burden that you mentioned, the things that you need to have installed or the number of different comments that you need to learn in order to just start the simulator or build a project. So there is a lot of innovation there and a lot of things that expose already fixing. There is a metro team at Meta that is actively working on improving the debugger and bringing more compatibility to the Chrome dev tools kind of environment. So things like network inspector, all that type of stuff. So I think a lot of people started recently realizing that this needs to be addressed and I'm really glad to see a lot of people addressing those issues and also wanted to have a part in that process. So we're trying to approach it from that angle.
Mazen Chami:
So listeners, when the new survey comes out for this year later on in the year, please fill it out. That would be very helpful.
Robin Heinze:
Well, we'll tell you about it. We'll make sure to tell you about it here.
Mazen Chami:
Check Twitter. It's going to be all over the place, so please do it so that we can better help not just the ecosystem but also help React native in general. It is an open source project and we're all contributing to it in some shape or form. Let's dig a little bit into React native IDE. So like I mentioned, I used it before you opened up the beta. It was great. It helped a lot. Before we get into ask you to dig a little bit deeper into it, I want to ask Robin, Robin, what's your favorite feature of React Native ID right now?
Robin Heinze:
I really love the right click to inspect an element right there rather than fighting with the curricular element inspector and trying to get it to show up underneath and you're like, okay, I got to switch it to the pie. It's a whole thing. So it is game changing to be able to just right click and inspect.
Krzysztof Magiera:
That's my favorite too.
Robin Heinze:
Then the converse going from the code like okay, I'm looking at this code, can I see it in my simulator is
Krzysztof Magiera:
Really, really cool. I'm actually now catching myself just randomly right clicking on websites in order to see that, but then I only see the context many apparently. So when I from time to time do some web stuff, then I try to use it there, but it doesn't work on web apparently.
Robin Heinze:
I also really, really love the breakpoint support for debugging. It's much, much better than the console logs that I usually use. I feel like such a real developer actually putting break points in my code, which I've never been able to do.
Mazen Chami:
Remember I told I posted something in Slack to the team that I was checking it out and if anyone wanted to, I'll be in a Zoom room, come check it out with me. And as I was talking I was like, oh yeah, there's break points, let's try it out. And someone was like, you can't do break points. It doesn't work that way.
Robin Heinze:
It does with this.
Mazen Chami:
Well let's take a look. Schoff says it does. Let's see, and it works. It was great.
Krzysztof Magiera:
So the breakpoint support is still improving, so there are some still missing things on the her side, but yeah, it is improving and will be better from the version to the next version.
Robin Heinze:
Just having the live console at a break point, it takes me back to my Ruby days when I would just throw Binding Dory all over the place. I didn't realize how much I missed having that ability.
Krzysztof Magiera:
Yeah, it's really funny. Those are all things that you can really sort of get set up for yourself already there is this React native tools extension that Microsoft is developing and it also have this integration I think so with the id we just wanted to make it really seamless so that you don't really need to
Go through all the configuration stuff and setting it up because when you use Radiative tools extension, then what you need to do when you launch the project, you need to set it up, configure it, and then connect to a running application and then when you reload it, it just disconnects and you have all those bad experiences based on that and there are also some limitations there. I mean there are being addressed and they're fixed in newer versions of Hermes, but some older debuggers and specifically the one that React native tools is using it just doesn't handle all of those limitations will and sometimes makes the Hermes crash for example because it sets a break point in column number zero and that crashes Hermes for example. So there are a lot of things here that we went through just based on testing and having issues with line numbers on different versions and that was the biggest kind of difficulty in the project to get all sorts of setups to actually make them work out of the box. So we are not there yet, but this is our goal. We want the people who use radio native in many different setups, whether they use expo, expo, dev, client expo, go React native CLI based project whatever, we want them to be able to open the editor and just have the ID launch alongside with all the features that currently have.
Mazen Chami:
I can attest to that Ignite if you use Ignite. It worked for me just out the box, the token, it worked on my machine.
Robin Heinze:
I think I had to restart vs code and that was the only thing
Mazen Chami:
I
Robin Heinze:
Had to do. Also, I think
Mazen Chami:
You and Frank and myself tried React native IDE during that whole simulator deleting off the machines,
Robin Heinze:
Debacle all, yeah, the Xcode
Mazen Chami:
X code just deleting your simulators or
Robin Heinze:
Something. Yeah, it's teen
Mazen Chami:
Debacle,
Robin Heinze:
So
Mazen Chami:
Now that that's behind us, it's more stable put that way.
Robin Heinze:
Unfortunate timing.
Mazen Chami:
Yeah, right. That's two features. So debugging, which is actually very cool for our listeners, check out your stuff's app js talk where he shows you when you're doing a breakpoint and you're clicking through it, it'll eventually take you down to your node modules file and show you where that's happening on a deeper level. That was great. We talked about the element inspector. That's a really valuable tool when you're doing ui. My favorite one, which might sound very simple here, but it's preview. I really like preview because like you did in your talk, you can really test components in isolation. You can see the different features if your different variance, what your props do to those. If you're building out a component, maybe I was building out a component library, I was checking it out, but when building out a component library, it's very valuable because you pass in all your props, you toggle your props, you kind of get to see what it would look like in that isolation. I think that's
Robin Heinze:
Oh and a lot of times the way we build, not that's the way I build, but you'll build a screen that's pretty complex. You'll build a lot of the components first and usually what we would do is we have a temp screen that's hidden three menus deep and you have to turn around in a circle and tap it three times in order to get it to open and then there's all your just random components that you put in there as you're building and this kind of eliminates the need for that, which is really awesome
Mazen Chami:
And it eliminates storybook. You don't have to go through the whole storybook setup. You don't even, like you mentioned your own demo screen, you don't have to create recreate every single component with every single variation of the props. You pretty much just set up your preview, which essentially you click on the open preview and it'll show you what it looks like and you can kind of build it out that way, which is very cool.
Krzysztof Magiera:
I wouldn't go as far as eliminating the storybook. This is actually something
We're now looking into because we also use the preview functionality frequently and it is great for things like the design system elements that don't really need to have a lot of context from your application, but then once you want to test more complicated screens that may require some react context being there or some data from some local storage or whatever, then it is not really that useful because you actually need to either create some scaffolds for your application and only then use them inside of the preview and this is actually what storybook already have, so they have a good story around building the storybooks in a way that you can kind of have everything that's needed by this particular component to be there. So we actually want to integrate with storybook as well because this is also something that we see is going to be useful for some of the apps that we're developing at software mentioned and we use storybook there and see that we don't want to build this whole system of injecting all the contexts, all the details for the given component and it's also not really practical to have components to take 20 props just to make sure that we inject every single thing that you need for this component to render.
Robin Heinze:
Totally. Definitely been guilty of building components like that because you're like, I just want this, I just want to give it everything it needs. That's fine.
Krzysztof Magiera:
Yeah, I think this port to book integration could be really, really useful because now when you storybook on React native, you need to click through this UI that's kind of always there and you have to have this specific entry point for the storybook. So this is something we can actually integrate into the id. So the same way as the previous work, which is can have similar kind of experience for the storybooks without really asking everyone to migrate from it.
Mazen Chami:
Another feature I kind of want to ask you a question about is the device settings one. So it currently has a toggle for light mode, dark mode, which is very valuable. I think there's also a hot key if you're using a simulator tech size, so for accessibility to reasons and also making sure you have the right break points in your code and device location, which actually believe it or not, the current project that I'm on is a feature that I'll be going to be using very heavily now. So that's very valuable and actually it helped me come up with a solution for a demo I'm giving next week on changing location, so thank you for that. In that light, are you planning on adding more and what are they that are currently on the horizon for this? A lot of features that the simulator gives you?
Krzysztof Magiera:
Yeah, this is going to be I think one of the areas where we will adding more features in the upcoming weeks. So this is really a place where at least the things that are going to be really visible for the users. So this needs to be fully featured, so things like device rotation and one feature specifically that I'm really interested in adding. So there are of course others for example support for launching deep links but maybe not necessarily things that you use very frequently, but I feel like they need to be there, like the volume controls, stuff like that. It should be there. It's not necessarily something you would be using all the time, but for the sake of completeness it needs to be there because otherwise you don't really have a way of controlling it. Whereas when you launch it on the regular simulator you still have a way of controlling that. But the things that are I haven't really seen in the stock simulators or other extensions for the simulators and I really wanted to have is a control over permissions for your app. So for example, something that I would actually use very often when you test a application flows when you ask user for permissions because when you allow for this permission taking it back, it's not that easy. You need to click through the app settings.
Robin Heinze:
It is like
Krzysztof Magiera:
Reinstall the app. So I wanted to have those controls in there so I wanted to make it so that whenever you want to test giving the contacts permission you can just revoke this from the id. So this is something I'm looking forward.
Robin Heinze:
That would be awesome.
Mazen Chami:
Shov, do you have an inside peek into my workshop at Chain React or something? This is actually something I'm trying to figure out how to do it
Robin Heinze:
And
Mazen Chami:
Specifically for contexts, actually we're going to be building something in the new architecture for context. So fingers crossed you're able to merge this in by next week so I can use it. Help me out tremendously.
Robin Heinze:
No pressure. You got two weeks as you were
Mazen Chami:
Talking, I was like, okay, yes, I'm trying to figure out what the most elegant way rather than telling the class, hey, delete the app and now let's reinstall it kind of thing and let's see it happen again. This would be great. And when you're working on a client project too, right? Again, I'm moving into locations, it would be nice to during a demo drop the permissions for location change the granularity for location so that you can see more and more locations or less and less show up. So that's great. Cool. I don't want to omit anything else within right now that's out in IDE. I know if you're leveraging expo, I love the expo bar where you can kind of go back and forth to different expo routes that you've been on. I think that's a very cool feature for quick testing.
Robin Heinze:
It'll be nice if that actually encourages more people to get on the expo router train
Mazen Chami:
Bandwagon
Robin Heinze:
Because the more people use it, the better it's going to get and I think it's a really powerful thing. So I like to see that.
Krzysztof Magiera:
So for this bar we actually have, it's still kind of internal, but there is an abstraction layer or an API that you can implement if you have your own kind of navigation solution to integrate with this bar. So currently we have plugins for Explore Router and I think it makes the biggest sense in export router because every screen have a text-based notation that you can display. This is not necessarily the case for a create navigation where you can have a component or a class that is a screen then you sort of can integrate with the bar, but then how you actually display that in that menu.
Mazen Chami:
We're getting very low on time, but I want to actually move us before we move into the final section where we have some questions from feedback from our listeners. I know you have the bundle analyzer which is also leveraging Expo Atlas, is that correct?
Krzysztof Magiera:
We haven't integrated it with Atlas yet and it's still not in the current version, but it is a plan to eventually use Atlas. That's awesome when appropriate.
Mazen Chami:
Cool. Another feature that's on there is also logs Great for all of us that still use console log as our method of finding our way around
Robin Heinze:
Little bit. And it has the native logs too, right? Or it's going to like the Log Cat logs and the Xcode logs?
Krzysztof Magiera:
No, not currently. So we are only displaying the logs that you the Java from JavaScript. Yes. Gotcha.
Robin Heinze:
As an engineer, I'm curious what the most of all these features that are currently in there, what was the most difficult slash the most fun to build and are they the same one?
Krzysztof Magiera:
Well I think the biggest challenge was to just get everything integrated and really I think that the biggest fan I had with working with just getting the, or figuring out the way how we will be showing the stream from the simulator or emulator inside of the id because it requires some reverse engineering of how Simulator works on iOS and there are also a lot of things that are really internal that people don't really necessarily think of or interface with inside of the ID that I think are really cool. For example, just the fact that we use a completely separate simulator set for an iOS. So the idea here was that people who would be using the id, they would still have their regular workflows so they may from time to time still just launch it in iOS simulator or want to build it and we didn't want the ID to interfere with those regular flows. So if you have your
Simulator already running, it just won't interfere with it because it uses a separate set, you can delete your own simulator and then won't impact how the ID will work. Also, ID launches on an ephemeral port for metro so that you don't really need to think how you connect with it and whenever you already have a project running on port 80, 81, so when you use export or when you use Radiative CLI and 80 81 is taken, then it just asks you to run on different port and this is another kind of step of friction where you need to make a choice or you need to click something in order to continue. And then it rebuilds the project because the port is kind of embedded inside of the application right now and only then it launches and with ID every time it runs on a different port and just getting it in a way that we don't need to rebuild the app every time it started, it starts. It was pretty tricky to do. And of course all the rivers engineering of, I've been telling that to so many people, I've been trying to get a sense of how it launches the previous for Swift UI for example,
Robin Heinze:
And
Krzysztof Magiera:
Been debugging xcode and in order to debug Xcode, you actually need to turn off OS protection on your Mac, like a system process and you cannot connect debugger to it. And once you connect the debugger,
Robin Heinze:
That's so Apple. That's so cool.
Krzysztof Magiera:
Yeah, well and once you connect debugger to it, you have around 10 minutes of using it because it just runs out of memory and hangs your laptop because it's such a huge process to debug and just the debugger can really cope with it really well for too long. So I had many, many sessions where I just opened the debugger and I started click quickly doing things before it hits that mark when it hangs the computer and then restart it and then start over and had to go over that cycle many times before I got to what I needed to learn.
Mazen Chami:
One question, I think a lot of people in our community are asking specifically about IDE and internally at Infinite Red, do you plan on supporting stuff like Windows, iPad and other React native supported platforms?
Krzysztof Magiera:
Yeah, so with Windows support is among our top priorities right now. So when we started the beta product, the beta kind of face of the project was I think end of April or beginning of May, don't remember the exact date, but we invited anyone to join the wait list and then we have like 6,000, over 6,000 responses. And a lot of people who joined eventually they couldn't use that because they were actually looking for a Windows solution and that was the most frequent feedback. We actually ended up getting that it just doesn't work on Windows. So Windows is actually our top priority. We wanted to get it working as soon as we can really. So the timeline for us is that we plan to get out of beta end of September, maybe beginning of October this year, and by the time I would expect that we could have the Windows support ready, at least the Android part of it.
Mazen Chami:
What about stuff like iPad and other OSS that
Krzysztof Magiera:
Yeah,
Mazen Chami:
I know it's probably a stretch with TV OS and all that,
Krzysztof Magiera:
Right? Yeah, definitely. So we are still kind of learning how people are using it and from just the interface standpoint because I think a big advantage is that you can sort of have the phone side by side inside of id, but when you extend that to bigger screens like iPads or even TVs, then I don't know how practical this might be. So adding iPad support is not a big task. It's kind of very similar to how iOS works because it's a kind of different operating system, but still the iOS, so it shouldn't be that difficult to add. I'm just more curious about how practical this would be for the people. So this is something we'll need still need to assess.
Robin Heinze:
I think you underestimate how big are the monitors of your users are. I know we have one client that's building exclusively for iPads and our dev who's on that project who was really bummed. He was like, I wanted to use the IDE, but we're only doing,
Krzysztof Magiera:
Yeah, we can definitely add that. It's not a big thing, it's just when we started a project we actually didn't have a good way of displaying the IDE panel inside of the VS code. So the only possibility at that point was just a card inside of the editor and then we eventually figured out a way how we can do that in the site panel and actually the change that made it possible such that you can actually render it in a separate window. This is something that got added to VS code in May this year.
Robin Heinze:
Oh,
Krzysztof Magiera:
So this was long after we started the project. It wasn't really available before the, it went out in the May release I think, or approval release. They only added this a PA that will allow us to actually render this card outside in the support window.
Robin Heinze:
I'm curious just as a whole, since you announced this a couple months ago, I guess just in general what the reception has been like. Have you been getting mostly positive feedback? Are people grumbling about anything in particular? Just what's the overall reception been like?
Krzysztof Magiera:
Yeah, in general people are excited and we've been getting a ton of feedback and the better period was really fruitful in a sense that we got really valuable feedback on specifically around different setups that people have with mono repos, with some custom integrations that make it more difficult in many ways for the ID to work or some bubble plugin interference stuff. So we got a lot of those things fixed over that period and the reception in general is really positive. Most of the people we run that survey at the end of the meta phase and 80% I think of people were very positive and said that the IDs already valuable, giving value or valuable for their day-to-day development workflows even in that current state of things. And I hope that we will manage to improve it a lot by the time we eventually finish the beta period.
Robin Heinze:
I can't wait to see how it evolves and see the community adopt it. I really do think it's going to be kind the future of the developer experience. Lastly, unfortunately out of time, I wish we could keep talking about this all morning, but if our listeners are using the IDE and want to either contribute or just get you guys feedback, what's the best way for them to help out or make their voices heard?
Krzysztof Magiera:
So the best way is through GitHub. So the code for the ID is available on GitHub, at least the biggest part of it. There are still some parts of the code base that we haven't published and just reporting issue there. We have some templates for the issues that would give us enough details to get us understanding of the issue. There is on our website we have our website ID dot SW me.com. There is a troubleshooting guide that lists different ways how we can collect logs that will need to Deb back issue. So currently the main source of feedback is through the issues. We still have a private discord for the people who joined the beta early, but we'll be eventually discontinuing that in favor of GitHub. It just feels better to have it there and all the issue tracking functionalities, it's really helpful as opposed to discard where people often just get lost.
Mazen Chami:
That's awesome. Well, I think we're out of time. Oph, thank you very much for coming on the podcast and sharing everything with React native, IDE. It's another great product you all have put together and thank you for all you do for the community. Thank you so much for having me. So Robin, before we leave, do you have a mom joke for us?
Robin Heinze:
I do this credit for, this goes to Gantt Labard two guys were arrested for stealing a calendar. They each got six months.
Mazen Chami:
Oh yeah. Well thank you Robin. See you all next time. Alright, bye everyone.
Jed Bartausky:
As always, thanks to our production team with editor Todd Werth, our assistant editor, this guy Jed Bartowski, our director of communications and episode release coordinator, Justin Huskey and our guest coordinator Derek Greenberg. Our producer host is Jamon Holmgren and executive producers and hosts are Robin Heinze and Mazen Chami. Thanks to our sponsor, infinite Red, check us out at Infinite Red slash react native. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio wherever you get your podcast and leave us a review. We'd love to hear what you think.