Analyzing the Difference Between React Native and Native Apps
In this guide, we are gonna focus on the key differences between a tool like Reactive Native and the other mobile native programming languages that are out there.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Because if you're relatively new to the space, especially the space of mobile development, all of these terms and these languages and these frameworks can all get a little bit confusing, and so I wanna walk through the key differences between them, which will hopefully help you understand which option is gonna be the best one for you, either to learn or to build with. So let's get started.

What we're gonna look at are the tools like React Native, the Expo framework, the Swift programming language, and then Java and Android Studio. So we're gonna kinda walk through each one of these. We're gonna look at code examples, we're gonna see when you might wanna use one versus the other, and at the very end, we're gonna through a pro and con list between those two options.

So I'm using React Native as an example. There are a number of other JavaScript frameworks out there as well, like Ionic and some other ones like that. React Native is probably the most popular one and so it's the reason why I've chosen that as the main case study here.

So first and foremost, what is React Native? React Native is a framework and it's a tool set really that allows you to write React code in a way that it can be rendered down into mobile components and don't worry if that's a little bit fuzzy. We're gonna walk through it and in fact, we're even gonna look at some code. So React Native allows you to write one application and that application can then be compiled down, both to Android and to iOS.

So you could create an Apple app for the App Store, you could create one for Android and you can do that all with a single code base, which is a really great situation for a number of developers and companies, especially if you're familiar with React and JavaScript. So how does React Native do it? I think one of the best ways of looking at it is by actually looking at some code examples.

So right here, I have a component and this is a searchBar component.

large

Now, if you're familiar with web development, then this might look very familiar to you. If you are familiar with building and working with divs and spans and heading tags, React Native is built in a very similar way. You can write your code with a similar type of style in the same type of pattern. So right here, this is a searchBar function and so the searchBar has these view tags and then it has this TextInput tag and this TouchableOpacity tag, and I'm calling 'em tags but the correct word for them is actually components.

So the way React Native works, it's not something completely separate from React, it's more of a layer on top of React. It's a set of dedicated components that when you use them, they will get compiled down into code that iOS and Java, which is the Google Play Store, are able to understand. So that is kind of the most high-level, easiest way to understand the way that React Native works is that instead of using tools like HTML, with divs and spans and all of those tags, React Native replaces those and it says no, if you're gonna build mobile apps, you have to use these components and when you do, behind the scenes, it's gonna do all of the hard work for us. It is going to go and it's gonna compile each of these elements down, whether it's a View tag or a View component, which is very similar to a div tag when you're thinking of building your layouts.

A TextInput component. This is exactly like how an input tag would work or works very similar to an input tag in an HTML form. TouchableOpacity, this is a component like a button, and they actually have a dedicated button component as well. And so they have this full set of hundreds upon hundreds of dedicated components that you can have access to, and you can even see it here at the very top.

When I'm importing from React Native, I'm importing these dedicated components and these are the tools that you use in order to build your own mobile applications. Another nice thing when working with React Native is how it works with styles. So it has a dedicated style sheet component and so if you're used to working with tools like Sass or CSS, this is gonna look very similar to you.

Now, this isn't technically CSS but with how React Native and the developers who created it built it, it's leveraging the same type of naming structure and the same types of patterns and what each one of these elements are gonna do, which is actually just calling a function, it's just calling the StyleSheet.create function, it's gonna take all of those style definitions that you gave it and then it's going to write the style code in a way that the phone, whether it's iOS or Android, is gonna be able to understand. This is a really nice way of being able to write your styles if you're used to writing for the web.

So that's kind of a look at what React Native code looks like and hopefully you can see it's very similar to building web and especially React applications. Your key takeaway for knowing what React Native is, is it is, a set of dedicated components that allows you to write code in the same type of way that you've done with web applications and it will then go and compile that code down into a way that the smartphones are able to understand.

So that's kind of React Native in a nutshell, and hopefully you can see some of the benefits already with using it, especially if you're already a React or JavaScript developer.

On top of that, there's another tool called Expo.

large

Nowadays, you almost always see React Native developers using Expo as a framework because what Expo allows you to do is to add a layer that really allows you to work with some of the device-centric APIs. So things like permissions and working with say location or push notifications. Expo allows you to do all of that for either operating system.

So I've spent the better part of a decade building mobile applications, mainly for iOS and a few for Android and I can tell you from experience that working with two sets of code bases and being able to work with tools like push notifications and getting device locations and all of those kinds of things can be a very challenging task, especially for a small team. Tools like React Native and then Expo allow you to streamline that entire development process.

So that's the first part of this discussion. Now let's talk about Swift and then we'll get into Android and the tools that you use with that. So Swift is a strongly typed programming language that was created by Apple. Swift is the main language you would use if you're creating a native iOS application. And if you go to the site for Swift, then you'd be able to see some of the key features that it has, and if you scroll down, you'll also be able to see some code examples and so it's a great language.

large

One key takeaway I also want you to have from this video is that this is not a comparison of these systems and saying one is better than the better. Instead, my opinion is that there's gonna typically be one option that's better for a specific situation but all of these tools are fantastic. React Native and Expo are amazing tools. Swift is a great programing language. Java and Kotlin are incredibly powerful, and so these are all great tools to use.

My goal of this video is mainly to show you what the key differences are so that you can understand it and hopefully, it'll help you make your own decisions when you're building your own applications.

So Swift code is compiled and when it's done, when you've created your build, it gets compiled down into a binary and it's a binary file that the phone itself can then parse, it can read through and then it can run the code. Now, an interesting thing between Swift, React Native and also with Android is that React Native creates an identical type of binary file. They're called IPA files for Swift, and APK files for Android, and React Native actually compiles down the exact same file. That's one of the really powerful things that it offers.

That's how Swift is able to run their programs. It's just a regular programming language. It has tools. In order to build iOS apps with Swift, you typically are gonna have to use tools like Xcode and some of the things that Apple has built specifically.

With React Native, you don't. You can work with any operating system, you can use any type of simulator you want and you can use any code editor. It really gives you some flexibility. When you're working with Swift, and you're building native iOS apps, you have to work in that Apple ecosystem.

Now, moving on to Android, and so Android Studio is kind of the main development ecosystem that Google has created that allows you to build Android apps. It works with the Java programming language and also with Kotlin, which is a newer tool that you can use to build Android apps. If you go to the Android site here, you'll see some code examples.

large

This is an example of the developer interface that they offer. And you can also see kind of what some sample code looks like. This is some sample Kotlin code and so if you've never used Kotlin or Java, Java definitely has a more challenging or it takes longer for you to learn Java, it's a pretty expansive language. Kotlin is a little bit easier to learn and so that's one of the reasons why they released it just so there was a smaller learning curve when it came working with these types of applications.

So same type of approach when it comes to building these native Android applications. You create the application in either Java or in Kotlin, and that is compiled down into a binary file and then that binary file is then uploaded into the Google Play Store. Now, that is the same approach for all three options, whether it's a JavaScript framework like React Native, a tool like Swift or anything on the Java, Android side, the approach is gonna be exactly the same.

Now, one last point of differentiation that I will say when it comes to working with React Native and Expo specifically, is that deploying to app stores, it used to be one of the most challenging tasks of the entire project in some cases. I remember years ago, this is probably about eight or so years ago, being able to deploy a iOS application took several days and I'd run into bug after bug after bug to get it working. Expo has streamlined the entire process to the point where I'm able to get the entire binary built for not just iOS, but also for Android within about less than an hour and there really have not been a lot of errors or bugs that I've run into. So it really does a great job of making that process much easier and much more efficient. So those are the main tools that we're gonna be talking about.

So let's talk about some of the pros and cons, because that's really what we're here for. We're here to see why would we wanna use one of these tools versus the other? And which circumstance should we choose one versus the other? So let's talk about the pros and cons of using React Native. So one nice thing with using React Native is you have a single code base. We get to write our React code in one application and that's it. It can compile down into both frameworks or it can compile into both platforms, Android and iOS.

It also does have the ability if you need any custom elements. So say that you have, an example that I've run into in the past, say that you need a date picker that's only available in iOS. You can do a break and you can say okay, if this application is running on iOS, I want you to show this component, this date picker component that is only on iOS. And if it's on Android, show this other one, and so you do have the ability to have that kind of branching behavior. Now, that also, I'm gonna mention that in one of the cons later one. That's one of the things. That's one of the benefits.

Now, that also leads into the other benefit which is because you have that one code base, you can build mobile applications with a much smaller team than if you had to create multiple dedicated native applications. So if your organization made the decision that you wanted to go the purely native route, where you're gonna have a Java app for Android and a Swift application for Apple, that's perfectly fine.

That most likely means you're gonna have to have multiple development teams. You're also going to have to then coordinate your releases. So you're gonna have to have both of those teams working around the same time and around at the same feature velocity, which can be pretty challenging so that both applications have the same type of functionality. So that's something that you don't really have to worry about with a React Native application because you're only working with one single application. So that's another benefit.

Another one that I personally have is that because this is written in JavaScript, we're able to, as JavaScript and web developers, which is what my background is, we're able to have a much easier on ramp to building mobile applications than if we had to go and learn a brand new language like Swift completely from scratch and then Java or Kotlin. And it's harder than simply learning that language, I can tell you from experience, 'cause I have multiple Swift applications that I built over the years and Objective-C ones even years ago, which was the language used before Swift, and they're very challenging to learn, not just for programming, but you also have to learn how the styles work. How do you build responsive layouts so that you can have the layout work properly and look right on different types of devices?

That can be very challenging. When it comes to using tools like React Native, they've made that part a little bit easier. Part of it is kind of what I showed you before. How you're able, as a developer, to write your styles in syntax that looks very much like CSS. So if you're used to building web applications, you can build and style these applications and they can be responsive, they can work across all types of screen sizes and in my personal experience, it's a little bit easier.

Now, another tool, it's kind of related to that last one, another pro, is that React Native uses Flexbox by default. Every layout has Flexbox used and what that does is it gives you the ability to align the items on the screen in a very responsive way. If you were to do this on iOS or Android, it is much more challenging, especially if you're new to either of those platforms.

And then lastly, the last pro I'm gonna talk about for React Native is what I mentioned earlier with using a tool like Expo. If you use Expo, you're able to generate your binaries for Android and for iOS very easily. You're able to work with one push notification API across both platforms. You're able to streamline your permissions, access to the user data, all of those things, all with tools like Expo. That's my personal reason why any React Native application that I build, I always layer Expo on top of it for those reasons.

So now let's talk about the cons. Let's talk about some of the reasons why you may prefer to use a purely native app instead of React Native. One good example would be, say that you're not a web developer and you have no experience with React, and you only need to build the application for one operating system, then there's not really any benefit to using React Native.

One of the biggest strengths with using React Native is you get to have one code base for both platforms. If you only care about one of those platforms, then it's not a huge benefit to use, and then you can just pick out whatever language and framework you personally prefer. Next is that if you have a situation where you wanna work with completely different designs for both applications, so say that you wanna have your Android app look very different than your iOS app, then you might just wanna keep those as separate applications, and if you have a very large development team, then you can have each of them build up their own versions, one in Java and one in Swift. That would be another scenario because with the way that React Native works is both of your applications, your iOS and your Android ones, are gonna look very similar.

So that's another case. Now, a third con, and this one I'm gonna say it's a con with a caveat, is that one thing you'll hear people say is they love Java and they love Swift because they're strongly typed, which means that any time you declare a function or a variable, you have to define, and you have to give a set of rules for how that function and that variable are gonna act, whether it's gonna be a string or a number or a collection. Anything like that. With JavaScript, JavaScript would let you define any type of variable in any way that you want, which can lead to some errors and some bugs.

The way that I fix that con for myself is all of the applications, especially the React Native application I write, I write in TypeScript. That gives you the ability to write your JavaScript code in a way that it has types and you can define the rules that your data needs to live by and it leads to much more maintainable code down the road.

The last con is that if you need to do something that has very difficult type of animations, so say you wanted to build some type of multiplayer game or something like that where there are people all around and there's objects, or you're wanting to create Angry Birds or some kind of really intense animation in your application, then you're probably gonna wanna use one of the native applications or one of the native languages and frameworks, because any time you have to work with really complex animations, that's really what they specialize in. I wouldn't recommend that a ton for React Native.

It does have a animation component and an animation API, so for basic animation, so things that I've used it in the past for was say swiping from right to left and being able to manage what happens after that occurs. You can build that type of functionality in with React Native. But I wouldn't build Angry Birds in that. And then one other thing I just remembered as well is one thing I've noticed is whenever a operating system has brand new functionality, so let's remember back when Apple implemented the Dark Mode feature, where a user could simply click on Dark Mode in their settings and then that set a Dark Mode feature.

In Swift, that feature was available right away, right when they announced it. With React Native, it took a few months for that to get into the latest version and into the popular libraries. So that's the other thing I would say is make sure that you're aware of that when you're working with React Native. But hopefully that's been a really comprehensive view between React Native, Swift, and Java showing you some of the key differences, talking about some of the pros and cons and hopefully it'll help you make your decision on the type of application that you wanna build.