├── packages
├── apps
│ ├── .watchmanconfig
│ ├── .gitattributes
│ ├── .babelrc
│ ├── app.json
│ ├── android
│ │ ├── app
│ │ │ ├── src
│ │ │ │ └── main
│ │ │ │ │ ├── res
│ │ │ │ │ ├── values
│ │ │ │ │ │ ├── strings.xml
│ │ │ │ │ │ └── styles.xml
│ │ │ │ │ ├── mipmap-hdpi
│ │ │ │ │ │ └── ic_launcher.png
│ │ │ │ │ ├── mipmap-mdpi
│ │ │ │ │ │ └── ic_launcher.png
│ │ │ │ │ ├── mipmap-xhdpi
│ │ │ │ │ │ └── ic_launcher.png
│ │ │ │ │ └── mipmap-xxhdpi
│ │ │ │ │ │ └── ic_launcher.png
│ │ │ │ │ ├── java
│ │ │ │ │ └── com
│ │ │ │ │ │ └── apps
│ │ │ │ │ │ ├── MainActivity.java
│ │ │ │ │ │ └── MainApplication.java
│ │ │ │ │ └── AndroidManifest.xml
│ │ │ ├── BUCK
│ │ │ ├── proguard-rules.pro
│ │ │ └── build.gradle
│ │ ├── gradle
│ │ │ └── wrapper
│ │ │ │ ├── gradle-wrapper.jar
│ │ │ │ └── gradle-wrapper.properties
│ │ ├── keystores
│ │ │ ├── debug.keystore.properties
│ │ │ └── BUCK
│ │ ├── settings.gradle
│ │ ├── build.gradle
│ │ ├── gradle.properties
│ │ ├── gradlew.bat
│ │ └── gradlew
│ ├── ios
│ │ ├── apps
│ │ │ ├── Images.xcassets
│ │ │ │ ├── Contents.json
│ │ │ │ └── AppIcon.appiconset
│ │ │ │ │ └── Contents.json
│ │ │ ├── AppDelegate.h
│ │ │ ├── main.m
│ │ │ ├── AppDelegate.m
│ │ │ ├── Info.plist
│ │ │ └── Base.lproj
│ │ │ │ └── LaunchScreen.xib
│ │ ├── appsTests
│ │ │ ├── Info.plist
│ │ │ └── appsTests.m
│ │ ├── apps-tvOSTests
│ │ │ └── Info.plist
│ │ ├── apps-tvOS
│ │ │ └── Info.plist
│ │ └── apps.xcodeproj
│ │ │ └── xcshareddata
│ │ │ └── xcschemes
│ │ │ ├── apps.xcscheme
│ │ │ └── apps-tvOS.xcscheme
│ ├── .buckconfig
│ ├── index.js
│ ├── webpack.haul.js
│ ├── package.json
│ ├── .gitignore
│ └── .flowconfig
├── shared
│ ├── components
│ │ ├── Navigator
│ │ │ ├── AppsNavigator.js
│ │ │ ├── AppsNavigator.web.js
│ │ │ └── AppNavigatorSwitch.web.js
│ │ ├── Modal
│ │ │ ├── Portal.js
│ │ │ ├── CustomModal.js
│ │ │ └── CustomModal.web.js
│ │ ├── PlatformSpecific
│ │ │ ├── PlatformComponent.ios.js
│ │ │ ├── PlatformComponent.web.js
│ │ │ └── PlatformComponent.android.js
│ │ └── SharedComponent.js
│ ├── screens
│ │ ├── HelloScreen.js
│ │ ├── DetailScreen.js
│ │ ├── AboutScreen.js
│ │ ├── NavigationScreen.js
│ │ ├── SharedComponentsScreen.js
│ │ ├── ModalScreen.js
│ │ └── HomeScreen.js
│ ├── package.json
│ ├── constants
│ │ └── routes.js
│ ├── yarn.lock
│ └── package-lock.json
└── web
│ ├── template.html
│ ├── webpack.prod.js
│ ├── webpack.dev.js
│ ├── index.web.js
│ ├── font.js
│ ├── package.json
│ ├── webpack.common.js
│ └── loaderConfiguration.js
├── .gitignore
├── lerna.json
├── package.json
├── README.md
└── yarn.lock
/packages/apps/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/packages/apps/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 |
--------------------------------------------------------------------------------
/packages/apps/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react-native"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | **/node_modules
2 | .happyPack
3 | yarn-error.log
4 | .vscode
5 | **/web/dist
6 | lerna-debug.log
7 |
--------------------------------------------------------------------------------
/packages/apps/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "React Native plus Web",
3 | "displayName": "React Native plus Web"
4 | }
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | apps
3 |
4 |
--------------------------------------------------------------------------------
/packages/apps/ios/apps/Images.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "lerna": "2.9.0",
3 | "packages": [
4 | "packages/*"
5 | ],
6 | "version": "0.0.0",
7 | "npmClient": "yarn"
8 | }
9 |
--------------------------------------------------------------------------------
/packages/apps/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/packages/apps/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drgx/react-native-plus-web/HEAD/packages/apps/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/packages/apps/android/keystores/debug.keystore.properties:
--------------------------------------------------------------------------------
1 | key.store=debug.keystore
2 | key.alias=androiddebugkey
3 | key.store.password=android
4 | key.alias.password=android
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "devDependencies": {
3 | "lerna": "^2.9.0"
4 | },
5 | "scripts": {
6 | "bootstrap": "lerna bootstrap",
7 | "clean": "lerna clean"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drgx/react-native-plus-web/HEAD/packages/apps/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drgx/react-native-plus-web/HEAD/packages/apps/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drgx/react-native-plus-web/HEAD/packages/apps/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drgx/react-native-plus-web/HEAD/packages/apps/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/packages/apps/android/keystores/BUCK:
--------------------------------------------------------------------------------
1 | keystore(
2 | name = "debug",
3 | properties = "debug.keystore.properties",
4 | store = "debug.keystore",
5 | visibility = [
6 | "PUBLIC",
7 | ],
8 | )
9 |
--------------------------------------------------------------------------------
/packages/apps/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'apps'
2 | include ':react-native-svg'
3 | project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
4 |
5 | include ':app'
6 |
--------------------------------------------------------------------------------
/packages/shared/components/Navigator/AppsNavigator.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StackNavigator } from 'react-navigation';
3 | import Routes, { initialRouteName } from '../../constants/routes';
4 |
5 | export default StackNavigator(Routes, initialRouteName);
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/web/template.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/apps/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | zipStoreBase=GRADLE_USER_HOME
4 | zipStorePath=wrapper/dists
5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
6 |
--------------------------------------------------------------------------------
/packages/apps/index.js:
--------------------------------------------------------------------------------
1 | import { AppRegistry } from 'react-native';
2 | import Shared from 'shared/components/SharedComponent'
3 | import PlatformSpecific from 'shared/components/PlatformSpecific/PlatformComponent';
4 | import AppsNavigator from 'shared/components/Navigator/AppsNavigator';
5 |
6 | AppRegistry.registerComponent('apps', () => AppsNavigator);
7 |
--------------------------------------------------------------------------------
/packages/shared/components/Navigator/AppsNavigator.web.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { BrowserRouter as Router } from "react-router-dom";
3 | import AppNavigatorSwitch from "./AppNavigatorSwitch";
4 | import {View, Text} from 'react-native';
5 | export default () => {
6 | return (
7 |
8 |
9 |
10 | );
11 | };
12 |
--------------------------------------------------------------------------------
/packages/web/webpack.prod.js:
--------------------------------------------------------------------------------
1 | const commonConfig = require("./webpack.common");
2 | const webpack = require("webpack");
3 | const merge = require("webpack-merge");
4 |
5 | module.exports = merge(commonConfig, {
6 | devtool: 'inline-source-map',
7 | plugins: [
8 | new webpack.DefinePlugin({
9 | "process.env.NODE_ENV": JSON.stringify("production")
10 | }),
11 | ]
12 | });
13 |
--------------------------------------------------------------------------------
/packages/shared/components/Modal/Portal.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import ReactDOM from 'react-dom';
3 | import PropTypes from 'prop-types'
4 | class Portal extends Component {
5 | render(){
6 | return ReactDOM.createPortal(
7 | this.props.children,
8 | this.props.selector || document.body,
9 | );
10 | }
11 | }
12 |
13 | Portal.propTypes ={
14 | selector: PropTypes.string
15 | }
16 |
17 | export default Portal;
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/java/com/apps/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.apps;
2 |
3 | import com.facebook.react.ReactActivity;
4 |
5 | public class MainActivity extends ReactActivity {
6 |
7 | /**
8 | * Returns the name of the main component registered from JavaScript.
9 | * This is used to schedule rendering of the component.
10 | */
11 | @Override
12 | protected String getMainComponentName() {
13 | return "apps";
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/apps/ios/apps/AppDelegate.h:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import
11 |
12 | @interface AppDelegate : UIResponder
13 |
14 | @property (nonatomic, strong) UIWindow *window;
15 |
16 | @end
17 |
--------------------------------------------------------------------------------
/packages/shared/screens/HelloScreen.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { View, Text, StyleSheet } from "react-native";
3 |
4 | class HelloScreen extends React.Component {
5 | render() {
6 | return (
7 |
8 | {'Hello REACT NATIVE!'}
9 |
10 | );
11 | }
12 | }
13 |
14 | const Styles = StyleSheet.create({
15 | container: {
16 | flex: 1,
17 | alignItems: "center",
18 | justifyContent: "center"
19 | }
20 | });
21 |
22 | export default HelloScreen;
23 |
--------------------------------------------------------------------------------
/packages/shared/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shared",
3 | "version": "1.0.0",
4 | "description": "shared component between apps and web",
5 | "main": "index.js",
6 | "author": "Ryan Nixon Salim",
7 | "license": "MIT",
8 | "peerDependencies": {
9 | "prop-types": "^15.6.1",
10 | "react": "*",
11 | "react-loadable": "^5.3.1",
12 | "react-native": "*",
13 | "react-native-vector-icons": "^4.5.0",
14 | "react-navigation": "^1.5.8",
15 | "react-router": "^4.2.0"
16 | },
17 | "dependencies": {
18 | "react": "^16.2.0"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/apps/ios/apps/main.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import
11 |
12 | #import "AppDelegate.h"
13 |
14 | int main(int argc, char * argv[]) {
15 | @autoreleasepool {
16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/apps/webpack.haul.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | module.exports = ({ platform }, defaults) => ({
3 | entry: `./index.js`,
4 | devtool: 'source-map',
5 | resolve: {
6 | ...defaults.resolve,
7 | modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
8 | },
9 | module: {
10 | ...defaults.module,
11 | rules: [
12 | {
13 | test: /\.js?$/,
14 | include: [
15 | /node_modules\/@traveloka/,
16 | ],
17 | use: [
18 | {
19 | loader: 'babel-loader'
20 | }
21 | ]
22 | },
23 | ...defaults.module.rules,
24 | ]
25 | }
26 | });
--------------------------------------------------------------------------------
/packages/web/webpack.dev.js:
--------------------------------------------------------------------------------
1 | const commonConfig = require("./webpack.common");
2 | const webpack = require("webpack");
3 | const merge = require("webpack-merge");
4 | const path = require("path");
5 | const devServer = {
6 | contentBase: path.join(__dirname, "dist"),
7 | // enable HMR
8 | hot: true,
9 | // embed the webpack-dev-server runtime into the bundle
10 | inline: true,
11 | // serve index.html in place of 404 responses to allow HTML5 history
12 | historyApiFallback: true,
13 | port: 3000
14 | };
15 | module.exports = merge(commonConfig, {
16 | devServer,
17 | devtool: "source-map",
18 | plugins: [
19 | new webpack.DefinePlugin({
20 | "process.env.NODE_ENV": JSON.stringify("development")
21 | })
22 | ]
23 | });
24 |
--------------------------------------------------------------------------------
/packages/shared/screens/DetailScreen.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { View, Text, Button, StyleSheet } from "react-native";
3 |
4 | class Detail extends React.Component {
5 | render() {
6 | return (
7 |
8 | {`Detail Screen`}
9 |
10 |
17 |
18 | );
19 | }
20 | }
21 |
22 | const Styles = StyleSheet.create({
23 | space: {
24 | margin: 5
25 | }
26 | });
27 |
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/packages/apps/android/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | repositories {
5 | jcenter()
6 | }
7 | dependencies {
8 | classpath 'com.android.tools.build:gradle:2.2.3'
9 |
10 | // NOTE: Do not place your application dependencies here; they belong
11 | // in the individual module build.gradle files
12 | }
13 |
14 | }
15 |
16 | allprojects {
17 | repositories {
18 | mavenLocal()
19 | jcenter()
20 | maven {
21 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
22 | url "$rootDir/../node_modules/react-native/android"
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/shared/components/PlatformSpecific/PlatformComponent.ios.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { View, Text, Platform, StyleSheet } from "react-native";
3 |
4 | class PlatformComponent extends Component {
5 | render() {
6 | return (
7 |
8 | {`Hey dude! 👽`}
9 |
10 | );
11 | }
12 | }
13 |
14 | const Styles = StyleSheet.create({
15 | container: {
16 | padding: 6,
17 | borderColor: '#1ECD97',
18 | borderRadius: 4,
19 | borderWidth: 1,
20 | backgroundColor: 'white'
21 | },
22 | label: {
23 | color: '#1ECD97'
24 | }
25 | })
26 |
27 | export default PlatformComponent;
28 |
--------------------------------------------------------------------------------
/packages/shared/components/PlatformSpecific/PlatformComponent.web.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { View, Text, Platform, StyleSheet } from "react-native";
3 |
4 | class PlatformComponent extends Component {
5 | render() {
6 | return (
7 |
8 | {`Snap me 👻`}
9 |
10 | );
11 | }
12 | }
13 |
14 | const Styles = StyleSheet.create({
15 | container: {
16 | padding: 6,
17 | borderColor: '#FFD301',
18 | borderRadius: 4,
19 | borderWidth: 1,
20 | backgroundColor: 'white'
21 | },
22 | label: {
23 | color: '#FFD301'
24 | }
25 | })
26 |
27 | export default PlatformComponent;
28 |
--------------------------------------------------------------------------------
/packages/shared/components/PlatformSpecific/PlatformComponent.android.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { View, Text, Platform, StyleSheet } from "react-native";
3 |
4 | class PlatformComponent extends Component {
5 | render() {
6 | return (
7 |
8 | {`Lightning ️⚡`}
9 |
10 | );
11 | }
12 | }
13 |
14 | const Styles = StyleSheet.create({
15 | container: {
16 | padding: 6,
17 | borderColor: '#5A88FF',
18 | borderRadius: 4,
19 | borderWidth: 1,
20 | backgroundColor: 'white'
21 | },
22 | label: {
23 | color: '#5A88FF'
24 | }
25 | })
26 |
27 | export default PlatformComponent;
28 |
--------------------------------------------------------------------------------
/packages/shared/components/Modal/CustomModal.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Modal } from "react-native";
3 | import PropTypes from "prop-types";
4 |
5 | class CustomModal extends Component {
6 | render() {
7 | const { animationType, transparent, visible, onRequestClose } = this.props;
8 | const modalProps = {
9 | animationType,
10 | transparent,
11 | visible,
12 | onRequestClose
13 | };
14 | return (
15 |
16 | {this.props.children}
17 |
18 | );
19 | }
20 | }
21 | CustomModal.propTypes = {
22 | visible: PropTypes.bool.isRequired,
23 | onRequestClose: PropTypes.func,
24 | animationType: PropTypes.string,
25 | transparent: PropTypes.bool
26 | };
27 | export default CustomModal;
28 |
--------------------------------------------------------------------------------
/packages/shared/components/SharedComponent.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { View, Text, Platform, StyleSheet } from 'react-native';
3 |
4 |
5 | class SharedComponent extends Component {
6 | render() {
7 | return(
8 |
9 | {`Platform: ${Platform.OS}`}
10 |
11 | )
12 | }
13 | }
14 |
15 | const Styles = StyleSheet.create({
16 | container: {
17 | padding: 6,
18 | borderColor: '#1ECD97',
19 | borderRadius: 4,
20 | borderWidth: 1,
21 | backgroundColor: 'white'
22 | },
23 | label: {
24 | color: '#1ECD97'
25 | }
26 | })
27 |
28 | export default SharedComponent;
--------------------------------------------------------------------------------
/packages/apps/ios/apps/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "iphone",
5 | "size" : "29x29",
6 | "scale" : "2x"
7 | },
8 | {
9 | "idiom" : "iphone",
10 | "size" : "29x29",
11 | "scale" : "3x"
12 | },
13 | {
14 | "idiom" : "iphone",
15 | "size" : "40x40",
16 | "scale" : "2x"
17 | },
18 | {
19 | "idiom" : "iphone",
20 | "size" : "40x40",
21 | "scale" : "3x"
22 | },
23 | {
24 | "idiom" : "iphone",
25 | "size" : "60x60",
26 | "scale" : "2x"
27 | },
28 | {
29 | "idiom" : "iphone",
30 | "size" : "60x60",
31 | "scale" : "3x"
32 | }
33 | ],
34 | "info" : {
35 | "version" : 1,
36 | "author" : "xcode"
37 | }
38 | }
--------------------------------------------------------------------------------
/packages/apps/ios/appsTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/apps/ios/apps-tvOSTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/web/index.web.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { AppRegistry } from 'react-native';
3 | import { AppContainer } from 'react-hot-loader';
4 | // import App from 'shared/components/SharedComponent';
5 | // import App from 'shared/components/PlatformSpecific/PlatformComponent';
6 | import App from 'shared/components/Navigator/AppsNavigator';
7 |
8 | const renderApp = () => (
9 |
10 |
11 |
12 | );
13 |
14 | AppRegistry.registerComponent('ReactNativePlusWeb', () => renderApp);
15 |
16 | if (module.hot) {
17 | // $FlowFixMe
18 | module.hot.accept();
19 |
20 | const renderHotApp = () => (
21 |
22 |
23 |
24 | );
25 |
26 | // App registration and rendering
27 | AppRegistry.registerComponent('ReactNativePlusWeb', () => renderHotApp);
28 | }
29 |
30 | AppRegistry.runApplication('ReactNativePlusWeb', {
31 | rootTag: document.getElementById('root'),
32 | });
33 |
--------------------------------------------------------------------------------
/packages/web/font.js:
--------------------------------------------------------------------------------
1 | import Entypo from 'react-native-vector-icons/Fonts/Entypo.ttf';
2 | import MaterialIcons from 'react-native-vector-icons/Fonts/MaterialIcons.ttf';
3 | import Foundation from 'react-native-vector-icons/Fonts/Foundation.ttf';
4 |
5 |
6 | /**
7 | * Todo find better way to load fonts for icons
8 | */
9 | const fontList = {
10 | Entypo,
11 | ['Material Icons']: MaterialIcons,
12 | ['fontcustom']: Foundation
13 | };
14 |
15 | Object.keys(fontList).map((font) => {
16 | const iconFontStyles = `@font-face {
17 | src: url(${fontList[font]});
18 | font-family: ${font};
19 | }`;
20 |
21 | // Create stylesheet
22 | const style = document.createElement('style');
23 | style.type = 'text/css';
24 | if (style.styleSheet) {
25 | style.styleSheet.cssText = iconFontStyles;
26 | } else {
27 | style.appendChild(document.createTextNode(iconFontStyles));
28 | }
29 |
30 | // Inject stylesheet
31 | document.head.appendChild(style);
32 | })
33 |
--------------------------------------------------------------------------------
/packages/apps/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "apps",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "start": "node node_modules/react-native/local-cli/cli.js start",
7 | "test": "jest",
8 | "haul": "haul",
9 | "bundle": "haul bundle --platform android --dev false --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/"
10 | },
11 | "dependencies": {
12 | "react": "^16.3.0-alpha.1",
13 | "react-native": "0.54",
14 | "react-native-svg": "^6.3.1",
15 | "react-native-vector-icons": "^4.5.0",
16 | "react-navigation": "^1.5.8",
17 | "shared": "1.0.0"
18 | },
19 | "devDependencies": {
20 | "babel-jest": "22.4.3",
21 | "babel-loader": "^7.1.4",
22 | "babel-preset-react-native": "4.0.0",
23 | "haul": "^1.0.0-beta.13",
24 | "jest": "22.4.3",
25 | "react-test-renderer": "^16.3.0-alpha.1"
26 | },
27 | "jest": {
28 | "preset": "react-native"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/shared/screens/AboutScreen.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { View, Text, Button, StyleSheet } from "react-native";
3 |
4 | class AboutScreen extends React.Component {
5 | render() {
6 | return (
7 |
8 | {'About Screen'}
9 |
10 |
17 |
18 |
25 |
26 | );
27 | }
28 | }
29 |
30 | const Styles = StyleSheet.create({
31 | space: {
32 | margin: 5
33 | }
34 | });
35 | export default AboutScreen;
36 |
--------------------------------------------------------------------------------
/packages/apps/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 |
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 |
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 |
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 |
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 |
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 |
55 | # Haul
56 | #
57 | haul-debug.log
58 |
--------------------------------------------------------------------------------
/packages/shared/screens/NavigationScreen.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { View, Text, Button, StyleSheet } from "react-native";
3 |
4 | class NavigationScreen extends React.Component {
5 | state = {
6 | text: ''
7 | };
8 |
9 | render() {
10 |
11 | return (
12 |
13 | {`Navigation Screen`}
14 |
15 |
22 |
23 |
30 |
31 | );
32 | }
33 | }
34 |
35 | const Styles = StyleSheet.create({
36 | space: {
37 | margin: 5
38 | }
39 | });
40 |
41 | export default NavigationScreen;
42 |
--------------------------------------------------------------------------------
/packages/apps/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m
13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
14 |
15 | # When configured, Gradle will run in incubating parallel mode.
16 | # This option should only be used with decoupled projects. More details, visit
17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
18 | # org.gradle.parallel=true
19 |
20 | android.useDeprecatedNdk=true
21 | KSTOREPATH=../keystores/nixon_key_store2.jks
22 | KEYALS=key0
23 | KSTOREPWD=123456
24 | KEYPWD=123456
25 | LOLLIPOPVERSION=21
--------------------------------------------------------------------------------
/packages/shared/screens/SharedComponentsScreen.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { View, Text, Button, StyleSheet } from "react-native";
3 | import SharedComponent from 'shared/components/SharedComponent';
4 | import PlatformSpecific from 'shared/components/PlatformSpecific/PlatformComponent';
5 |
6 | class AboutScreen extends React.Component {
7 | render() {
8 | return (
9 |
10 | {`Shared Components Screen`}
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
25 |
26 | );
27 | }
28 | }
29 |
30 | const Styles = StyleSheet.create({
31 | space: {
32 | margin: 5
33 | }
34 | });
35 | export default AboutScreen;
36 |
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 |
13 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/shared/constants/routes.js:
--------------------------------------------------------------------------------
1 | import HomeScreen from '../screens/HomeScreen';
2 | import AboutScreen from '../screens/AboutScreen';
3 | import DetailScreen from '../screens/DetailScreen';
4 | import ModalScreen from '../screens/ModalScreen';
5 | import SharedComponentsScreen from '../screens/SharedComponentsScreen';
6 | import NavigationScreen from '../screens/NavigationScreen';
7 | import HelloScreen from '../screens/HelloScreen';
8 |
9 | const routes = {
10 | Home: {
11 | screen: HomeScreen,
12 | path: "/"
13 | },
14 | Hello: {
15 | screen: HelloScreen,
16 | path: "/hello"
17 | },
18 | Modal: {
19 | screen: ModalScreen,
20 | path: "/modal"
21 | },
22 | Shared: {
23 | screen: SharedComponentsScreen,
24 | path: "/shared-component"
25 | },
26 | Navigation: {
27 | screen: NavigationScreen,
28 | path: "/navigation"
29 | },
30 | About: {
31 | screen: AboutScreen,
32 | path: "/about"
33 | },
34 | Detail: {
35 | screen: DetailScreen,
36 | path: "/detail"
37 | }
38 | };
39 |
40 | export const initialRouteName = {
41 | initialRouteName: 'Home',
42 | }
43 | export default routes;
--------------------------------------------------------------------------------
/packages/web/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "web",
3 | "version": "1.0.0",
4 | "main": "index.js",
5 | "author": "Ryan Nixon Salim",
6 | "scripts": {
7 | "watch:web": "webpack-dev-server --config webpack.dev.js --hot --mode development",
8 | "build:dev": "webpack --config webpack.dev.js --mode development",
9 | "build:web": "webpack --config webpack.prod.js --mode production"
10 | },
11 | "dependencies": {
12 | "babel-loader": "^7.1.4",
13 | "react": "^16.2.0",
14 | "react-dom": "^16.2.0",
15 | "react-native-vector-icons": "^4.5.0",
16 | "react-native-web": "^0.5.3",
17 | "react-router": "^4.2.0",
18 | "react-router-dom": "^4.2.2",
19 | "shared": "1.0.0"
20 | },
21 | "devDependencies": {
22 | "babel-plugin-react-native-web": "^0.5.3",
23 | "babel-plugin-syntax-dynamic-import": "^6.18.0",
24 | "babel-preset-react-native": "^4.0.0",
25 | "html-webpack-plugin": "^3.1.0",
26 | "react-hot-loader": "^4.0.0",
27 | "url-loader": "^1.0.1",
28 | "webpack": "^4.2.0",
29 | "webpack-cli": "^2.0.13",
30 | "webpack-dev-server": "^3.1.1",
31 | "webpack-merge": "^4.1.2"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/apps/android/app/src/main/java/com/apps/MainApplication.java:
--------------------------------------------------------------------------------
1 | package com.apps;
2 |
3 | import android.app.Application;
4 |
5 | import com.facebook.react.ReactApplication;
6 | import com.horcrux.svg.SvgPackage;
7 | import com.facebook.react.ReactNativeHost;
8 | import com.facebook.react.ReactPackage;
9 | import com.facebook.react.shell.MainReactPackage;
10 | import com.facebook.soloader.SoLoader;
11 |
12 | import java.util.Arrays;
13 | import java.util.List;
14 |
15 | public class MainApplication extends Application implements ReactApplication {
16 |
17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
18 | @Override
19 | public boolean getUseDeveloperSupport() {
20 | return BuildConfig.DEBUG;
21 | }
22 |
23 | @Override
24 | protected List getPackages() {
25 | return Arrays.asList(
26 | new MainReactPackage(),
27 | new SvgPackage()
28 | );
29 | }
30 |
31 | @Override
32 | protected String getJSMainModuleName() {
33 | return "index";
34 | }
35 | };
36 |
37 | @Override
38 | public ReactNativeHost getReactNativeHost() {
39 | return mReactNativeHost;
40 | }
41 |
42 | @Override
43 | public void onCreate() {
44 | super.onCreate();
45 | SoLoader.init(this, /* native exopackage */ false);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/packages/web/webpack.common.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const HtmlWebpackPlugin = require('html-webpack-plugin')
3 | const {
4 | imageLoaderConfiguration,
5 | babelLoaderConfiguration,
6 | fontLoaderConfiguration
7 | } = require("./loaderConfiguration");
8 |
9 | module.exports = {
10 | entry: {
11 | rnwApp: [path.resolve(__dirname, "index.web.js")],
12 | vendor: ['react','react-dom', 'react-native-web', 'react-router-dom'],
13 | font: [path.resolve(__dirname, "font.js")],
14 | },
15 | module: {
16 | rules: [babelLoaderConfiguration, imageLoaderConfiguration, fontLoaderConfiguration]
17 | },
18 | plugins: [
19 | new HtmlWebpackPlugin({
20 | template: path.resolve(__dirname, 'template.html'),
21 | title: 'react-native-plus-web',
22 | filename: 'index.html',
23 | })
24 | ],
25 | output: {
26 | path: path.join(__dirname, "dist"),
27 | publicPath: '/',
28 | },
29 | resolve: {
30 | symlinks: false,
31 | extensions: [".web.js", ".js"],
32 | modules: [
33 | path.resolve('node_modules')
34 | ],
35 | },
36 | optimization: {
37 | splitChunks: {
38 | cacheGroups: {
39 | vendor: {
40 | chunks: "initial",
41 | test: "vendor",
42 | name: "vendor",
43 | enforce: true,
44 | },
45 | },
46 | },
47 | },
48 | };
49 |
--------------------------------------------------------------------------------
/packages/shared/components/Modal/CustomModal.web.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Since some react native component still in backlog, including modal
3 | * (https://github.com/necolas/react-native-web/issues/91)
4 | * This component is using react dom portal as workaround for modal
5 | */
6 |
7 | //TODO Animation & history navigation support
8 | import React, { Component } from "react";
9 | import Portal from "./Portal";
10 | import PropTypes from "prop-types";
11 | import { View, StyleSheet } from "react-native";
12 |
13 | class CustomModal extends Component {
14 | render() {
15 | const { animationType, transparent, visible, onRequestClose } = this.props;
16 | const modalProps = {
17 | animationType,
18 | transparent,
19 | visible,
20 | onRequestClose
21 | };
22 | return visible ? (
23 |
24 | {this.props.children}
25 |
26 | ) : null;
27 | }
28 | }
29 |
30 | const Styles = StyleSheet.create({
31 | modalContainer: {
32 | height: "100%",
33 | width: "100%",
34 | position: "fixed",
35 | backgroundColor: "#fff"
36 | }
37 | });
38 |
39 | CustomModal.propTypes = {
40 | visible: PropTypes.bool.isRequired,
41 | onRequestClose: PropTypes.func,
42 | animationType: PropTypes.string,
43 | transparent: PropTypes.bool
44 | };
45 |
46 | export default CustomModal;
47 |
--------------------------------------------------------------------------------
/packages/web/loaderConfiguration.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const fs = require('fs');
3 |
4 | const appDirectory = path.resolve(__dirname, '../');
5 | const babelLoaderConfiguration = {
6 | test: /\.js$/,
7 | // Add every directory that needs to be compiled by Babel during the build
8 | // Feel free to change this if you want more flexsible can use exlcude instead of exclusive include
9 | include: [
10 | path.resolve(__dirname, 'index.web.js'),
11 | path.resolve('node_modules/shared'),
12 | path.resolve('node_modules/react-native-vector-icons')
13 | ],
14 | use: {
15 | loader: 'babel-loader',
16 | options: {
17 | cacheDirectory: true,
18 | plugins: ['react-native-web', 'syntax-dynamic-import'],
19 | presets: ['react-native'],
20 | },
21 | },
22 | };
23 |
24 | // This is needed for webpack to import static images in JavaScript files
25 | const imageLoaderConfiguration = {
26 | test: /\.(gif|jpe?g|png|svg)$/,
27 | use: {
28 | loader: 'url-loader',
29 | options: {
30 | name: '[name].[ext]',
31 | },
32 | },
33 | };
34 | const fontLoaderConfiguration = {
35 | test: /\.ttf$/,
36 | loader: "url-loader", // or directly file-loader
37 | include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
38 | }
39 |
40 | module.exports = {
41 | imageLoaderConfiguration,
42 | babelLoaderConfiguration,
43 | fontLoaderConfiguration
44 | };
--------------------------------------------------------------------------------
/packages/apps/ios/apps/AppDelegate.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import "AppDelegate.h"
11 |
12 | #import
13 | #import
14 |
15 | @implementation AppDelegate
16 |
17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
18 | {
19 | NSURL *jsCodeLocation;
20 |
21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
22 |
23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
24 | moduleName:@"apps"
25 | initialProperties:nil
26 | launchOptions:launchOptions];
27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
28 |
29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
30 | UIViewController *rootViewController = [UIViewController new];
31 | rootViewController.view = rootView;
32 | self.window.rootViewController = rootViewController;
33 | [self.window makeKeyAndVisible];
34 | return YES;
35 | }
36 |
37 | @end
38 |
--------------------------------------------------------------------------------
/packages/apps/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 | ; We fork some components by platform
3 | .*/*[.]android.js
4 |
5 | ; Ignore "BUCK" generated dirs
6 | /\.buckd/
7 |
8 | ; Ignore unexpected extra "@providesModule"
9 | .*/node_modules/.*/node_modules/fbjs/.*
10 |
11 | ; Ignore duplicate module providers
12 | ; For RN Apps installed via npm, "Libraries" folder is inside
13 | ; "node_modules/react-native" but in the source repo it is in the root
14 | .*/Libraries/react-native/React.js
15 |
16 | ; Ignore polyfills
17 | .*/Libraries/polyfills/.*
18 |
19 | ; Ignore metro
20 | .*/node_modules/metro/.*
21 |
22 | [include]
23 |
24 | [libs]
25 | node_modules/react-native/Libraries/react-native/react-native-interface.js
26 | node_modules/react-native/flow/
27 | node_modules/react-native/flow-github/
28 |
29 | [options]
30 | emoji=true
31 |
32 | module.system=haste
33 |
34 | munge_underscores=true
35 |
36 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
37 |
38 | module.file_ext=.js
39 | module.file_ext=.jsx
40 | module.file_ext=.json
41 | module.file_ext=.native.js
42 |
43 | suppress_type=$FlowIssue
44 | suppress_type=$FlowFixMe
45 | suppress_type=$FlowFixMeProps
46 | suppress_type=$FlowFixMeState
47 |
48 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
49 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
50 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
51 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
52 |
53 | [version]
54 | ^0.65.0
55 |
--------------------------------------------------------------------------------
/packages/apps/android/app/BUCK:
--------------------------------------------------------------------------------
1 | # To learn about Buck see [Docs](https://buckbuild.com/).
2 | # To run your application with Buck:
3 | # - install Buck
4 | # - `npm start` - to start the packager
5 | # - `cd android`
6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8 | # - `buck install -r android/app` - compile, install and run application
9 | #
10 |
11 | lib_deps = []
12 |
13 | for jarfile in glob(['libs/*.jar']):
14 | name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
15 | lib_deps.append(':' + name)
16 | prebuilt_jar(
17 | name = name,
18 | binary_jar = jarfile,
19 | )
20 |
21 | for aarfile in glob(['libs/*.aar']):
22 | name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
23 | lib_deps.append(':' + name)
24 | android_prebuilt_aar(
25 | name = name,
26 | aar = aarfile,
27 | )
28 |
29 | android_library(
30 | name = "all-libs",
31 | exported_deps = lib_deps,
32 | )
33 |
34 | android_library(
35 | name = "app-code",
36 | srcs = glob([
37 | "src/main/java/**/*.java",
38 | ]),
39 | deps = [
40 | ":all-libs",
41 | ":build_config",
42 | ":res",
43 | ],
44 | )
45 |
46 | android_build_config(
47 | name = "build_config",
48 | package = "com.apps",
49 | )
50 |
51 | android_resource(
52 | name = "res",
53 | package = "com.apps",
54 | res = "src/main/res",
55 | )
56 |
57 | android_binary(
58 | name = "app",
59 | keystore = "//android/keystores:debug",
60 | manifest = "src/main/AndroidManifest.xml",
61 | package_type = "debug",
62 | deps = [
63 | ":app-code",
64 | ],
65 | )
66 |
--------------------------------------------------------------------------------
/packages/apps/ios/apps-tvOS/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | APPL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 | LSRequiresIPhoneOS
24 |
25 | UILaunchStoryboardName
26 | LaunchScreen
27 | UIRequiredDeviceCapabilities
28 |
29 | armv7
30 |
31 | UISupportedInterfaceOrientations
32 |
33 | UIInterfaceOrientationPortrait
34 | UIInterfaceOrientationLandscapeLeft
35 | UIInterfaceOrientationLandscapeRight
36 |
37 | UIViewControllerBasedStatusBarAppearance
38 |
39 | NSLocationWhenInUseUsageDescription
40 |
41 | NSAppTransportSecurity
42 |
43 |
44 | NSExceptionDomains
45 |
46 | localhost
47 |
48 | NSExceptionAllowsInsecureHTTPLoads
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/packages/shared/components/Navigator/AppNavigatorSwitch.web.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { Route, Switch, withRouter } from "react-router-dom";
3 | import ROUTES, { initialRouteName } from "../../constants/routes";
4 | import { View, Text } from "react-native";
5 |
6 | class AppNavigatorSwitch extends Component {
7 | _navigate(history, path, params) {
8 | history.push({ pathname: path, state: params });
9 | }
10 | _goback(history) {
11 | history.goBack();
12 | }
13 | generateNavigation(history) {
14 | return {
15 | navigate: (path, params) => {
16 | if (ROUTES[path]) {
17 | this._navigate(history, ROUTES[path].path, params);
18 | }
19 | },
20 | goBack: () => {
21 | this._goback(history);
22 | },
23 | state: {
24 | params: this.props.location.state
25 | }
26 | };
27 | }
28 |
29 | generateRoutes(history) {
30 | return Object.keys(ROUTES).map((routeName, idx) => {
31 | const { screen: Screen, path } = ROUTES[routeName];
32 | const screenProps = {
33 | navigation: this.generateNavigation(history)
34 | };
35 | const currentComponent = () => ;
36 | const routeProps = {
37 | path,
38 | component: currentComponent,
39 | key: idx,
40 | exact: true
41 | };
42 | return ;
43 | });
44 | }
45 |
46 | render() {
47 | const { history } = this.props;
48 | return (
49 |
50 | {this.generateRoutes(history)}
51 | (
53 |
54 | {"404 Not Found"}
55 |
56 | )}
57 | />
58 |
59 | );
60 | }
61 | }
62 |
63 | export default withRouter(AppNavigatorSwitch);
64 |
--------------------------------------------------------------------------------
/packages/apps/ios/apps/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | UIAppFonts
6 |
7 | Entypo.ttf
8 | EvilIcons.ttf
9 | Feather.ttf
10 | FontAwesome.ttf
11 | Foundation.ttf
12 | Ionicons.ttf
13 | MaterialCommunityIcons.ttf
14 | MaterialIcons.ttf
15 | Octicons.ttf
16 | SimpleLineIcons.ttf
17 | Zocial.ttf
18 |
19 | CFBundleDevelopmentRegion
20 | en
21 | CFBundleDisplayName
22 | apps
23 | CFBundleExecutable
24 | $(EXECUTABLE_NAME)
25 | CFBundleIdentifier
26 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
27 | CFBundleInfoDictionaryVersion
28 | 6.0
29 | CFBundleName
30 | $(PRODUCT_NAME)
31 | CFBundlePackageType
32 | APPL
33 | CFBundleShortVersionString
34 | 1.0
35 | CFBundleSignature
36 | ????
37 | CFBundleVersion
38 | 1
39 | LSRequiresIPhoneOS
40 |
41 | UILaunchStoryboardName
42 | LaunchScreen
43 | UIRequiredDeviceCapabilities
44 |
45 | armv7
46 |
47 | UISupportedInterfaceOrientations
48 |
49 | UIInterfaceOrientationPortrait
50 | UIInterfaceOrientationLandscapeLeft
51 | UIInterfaceOrientationLandscapeRight
52 |
53 | UIViewControllerBasedStatusBarAppearance
54 |
55 | NSLocationWhenInUseUsageDescription
56 |
57 | NSAppTransportSecurity
58 |
59 | NSExceptionDomains
60 |
61 | localhost
62 |
63 | NSExceptionAllowsInsecureHTTPLoads
64 |
65 |
66 |
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/packages/apps/ios/appsTests/appsTests.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import
11 | #import
12 |
13 | #import
14 | #import
15 |
16 | #define TIMEOUT_SECONDS 600
17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
18 |
19 | @interface appsTests : XCTestCase
20 |
21 | @end
22 |
23 | @implementation appsTests
24 |
25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
26 | {
27 | if (test(view)) {
28 | return YES;
29 | }
30 | for (UIView *subview in [view subviews]) {
31 | if ([self findSubviewInView:subview matching:test]) {
32 | return YES;
33 | }
34 | }
35 | return NO;
36 | }
37 |
38 | - (void)testRendersWelcomeScreen
39 | {
40 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
42 | BOOL foundElement = NO;
43 |
44 | __block NSString *redboxError = nil;
45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
46 | if (level >= RCTLogLevelError) {
47 | redboxError = message;
48 | }
49 | });
50 |
51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
54 |
55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
57 | return YES;
58 | }
59 | return NO;
60 | }];
61 | }
62 |
63 | RCTSetLogFunction(RCTDefaultLogFunction);
64 |
65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
67 | }
68 |
69 |
70 | @end
71 |
--------------------------------------------------------------------------------
/packages/shared/screens/ModalScreen.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import Modal from "../components/Modal/CustomModal";
3 | import { View, Text, Button, StyleSheet, TouchableOpacity } from "react-native";
4 |
5 | class ModalScreen extends Component {
6 | state = {
7 | modalVisible: false
8 | };
9 | setModalVisible(visible) {
10 | this.setState({
11 | modalVisible: visible
12 | });
13 | }
14 |
15 | render() {
16 | const modalProps = {
17 | animationType: "slide",
18 | transparent: false,
19 | visible: this.state.modalVisible,
20 | onRequestClose: () => {
21 | alert("Modal has been close");
22 | }
23 | };
24 | return (
25 |
26 |
27 |
28 |
29 | Hello Modal!!
30 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
31 |
32 |
33 | {
36 | this.setModalVisible(!this.state.modalVisible);
37 | }}
38 | >
39 | {"Close Modal"}
40 |
41 |
42 |
43 |
44 |
50 |
51 |
57 |
58 | );
59 | }
60 | }
61 |
62 | const Styles = StyleSheet.create({
63 | container: {
64 | marginTop: 22,
65 | justifyContent: "center"
66 | },
67 | button: {
68 | width: 30
69 | },
70 | modalContainer: {
71 | padding: 40,
72 | justifyContent: "center",
73 | alignItems: "center"
74 | },
75 | closeButton: {
76 | width: 250,
77 | alignItems: "center",
78 | backgroundColor: "#f96d01",
79 | padding: 10,
80 | borderRadius: 5,
81 | marginTop: 20,
82 | },
83 | closeButtonText: {
84 | color: "#fff",
85 | fontWeight: "bold"
86 | },
87 | space: {
88 | margin: 10,
89 | }
90 | });
91 |
92 | export default ModalScreen;
93 |
--------------------------------------------------------------------------------
/packages/apps/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @if "%DEBUG%" == "" @echo off
2 | @rem ##########################################################################
3 | @rem
4 | @rem Gradle startup script for Windows
5 | @rem
6 | @rem ##########################################################################
7 |
8 | @rem Set local scope for the variables with windows NT shell
9 | if "%OS%"=="Windows_NT" setlocal
10 |
11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
12 | set DEFAULT_JVM_OPTS=
13 |
14 | set DIRNAME=%~dp0
15 | if "%DIRNAME%" == "" set DIRNAME=.
16 | set APP_BASE_NAME=%~n0
17 | set APP_HOME=%DIRNAME%
18 |
19 | @rem Find java.exe
20 | if defined JAVA_HOME goto findJavaFromJavaHome
21 |
22 | set JAVA_EXE=java.exe
23 | %JAVA_EXE% -version >NUL 2>&1
24 | if "%ERRORLEVEL%" == "0" goto init
25 |
26 | echo.
27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
28 | echo.
29 | echo Please set the JAVA_HOME variable in your environment to match the
30 | echo location of your Java installation.
31 |
32 | goto fail
33 |
34 | :findJavaFromJavaHome
35 | set JAVA_HOME=%JAVA_HOME:"=%
36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
37 |
38 | if exist "%JAVA_EXE%" goto init
39 |
40 | echo.
41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
42 | echo.
43 | echo Please set the JAVA_HOME variable in your environment to match the
44 | echo location of your Java installation.
45 |
46 | goto fail
47 |
48 | :init
49 | @rem Get command-line arguments, handling Windowz variants
50 |
51 | if not "%OS%" == "Windows_NT" goto win9xME_args
52 | if "%@eval[2+2]" == "4" goto 4NT_args
53 |
54 | :win9xME_args
55 | @rem Slurp the command line arguments.
56 | set CMD_LINE_ARGS=
57 | set _SKIP=2
58 |
59 | :win9xME_args_slurp
60 | if "x%~1" == "x" goto execute
61 |
62 | set CMD_LINE_ARGS=%*
63 | goto execute
64 |
65 | :4NT_args
66 | @rem Get arguments from the 4NT Shell from JP Software
67 | set CMD_LINE_ARGS=%$
68 |
69 | :execute
70 | @rem Setup the command line
71 |
72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
73 |
74 | @rem Execute Gradle
75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
76 |
77 | :end
78 | @rem End local scope for the variables with windows NT shell
79 | if "%ERRORLEVEL%"=="0" goto mainEnd
80 |
81 | :fail
82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
83 | rem the _cmd.exe /c_ return code!
84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
85 | exit /b 1
86 |
87 | :mainEnd
88 | if "%OS%"=="Windows_NT" endlocal
89 |
90 | :omega
91 |
--------------------------------------------------------------------------------
/packages/apps/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
12 | # If your project uses WebView with JS, uncomment the following
13 | # and specify the fully qualified class name to the JavaScript interface
14 | # class:
15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
16 | # public *;
17 | #}
18 |
19 | # Disabling obfuscation is useful if you collect stack traces from production crashes
20 | # (unless you are using a system that supports de-obfuscate the stack traces).
21 | -dontobfuscate
22 |
23 | # React Native
24 |
25 | # Keep our interfaces so they can be used by other ProGuard rules.
26 | # See http://sourceforge.net/p/proguard/bugs/466/
27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
30 |
31 | # Do not strip any method/class that is annotated with @DoNotStrip
32 | -keep @com.facebook.proguard.annotations.DoNotStrip class *
33 | -keep @com.facebook.common.internal.DoNotStrip class *
34 | -keepclassmembers class * {
35 | @com.facebook.proguard.annotations.DoNotStrip *;
36 | @com.facebook.common.internal.DoNotStrip *;
37 | }
38 |
39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
40 | void set*(***);
41 | *** get*();
42 | }
43 |
44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; }
46 | -keepclassmembers,includedescriptorclasses class * { native ; }
47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; }
48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; }
49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; }
50 |
51 | -dontwarn com.facebook.react.**
52 |
53 | # TextLayoutBuilder uses a non-public Android constructor within StaticLayout.
54 | # See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details.
55 | -dontwarn android.text.StaticLayout
56 |
57 | # okhttp
58 |
59 | -keepattributes Signature
60 | -keepattributes *Annotation*
61 | -keep class okhttp3.** { *; }
62 | -keep interface okhttp3.** { *; }
63 | -dontwarn okhttp3.**
64 |
65 | # okio
66 |
67 | -keep class sun.misc.Unsafe { *; }
68 | -dontwarn java.nio.file.*
69 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
70 | -dontwarn okio.**
71 |
--------------------------------------------------------------------------------
/packages/shared/screens/HomeScreen.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | View,
4 | Text,
5 | StyleSheet,
6 | TouchableOpacity,
7 | Platform
8 | } from "react-native";
9 | import Entypo from "react-native-vector-icons/Entypo";
10 | import MaterialIcons from "react-native-vector-icons/MaterialIcons";
11 | import Foundation from "react-native-vector-icons/Foundation";
12 |
13 | class HomeScreen extends React.Component {
14 | state = {
15 | text: ""
16 | };
17 |
18 | render() {
19 | const iconProps = {
20 | size: 30,
21 | color: '#900'
22 | };
23 | const menuButtonStyle =
24 | Platform.OS === "android" ? Styles.menuButtonAndroid : Styles.menuButton;
25 | return (
26 |
27 |
28 | {`Welcome To React Native!`}
29 |
30 |
31 | this.props.navigation.navigate('Hello')}>
32 |
33 | {`Hello World!`}
34 |
35 | this.props.navigation.navigate('Shared')}>
36 |
37 | {`Shared Component`}
38 |
39 | this.props.navigation.navigate('Navigation')}>
40 |
41 | {`Navigation`}
42 |
43 | this.props.navigation.navigate('Modal')}>
44 |
45 | {`Modal`}
46 |
47 |
48 |
49 | );
50 | }
51 | }
52 |
53 | const buttonCommonStyle = {
54 | margin: 10,
55 | width: 100,
56 | height: 100,
57 | backgroundColor: "#fff",
58 | paddingHorizontal: 16,
59 | paddingVertical: 12,
60 | borderBottomWidth: StyleSheet.hairlineWidth,
61 | borderBottomColor: "#ddd",
62 | borderRadius: 5,
63 | alignItems: "center",
64 | justifyContent: "center"
65 | };
66 |
67 | const Styles = StyleSheet.create({
68 | wrapper: {
69 | flex: 1,
70 | alignItems: "center",
71 | justifyContent: "center",
72 | backgroundColor: "#eee"
73 | },
74 | space: {
75 | margin: 5
76 | },
77 | menu: {
78 | flexWrap: "wrap",
79 | flexDirection: "row",
80 | justifyContent: "space-around",
81 | paddingHorizontal: 60,
82 | },
83 | menuLabel: {
84 | fontSize: 11,
85 | fontWeight: "bold",
86 | textAlign: "center",
87 | marginTop: 5
88 | },
89 | menuButtonAndroid: {
90 | ...buttonCommonStyle,
91 | elevation: 2
92 | },
93 | menuButton: {
94 | ...buttonCommonStyle,
95 | shadowColor: "#9a9a9a",
96 | shadowOffset: { width: 0, height: 1 },
97 | shadowOpacity: 0.7,
98 | shadowRadius: 2
99 | }
100 | });
101 |
102 | export default HomeScreen;
103 |
--------------------------------------------------------------------------------
/packages/apps/ios/apps/Base.lproj/LaunchScreen.xib:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
21 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/packages/shared/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | asap@~2.0.3:
6 | version "2.0.6"
7 | resolved "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
8 |
9 | core-js@^1.0.0:
10 | version "1.2.7"
11 | resolved "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
12 |
13 | encoding@^0.1.11:
14 | version "0.1.12"
15 | resolved "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
16 | dependencies:
17 | iconv-lite "~0.4.13"
18 |
19 | fbjs@^0.8.16:
20 | version "0.8.16"
21 | resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
22 | dependencies:
23 | core-js "^1.0.0"
24 | isomorphic-fetch "^2.1.1"
25 | loose-envify "^1.0.0"
26 | object-assign "^4.1.0"
27 | promise "^7.1.1"
28 | setimmediate "^1.0.5"
29 | ua-parser-js "^0.7.9"
30 |
31 | iconv-lite@~0.4.13:
32 | version "0.4.19"
33 | resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
34 |
35 | is-stream@^1.0.1:
36 | version "1.1.0"
37 | resolved "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
38 |
39 | isomorphic-fetch@^2.1.1:
40 | version "2.2.1"
41 | resolved "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
42 | dependencies:
43 | node-fetch "^1.0.1"
44 | whatwg-fetch ">=0.10.0"
45 |
46 | js-tokens@^3.0.0:
47 | version "3.0.2"
48 | resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
49 |
50 | loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
51 | version "1.3.1"
52 | resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
53 | dependencies:
54 | js-tokens "^3.0.0"
55 |
56 | node-fetch@^1.0.1:
57 | version "1.7.3"
58 | resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
59 | dependencies:
60 | encoding "^0.1.11"
61 | is-stream "^1.0.1"
62 |
63 | object-assign@^4.1.0, object-assign@^4.1.1:
64 | version "4.1.1"
65 | resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
66 |
67 | promise@^7.1.1:
68 | version "7.3.1"
69 | resolved "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
70 | dependencies:
71 | asap "~2.0.3"
72 |
73 | prop-types@^15.6.0:
74 | version "15.6.1"
75 | resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
76 | dependencies:
77 | fbjs "^0.8.16"
78 | loose-envify "^1.3.1"
79 | object-assign "^4.1.1"
80 |
81 | react@^16.2.0:
82 | version "16.3.0"
83 | resolved "https://registry.npmjs.org/react/-/react-16.3.0.tgz#fc5a01c68f91e9b38e92cf83f7b795ebdca8ddff"
84 | dependencies:
85 | fbjs "^0.8.16"
86 | loose-envify "^1.1.0"
87 | object-assign "^4.1.1"
88 | prop-types "^15.6.0"
89 |
90 | setimmediate@^1.0.5:
91 | version "1.0.5"
92 | resolved "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
93 |
94 | ua-parser-js@^0.7.9:
95 | version "0.7.17"
96 | resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
97 |
98 | whatwg-fetch@>=0.10.0:
99 | version "2.0.4"
100 | resolved "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
101 |
--------------------------------------------------------------------------------
/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 | 
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 |