All Projects → vitalybe → Reactnativeuniversal

vitalybe / Reactnativeuniversal

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Reactnativeuniversal

Fable Elmish Electron Material Ui Demo
Complete boilerplate for Electron apps using Fable and Elmish with hot module reloading, time-travel debugging, etc.
Stars: ✭ 101 (-43.26%)
Mutual labels:  sample, boilerplate
React Native Web Template
Template project for sharing code between iOS, Android & Web using monorepo
Stars: ✭ 45 (-74.72%)
Mutual labels:  boilerplate, react-native-web
React Native Web Monorepo
Code sharing between iOS, Android & Web using monorepo
Stars: ✭ 697 (+291.57%)
Mutual labels:  boilerplate, react-native-web
Golang Gin Realworld Example App
Exemplary real world application built with Golang + Gin
Stars: ✭ 1,780 (+900%)
Mutual labels:  sample, boilerplate
Rails api base
API boilerplate project for Ruby On Rails 6
Stars: ✭ 172 (-3.37%)
Mutual labels:  boilerplate
Lad
👦 Lad is the best Node.js framework. Made by a former Express TC and Koa team member.
Stars: ✭ 2,112 (+1086.52%)
Mutual labels:  boilerplate
React Hooks Mobx State Tree
React Hooks + MobX State Tree + TypeScript = 💛
Stars: ✭ 169 (-5.06%)
Mutual labels:  boilerplate
Electron Next Skeleton
An example Electron app built with Next.js
Stars: ✭ 168 (-5.62%)
Mutual labels:  boilerplate
Ran
⚡ RAN! React . GraphQL . Next.js Toolkit ⚡ - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching, CLI commands and more...
Stars: ✭ 2,128 (+1095.51%)
Mutual labels:  boilerplate
Threejs Modern App
Boilerplate and utils for a fullscreen Three.js app
Stars: ✭ 176 (-1.12%)
Mutual labels:  boilerplate
React Native Paper Dates
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Stars: ✭ 173 (-2.81%)
Mutual labels:  react-native-web
Ignite
Infinite Red's cutting edge React Native project boilerplate, along with a CLI, component/model generators, and more!
Stars: ✭ 13,296 (+7369.66%)
Mutual labels:  boilerplate
Mern
🌐 MERN stack 2.0 - MongoDB, Express, React/Redux, Node
Stars: ✭ 175 (-1.69%)
Mutual labels:  boilerplate
Baumeister
👷 The aim of this project is to help you to build your things. From Bootstrap themes over static websites to single page applications.
Stars: ✭ 171 (-3.93%)
Mutual labels:  boilerplate
Go Vue Starter
Starter project - Golang api, Vue.js client with user management and jwt authentication
Stars: ✭ 176 (-1.12%)
Mutual labels:  boilerplate
React Core Boilerplate
Powerful ASP.NET Core 3 templates with React, true server-side rendering and Docker support
Stars: ✭ 169 (-5.06%)
Mutual labels:  boilerplate
Nachos Ui
Nachos UI is a React Native component library.
Stars: ✭ 2,037 (+1044.38%)
Mutual labels:  react-native-web
Essential React
A minimal skeleton for building testable React apps using Babel
Stars: ✭ 2,035 (+1043.26%)
Mutual labels:  boilerplate
Tsmean
Typescript-mysql-express-angular-node seed for your next web-app!
Stars: ✭ 173 (-2.81%)
Mutual labels:  boilerplate
Eth Vue
Featured in Awesome Vue [https://github.com/vuejs/awesome-vue], a curated list maintained by vuejs of awesome things related to the Vue.js framework, and Awesome List [https://awesomelists.net/150-Vue.js/3863-Open+Source/18749-DOkwufulueze-eth-vue], this Truffle Box provides everything you need to quickly build Ethereum dApps that have authentication features with vue, including configuration for easy deployment to the Ropsten Network. It's also Gravatar-enabled. Connecting to a running Ganache blockchain network from Truffle is also possible -- for fast development and testing purposes. Built on Truffle 5 and Vue 3, eth-vue uses vuex for state management, vuex-persist for local storage of app state, and vue-router for routing. Authentication functionalities are handled by Smart Contracts running on the Ethereum blockchain.
Stars: ✭ 171 (-3.93%)
Mutual labels:  boilerplate

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].