Todd Werth:

Welcome back to React Native Radio Podcast, brought to you by one of the best countries in the world, Canada. Thank you for being such good people. Episode 3 24, migrating to Expo with Alfred.

Robin Heinze:

Hello, I am Robin. This is Mazen and we are React Native Radio. We are super happy to have a guest with us today as well. Alfred Aru.

Alfred Lieth Årøe:

Close. Close.

Robin Heinze:

I'm not sure there's a lot of Norwegian characters in that name and it's very early in the morning, so I apologize for that not being perfect. But we are so happy that you're here. Alfred is a Norwegian developer who's been making apps for the last 10 years and he loves creating apps that feel great to use and that solve real world problems. And we're here to talk to him about converting his app to expo, which is really exciting. But before we do that, I of course have to introduce you to our sponsor for the very first time. 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, and we've been doing this for nearly a decade. If you're looking for React native expertise for your next project, hit us up at Infinite Red slash Radio. And don't forget to mention that you heard about us through the React Native of Radio podcast. Alright, let's talk. Converting an app to expo, we found you on Twitter X, whatever it is.

Alfred Lieth Årøe:

Yep.

Robin Heinze:

Talking about how you converted your apps to Expo and then Expo also found you, I assume on Twitter.

Alfred Lieth Årøe:

Yeah, correct. Yeah.

Robin Heinze:

Featured you in their blog, which is really exciting for you and really exciting for us who got to read the article. Why don't you start by just telling us a little bit about yourself, your background, how you got into React native and into programming in general, just like how you got to right now.

Alfred Lieth Årøe:

Yeah, of course. Yeah. I'm a Norwegian mobile app developer, working as a consultant here in Norway, starting to program to go into app development. Started maybe 10, 12 years ago when I was in high school. I thought it would be really cool to just have an app on the app store, downloaded Xcode on my brand new school Mac, and started watching YouTube videos and try to figure out all the stuff. So I actually started programming in Objective C.

Robin Heinze:

Wow. Wait, so hold up.

Alfred Lieth Årøe:

Yeah.

Robin Heinze:

First of all, they give you Macs at school.

Alfred Lieth Årøe:

Well, they give you a certain amount and you can buy the Mac for the difference in

Robin Heinze:

Norway. That's amazing.

Mazen Chami:

Let's not get into educational system differences, please. I think we're way behind and losing on that topic,

Alfred Lieth Årøe:

But yeah, I started on my Mac and I just fell in love with app development, started making some small games continuing just from that and then ended up making a career out of it after going to college and learning even more about it.

Robin Heinze:

Amazing. That's really cool. Yeah, that you were able to start so early.

Alfred Lieth Årøe:

Yeah.

Robin Heinze:

Let's talk about your app specifically. First of all, what is it? What does it do?

Alfred Lieth Årøe:

My app is called The Blur. It's a social party game app that I developed it while I started on uni, can be used with a group of friends. You write down the name of all the people in the pre-party or the bar or at just a gathering and the game gives you challenges and cool stuff to do and if you're a bunch of new people together, it can works as a good icebreaker and yeah, it's just a fun mini games.

Robin Heinze:

What kind of audience do you have for number of downloads? Is it just like you and your friends or is it you got a pretty big audience for it.

Alfred Lieth Årøe:

So when we made it, we just made it for ourselves because we used some competitor app that we found that was a bit lousy and didn't work that well, especially in Norwegian. So we made it for us here in Norway and it sort of took off and yeah, I think we're around like 400,000 downloads now, so it's a pretty good download base from just being a hobby project and

Robin Heinze:

Wow. Yeah.

Alfred Lieth Årøe:

Awesome. Just having fun with the film with my friends, so yeah.

Robin Heinze:

That's crazy. I wish I had been around when I was pre-gaming parties.

Alfred Lieth Årøe:

Exactly. College, it's not late.

Robin Heinze:

Awesome.

Alfred Lieth Årøe:

But the fact that it being in Norwegian and that we could culturally make it good for us, Norwegians, I think what made it popular here in Norway and then we started doing it in Sweden and Denmark and further to English and stuff, but it's still like the Norwegian based that's most popular still.

Mazen Chami:

That's awesome. So you mentioned starting objective C in college. Before we fast forward a little bit to now and the expo conversion, what curiosity or what brought you to then explore and move from objective theater to React native and at what point was that in your career?

Alfred Lieth Årøe:

So I actually started the objective C stuff in high school, and then when I started the uni I met some really smart friends who told me React native is the new shit. It's real good. And I've always thought it's such a period that I could only make apps for iOS, I want to make it for Android as well. And then that's

Robin Heinze:

Basically exactly what happened if it read in 2015. Yeah,

Alfred Lieth Årøe:

Exactly. Yeah. And yeah, I really liked the philosophy of React Native, that it's still actually native, but you can write it once and have it actually native on both platforms. So yeah, I just got a Udemy course or something and I went through 20 hours of learning really cheap course, but I learned a lot. And then yeah, now I can make React native apps and just started making this app blur. Awesome. That's

Mazen Chami:

Awesome. You've learned React Native. You're using React Native, you have an app in React Native that is used by, you mentioned a big user base in Norway. What then motivated you to then not necessarily start over but rewrite your app or migrate it over to Expo? That's a big task and a big ask and you don't want to mess things up along the way and lose some of your user base, right?

Alfred Lieth Årøe:

Yeah, I had to do a lot of research before I made a decision to actually migrate to Expo. But yeah, I have three main main reasons why I chose to do it. Well, first off, yeah, so the React native team actually recommends using a framework for your mobile app for your React native mobile apps. And expo being the most popular felt like a good choice. They made a good blog post about it and at least one thing that resonated very well with me was that they write that you either are using a framework or you're essentially creating your own, and I don't have time to create my own, so why not use something that's good and tested. And also I was using the code push from App Center, which is now retiring, and I really needed a good new CICD pipeline to make it easy for me to publish my app. And Expo offers a good CIC the platform that supposedly was easy to set up. So that was thing for me. And also the last thing that made me do it is that I've been using React Native since version 42 or something and upgrading all that wave up to 77 or whatever it is today, it's upgrading has always been like a pain. And

Alfred Lieth Årøe:

The expo, continuous native generation really resonated with me so that I always felt like a robot When I did upgrade. I just followed along the React Native upgrade helper and one file at a time and oh no, I forgot that one line. And then

Robin Heinze:

You get to the native ones and you're like, what am I doing?

Alfred Lieth Årøe:

And then we have some native dependencies and you have to remember what steps each package did to upgrade and it's a mess. So the continuous native generation really resonated with me, so that's really the reason why I decided to migrate. And as a solo app developer, I have the authority to do that.

Robin Heinze:

Yeah, it's much easier when you don't have to get the approval of stakeholders and product owners and risk assessors. Yeah. So that's nice that you could just do it. Yeah, there's so many positive things about Expo and these are all the same reasons that we use and love Expo, and so it makes sense that you decided to take the step. So let's talk about the actual migration. Can you walk us through the preparation and then the overall steps that you took? Did you have to assess your dependencies first? Did you have to make any changes to your app before you started? What was the sort of beginning stage?

Alfred Lieth Årøe:

Well, yeah, I had to look at my dependencies first. Of course, some of them were not capable with compatible with Expo and especially the CHN. They didn't have the config plugins. So I started by just going over every dependency I had and first look at, I have a native code in them. If so, check if they are compatible with the expo through the config plugins and if not, then find an equivalent package to change it out with.

Robin Heinze:

Did you consider writing your own config plugins for any of the packages you were using?

Alfred Lieth Årøe:

Yeah, shortly, but then I found

Robin Heinze:

It's a commitment for sure. We've done a couple and it's pretty uncharted territory at this point. There's a ton of documentation for how to do it. I think the couple that we had to write, we spent a lot of time just reading through open source libraries to see what their config plugins looked like to try to backwards engineer the APIs for stuff. So yeah, it's not super fun to write your own yet, but luckily there's a lot of libraries that have 'em.

Alfred Lieth Årøe:

Yeah, and I found the dependencies I wanted to change out. I found compatible dependencies actually made by Expo most of them, so that felt like a safe bet to just use them instead of writing my own config plugins.

Mazen Chami:

These days, I feel like it's hard to find a package that's not either written by expo or has an expo config plugin. It's pretty large.

Robin Heinze:

Right.

Mazen Chami:

Did you run into that where you had to, you didn't find a package that was compatible within the expo ecosystem and then you had to pivot a feature per se?

Alfred Lieth Årøe:

Not exactly, but some of the packages were like the API had changed a bit from the

Alfred Lieth Årøe:

Of course,

Alfred Lieth Årøe:

But so I had to rewrite some of it, but it wasn't too bad for me. I was lucky there, I guess.

Mazen Chami:

That's great. That's a big plus, not just plus one, plus many. I think for the React native ecosystem and expo, just to show that you didn't have to can a feature, you didn't have to completely cut something down. It was just API differences. Right. Everyone,

Robin Heinze:

There's always a way.

Mazen Chami:

There's always a way. Right. And in React native, we're not expecting everyone to write the same API for every single package. So it's just different writing styles right. At the end of the day. So can't fault anyone for that part.

Alfred Lieth Årøe:

Yeah, exactly.

Mazen Chami:

One thing I want to highlight from your blog that I think is very important for our listeners, if you haven't heard read the blog yet, the immigration took you a whopping four days.

Robin Heinze:

I've had React native upgrades that took longer than four days.

Mazen Chami:

Yeah, I've had React native upgrades that took me weeks to accomplish. So you did a whole migration in four days. How did you achieve this? What would you say was the part that made it so easy and efficient to be done in four days? You said you had to rewrite APIs, so that can take some time, but how did you manage to achieve this? Sorry, I'm in, I don't know how to phrase this question. I feel like four days is not, was

Robin Heinze:

It So here, was it just the expo? Is that easy to migrate to or was it like your app was particularly well set up? What do you think made it take only four days?

Alfred Lieth Årøe:

Well, they have a lot of nice developer friendly blog posts and tools. So one tool that helped me a lot was the expo doctor tool, which essentially gives you a checklist of what's wrong with your expo setup. So that helped me a lot finding some stuff, and then

Mazen Chami:

That's a tool that I feel like we don't use enough, at least personally I'll speak personally, I don't use that enough. And now that you bring it back up, I see how that can help throughout the

Robin Heinze:

Process. It's really good. I use it pretty, I use it when I upgrade the Expo SDKs.

Mazen Chami:

It's very handy. I did it when I was migrating to new architecture, and I remember it saved me before I even got into it. I was like, ah, okay, here are Jup packages. They're not compatible. Let's dig into it kind of thing. Before we started,

Robin Heinze:

I found it really starts to help a lot when you're doing an upgrade on an app that's maybe a few years old and you've been doing upgrades, but because it's three years old by just nature, there's just packages that start to get old, and there's just more and more of those. And so when you do an upgrade, it'll just help you figure out which packages you need to bump up as you go.

Alfred Lieth Årøe:

Yeah, I agree. It's kind of underwritten. So yeah, hopefully more people will start using it to make their life easier.

Robin Heinze:

It gives you a ton of information, so it's awesome.

Alfred Lieth Årøe:

Yeah, so that helped me a lot and used the expo version that was compatible with the React native version I was currently using. So internally there wasn't that many changes happening when I started using the CGN through the pre-build command. So yeah, it just worked great.

Mazen Chami:

Awesome. Yeah. So now that you've done the migration, let's fast forward past that for a little bit. What immediate benefits have you observed in terms of your development flow, your applications performance? Maybe how has Expo helped you level up your developer experience and your app?

Alfred Lieth Årøe:

Well, first off, I don't have to create all my releases locally on my computer anymore. I do it through EAS, and that works pretty well. I don't use every feature it got, it's gotten so big lately. But yeah, I find it pretty useful also with when you build, you can add the submit tag and you get it all the way through to App Store Connect, which is really nice.

Robin Heinze:

So you're utilizing the submit feature. That's nice. Yeah. I'm curious about how you're actually utilizing the EAS services in your just development workflow. So I know people who only develop off of EAS built simulator builds, and I know people who, even though they use EAS for their release pipeline, they still do all of their simulator builds locally through X coded stuff. Which one are you? Are you full EAS or do you still do your local development?

Alfred Lieth Årøe:

I still do my local developments. I'm at the latter case, but for the release stuff, I like to have expo manage it all and all my secrets and stuff. But I actually use GitHub actions to trigger the build command, and then it just runs and I get a notification on my phone when it's done. So it's really nice.

Robin Heinze:

Yeah, that's similar to what we do a lot. I find that I prefer prefer building in Xcode manually just because I get more visibility into builders and things like that. But I do utilize the EAS simulator builds a lot for on client teams. A lot of times you'll have to have a QA person install the builds and run them for maestro end to end tests and stuff like that. And it's much, much easier to tell them to here, download this file or scan this QR code than to help them get X code and node and all these things configured to run in their environment. So I really, really love that that's an option.

Alfred Lieth Årøe:

Yeah, it's nice that they have options for all of this, but for me, I am the QA person and I am the developer and I am, yeah, you're all the people. I'm everything. So one man show, one man

Robin Heinze:

Show,

Alfred Lieth Årøe:

But I'm working with a friend on this app as well. He doesn't do any development just like the organization and everything else, and he can download the apps through test flight. So then that works great for us.

Robin Heinze:

Yeah. Awesome.

Alfred Lieth Årøe:

And one more thing I found real cool with the ES setup and with the local builds through Expo is that you can give environment variables to your app config file and you can change out stuff for each type of build. So I've created different icons and different identifiers for my apps. So I can see, okay, now I have a development build on my phone and I have a staging if I test that through ES, and of course the production app from App Store. So that's a really cool

Robin Heinze:

Trick. That's one of my favorite features. It's just how easy it is to do that. I know it was possible to do it without expo, but I remember on one project having you got to set up multiple app schemes and it was just a lot of really fiddly native stuff,

Alfred Lieth Årøe:

And it's different on iOS and Android.

Robin Heinze:

Just being able to put a file, an app icon file in your app config and just say, okay, this one's for dev and this one's for test, and this one's for prod. And it's so, so much easier.

Alfred Lieth Årøe:

And it's all Typescripts so familiar as well.

Mazen Chami:

The best part about it is you all mentioned one file for each environment that drives it all as opposed to doing it natively where you need the 20 different files, 20 different files, extension names and density pixels and

Robin Heinze:

Oh my gosh,

Mazen Chami:

And it's always wrong. So that's the beautiful part of expo.

Robin Heinze:

Yeah, it really is. Did you feel like the benefits that you realized after you finished your migration kind of matched with your expectations going in? Did you get all the benefits that you thought you were going to made the decision to migrate with The idea in your head of all these things that are going to be great about Expo, did all of those basically come true? Was there anything that you maybe were disappointed by or that you didn't even realize you would get that was more awesome than you thought, or was it what you expected?

Alfred Lieth Årøe:

Yeah, I set myself some target goals for the migration and I would say that they all successfully met and I thought I would do it in even longer time because it's like a full migration and rewrite and stuff. But yeah, it went really well. One thing that I might have noticed is the local bill times is a bit longer than Bear reactive, but that doesn't matter much.

Robin Heinze:

You're talking about using the dash ash local flag.

Alfred Lieth Årøe:

Yeah,

Robin Heinze:

There's a little bit of overhead of what DAS is doing, I think.

Alfred Lieth Årøe:

And another problem that I met was with the config plugins, as you said, the environment is not perfect, but it works when it works. And one thing I found was that if I had two different config plugins and config plugins, and when I tried it out, everything crashed, but I tried switching the places in the array for two of the config plugins because it seems like they're happening sequential down the road so it can change overrid the other.

Robin Heinze:

Yeah.

Alfred Lieth Årøe:

So that's one thing to be cautious about. And yeah, that is a solved problem, I guess, but just from my case, just switching the places in the actual array solve the problems for

Robin Heinze:

Me. Amazing. Yeah, there's some rough edges like that, and it takes a little bit of trial and error sometimes on the config plug side, but it's a really powerful system just thinking about what you're getting. You're like, I can write a little bit of code and then generate my entire native projects with one command. That's crazy that you can do that. So I'm like, I'll put up with a little bit of trial and error trying to get it to work. So we don't have a ton of time left, unfortunately. I wish I could talk to you about this all day. This is one of our favorite topics is talking about Expo, but let's talk about the future a little bit. Are there any features of Expo that you haven't utilized yet that you're looking forward to or upcoming updates that you're excited about trying? I know EAS just released

Mazen Chami:

Workflows,

Robin Heinze:

Their workflows, and they have their whole own cloud ServiceNow. Is that something that you're keeping an eye on and going to try out?

Alfred Lieth Årøe:

Of course. I find it really interesting, and one of the bad things with my setup with the GitHub actions and not using export workflows all the way is I try to tag out my releases, but I just have to guess that it's going to work when I build for production and stuff so they can keep their service running and then tag out and do releases and stuff after that. So I find it really, really cool that they're going all in on that stuff. And another thing that I'm excited about is the React server components coming to React native and Expo. So if I find a good use case for that, then when it matures, I really want to try out that. And yeah, I think it's cool technology.

Robin Heinze:

Yeah. Yeah. No, I love that. These are all the things that we're also excited about, and it really seems like Expo, I love that their team is so all in on React Native specifically, their entire focus is React native and building really, really good tools for React native developers. And they seem to really understand what React native developers need and want.

Alfred Lieth Årøe:

Yeah, I totally agree.

Mazen Chami:

Awesome. So at any point did you need to reach out to the Expo community or the React native community for help during this migration? And how did that go for you?

Alfred Lieth Årøe:

Not exactly. There's so many blog posts out there, so I just went through those. I

Robin Heinze:

Mean, that kind of is the expo community, it's just the amount of people that post online about what they're doing.

Alfred Lieth Årøe:

Yeah, one thing that I was a bit concerned about was I have a native iOS widget that I wanted to keep after the migration as well, and I found this great blog post from Evan Bacon, which I followed, and that helped me a lot. Without exactly that blog post, I don't think I would've managed to create a feature again because the other plugins seemed not that maintained and stuff. Yeah. But other than that, no, just a blog post and a bit of chat. Ki Tea maybe, but

Robin Heinze:

Awesome. Oh, what would we do without Cha GBT these days? And now you've written your own blog post that's now going to help others hopefully. So you've paid it, you've paid it back.

Mazen Chami:

Yeah. And I guess for those that are reading the blog, have read the blog post and listening to this now, do you have any kind of advice or anything that you would've done differently during the migration now that you are looking back at it and talking about it again?

Alfred Lieth Årøe:

Yeah, for the native widget, I know the plugin has become a lot much better. I think Evan has worked a lot of it and actually made it to an NPX great target or something, command supporting a lot more than just widgets. So that's not a concern anymore, I guess. And yeah,

Robin Heinze:

I just found Evan's blog post and it's really, I'll add it to the show notes, but

Mazen Chami:

I've used it before. It is pretty cool. This is one of those scenarios where, I don't know, we're talking about that Uber thing that comes up at the top

Alfred Lieth Årøe:

Live,

Robin Heinze:

Live activity,

Mazen Chami:

Love or

Robin Heinze:

It's the island, it's the dynamic island,

Mazen Chami:

Dynamic island and live activity. This is one of those scenarios where I feel like between Dynamic Island Live activity, widgets and all that, you mentioned, you kind of still have to do some native coding, and I wonder if we'll ever be able to cross that threshold and be able to do it fully in TypeScript. I'm sure at some point we'll get there, but I think right now it's pretty interesting how you still have to do a bunch of it in native, and this article does a really good job of showing you how much you can do in React Native. And I love that.

Robin Heinze:

Well, and this is the type of thing that I always highlight when I'm talking to skeptics, like native developers who are skeptics of React Native would be like, no, no, no. We're still using native stuff and we need your help. We need your native expertise to make React Native even better and stronger. And the good ones see it for what it is. Yeah. We won't talk about the other ones. No. Awesome. Unfortunately, that's all the time we have, and I wish we could have talked longer. This is one of our favorite topics, but this was really, really great to talk to you, and hopefully it helped out anybody out there who's thinking about converting their app to expo and giving them the confidence to do it. It might only take four days.

Alfred Lieth Årøe:

Yeah, thanks a lot for having me. It was really fun.

Robin Heinze:

Awesome.

Mazen Chami:

Thank you for coming on offer. It was a pleasure to talk to you. Before we wrap up, Robin, do you have a mom joke for us?

Robin Heinze:

I have several. I had to pick because I had too many to choose from, but this one is from our friend Nick Morgan at work, so what's the best thing about, well, the flag is a big plus.

Jed Bartausky:

That is very true. Yeah. Nice, nice.

Robin Heinze:

I thought it was good.

Alfred Lieth Årøe:

Yeah,

Robin Heinze:

It was fitting because our European friend probably is very familiar with the flag of Switzerland. There you

Alfred Lieth Årøe:

Go. It's a big plus. Yeah,

Robin Heinze:

It's a big plus. All right. Thanks for joining us, Alfred, and thanks for joining us. Those of you out there who are listening, we'll catch you next time.

Alfred Lieth Årøe:

Thank you. Bye. Goodbye. Bye.

Jed Bartausky:

As always, thanks to our editor, Todd Wir, our assistant editor, Jed Bartowski, our marketing and episode release coordinator, Justin Husky and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Hines and Mazen Chami. Thanks to our sponsor, infinite Red. Check us out at Infinite Red slash Radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms.