├── .gitignore ├── README.md ├── lerna.json ├── package.json ├── packages ├── apps │ ├── .babelrc │ ├── .buckconfig │ ├── .flowconfig │ ├── .gitattributes │ ├── .gitignore │ ├── .watchmanconfig │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── assets │ │ │ │ ├── index.android.bundle │ │ │ │ └── index.android.bundle.map │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── apps │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ ├── keystores │ │ │ ├── BUCK │ │ │ └── debug.keystore.properties │ │ └── settings.gradle │ ├── app.json │ ├── index.js │ ├── ios │ │ ├── apps-tvOS │ │ │ └── Info.plist │ │ ├── apps-tvOSTests │ │ │ └── Info.plist │ │ ├── apps.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ ├── apps-tvOS.xcscheme │ │ │ │ └── apps.xcscheme │ │ ├── apps │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ │ ├── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ └── main.m │ │ └── appsTests │ │ │ ├── Info.plist │ │ │ └── appsTests.m │ ├── package.json │ ├── webpack.haul.js │ └── yarn.lock ├── shared │ ├── components │ │ ├── Modal │ │ │ ├── CustomModal.js │ │ │ ├── CustomModal.web.js │ │ │ └── Portal.js │ │ ├── Navigator │ │ │ ├── AppNavigatorSwitch.web.js │ │ │ ├── AppsNavigator.js │ │ │ └── AppsNavigator.web.js │ │ ├── PlatformSpecific │ │ │ ├── PlatformComponent.android.js │ │ │ ├── PlatformComponent.ios.js │ │ │ └── PlatformComponent.web.js │ │ └── SharedComponent.js │ ├── constants │ │ └── routes.js │ ├── package-lock.json │ ├── package.json │ ├── screens │ │ ├── AboutScreen.js │ │ ├── DetailScreen.js │ │ ├── HelloScreen.js │ │ ├── HomeScreen.js │ │ ├── ModalScreen.js │ │ ├── NavigationScreen.js │ │ └── SharedComponentsScreen.js │ └── yarn.lock └── web │ ├── font.js │ ├── index.web.js │ ├── loaderConfiguration.js │ ├── package.json │ ├── template.html │ ├── webpack.common.js │ ├── webpack.dev.js │ ├── webpack.prod.js │ └── yarn.lock └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | .happyPack 3 | yarn-error.log 4 | .vscode 5 | **/web/dist 6 | lerna-debug.log 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native + Web Boilerplate 2 | Ultimate React Native + Web Boilerplate. This boilerplate is created on top of React Native and React Native Web. The idea is create project with seamless development experience and shareable codebase for both react native and react native web. 3 | ## Key Feature 4 | 1. Clear project structure & dependencies using [lerna](https://github.com/lerna/lerna). 5 | 2. React Native project support symlink and webpack ecosystem using [haul](https://github.com/callstack/haul). 6 | 3. Built-in Navigation ([react navigation](https://reactnavigation.org/) and [react-router](https://github.com/ReactTraining/react-router)). 7 | 4. Web history API support. 8 | 5. Same navigation API using [react navigation](https://reactnavigation.org/) API style. 9 | 6. Wrap some react native component that currently not implemented yet on react-native web (Modal) 10 | 11 | ## ⚡️ Get Started Immediately ⚡️ 12 | #### Clone this repository and install all dependencies 13 | ``` 14 | git clone git@github.com:drgx/react-native-plus-web.git 15 | cd react-native-plus-web 16 | yarn 17 | 18 | # bootstrap all package dependencies 19 | yarn bootstrap 20 | ``` 21 | ### 🌟Preview 🌟 22 | ![preview](https://user-images.githubusercontent.com/5230095/38617965-8a827142-3dc2-11e8-9791-05dbb66006a9.gif) 23 | 24 | ### Running Apps 25 | You need to start the server by following this commend: 26 | ``` 27 | cd packages/apps/ 28 | yarn haul 29 | #choose to run server between Ios, Android or Both Ios and Android 30 | ``` 31 | 32 | #### For running android 33 | Open your [android emulator](https://medium.com/@deepak.gulati/running-react-native-app-on-the-android-emulator-11bf309443eb) or plug your android devices 34 | 35 | Simply run `react-native run-android`. 36 | 37 | Since react-native v0.52+ to be able to start using `haul` you need to disable delta (cmd+m -> dev setting, uncheck use js deltas) and debug JS remotely on our emulator or devices. See [haul limitation & issue](https://github.com/callstack/haul#limitations). This issue is likely fix by haul team soon. 38 | 39 | 40 | #### For running ios 41 | Open your [ios simulator](https://facebook.github.io/react-native/docs/running-on-simulator-ios.html). Simply run `react-native run-ios` on your terminal. 42 | 43 | #### Running Web 44 | ``` 45 | cd packages/web/ 46 | yarn watch:web 47 | # open http://localhost:3000 on your browser 48 | ``` 49 | 50 | ## Folder structure 51 | ``` 52 | react-native-plus-web 53 | ├── README.md 54 | ├── lerna.json 55 | ├── package.json 56 | └── packages 57 | ├── apps <<<< React Native Project 58 | │   ├── android 59 | │   ├── app.json 60 | │   ├── index.js 61 | │   ├── ios 62 | │   ├── package.json 63 | │   ├── webpack.haul.js 64 | │   └── yarn.lock 65 | ├── shared <<<< Shared code between apps and web 66 | │   ├── components 67 | │   │   ├── Modal 68 | │   │   └── Navigator 69 | │   ├── constants 70 | │   │   └── routes.js 71 | │   ├── package-lock.json 72 | │   ├── package.json 73 | │   └── yarn.lock 74 | └── web <<<< React Native web Project 75 | ├── font.js 76 | ├── index.web.js 77 | ├── loaderConfiguration.js 78 | ├── package.json 79 | ├── template.html 80 | ├── webpack.common.js 81 | ├── webpack.dev.js 82 | ├── webpack.prod.js 83 | └── yarn.lock 84 | ``` 85 | 86 | 87 | ## Routes & Navigation 88 | For editing or adding new routes simply edit [`routes.js`](https://github.com/drgx/react-native-plus-web/blob/master/packages/shared/constants/routes.js) 89 | 90 | And for moving between screen simply use `this.props.navigation` to navigate based on routes definition on [`routes.js`](https://github.com/drgx/react-native-plus-web/blob/master/packages/shared/constants/routes.js) 91 | 92 | ``` 93 | # Example to navigate to detail screen 94 |