cross platform app with react in a monorepo

Overview

react-native-web-workspace

An minimum boilerplate that has configured a native app running also on the web in the same monorepo. For a thorough discussion, please read the following blog post about developing a cross platform app with react in a monorepo

This has been done as an experiment and it is in an early stage, comments and feedback welcome!

Overview

This boilerplate attempts to make another step in order to have it by using react-native and react-native-web in different package.json files.

Quick start

git clone --depth 1 https://github.com/agrcrobles/react-native-web-workspace

Lerna

lerna it is used to hoist dependencies from a project root and speed up the development while splitting the platform from the code

## it cleans node_modules
npm run clean
## it installs dependencies
npm install
## it installs symlinks
npm run bootstrap 

More info

Related projects

  • yarn-workspaces-cra-crna explains how to use yarn workspaces with Create React App and Create React Native App (Expo) to share common code across.

License

MIT

BSD 2-clause notice

Issues
  • error starting up fresh install on ios

    error starting up fresh install on ios

    Hi, thanks for creating this! I've been using lerna+react and looking for examples of somebody using it with react native.

    I ran into an error running both mobile and web: screen shot 2017-05-22 at 10 45 59 am

    I used yarn instead of npm, ran yarn bootstrap, had issues with both web and native.

    help wanted 
    opened by dylang 5
  • Hello!

    Hello!

    I create a new package: https://github.com/Jekiwijaya/react-navigation-browser-history-helpers to maintain browser history for react-navigation in web.

    I want to ask your permission. I want to create a modify this project to used as an example in that repository. Is it bother you? Thank you.

    opened by Jekiwijaya 2
  • feature: upgrade react-navigation to v2.

    feature: upgrade react-navigation to v2.

    Upgrading react-navigation to V2.

    opened by Jekiwijaya 1
  • run yarn prettier and some docs

    run yarn prettier and some docs

    opened by agrcrobles 0
  • Fix iOS demo

    Fix iOS demo

    Fixes #1

    opened by jribeiro 0
  • fix: add meta viewport to fix layout in mobile web.

    fix: add meta viewport to fix layout in mobile web.

    Add meta to fix layout in mobile web.

    opened by Jekiwijaya 0
  • About using create-react-native-app in lerna using workspaces

    About using create-react-native-app in lerna using workspaces

    Good morning my friends

    I'm having trouble using create-react-native-app on lerna using workspaces

    Below I do the step by step, but we see that this way the node_modules folder in the package is not stored

    It is necessary to have the node_modules folder in the folder in packages, because you have an android folder with requests to that folder

    Environment info:

    $ lerna info
    
    System:
        OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
        CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
    Binaries:
        lerna: v3.22.1
        Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
        Yarn: 1.22.4 - /usr/bin/yarn
        npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
    Utilities:
        Git: 2.25.1 - /usr/bin/git 
    
    $ react-native info
    
    info Fetching system and libraries information...
    System:
        OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
        CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
        Memory: 1.07 GB / 15.56 GB
        Shell: 5.0.16 - /bin/bash
    Binaries:
        Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
        Yarn: 1.22.4 - /usr/bin/yarn
        npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
        Watchman: 4.9.0 - /home/linuxbrew/.linuxbrew/bin/watchman
    SDKs:
        Android SDK:
        API Levels: 28, 30
        Build Tools: 28.0.3, 30.0.0
        System Images: android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
        Android NDK: Not Found
    IDEs:
        Android Studio: Not Found
    Languages:
        Java: 11.0.7 - /usr/bin/javac
        Python: 2.7.18 - /usr/bin/python
    npmPackages:
        @react-native-community/cli: Not Found
        react: ~16.11.0 => 16.11.0 
        react-native: ~0.62.2 => 0.62.2 
    npmGlobalPackages:
        *react-native*: Not Found
    
    $ python --version
    
    Python 2.7.18rc1
    
    $ python3 --version
    
    Python 3.8.2
    
    $ npm list -g --depth 0
    
    /home/marcio/.nvm/versions/node/v12.18.1/lib
    ├── @prettier/[email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    └── [email protected]
    

    Steṕs to reproduce

    #
    
    cd ~/Downloads
    
    rm -fr ~/Downloads/monorepo-3
    
    mkdir -p ~/Downloads/monorepo-3
    
    cd ~/Downloads/monorepo-3
    
    pwd && ls
    
    echo '{
    "version": "independent",
    "npmClient": "yarn",
    "useWorkspaces": true,
    "packages": [
    "packages/*"
    ]
    }' >lerna.json
    
    cat lerna.json
    
    echo '{
    "name": "root",
    "private": true,
    "workspaces": [
    "packages/*"
    ],
    "devDependencies": {
    "lerna": "^3.22.1"
    }
    }' >package.json
    
    cat package.json
    
    lerna init
    
    #
    
    cd packages
    
    npx create-react-native-app default-create-react-native-app --yes
    
    # OR
    
    # react-native init defaultreactnative
    
    # clean
    
    cd ..
    
    yarn check --integrity --verify-tree || true
    
    lerna list --all --long || true
    
    lerna clean --yes || true
    
    pwd && ls
    
    rm -fr node_modules
    
    find . -name "node_modules" -type d
    
    find \
    . \
    -name "node_modules" \
    -o -name ".yarncache" \
    -type d -prune | while read ITEM; do
    (du -sh "$ITEM")
    (rm -fr "$ITEM")
    done
    
    find \
    . \
    -name "*.touch" \
    -o -name "*error.log" \
    -o -name "*debug.log" \
    -o -name "*lock.json" \
    -o -name "*lock.yaml" \
    -o -name "audit-resolve.json" \
    -o -name ".yarnclean" \
    -o -name "yarn.lock" \
    -type f | while read ITEM; do
    (du -sh "$ITEM")
    (rm -fr "$ITEM")
    done
    
    #
    
    lerna init
    
    lerna info
    
    lerna list --all --long
    
    lerna bootstrap
    
    #
    
    ls && ls ./packages/*
    
    du -sh ./packages/default-create-react-native-app/node_modules/react-native-unimodules/gradle.groovy
    
    du -sh ./packages/default-create-react-native-app/node_modules/react-native/react.gradle
    
    du -sh ./packages/default-create-react-native-app/node_modules/expo-updates/scripts/create-manifest-android.gradle
    
    du -sh ./packages/default-create-react-native-app/node_modules/@react-native-community/cli-platform-android/native_modules.gradle
    
    # 
    
    opened by mozgbrasil 0
  • React Native iOS error in monorepo environment

    React Native iOS error in monorepo environment

    Not sure if you've tried this in a while, but I thought I'd flag this issue:

    https://github.com/facebook/react-native/issues/28903

    opened by tettoffensive 0
  • npm start error

    npm start error "missing script: start"

    After running npm start npm start error "missing script: start"

    opened by DennisMuchiri 0
  • run it with react native packager

    run it with react native packager

    react native packager ( aka metro bundler ) doesn't follow symlinks out of the box because watchman's default behavior.

    So there is need to configure the rn-cli.config.js and add packages manually as a workaround.

    Following issue in: https://github.com/facebook/watchman/issues/105

    https://github.com/facebook/metro-bundler/issues/1

    enhancement 
    opened by agrcrobles 0
Owner
Zetta Garcia
Hiking and playing music for fun.
Zetta Garcia
✨ A React Native Starter with 10+ commonly used libraries ✨

React Native Starter ✨ A React Native Starter with 10+ commonly used libraries ✨ Overview Anyone who had to setup a React Native project from scratch

Adegboye Josiah 28 Sep 21, 2021
I am no longer in maintenance

Boilerplate for react native and web For React 16 see react-native-web-fiber-boilerplate Overview An easy, experimental and simple way to configure re

Zetta Garcia 70 Jan 28, 2021
Rhinos-app is a react-native app which uses react-native-web to achieve cross-platform design.

Rhinos-app Rhinos-app is a react-native app which uses react-native-web to achieve cross-platform design. Live Demo: web version ?? FEATURES: ?? ?? Ru

null 82 Jan 7, 2021
A React Native template for building solid applications, using JavaScript or Typescript (you choose).

TheCodingMachine React Native boilerplate This project is a React Native boilerplate that can be used to kickstart a mobile application. The boilerpla

TheCodingMachine 2.5k Oct 8, 2021
Demo app for React Native Elements (w/ React Native Web)

React Native Elements App Mobile App This is the Demo app for React Native Elements built with Expo. The purpose of this app is to demonstrate the usa

React Native Elements 1.2k Oct 6, 2021
React Native + React-Redux + Native Base + Code Push

React-Native-Starter-Pack React Native + React-Redux + Native Base + Code Push ##Setting Up Project npm i -g rninit rninit init <new-app-name> --sourc

Simar 39 Oct 5, 2020
Barton Hammond 4.6k Oct 8, 2021
React Native Starter App with NativeBase + CodePush + Redux

Discontinued in favour of ReactNativeSeed.com Native Starter Kit v6.1.0 A Starter Kit for React Native + NativeBase + React Navigation + Redux + CodeP

null 1.6k Sep 26, 2021
Pepperoni - React Native App Starter Kit for Android and iOS

Futurice React Native Starter Kit ⚠️ Deprecation Warning Dear community, as time moved on so did React Native and we've not been able to provide conti

Futurice 4.7k Oct 8, 2021
React Native Typescript starter kit / template (Redux Thunk + React Native Navigation v7 + TSLint)

React Native Template - TypeScript An opinionated React Native Starter Kit with React Native Navigation + Redux + Airbnb TSLint to build iOS and Andro

Amit Mangal 201 Oct 7, 2021
React Native Boilerplate - Redux + Saga + Reselect + redux-persist + react-navigation + TypeScript

React Native Boilerplate with Typescript Overview This React Native template for building solid applications through SOC(separation of concerns) betwe

Mengheang Rat 11 May 14, 2021
React Native Meteor Boilerplate

React Native Meteor Boilerplate This is a simple way to get started building an app with React Native and Meteor. It is opinionated to make it easy fo

Spencer Carli 634 Sep 21, 2021
React Native Starter Kit with Firebase Auth and Facebook Login

React Native Starter Kit ?? Bootstrap your app development by using this awesome react native starter kit, integrated with Firebase Auth and Facebook

Instamobile 318 Oct 6, 2021
Professional react-native starter kit with everything you'll ever need to deploy rock solid apps

WARNING This starter kit has been deprecated and is no longer being actively maintained by Ueno. React Native Starter The Professional React Native St

Ueno: A full-service agency 579 Oct 8, 2021
Infinite Red's cutting edge React Native project boilerplate, along with a CLI, component/model generators, and more!

Ignite - the hottest React Native boilerplate Battle-tested React Native boilerplate The culmination of five years of constant React Native developmen

Infinite Red, Inc. 13.1k Oct 7, 2021
🚀A powerful react native starter template that bootstraps development of your mobile application

React Native Starter ?? View Demo | Download | More templates | Support forum You're viewing the new and updated version of React Native Starter, prev

Flatlogic 1.8k Oct 6, 2021
Boilerplate for iOS app development with React Native, ES6 and Reflux

react-native, es6 & reflux boilerplate As the very long repo title indicates, this is a boilerplate repository that includes the following: ES6-to-ES5

Filipe Dobreira 142 Nov 22, 2020
Map items around your community 🗺🏘

react-native-community-maps Boilerplate app to geographically map user content, built on top of the awesome Expo toolchain Create your own app (in min

Yonah Forst 12 Jan 9, 2020
A react-native starter kit using RN0.63, Flipper support, LogBox, AndroidX, Hooks workflow, easy-peasy, code-push, Themes support and much more

cd A GOOD, up to date and easy to use starter and learning tool for beginners to intermediate. (IOS and Android ready) NEW React-Native updated to 0.6

HARISH JANGRA 233 Oct 3, 2021