Skip to content
React Cross Platform Todo List
JavaScript HTML Dockerfile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.expo-shared
assets
public
src
.env
.eslintrc.json
.gitignore
.watchmanconfig
Dockerfile
README.md
app.json
babel.config.js
config-overrides.js
docker-compose.yml
package.json
yarn.lock

README.md

React Cross-Platform Demo

This is a demo of a simple Todo List implemented in React that uses the same code for Web, Android & iOS.

react

It uses:

  • Expo Set of tools for building, deploying native iOS, Android, and web apps from the same codebase.
  • React Native Web Makes it possible to run React Native components and APIs on the web using React DOM.
  • React Native Elements Cross Platform React Native UI Toolkit.
  • React Navigation Routing and navigation for React apps.
  • React Redux A predictable state container for JavaScript apps.

Run with Docker

  1. Install Docker and Docker Compose

  2. Clone the project

git clone https://github.com/jferrer/react-cross-platform-demo
  1. Build the image
cd react-cross-platform-demo

docker-compose build

To rebuild use:

rm -fr node_modules && docker-compose build --no-cache
  1. Run the web app
docker-compose up
  1. Run the mobile app
HOSTNAME=YOUR-LOCAL-IP-ADDRESS PLATFORM=mobile docker-compose up

Run it locally

  1. Clone the project
git clone https://github.com/jferrer/react-cross-platform-demo
  1. Install dependencies
cd react-cross-platform-demo

# Using yarn
yarn install
  1. Run the mobile app (uses Expo)
# Install the expo-cli
npm install -g expo-cli

yarn native
  1. Run the web app
yarn web

Deploy Web app

First you must build the web app using:

yarn build:web

Once you have built it, you can see generated build folder.

This folder can be hosted as static website. For example you can publish on Github Pages via gh-pages cli.

yarn deploy

Note: don't forget to add or change "homepage" key in your package.json

You can’t perform that action at this time.