Ignite, the popular React Native boilerplate and CLI, has a new version out, code-named “Maverick”, and it has dozens of improvements! The hosts explore what’s new in this latest version of Ignite.
Ignite, the popular React Native boilerplate and CLI, has a new version out, code-named “Maverick”, and it has dozens of improvements! The hosts explore what’s new in this latest version of Ignite.
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 TikTok. Tell me you're wasting half your day without telling me.
Episode 248: Introducing Ignite Version Eight Maverick.
Jamon Holmgren:
Robin, what's that racket? I hear very clearly through my headphones right now?
Robin Heinze:
Racket. You don't hear it very clearly. Don't lie.
Jamon Holmgren:
No, I know. Actually it's quiet it. Are they done working in your house?
Robin Heinze:
No, they were supposed to be done, but the plumber is here today. Okay. Reinstalling our faucets and sinks and stuff.
Jamon Holmgren:
Oh, okay. That's probably quiet.
Robin Heinze:
So there may be some noises, but hopefully not too bad.
Jamon Holmgren:
It's not like they're drilling...
Mazen Chami:
Unless he's checking, banging the pipes.
Robin Heinze:
No, they're not like installing the flooring and the nail gun going and everything.
Jamon Holmgren:
Okay. Yeah. How long has this been going on? It's been a couple weeks. Three week?
Robin Heinze:
Almost a month.
Jamon Holmgren:
Oh, almost a month. Wow.
Mazen Chami:
Wow.
Robin Heinze:
Yeah, we're doing some minor renovations at my house. New floors, refactors, new floors, new counters, new sinks and faucets. But we're not knocking down any walls or anything crazy.
Mazen Chami:
Robin's house 1.1
Jamon Holmgren:
Not if all goes well.
Robin Heinze:
True. A wayward hammer might change that.
Jamon Holmgren:
Yeah. Depends on how your coding is going. The hammer might come from your desk.
Robin Heinze:
That's true. That's true. Although I want to be careful because I don't want to ruin my new computer. No hammer's going anywhere...
Jamon Holmgren:
You do have a new computer as well?
Robin Heinze:
I do. Finally.
Jamon Holmgren:
Everything's kind of brand new here.
Robin Heinze:
I finally got an M1 after Jamon made fun of me every single day for still having an...
Jamon Holmgren:
If I remembered, I would definitely do so. Yeah.
Robin Heinze:
Yeah.
Jamon Holmgren:
M1, I mean, that's just the way to go. You can't write an intel.
Robin Heinze:
It's so fast.
Mazen Chami:
I'm going to keep hiding in the bushes over here.
Jamon Holmgren:
Oh, you still have an Intel? Shifting my attention.
Mazen Chami:
2016.
Robin Heinze:
Oh no. Really?
Jamon Holmgren:
No.
Mazen Chami:
It works fine.
Jamon Holmgren:
Oh. Sure it does.
Robin Heinze:
I don't think it does. I don't think you realize how well it doesn't work.
Mazen Chami:
Until I do yarn install.
Jamon Holmgren:
So now it's Robin's job. To heckle.
Robin Heinze:
I know.
Mazen Chami:
Yeah, I know.
Robin Heinze:
Now I'm going to pretend like I haven't had an Intel Mac for the last two years.
Mazen Chami:
Don't join that club, Robin.
Robin Heinze:
Oh, but this...
Jamon Holmgren:
She has to.
Robin Heinze:
But it's so cool. It's so fast. It's so quiet.
Mazen Chami:
I used an M1 for, it was like a month on a client project, but it was fast, yes. But it was only like eight gigs.
Robin Heinze:
You don't sound impressed. Yeah, no, this is the one I got...
Mazen Chami:
It was eight gigs.
Robin Heinze:
Like the max.
Mazen Chami:
Of RAM. Yeah, exactly. And that's the only way you're going to, I think, feel it.
Robin Heinze:
Maxed out graphics, maxed out ram, like everything.
Mazen Chami:
It was like the lowest M1 and it was the first version of it. So you could only plug in one monitor.
Robin Heinze:
Yeah.
Mazen Chami:
And whenever you did that, it would go bonkers.
Robin Heinze:
Yeah. No, you want to get the latest...
Jamon Holmgren:
Robin, You got a MacBook Pro, right? Yes. Okay, so M1 max or M1...
Robin Heinze:
Max. I got the like...
Jamon Holmgren:
Oh, wow. Tricked out.
Robin Heinze:
Yeah.
Jamon Holmgren:
I mean well I don't have a MacBook Pro. I have a Mac studio, which is sort of the large version of the Mac. It's...
Robin Heinze:
It's the desktop.
Jamon Holmgren:
It's great. I love it. It's right underneath my monitor and underneath the shelf.
Robin Heinze:
If I was confident that I would be able to be at my desk all the time maybe. But...
Jamon Holmgren:
That is the downside.
Robin Heinze:
Yeah. I need the portability. As evidence, I literally was working in my in-laws house yesterday.
Mazen Chami:
Yeah. Now that you have the M1, I think after a couple years it might make sense to get one of those and then just keep it there and then you have the M1 for your portability.
Jamon Holmgren:
That's true. Yeah. I don't know, I just feel like Intel Macs are just totally obsolete at this point. It's just not...
Robin Heinze:
I can't believe I put up with so much fan noise.
Jamon Holmgren:
I know. That's the thing. They get hot.
Robin Heinze:
Their battery life's terrible.
Jamon Holmgren:
Terrible. Yeah.
Robin Heinze:
I didn't even have to charge yesterday. I just used it without plugging in.
Mazen Chami:
The battery life is good. I do remember that. Yeah.
Robin Heinze:
Anyway.
Jamon Holmgren:
I guess I should get to intros.
Robin Heinze:
Probably.
Jamon Holmgren:
It sounds like Robin has prompting me to go that direction. I'm Jamon Holmgren your host and friendly CTO of Infinite Red. I live in the beautiful Pacific Northwest. Just started raining today, so probably won't stop until May, with my wife and four kids. I play hockey. I drive my tractor whenever I get an excuse to, Sorry Mark, I mentioned the tractor. Mark told me stop talking about your tractor. But I had to mention it. It was in the bio. I had to read it. I am joined today by my lit co-hosts. We're getting a little modern kind of, Not really.
Mazen Chami:
Is that what the kids say these days?
Jamon Holmgren:
That's what the kids said like 10 years ago.
Mazen Chami:
Yeah.
Robin Heinze:
Was it 10 years ago?
Jamon Holmgren:
I mean...
Robin Heinze:
I am not with it as far as lingo.
Jamon Holmgren:
So how lit really can you be?
Robin Heinze:
I'm not. I don't know why we... It's a lie.
Jamon Holmgren:
Well there's a reason we're using Lit. Robin and Mazen are here. I'll tell you why we're using Lit in a second. Robin Heinze is a senior software engineer 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 five years. Over on the other side of me on Zoom is Mazen Chami. Mazen lives in Durham, North Carolina with his wife and baby boy. He's a former pro soccer player and coach and is a Senior React native engineer also here at Infinite Red. That's why Mazen and I talk about sports all the time when we are doing warmers without Robin here or sometimes with her here. Much to her chagrin. This episode is sponsored by and here's our new sponsor. Here's our new sponsor, Chain React 2023.
Robin Heinze:
What? New sponsor in the house.
Jamon Holmgren:
Chain React is returning in person this year. It is the only React Native conference in the US. It was the first React native conference actually in the world in 2017. You should sign up for the Chain React newsletter to be informed when conference and workshop tickets are available@chainreactcomp.com. It's going to be in Portland, Oregon over by Robin and me in 2023. So it's late May, 2023. We'll get more information out.
Robin Heinze:
And we'll be there.
Jamon Holmgren:
Yeah, we're going to be there.
Robin Heinze:
If you want to meet us.
Jamon Holmgren:
Go to chain react com.com. Pause this right now. Don't forget to come back and pause it, but go to chainreactconf.com and sign up for the newsletter because you don't want to miss it when stuff comes out about it. We are still also sponsored by Infinite Red. Infinite Red is a Premier React Native design development agency located fully remote in the US and Canada. If you're looking for React native expertise for your next project, hit us up at infinite.red/reactnative. And don't forget to mention that you heard about us through the React Native Radio podcast. Robin, we also have three more sponsors. Can you read those ones? I'm just kidding. We only have two.
Robin Heinze:
Ah.
Jamon Holmgren:
All right. Let's get into our topic for today.
Mazen Chami:
Oh, is it bad that I just got your reference to Lit co-hosts? It's been a long day already for me.
Jamon Holmgren:
Thanks for that transition. That helps.
Robin Heinze:
That's not great.
Mazen Chami:
I literally just realized what's going on.
Jamon Holmgren:
So the big news is that we released Ignite version eight, Codename Maverick.
Robin Heinze:
Woo. Yay.
Mazen Chami:
Yay.
Jamon Holmgren:
So that was an exciting one. It was a lot of work. Just a fantastic.
Robin Heinze:
How many people were involved total?
Jamon Holmgren:
I don't actually have right in front of me exactly how many people, but it was a ton of people at Infinite Red, probably around, I want to say 10 or 12.
Robin Heinze:
I would say most of the React Native team in Infinite Red was involved at some point.
Jamon Holmgren:
To some degree, but in terms of actually committing code, it was like at least half of them.
Robin Heinze:
I know I spent a couple weeks on it.
Mazen Chami:
Yeah, same.
Robin Heinze:
We had some people more sort of dedicated to it in over the long term and then other people would pop in and work on it for a little bit. Yeah, it was definitely a communal effort. So if you're new here, we should probably give a brief history of what Ignite actually is.
Jamon Holmgren:
Yeah, good idea.
Robin Heinze:
Ignite is our boiler plate. We would argue that it is the best React Native and most popular React Native boiler plate out there. But it's basically a starter kit for your app. So you can ignite a new app and then you automatically get our entire stack that we use here at Infant Red for all of our client projects with components and state management, all that good stuff. The libraries that we like to use, as well as really cool generators for components, models, screens, navigators. So every time you need to add a new one of those, you can use a generator and it pre populates stuff for you, which is really convenient. So yeah, Ignite completely redesigned from almost from the ground up. So if you want to use what people infinite red use every day, check it out.
Mazen Chami:
Yeah, the generator is a cool aspect of this. We're probably going to go deeper into this later, but I do think most times when you're starting something new, you always have to create your X number of files, add it to your navigation and go through all that. Just a simple line. We'll do that for you. And even set up the return for your render, which I think is pretty cool.
Robin Heinze:
Yeah.
Jamon Holmgren:
Yeah. It's amazing. And Ignite started in 2016. I mean technically probably 2015 was the origins of it. When we started two projects at the same time, they were our first two React Native projects and Gant Lebord was leading one project and we had another one of our principal developers leading another project and they needed to collaborate on what are the best practices. And so they essentially built Ignite. Gant started that in 2016, early 2016. And they started contributing back to Ignite what stack decisions they were making and all those things. And it's been through many iterations. It's been continuous development since then. Many, many versions. Many, many different iterations.
Robin Heinze:
Our stack has changed.
Jamon Holmgren:
Our stack changed, yeah. In 2017, we switched over to a different state management. We went to type script. There was a lot of... React Navigation became our primary. It was sort of like a whole revamp around that time we called that Bowser, that was the code name. And now with there was another... So the main big releases was the first one, which we called Andros. The second one...
Robin Heinze:
Did we call it Andros originally?
Jamon Holmgren:
It was sort of retrofitted a little bit.
Robin Heinze:
Yeah. Once we released Bower we're like, well we should have a code name for the original too.
Jamon Holmgren:
Yeah. Not that these code names matter, they're all ignite.
Robin Heinze:
They really don't.
Jamon Holmgren:
They're just versions. Andros was the original one. Bowser was the second one that has our more modern stack. And then there was Flame, which was kind of a rewrite of the internals to make Ignite and be much easier to work on because it was a problem. The only person that really knew how to work on it was me. At a certain point, even Gant had lost sort of track of where it was and that was problematic. And then now Maverick is the biggest release that we've had probably in terms of effort since the initial version.
Mazen Chami:
I think you just going through that timeline shows how battle tested. I think you like using that word when describing.
Jamon Holmgren:
I do. Yeah.
Mazen Chami:
Ignite. Because most boiler plates that I see out there eventually die off. And then you see last commit five years ago or whatever, three years ago. This one has gone through an evolution and it's truly evolved as the technology has grown, as React has grown. Because five years ago, we did an episode on the gripes of React five years ago till now. Five years ago, React till now looks completely different. So your boiler plate needs to keep going and keep evolving. And the fact that we use it on client project, I think Robin, you just started a new project with Maverick.
Robin Heinze:
Yeah, we had our first client project start with Maverick.
Jamon Holmgren:
It was on a beta too, right? You started it early.
Robin Heinze:
Yeah, it was still beta because we were starting and the beta hadn't released yet.
Jamon Holmgren:
We're so much faster and better when we use Ignite to start something up. When someone comes to us and they're like, Hey, we already spent up our app and now can you help us? We're like, Did you use Ignite? No.
Robin Heinze:
We actually...
Jamon Holmgren:
That's why you're having problems.
Robin Heinze:
We actually converted the app that they had already started. We started it over with ignite.
Jamon Holmgren:
Exactly.
Robin Heinze:
Because that's how much we believe in it.
Jamon Holmgren:
It's so much faster. You can go move so much, faster, so much better. Fewer headaches, bigger community. There's just so much. Speaking of so much, we have a lot of changes to go through that we should talk about. If you're already familiar with Ignite, this will be super interesting. If you're not familiar with Ignite, we'll still try to put these in perspective, in context of what we had before. Ignite has always been really great to get your project off the ground, but now we've put a ton of time into it, modernizing it. One of the things I want to say, nothing makes it into Ignite unless we've used it on at least one client project, one full project and have enough experience with it that we can say this works. And there have been a few exceptions to that and we've always regretted it and we've backed those out of like, Oh, we haven't actually used this but we're going to put it in Ignite.
And then we're like, no, that's not what Ignite is. Ignite is always supposed to be stuff that is battle tested as Mazen said. Something that we've used in actual projects that have shipped to the App Store and Google Play. So with that said, let's just kind of dive into it. When you first start a project you can use NPX, so NPX Ignite-cli, and then the command new. So NPX Ignite-cli new. And then our canonical thing is pizza app because one of the original apps that we were building when we were building Ignite was an app for a pizza chain.
Robin Heinze:
Oh my gosh, I didn't know that.
Jamon Holmgren:
Wait, you didn't know that? That's where that comes from.
Robin Heinze:
I didn't know that.
Jamon Holmgren:
Yeah, we built an app for a pizza chain up in Canada, which I won't name, but it's sort of a California Kitchen style pizza chain. And you Canadians probably know what we're talking about. We built an app for them and...
Robin Heinze:
I'm sorry, could you hear that?
Jamon Holmgren:
No.
Mazen Chami:
No.
Robin Heinze:
It's definitely on my recording but it's fine.
Jamon Holmgren:
Okay. Can't hear a thing.
Robin Heinze:
It's definitely on the recording so you guys have to talk for a little bit.
Jamon Holmgren:
Okay, we will. So then Ignite walks you through the rest and what's cool about the newest version, Maverick version eight is that it has a full sort of walkthrough. So before we would just make a bunch of assumptions about what you wanted and then you could change it through flags. But now we actually explicitly ask. We ask what bundle identifier do you want? Where do you want to start your project? Do you want to initialize a get repository? What package manager do you want to use? And then do you want to install the dependencies? There's some other stuff on the way as well that will probably land before this episode air. So you'll see it when you spin it up. And so that's a big change that is not only that, but the output is just... It was already pretty cool. Ignite already had pretty cool output but it was just been refined so much nicer.
Mazen Chami:
I'm a big fan of those interactive CLIs and I just ignited an app this morning because we're doing this podcast... Yeah, I've done it before but...
Robin Heinze:
First time.
Mazen Chami:
I wanted to try it on the... No, it wasn't the first time. It was the first time on version eight actually.
Jamon Holmgren:
Yeah.
Mazen Chami:
But it was really cool and I like the little icons and the little commands like, ooh, this is heavy if you're installing the dependencies and whatnot. I'm a big fan of that type of stuff with color.
Jamon Holmgren:
It has a little friendliness to it. It feels infinite red.
Robin Heinze:
We like to add friendliness in pretty much everything we do. Even if it's just a couple emojis in here, some fun jokey language. We just like to make things friendly.
Jamon Holmgren:
Yeah, totally. The first thing I want to talk about is the massively expanded documentation. That is really amazing. So ignites documentation has always been a little lacking. Unfortunately we know how to use it internally, but we didn't really document it for the rest of everybody.
Robin Heinze:
Not out of neglect or just like, oh we don't think it's important. It's literally just finding the time. Because I mean documentation is not trivial to sit down and do.
Jamon Holmgren:
That's true.
Robin Heinze:
And it being open source and us working on client projects, it just never got to the level that we wanted. But we really dedicated time to it this time.
Jamon Holmgren:
And the people at Infinite Red that really worked hard on it. Silas Matson, Yuli Glukenko, Frank Kalise, just a lot of people who put a lot of time into the documentation and that will be an ongoing effort as well.
Robin Heinze:
One thing, if I can just sneak in, that I think is really cool is that Silas, who you mentioned who did the lions share of the documentation, is not primarily a React Native developer until very recently. He's still pretty new to React Native, which I think was actually a really cool trait to have when writing the docs because he came at it from a very fresh perspective. So he really got detailed and made sure that it's very beginner friendly.
Mazen Chami:
He caught a lot of stuff. I remember early on when he was going through the docs, you would always create issues and be like, Hold on, isn't this like a required prop or something?
Robin Heinze:
Actually yes.
Mazen Chami:
Years later actually. Yeah, you're right. Here's a poll request for that.
Robin Heinze:
It's stuff that we tend to sort take for granted.
Jamon Holmgren:
Writing docs makes your code better because when you're forced to think it through from that perspective, you have to be more thorough.
Mazen Chami:
And being thorough in the documentation, the components have the different variations of it and those are usually the best documentation tools out there. The ones that have all the different variants and how they affect your app. So that's really cool that it's in there for the different components.
Robin Heinze:
Speaking of revamped components, we have redesigned the screens and everything that you first see when you spin up your Ignited app. Completely different. We have all new designs from our fabulous designer, Jenna Fuji.
Jamon Holmgren:
Thanks Jenna.
Robin Heinze:
Yay. Thank you Jenna. Looks fabulous. Completely new color scheme, new fonts, new images, everything. It looks fantastic. We've added a dummy sign-in screen, which of gets you...
Jamon Holmgren:
I've wanted this for a long time.
Robin Heinze:
Which gets you part of the way towards sign-in which most apps have some version of sign in. So a new sign in screen, new welcome screen, new drawer example in addition to...
Jamon Holmgren:
Tab bar navigator.
Robin Heinze:
Tab bar navigato. We have a special demo list screen which has episodes of the podcast.
Jamon Holmgren:
Yeah, this podcast, you could be listening to this podcast through the demo screen.
Mazen Chami:
You can even favorite your favorite episode on the app.
Robin Heinze:
With a cool little animated like button, which I built myself.
Jamon Holmgren:
It's super cool. You need to go check out the animated like button. It's cool.
Robin Heinze:
The real star of the show is the showcase screen, which has all of our component library.
Jamon Holmgren:
It replaces storybook.
Mazen Chami:
Storybook.
Robin Heinze:
Storybook, yeah. Previously...
Jamon Holmgren:
Some of us really like some of us aren't as big of fans of. And so what we decided was we'll build something kind of, I would say simpler. And this is all Yulian's work. Yulian Glukenko, one of our developers, he built out or he designed how the showroom was going to work and it allows you to work on in independent components and then have a showcase of all the different components in one big screen.
Robin Heinze:
And these components are intended to be fully customizable to whatever designs you're working with. Which is important to us because every single project has completely different designs. So mean if you're using one of the sort off the shelf UI libraries like UI Kitten, Reacted Paper, those are great. If you don't have designs or if your designer is specifically designing with those components in mind. But because we have different designs for every project, sometimes our designers do them, sometimes others, we really have to have ultimate flexibility to change colors, padding, everything. So that's what these components are designed to be.
Jamon Holmgren:
I remember years ago, Robin, you worked on a project where the designers wanted a specific UI front end. I think it was UI Kitten, but then didn't use it when they designed and that was very problematic because you were just sort of fighting it.
Robin Heinze:
We were fighting it a lot.
Jamon Holmgren:
Even though UI Kitten is a fine, really good library.
Robin Heinze:
It's a really great library. But we were needing to customize it beyond what it was capable of being customized.
Jamon Holmgren:
It wasn't intended for that. So our components are very much built for custom designs.
Mazen Chami:
And this is arguably one of the most important parts of your app because the UI UX aspect of it is very important for the user. Sometimes personally, I can speak personally, I stop using specific apps because it just doesn't look good kind of thing. I'm hesitating here because I can see those apps in front of me right now. And then...
So this is very important that it's very flexible, not like Robin mentioned, almost pigeonhole to a specific library. You have a lot of flexibility to go in any direction you want and you also have the ability to just completely, you don't even have to rip it out necessarily. You could just add in your native paper elements, UI Kitten on top. And then instead of using, I believe we directly import them from React Native, you just go straight into and use that component library's version and you already have your designs, your templates, your spacings, your colors, and it's all already there for you. Yeah, you probably just fix your TypeScript errors wherever they pop up based on that.
Jamon Holmgren:
I get questions of what are the best patterns to use for these types of things. And I just point them to Ignite. It's like this is what we do and people love it. It's very well thought through. A lot of pain really. We got there through a lot of pain and a lot of discussions.
Mazen Chami:
I don't know if you mentioned it, but shout out to Yulian for spearheading this aspect of it.
Robin Heinze:
He's what I call a UI wizard.
Jamon Holmgren:
He's amazing.
Robin Heinze:
He's amazing.
Mazen Chami:
Yeah.
Jamon Holmgren:
He refuses to come on the podcast though. I'm going to make him listen to this. At least he's going to listen to this but he does not come on.
Mazen Chami:
I'll work on getting him on here.
Jamon Holmgren:
He won't do it.
Robin Heinze:
He won't.
Jamon Holmgren:
He's not going to do it.
Robin Heinze:
He's stubborn.
Jamon Holmgren:
He's stubborn.
Robin Heinze:
We love you, Yulian.
Jamon Holmgren:
Another big piece of this is that in the past you could use... It was really cool. You could use Expo or you could use what we call vanilla React Native CLI also known as Bare Workflow. Depends on what you... Expo is kind of part of it no matter what, even if you go that direction. But you could use kind of the managed expo versus the using Xcode and Android studio to build your app. But now thanks to a bunch of work by Frank Kalise, we actually unified the two, expo and vanilla so that now when you spin up a new app, you don't have to say, do I want Expo manager or do I want vanilla? It just works with both. So if you want Expo, you just say Yarn expo: start. And if you don't want Expo you can just say Yarn Start or let's say Yarn iOS or Yarn Expo: iOS.
So you just tell it which one you want to launch it in, which is really nice for initially spinning up your ideas and working on the UI and things like that. And then later as you get into it you're like, you know what? I'd rather go with more of a bare workflow. No problem. You just switch over to using Yarn iOS and it just starts using or Yarn Android starts using that and it's really flexible. Back in the day like expo you had to eject and things like that. You just don't have to do that anymore. It works fine the way it is. And this is something that I mean, I'm excited about a lot of features within Maverick and this is definitely one of the I would say top five.
Robin Heinze:
Yeah, it's really, really convenient. We've already used it spinning up this new client project that we just started because we started out just using Expo go. It was just easy. And then we had to add a native package and so we just switched over.
Mazen Chami:
And I think we've talked on this podcast about soon or it's actually available now cause we're using the right version. You can use unimodules to be able to use those packages within Expo. So if you do both linking and using that, you now have the ability to jump back and forth between the two. I would recommend at some point sticking to one over the other, but you still have that ability to jump back and forth as much as you need to.
Jamon Holmgren:
Yeah, it's a really nice enhancement. Frank did a great job on it. Speaking of other really nice enhancements, Mazen did some amazing work with internationalization support.
Robin Heinze:
This Mazan guy sounds really cool. Who is it?
Jamon Holmgren:
Mazen Chami.
Mazen Chami:
I know him.
Jamon Holmgren:
He's a lit co-host and he also worked on this. Walk us through what all you did here. You're an Arabic speaker and it's a right to left language.
Mazen Chami:
Yeah, so Arabic is my first language. Grew up speaking that at home. And then in school, we spoke English, but the objective here was to kind of get the app working in both RTL and then obviously LTR, which is the normal. And there was some cool stuff we had to do because there is a what's it called? A React Native plugin where you just tell it is RTL and it'll flip everything for you on the X axis.
Jamon Holmgren:
Okay. I'm pretty sure that's what it is.
Mazen Chami:
Flip everything.
Jamon Holmgren:
You're flipping it horizontally.
Robin Heinze:
No, right. No, but you're flipping it around the Y axis.
Mazen Chami:
You're flipping it on the Y.
Robin Heinze:
Cause X would flip it upside down. Y is the fulcrum.
Jamon Holmgren:
I don't know if that's how you say that.
Robin Heinze:
Yes. I promise.
Mazen Chami:
How about this, we flip everything because if you're looking at it from a mirror...
Jamon Holmgren:
You're flipping the X.
Robin Heinze:
No, but you're flipping it around the Y axis.
Jamon Holmgren:
Yeah, around the Y axis. But that's how you say that?
Robin Heinze:
Yes. That's how you say that. Jamon, you're talking to a math major.
Jamon Holmgren:
I know. Okay.
Mazen Chami:
Okay.
Jamon Holmgren:
But I'm still going to Google it.
Mazen Chami:
Editors please do not cut this part out. Keep going.
Jamon Holmgren:
Of course Todd will.
Mazen Chami:
So yeah, react native will automatically flip it for you so that everything now starts coming from the right hand side. So the drawer that was mentioned before now pops out from the right hand side and then we'll close towards the right hand side. In English, it's the left hand side. So that was actually really cool to see. And that's available across the board because there's some pieces here and there where you need to handle the writing direction.
Robin Heinze:
Jamon is looking so skeptical.
Jamon Holmgren:
No, see everybody on the internet...
Mazen Chami:
You trust everybody on the internet?
Jamon Holmgren:
Says Robin's right. So I don't know.
Robin Heinze:
You're just trying to find one person that says that you're right.
Jamon Holmgren:
The thing is you're not flipping anything on...
Robin Heinze:
Yes, you are.
Jamon Holmgren:
The Y axis stays the same.
Robin Heinze:
All the values stay the same. Only the X values change. Right?
Right. The X values change because you have flipped something around the Y axis.
Jamon Holmgren:
Yeah, but I'm not...
Robin Heinze:
Just imagine it's like there's a hinge and it's like a vertical hinge, right? So you can like...
Jamon Holmgren:
Yeah, that's not how I think about it.
Robin Heinze:
Well then you think about it wrong.
Jamon Holmgren:
I guess. Okay, we're so sidelined right now.
Robin Heinze:
Oh man.
Jamon Holmgren:
Let's move on. I think it's amazing by the way, the whole right to left stuff.
Robin Heinze:
It's just not something you see very often.
Jamon Holmgren:
I also had no idea that it's not just the text, right?
Robin Heinze:
It's the thing, the interactive parts of your app, the drawers, like everything.
Jamon Holmgren:
I want to swipe back. Normally you start on the left side and you swipe your thumb to the right with right to left...
Robin Heinze:
It's the other side. Everything is different.
Jamon Holmgren:
You go from the right and you slide to the left and that means back, It breaks my brain a little bit.
Mazen Chami:
The crazy part is if you just look at the screenshots we provided, you'll notice the time is no longer in the top left. It's now in the top right.
Robin Heinze:
Your status bar in your OS.
Mazen Chami:
Flips on the Y axis.
Robin Heinze:
Flips that's wild.
Jamon Holmgren:
Okay. Yeah, it's amazing.
Mazen Chami:
So huge shout out to actually my mom for proofreading my Arabic.
Robin Heinze:
I thought you were going to say yourself.
Jamon Holmgren:
Well you should.
Robin Heinze:
Huge shoutout to myself.
Jamon Holmgren:
Mazen's mom though helped make sure that the Arabic was a hundred percent because...
Robin Heinze:
Google Translate is not reliable.
Jamon Holmgren:
It's funny because you listen to Mazen you're like, there's no way he's English as a second language. His accent is perfect. Perfect American accent. And the first time I met him, Mazen and I...
Mazen Chami:
Thank you.
Jamon Holmgren:
I was like, really? You grew up in Nigeria? You speak Arabic. How's this possible? You sound like you just... But yeah, it was really cool that she could be involved in this as well.
Robin Heinze:
I also definitely had to beg Mazen for help a lot because VS code does not know what to do with right to left languages. And so I'd be like, I need to add translations to the locale vials again, can you help me?
Mazen Chami:
Cause if you're selecting your...
Robin Heinze:
It's completely broken.
Mazen Chami:
Left to right and start dragging, you have to drag right to left. But then if there's an English character in the middle, which there's some words you can't really translate into Arabic, it would bug out in that scenario.
Robin Heinze:
Yeah, very broken.
Mazen Chami:
So [Arabic] Twitter. So that's for all you Arabic speaking...
Robin Heinze:
We have no idea what he just said. So...
Jamon Holmgren:
I have the translation in front of me, but yes.
Mazen Chami:
And then also we can't forget Leon and Kate Kim who did the Korean aspect of it. Korean is left to right.
Jamon Holmgren:
Yeah, so we added Korean as well, which is a left to right language. So that was a little bit easier of a translation process. But it's nice to see three languages in Ignite right out of the box. You don't have to think about it. That's a big thing I want to add. Oh yeah, I guess we should have internationalization. Okay, well let's kind of like... I'm sure there are Arabic speakers who are listening to us right now or let's say any right to left language where they're like, yeah, they switched the words but the rest of the app doesn't feel right because you still have to swipe the wrong way and blah blah blah. Where this will be like, no, this feels like it was built by an Arabic software team...
Robin Heinze:
Which is was.
Jamon Holmgren:
That natively speaks Arabic and natively understands the situation.
Mazen Chami:
And then there's a lot of right to left languages that have, other than Arabic, you have Hebrew, you have Persian, you have Urdu. So there's a lot of languages out there that would need the support.
Jamon Holmgren:
And they benefit from this.
Mazen Chami:
Exactly. Yeah.
Jamon Holmgren:
I would go so far as to say that Ignite is now the canonical example you should be looking at if you are doing right to left, you should be looking at what we did in understanding what we did.
Mazen Chami:
Do a global find for is RTL. And you'll see a lot of the scenarios where it's one off scenarios where you actually had to translate X differently because of RTL.
Jamon Holmgren:
See X. All right, let's move on. New component showroom. So this is a big one. We removed storybook. We talked about this before so I'm not going to go too deep into it, but you just got to go check it out. It's like it's really cool not only the way it looks when you're browsing through the device, but also how the code itself works. So it is inspired by storybook for sure. So there's some similarities, but it's simpler and just sort of more straightforward. It's what Yulian who built it really likes to... He does this on his own projects anyway. When he builds, he'll kind of make his own version of storybook. So now we call this the component showroom and that is now in Ignite, a very cool system and it's totally yours. It's built in, it's not like a run time or dev dependency or anything like that. It's just in your app.
Robin Heinze:
It's just a screen with components on it. Really cool. There's no mode that you have to enter to be in storybook mode. It's just right there. You can even keep it if you want and just have it accessible only via a special dev menu if you want. And just keep adding to it. That's one option. Or you can remove it entirely. Also an option. Yep. Super cool.
Jamon Holmgren:
Robin already mentioned the new login screen. In addition to that, we actually have code that is the authentication flow. So not only do you need to be able to log in, but you need to have kind of an authentication flow. You could plug in different types of authentication like processes and I'm going to be teaching a workshop and I'm going to actually implement into an Ignite Maverick version eight app, an actual authentication flow using Firebase email password. So that's pretty fun. What's cool is there's placeholders for all that stuff. You can just... It's always stubbed out right now, so you can just drop in your own authentication. Just keep rolling and it uses MobX State Tree for the global state so that you can say, Oh, I'm authenticated now. And then the spp will navigate to the right spots and you can access the right spots.
Robin Heinze:
We actually did just that on my client project.
Jamon Holmgren:
Nice.
Robin Heinze:
We used the screens and modified them to meet our designs and they were previously using just a context in order to store the off hook they got back from off zero, which is the provider they're using and they switched it to using the Off store that comes with Ignite and it's working great.
Jamon Holmgren:
It's fantastic. So Ignite, when you generate a new app, it will ask you if you want a bunch of demo screens and it allows you to, if you decide to have those in there, you can actually remove them later too with a command. If you run NPX Ignite CLI remove-demo, it will actually remove the demo code from your app and give you sort of a stripped down streamlined experience so that you can build something from the ground up. But having all of the defaults, having all the navigation stuff set up, authentication flow, all that stuff.
But just without all the stuff that you would probably have to go in and manually delete. This is a really cool thing that Frank Kalise and Josh Yoas who both work at Infinite Red worked on and I'm really excited about that too because that was always a big question. Do we include kind of the kitchen sink everything and then make people rip it out when they don't want it? Or do we give them something really stripped down that when someone spins it up that they're like, well this isn't giving me anything. In this case we can give them both. We can give them the kitchen sink when they want it and then strip it out when you don't.
Robin Heinze:
Remember when Ignite went through its plugin phase?
Jamon Holmgren:
Yes, I did.
Robin Heinze:
And that was terrible. We originally had a kitchen sink approach and then we're getting some criticism about that and people weren't liking that they had to rip stuff out. So we went to this plugin approach where if you wanted maps or all sorts of various extra features, you would add a plugin. But all these plugins were NPM packages that then we then had to maintain and update. It was terrible. I think this is really the best of both worlds where we give you everything and then we make it really easy to remove with a single command.
Mazen Chami:
And you can also ignite your app without it in the first place. So in the interactive CLI that we mentioned, I think that's the last question they'll ask you if you want the demo...
Jamon Holmgren:
Exactly.
Mazen Chami:
The demo stuff, you could say yes or no.
Robin Heinze:
Right.
Mazen Chami:
And there you go.
Robin Heinze:
So for those of us who don't really need to see the demo stuff, because we're just going to rip it out right away, just skip it.
Jamon Holmgren:
Although I want the login screen and things like that. So because of the way we did implemented the... You just have to go read the docs, but the way we implemented the demo, you can go in there and delete some markup and some of the files.
Robin Heinze:
You can customize, you can customize exactly what gets removed. Yeah, it's really, really...
Jamon Holmgren:
So you just move a little bit of markup. It's like at demo remove file and you just delete that line and that file won't get removed anymore when you run the command. So pretty cool stuff.
Robin Heinze:
Very cool. Thank you to Josh and Frank.
Jamon Holmgren:
Yeah, there's a ton of more, by the way, I want to call out specifically Kate Kim as well who works with us. She, she's one of our software engineers and she did a lot of work on the components and the showroom and also implemented a really cool feature for our templates and our generators.
Robin Heinze:
Front matter.
Jamon Holmgren:
Yeah, it's called Front Matter and it's much more powerful now.
Robin Heinze:
Very useful. I've already used it sometimes.
Jamon Holmgren:
She's working with you now on your project, Robin, and I know you ran into a situation where you needed something more powerful, more complex within your project and she was able to help with that.
Robin Heinze:
Yep.
Jamon Holmgren:
We are pretty much out of time, actually. Probably were a while ago, so we're only halfway through our list. I'm going to just skim through the rest. There's some new really powerful generators. There's a splash screen generator. One of the annoying things about Splash screens, man, say that...
Mazen Chami:
Say that fast ten times.
Jamon Holmgren:
Is that you often... Like what sizes do you need? Where do you need to put them? How do you link them?
Robin Heinze:
So annoying.
Jamon Holmgren:
Always annoying. Where now you can just run an Ignite command and it will pull up from one image, it will actually generate all the different sizes and Boot splash, expo, splash screen uses all that stuff. There's a new icon generator, which is very similar where you can provide it a file and it will generate all the different...
Robin Heinze:
App icon specifically.
Jamon Holmgren:
Yeah, app icons so that your app icon is what you want. As mentioned, we have new navigators, a tab bar and new drawer. We have that new demo podcast screen, which you may be listening to this podcast through at this moment. There's a new debug screen, which is very cool. It gives you some debug information. Also integrates with ReactaTron, which is a desktop app for debugging React Native apps that we released. And so definitely check that out. There's a new crash reporting interface.
Every app needs crash reporting. You should always have crash reporting. So there's an interface for implementing and actually example code for crashlitics, bugsnag, and Sentry all built into that. You can also choose your own and just drop it in, but those are the ones that kind of come with it. New error boundary component. We updated MobX State Tree and the ReactaTron integrations. I did a bunch of kind of refactoring and the code there to make it a little bit more like what we would do in an actual project.
We added Reanimated. Right now it's Reanimated Two but we're going to upgrade to Reanimated Three at some point here. We upgraded React Native and Expo to recent versions. Not the most recent but very recent. What we basically do is follow expo's version. So whatever expo supports is what we support. So fairly recent. We enabled Hermes by default. We did some other navigation cleanup. The CI and tests are much faster now. Thanks to work by Josh Yoas. Many bug fixes and developer experience improvements. So if you want to use it, go to infinite.red/ignite. You can also use it in your terminal NPX ignite dash cli new, and then whatever the name of your app is, like pizza app. But yeah, just go to infinite.red/ignite and it'll redirect you to the GitHub page, which you can find all of our new documentation and stuff like that.
Robin Heinze:
The more people use it, the better it'll be.
Mazen Chami:
Totally. Please fill out issues...
Robin Heinze:
Yeah, please file issues if you find them.
Mazen Chami:
And also reach out on the Ignite Channel on the community Slack for the Infinite Red Community Slack because there's a lot of developers out there that are currently using it and talking about how to solve some stuff that's coming up.
Jamon Holmgren:
That's a big piece of Ignite is just the community you get with it. And since everybody's using the same stack, you get a lot more help Community.Infinite.Red it like... React Native is a little bit fragmented in some ways. By using Ignite, you get all this like, oh, everybody's using this and they're going to help you out. So you can also find a new twitter community rn.Twitter.infinite.red. You can find us online @robin_heinze, @JamonHolmgren, @MazenChami, and @Reactnativerdio.
As always, thanks to our producer and editor, Todd Werth, our assistant editor and episode release coordinator, Jed Bartausky, our designer Justin Huskey, our guest coordinator, Derek Greenberg. Thanks to our sponsor ChainReact. Also our sponsor, Infinite Red. Check us out at chainreactconf.com and infinite.red/reactnative. Thanks to all of you. Make sure you just subscribe, Give us a little rating if you can on your podcast app. Really appreciate that. Robin, do you have a mom joke to take us out?
Robin Heinze:
What does Charles Dickens keep in his spice rack?
Jamon Holmgren:
I don't know.
Robin Heinze:
The best of times. The worst of times.
Jamon Holmgren:
Okay.
Robin Heinze:
No, not even a chuckle. Okay.
Mazen Chami:
And out.
Jamon Holmgren:
See ya.