This week I published an app built with React.js that was wrapped with Cordova for Android and iOS. Initially this was a pretty fun way to build an app, but towards the end when trying to fine tune the UI and other things on each platform it started to get pretty painful because of needing to wait for React to build followed by a Cordova platform build, and then waiting for the emulator(s) to load.
I’d like to try building my next app using React-Native because of the live loading, but I have a few concerns. My main concern is that right now I’m not wanting to learn or write any native code in Java, Obj-C, or Swift. One thing I’ve liked about Cordova is the community has made lots of plugins for things like in-app-purchases, advertisement frameworks, sqlite, etc., so that I can just install them and then write my code in JS.
How frequently, if at all, would I need to write native code if using React-Native?
My second question is are there any major limitations that React-Native can’t do that React does? I realize this is a broad question, but I’m thinking more big picture larger issues rather than the nuances.
Any suggestions for a noob going from React to React-Native would be appreciated before I dive in. I’m starting to feel comfortable using React.js, and figure it’s time to dive in to React-Native now.
I’m not a react nor react native developer, but I do have experience with Android development (Java/Kotlin) and Cordova. Plus, I have some experience with NativeScript, which is an alternative to React Native (it allows you to use React, Vue or Angular to build native apps).
Whenever a feature you need requires a plugin that doesn’t exists for. This means, if you require some special access to the hardware, but there is no plugin to give it to you, then you’ll have to write that plugin. I can’t tell you when or how often this will happen, since it will depend on each case.
I don’t think that’s a fair comparison . React is meant to work on the web, whereas react native is meant to create native apps using a syntax you already know. It’s not the idea to share functionalities among both libraries (there are, of course), but to use something you already know to create something you don’t know. It’s a modified tool to do what wasn’t meant to do initially.
Well, since I’m not an expert, feel free to ignore me and wait for a more experienced user response.
Almost never, though YMMV if you want to do something very specific.
Well, it’s not v1 yet. And it’s a cross-platform framework, so it makes tradeoffs to make things work across different platforms.
It has a fairly huge community. Most of the knowledge transfers from React, a lot of the code is portable. You have access to a helluva lot of JS stuff whilst using it, covers many eventualities.
The recommended way to use it is through Expo, which makes development pretty pleasant and means you don’t need XCode or Android Studio much of the time. But Expo doesn’t allow arbitrary extensions/libraries that use native code, so you have to stick with what they provide, which can be a pain. Using RN out of the box avoids this issue, but then you tend to get into build issues (which can be very painful). If you’re building iOS and Android in that case you really need something powerful with a lot of memory and storage. The de facto standard navigation library (react navigation) is powerful but slightly bizarre to use, though that’s gotten a helluva lot better with the new v5 release. Errors can be almost completely useless fairly often, particularly when you are using react-navigation. Animations are very powerful, but the documentation is generally crap for implementing them. It uses a port of part of CSS to C++ (the Yoga library) for layout and styling, and it is constrained (everything is based on flex) – I don’t think this is too much of a downside though, having those constraints is fine. Main issue I find is that it isn’t browser CSS, you need to define styling for every single element individually – again, not a huge issue, because what you tend to do is write styled wrappers around each of the built in elements you want to use, and then use those wrappers. Project structure can get quite messy.
As a RN developer, I’ve never had to write native code. I work on a pretty advanced app and the only time I’ve seen anyone have to do something like that is having to adjust a few lines if we were doing something very low level. But for most apps, that shouldn’t be an an issue. I wouldn’t worry about that.
What can React do that RN can’t? I can’t think of anything that isn’t obviously related to web vs. mobile. Remember that React Native is React. You are writing in React.
When people ask me the differences, I mostly tell them that React Native is React but because it is mobile, your JSX is going to look different because there are no divs and spans and h1s, but there are Views and Texts and other RN components that fill the function of the HTML elements you know. Also, you don’t have a full implementation of CSS, but you have a handy subset of that that will be instantly understandable. Seriously, that’s most of it right there. The hardest part for me was getting the environment set up. Really, that took forever. After that, anyone that can use React will quickly and easily start writing in React Native. There are few little speed bumps, but not nearly as many as you fear.
Seriously, the CSS differences are minor. It’s just a subset (but the most important parts), the property names are camel case, and you rely a little more on flex box. Seriously, you won’t need to study it. Just go for it and consult the docs when things aren’t working.
Adjusting code for different devices is a pain for just Apple products. My codebase supports grids up to 25 x 25 in straight or transformed 45 degrees. Transforms look easy, until you try to reference a views center, size, etc., lol.
Native Swift now runs on Mac too, or soon with minor modifications. Anyone here proficient in Swift, and even interested in any other language? Swift 5 is finally stable with a sizable help base! Anyone have any basis to compare native Swift 5 with React, etc. ?
@SharpMind I don’t know of any common native dev platforms for mobile in Python, at least not well used. But even if there are, that is besides the point. The question was about React Native and JS, not what languages do we like the best. We all have little preferences and dislikes about languages and it is easy to lose sight of the fact that they all have their strengths and weaknesses. Let’s not get into a “my language can beat up your language” debate.
After three weeks into my first real React-Native project (2-6 hrs a day) here are some things I’ve learned and my observations:
As many people have said, getting a good setup and workflow takes a bit of time. I started using Expo, then decided to just build with metro / xcode after a couple of days. Simple things like npm package installs are even tricky in the beginning…you have to close metro, cd to ios and pod install or modules won’t be found etc. Many packages don’t really explain this, so it took awhile to figure it out ad hoc early on. I haven’t begun running or testing on Android yet. I fully expect a lot of issues because many of the packages I’ve installed have separate installation steps for Android, so that may be a headache for another day.
Learning curve… It’s hard to know what you don’t know. What I mean is every view in the app has been a learning process of what I can do and can’t (easily) do. Using flex for everything is okay, but wasn’t my favorite thing to work with. My personal favorite way to setup responsive designs was with media queries and grid layouts, but neither work in RN. Sometimes it feels like reinventing the wheel to do basic stuff.
Saving Data… I should have researched how to save my persistent data better in the beginning. Early on I was using react-redux only, then I added redux-persist, after playing with that for about a week I realized I needed a db instead so I ended up trying to go with a redux-realm setup, but eventually scrapped that and I’m now only using Realm.
Realm db… Learning Realm has also been a bit of a learning curve. Their documentation is both great and frustrating at the same time. I still haven’t been able to get Realm Studio to read my DB files on the device, which is annoying (I get a header error that I don’t know how to fix, and can’t seem to find any information about). Configuring DB schema, schema migrations, and learning basic CRUD stuff for Realm has taken time. Watching a 15 min YouTube tutorial on Realm after getting really frustrated was the best use of time in the long run. Thank you Nguyen Duc Hoang. I wanted experience with a nosql db, but as with any decision there’s always trade-offs, I may go back to SQLite in the future.
Native code… There is a host of great public packages available that cover almost everything I’ve needed. I’m really impressed with the react-native community. However, there is one tiny little native functionality I was really looking to add, but have put on hold. I found the code to do what I want in Swift and it takes a whole two lines to implement, but I have no idea how to get it to play together with React Native. I’m sure with persistence I could eventually figure it out, but it’s on the back burner for now.
Package size… I don’t have any images in the app yet, and it already takes up around 30mb on the device! This seems incredibly over-sized given the functionality of the little app. Similar functioning Cordova aps that I’ve made in the past using jQuery, jQuery-mobile, and SQLite have been under 6mb, so I’m hoping to find ways to reduce this but haven’t had any luck yet.
Will I use RN in future projects?
Yes, because for me:
I enjoy component based development
The build process is much faster, typically no more waiting to build and restart to test code (unless installing a package from npm)
The projects can be much easier maintained (I’m scared to touch apps I’ve built a year ago because my code was spaghetti style, lean as you go I guess)
The overall subjective “feel” of a RN app is just a little better compared to similar things I’ve done using Cordova
There’s a balance where it’s fun to learn a little each day, but overwhelming to have to learn too much all at once. Starting out with RN was daunting, but now is a lot more enjoyable.
What I miss the most:
Normal HTML elements & being able to do anything I want with CSS formatting and selectors
Chrome Dev tools. The dev tools in RN are garbage by comparison, no offense intended
jQuery -it gets a lot of hate, but it’s so easy to use and just works. I miss it.
The larger app size is a little concerning
Anyway, that’s my experience in a nutshell. Perhaps others can relate or get a glimpse into some of the things a newbie may go through.
1) How frequently, if at all, would I need to write native code if using React-Native?
Same as Cordova React Native to provides the ready-made plugins for the Native functionality and you don’t have to write any custom code in Android or iOS. Just needs to follow the installation steps and you will be good to go.
2) is are there any major limitations that React-Native can’t do that React does?
It’s quite an unrelated question. React is for Website development and it is good for the websites and React Native is for the Mobile Application. Both have their own use but logically, you can implement all the things in React Native which you can in React.
After most the world went on lockdown I lost a little motivation, but the app’s mostly ready to go (I only have an iPad version at the moment). Hopefully the world will be back to ‘normal’ next year and the app might get used then.
. React is meant to work on the web, whereas react native is meant to create native apps using a syntax you already know. It’s not the idea to share functionalities among both libraries (there are, of course), but to use something you already know to create something you don’t know. It’s a modified tool to do what wasn’t meant to do initially.
,