Developing with ReactXP overlaid on Windows XP desktop image with a large bird

ReactXP is a library built upon React and React Native for building cross-platform apps for web, iOS, and Android. In simple terms, ReactXP promises that you can use it to develop apps across platforms even faster than using React Native alone.

High-Level Advantages

  • Share the majority of your code-base between your target platforms.
  • Developer doesn’t need to be an expert or even familiar with iOS or Android to develop for those platforms.
  • The shared app ‘view’ codebase results in visual consistency across the platforms.
  • Reduced development time thanks to not having to repeat as much code.

High-Level Drawbacks

  • Performance may not be as optimised compared to a natively developed app.
  • Maturity of the technology. ReactXP only launched in April 2017, which means online support is currently limited.

What makes ReactXP stand out from other React Native approaches is that it abstracts the view into a set of core components that allow you to share your view layer across the different platforms. This builds upon React Native’s motto of ‘write once, run anywhere’ and takes it even further. It means you’re not just sharing your app’s business logic, you’re also sharing and maintaining a single view layer. The end result is that you can have one developer handle everything, as the code they write once runs on web, iOS and Android.

To get a feel for how development with ReactXP performs, we set aside a few hours to put together a basic app that displays a list of tracks from Hydric Media’s indie music discovery service, Wonder.

Screenshot of mobile prototype of wonder versus desktop prototype.

Web and Android Emulator views.

Here are some pros and cons from our initial impressions.

Development Pros

  • Code is shared between the platforms, e.g. you no longer have to set up separate views.
  • Easy process to deploy and test on iOS and Android. I’m a web guy, so I’ve never touched Xcode or Android Studio before, but I was able to get both of them up and running and emulating the ReactXP app I was building.
  • Typescript support. Microsoft maintains both TypeScript and ReactXP. In the past I’ve had trouble getting TypeScript integrated with other React Native projects.
  • Microsoft has their own React state-management library ReSub, which will be familiar to those who use Mobx. It plays nicely with ReactXP. Of course, you can use alternatives like Redux.
  • Good documentation.

Development Cons

  • As ReactXP was only launched in April 2017, there aren’t a lot of resources out there for dealing with issues specific to it.
  • Encountered some visual inconsistencies and bugs across the three platforms. Difficult to debug and fix this early in ReactXP’s life.

Also, not necessarily a con, but working with ReactXP requires a different approach to handling the view than you might usually take with a web app. For example, you can’t just go ahead and use CSS to style your components - you have to use ReactXP’s style attributes. These attributes seem to do a good job at covering the vast majority of styling you’d be using, but it does involve regularly checking the documentation for what styles are allowed, and how to implement them.

ReactXP has great potential, especially as it matures and gathers more online support and discussion. In the near future here at Hydric Media we aim to put together an app, beginning to end, using ReactXP. So watch this space!

Have you been using or reading about ReactXP? What excites you, or scares you about it? Let us know by tweeting @hydricmedia.

Simon Hales
Share to LinkedIn
© 2020 Hydric Pty Ltd
Icon/Hydric is a subsidiary of
Follow Us