Recently, Paren took on its first mobile project using ReactNative. As a web developer, I’m excited to move into the mobile world. However, this transition came with a lot of frustrations. In this article I share my thoughts on the current state on React Native and its ecosystem from my perspective as a web developer. What follows are the most common ReactNative questions asked of me by my web developer friends.
Is ReactNative stable and ready for real world use?
Yes, ReactNative is ready for real-world use. There are a lot of production apps written using ReactNative.
But stability is subjective. Compared to React, ReactNative is still very new. Web development (with or without React) is also a lot more mature than mobile development. Therefore, ReactNative tooling is not nearly as stable as web development tooling. To put React and ReactNative maturity into perspective: React currently has over 66k stars on Github and fewer than 600 issues while ReactNative has fewer than 50k stars but over 1,200 issues. React is a lot more stable and has a more adoption.
What sort of apps is ReactNative good for?
If you want to build an app that doesn’t use a lot of mobile-specific or complex functionality, like tracking footsteps, ReactNative and community libraries should cover most if not all of your requirements.
However, if you want to build a more complex app and ReactNative doesn’t provide the APIs you need, you would have to write native bridges to expose the native functionality. You can also rely on open source projects to provide native bridges for you, but that is not guaranteed to provide a complete solution.
In this project, we are using Expo. Expo is awesome; it helps us move fast (and not break things, hopefully). Here are some of the things Expo provides:
- Additional APIs and components not provided by ReactNative
- A GUI and CLI that eliminate the need for XCode and Android Studio
- An iOS and Android app for running Expo apps
- Hosted infrastructure for instant deployment
The biggest problem with Expo is that, to fully benefit from Expo’s features and infrastructure, you cannot use custom native code. Most good ReactNative open-source libraries are incompatible with Expo because they use native code. We discussed tradeoffs of using Expo in more details in our talk.
Is ReactNative good for prototyping?
Yes, ReactNative is great for prototyping and with Expo it is even better. Expo makes ReactNative mobile development more like web development. When you make JavaScript-only changes, you can push directly via Expo, instead of going through Apple’s or Google’s approval process. Expo uses Ngrok during development, allowing you to open and hot-reload builds on any device, just like you would with a website and any browser.
If you already know and use React, getting started should be pretty easy. Surprisingly, styling proved to be the most challenging aspect for me. I say “surprisingly” because I know CSS quite well. However, there is no CSS in ReactNative; everything is styled with JavaScript. Inline styles are the only way to style components. If you aren’t familiar with inline styles, I encourage you to view these slides.
Inline styles do not cascade. The cascading property of CSS allows one to easily set global styles. For example, in CSS you could do something like * {font-face: helvetica} and that should cascade to all DOM elements. In ReactNative, you would have to create a text component with the font styling that you want, and reuse that throughout the app. This makes sharing generic components in ReactNative more challenging than in React.
On the bright side, with ReactNative, you don’t have to deal with CSS insanity or supporting old browsers.
How much Objective C or Java do I need to know?
As long as you are willing stay within the bounds of the ReactNative community, none. That’s one of the points of ReactNative. You only need to know how to write JavaScript with ReactNative. Although, a little bit of background in iOS and Android ecosystem would certainly help. If you decide not to use Expo you may occasionally need to do some configuration with Xcode or Android Studio.
How much code can I realistically expect to share between iOS and Android?
There are significant differences between iOS and Android which we talked about at Clojure/west. Each came with its own default styling, APIs, and UI components. Some behave similarly on both, some don’t. If you are building a generic app that doesn’t require a lot of native functionality, then almost all of the code can be shared.
How should I structure the code base to support iOS and Android builds?
If you plan to use Expo like we do, you won’t have to worry about this. Without Expo, you will need to have two entry points; one for iOS and one for Android. You can start a basic Expo app by using create-react-native-app.
Conclusion
If you already know React and choose to use Expo, it should be pretty easy to get started. ReactNative is far from perfect but it’s good and getting better quickly. Giving it current stage and its cross-platform strength, it is hard to beat. For web developers who are already familiar with React, the pros definitely outweigh the cons.