Building Universal Components: Part I — Introduction

There are two popular choices for building universal applications with React:react-native-web (RNW) and react-primitives (RP). They try to solve the problem of building universal applications using a little bit different approaches:

  1. RNW library implements a React Native API for React for web. It simply allows running React Native applications on web.
  2. RP library implements primitives which provide a single API for building universal components.

Both solutions are great for building applications and worth paying attention. However, there are several cons while using both of those options for writing React components:

  • Depending on approach you have selected you need to add one of those as a dependency to the project.
  • They both provide an additional layer of abstraction to your code.

If you want to build a PWA you always think about keeping you bundle small and think twice before adding a new dependency.

Building Universal Components with no extra dependencies

React Native introduced a way of building universal applications by using .ios and .android postfixes to the files for a particular platform. It is possible to use following structure to build universal components:

  • index.js — entry file for web
  • index.ios.js — entry file for iOS
  • index.android.js — entry file for Android

But usually you can share all the React Native code with Android and iOS. What about this?

  • index.js — entry file for web
  • index.android-and-ios.js — shared code for Android and iOS
  • index.ios.js — entry file for iOS, imports the implementation from index.android-and-ios.js
  • index.android.js — entry file for Android, imports the implementation from index.android-and-ios.js

However, I recently discovered that React Native also understands a.native postfix as well. Unfortunately I haven’t seen this anywhere in a documentation, but I noticed that engineers form GoDaddy use this approach in their svgs package. So you can just do:

  • index.js — entry file for web
  • index.native.js — entry file for Android and iOS

This approach apparently provides less shared code than RNW or RP but it does not require a single extra line of code. It requires writing code for web and native separately but it provides a better library for further users which receives a library that works everywhere and has no additional code in their bundle.

You can check out the implementation of a react-qr-code library using this approach.


In the next article we will share a list of libraries which are using this approach and help you write universal react components.


Rostyslav Khanas is a former Samsung Electronics Software Engineer and CTO & Co-Founder of Cards Corp.

Follow me on Twitter and on a Github.