We just launched our first React Native application for a client this week! Shout out to Dasy Labs for trusting us with their project.
The app is live on the App Store and Play Store, so you can check it out for yourself.
Overall our experience with React Native was a positive one, but there were a few bumps along the road.
Pain Points
The React Native community is growing very fast, but it is still in its infancy so things are changing rapidly.
Some of the installation instructions in community developed modules are outdated. For example, there are lots of references to React Native Package Manager (RNPM) which is now built in to the React Native CLI.
Some modules that require manual installation have outdated instructions for one platform or another (especially Android). This is a hard problem to solve, as you effectively have to deal with the churn of 3 platforms (RN, iOS, Android).
Native Modules
Most native modules can be automatically linked by React Native CLI (react-native link OR react-native link <pkg-name>). However, the few that cannot be fully automated make upgrading React Native a pain.
The cli has an upgrade option, but it is not an automatic process. The CLI will prompt you to overwrite files that have changed or look at the diff and bring in changes yourself. It would be nice if the CLI was smart enough to automatically merge some files and perhaps even use the merge tool defined in your git config.
Styling
Styling in React Native is easy once you get the hang of it, however it's not easy to bring in CSS libraries for the web.
-
First, there are no classes, no CSS files, no style tags—it's all inline styles. This sounds horrible, but RN came up with a JavaScript-based concept similar to CSS stylesheets.
-
Second, elements do not inherit styles from their parents, so you can't set the font size on a parent and expect every paragraph to inherit that.
I'm sure you could bring in Bootstrap through some build step, but for this project we decided to keep it simple and not use any external frameworks.
The biggest pain point style-wise is the fact that it is difficult to style external components if they don't provide a good mechanism for doing so. In CSS you could simply write higher specificity selectors. In React Native you can't do that.
The common practice is to allow users to . In the future I would like to see packages accept stylesheets that replace or merge with their default styles. This would aid with styling nested elements.
