vitalybe / reactnativeuniversal

A demonstration of sharing javascript react-native code between mobile, desktop and web environments

Universal React - Android, Electron (Desktop) and Web

Electron	Web

Android	iOS

About

This sample demonstrates the usage of React Native in in the desktop, web and mobile environment using the same code.

Components or services that should differ between the platforms are easy to to include using a predefined suffix.

What's included

The following features are included and demonstrated:

• Using shared components (e.g using Ball.js in BallsList.js)
• Using platform specific components (e.g using PlatformSpecificBall.js in BallsList.js)
• Packaging production build for Web and Electron (for Android follow the official guide)
• React Native's ListView
• React Native's Animations

Running

The following commands are available:

• yarn run web - Web development
• yarn run web-build - Web production package
• yarn run desktop - Electron development
• yarn run desktop-build - Electron production package
• yarn run android - Android development

Structure

Platform specific components

By default all the javascript files are shared by all the platforms. To create a platform specific file, suffix it accordingly.

For example if you have a generic Ball.js file and would like Electron to have its own platform specific version, we'd create a new file Ball.electron.js.

The file will be imported everywhere without extension: import Ball from './Ball. All the platforms will import the generic file and only Electron will import its own platform file.

This mechanism is achieved by Webpack's extension resolution.

Web and Electron

Powered by the react-native-web project.

Webpack configuration (in webpack/config) are based on the scripts of create-react-app with only minor changes that allows it to be updated by future changes.

What's missing

Missing features:

• Test

License

This project is MIT licensed.

reactnativeuniversal's Issues

Packaging for production ignores node-modules

Node modules don't seem to get packaged when running desktop-build. As a very simply example, if we install lodash and simply require it in index.web.js, creating a production build, though successful, resulting in an error when the executable is run (module lodash not found).

Not very familiar with webpack so simply reporting the issue for now -- if I do manage to fix the problem I'll do a pull request.