react-native-web and true Component Sharing

Sorcery?

So, let’s talk about this for a second. There has been conversation for some time regarding component sharing between React Web and React Native. Is it possible to write a single library of components and share them between both projects?

The web operates in Div’s and Span’s, react native in View’s and Text’s etc.. For those unfamiliar that is the root of the issue.

I recently became aware of react-native-web and have been really wanting to kick it’s tires, I am finally getting around to it. React-native-web was written by Nicolas Gallagher.

necolas/react-native-web_react-native-web - React Native for Web_github.com

What you will find below is my initial dive into functionality and my steps to create a working demo. I plan to dive into features and a review in a later post.

Link to my working demo repo for react-native-web here, and more at the end.

The first thing I did was to bootstrap from create-react-app. Then you need to npm install react-native-web, then you are ready to roll.

Now, go ahead and replace your index.jsfile with the below Gist contents.

You will notice something right away, the attempt of react-native-web is to bring the platform-agnostic functionality of React Native to the web. You are writing React Native code, behind the scenes it gets converted to web friendly components.

To give you an idea, here is my App.js file:

It looks like there is support for server side rendering, platform specific directives(think make this Button 20em high on web OS and 10 otherwise). It also looks like there is support for testing through Jest.

Here is my github project that you can bootstrap from, just nmp install and npm start.

btg5679/reactNativeWeb_Contribute to reactNativeWeb development by creating an account on GitHub._github.com

I am going to dig in more and post a review of features so stay tuned for Part 2. Let me know if your experiences and general thoughts.

Give me a follow on twitter if you liked this story, and keep after it!