├── LICENCE ├── README.md ├── example-app ├── .buckconfig ├── .gitattributes ├── .gitignore ├── App.js ├── __tests__ │ └── App.js ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── exampleapp │ │ │ │ └── ReactNativeFlipper.java │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── exampleapp │ │ │ │ ├── MainActivity.java │ │ │ │ ├── MainApplication.java │ │ │ │ └── generated │ │ │ │ └── BasePackageList.java │ │ │ └── res │ │ │ ├── drawable │ │ │ ├── splashscreen.xml │ │ │ └── splashscreen_image.png │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── colors.xml │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── app │ ├── components │ │ └── dynamic-component.js │ ├── screens │ │ └── home-page.js │ ├── store │ │ ├── actions.js │ │ ├── reducers.js │ │ └── store.js │ └── utils.js ├── babel.config.js ├── index.js ├── ios │ ├── Podfile │ ├── exampleapp.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── exampleapp.xcscheme │ └── exampleapp │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ ├── Contents.json │ │ ├── SplashScreen.imageset │ │ │ ├── Contents.json │ │ │ └── splashscreen.png │ │ └── SplashScreenBackground.imageset │ │ │ ├── Contents.json │ │ │ └── background.png │ │ ├── Info.plist │ │ ├── SplashScreen.storyboard │ │ ├── Supporting │ │ └── Expo.plist │ │ └── main.m ├── metro.config.js ├── package.json ├── packages.js └── yarn.lock ├── remote-components-demo.gif └── remote-components ├── .gitignore ├── babel.config.js ├── components ├── counter.js ├── new-page.js ├── next-page-button.js ├── todo-status.js └── todo-status2.js ├── package.json ├── rollup.config.js └── yarn.lock /LICENCE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 Sarath KCM 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Lazy loading React Native components from a server 2 | 3 | Blog post - https://sarathkcm.dev/blog/lazy-loading-react-native-components-from-a-server 4 | 5 | ![Video of various dynamic components loading in a React Native App](https://github.com/sarathkcm/react-native-remote-components/raw/main/remote-components-demo.gif "Demo") 6 | -------------------------------------------------------------------------------- /example-app/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /example-app/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /example-app/.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 | *.hprof 33 | 34 | # node.js 35 | # 36 | node_modules/ 37 | npm-debug.log 38 | yarn-error.log 39 | 40 | # BUCK 41 | buck-out/ 42 | \.buckd/ 43 | *.keystore 44 | !debug.keystore 45 | 46 | # fastlane 47 | # 48 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 49 | # screenshots whenever they are needed. 50 | # For more information about the recommended setup visit: 51 | # https://docs.fastlane.tools/best-practices/source-control/ 52 | 53 | */fastlane/report.xml 54 | */fastlane/Preview.html 55 | */fastlane/screenshots 56 | 57 | # Bundle artifacts 58 | *.jsbundle 59 | 60 | # CocoaPods 61 | /ios/Pods/ 62 | 63 | # Expo 64 | .expo/* 65 | web-build/ 66 | -------------------------------------------------------------------------------- /example-app/App.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import React from 'react'; 3 | import { StyleSheet } from 'react-native'; 4 | import { NavigationContainer } from '@react-navigation/native'; 5 | import { createStackNavigator } from '@react-navigation/stack'; 6 | import { SafeAreaProvider } from 'react-native-safe-area-context'; 7 | import HomePage from './app/screens/home-page'; 8 | import configureStore from "./app/store/store" 9 | import { Provider } from 'react-redux'; 10 | import DynamicComponent from './app/components/dynamic-component'; 11 | 12 | const Stack = createStackNavigator(); 13 | const store = configureStore(); 14 | 15 | export default function App() { 16 | return ( 17 | 18 | 19 | 20 | 21 | 22 | 23 | {() => } 24 | 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | } 32 | 33 | const styles = StyleSheet.create({ 34 | container: { 35 | flex: 1, 36 | backgroundColor: '#fff', 37 | alignItems: 'center', 38 | justifyContent: 'center', 39 | }, 40 | }); 41 | -------------------------------------------------------------------------------- /example-app/__tests__/App.js: -------------------------------------------------------------------------------- 1 | import 'react-native'; 2 | import React from 'react'; 3 | import App from '../App'; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from 'react-test-renderer'; 7 | 8 | it('renders correctly', () => { 9 | renderer.create(); 10 | }); 11 | -------------------------------------------------------------------------------- /example-app/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 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.exampleapp", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.exampleapp", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /example-app/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation. If none specified and 19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is 20 | * // default. Can be overridden with ENTRY_FILE environment variable. 21 | * entryFile: "index.android.js", 22 | * 23 | * // https://reactnative.dev/docs/performance#enable-the-ram-format 24 | * bundleCommand: "ram-bundle", 25 | * 26 | * // whether to bundle JS and assets in debug mode 27 | * bundleInDebug: false, 28 | * 29 | * // whether to bundle JS and assets in release mode 30 | * bundleInRelease: true, 31 | * 32 | * // whether to bundle JS and assets in another build variant (if configured). 33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 34 | * // The configuration property can be in the following formats 35 | * // 'bundleIn${productFlavor}${buildType}' 36 | * // 'bundleIn${buildType}' 37 | * // bundleInFreeDebug: true, 38 | * // bundleInPaidRelease: true, 39 | * // bundleInBeta: true, 40 | * 41 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 42 | * // for example: to disable dev mode in the staging build type (if configured) 43 | * devDisabledInStaging: true, 44 | * // The configuration property can be in the following formats 45 | * // 'devDisabledIn${productFlavor}${buildType}' 46 | * // 'devDisabledIn${buildType}' 47 | * 48 | * // the root of your project, i.e. where "package.json" lives 49 | * root: "../../", 50 | * 51 | * // where to put the JS bundle asset in debug mode 52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 53 | * 54 | * // where to put the JS bundle asset in release mode 55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 56 | * 57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 58 | * // require('./image.png')), in debug mode 59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 60 | * 61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 62 | * // require('./image.png')), in release mode 63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 64 | * 65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 69 | * // for example, you might want to remove it from here. 70 | * inputExcludes: ["android/**", "ios/**"], 71 | * 72 | * // override which node gets called and with what additional arguments 73 | * nodeExecutableAndArgs: ["node"], 74 | * 75 | * // supply additional arguments to the packager 76 | * extraPackagerArgs: [] 77 | * ] 78 | */ 79 | 80 | project.ext.react = [ 81 | enableHermes: false 82 | ] 83 | 84 | apply from: '../../node_modules/react-native-unimodules/gradle.groovy' 85 | apply from: "../../node_modules/react-native/react.gradle" 86 | apply from: "../../node_modules/expo-constants/scripts/get-app-config-android.gradle" 87 | apply from: "../../node_modules/expo-updates/scripts/create-manifest-android.gradle" 88 | 89 | /** 90 | * Set this to true to create two separate APKs instead of one: 91 | * - An APK that only works on ARM devices 92 | * - An APK that only works on x86 devices 93 | * The advantage is the size of the APK is reduced by about 4MB. 94 | * Upload all the APKs to the Play Store and people will download 95 | * the correct one based on the CPU architecture of their device. 96 | */ 97 | def enableSeparateBuildPerCPUArchitecture = false 98 | 99 | /** 100 | * Run Proguard to shrink the Java bytecode in release builds. 101 | */ 102 | def enableProguardInReleaseBuilds = false 103 | 104 | /** 105 | * The preferred build flavor of JavaScriptCore. 106 | * 107 | * For example, to use the international variant, you can use: 108 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 109 | * 110 | * The international variant includes ICU i18n library and necessary data 111 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 112 | * give correct results when using with locales other than en-US. Note that 113 | * this variant is about 6MiB larger per architecture than default. 114 | */ 115 | def jscFlavor = 'org.webkit:android-jsc:+' 116 | 117 | /** 118 | * Whether to enable the Hermes VM. 119 | * 120 | * This should be set on project.ext.react and mirrored here. If it is not set 121 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 122 | * and the benefits of using Hermes will therefore be sharply reduced. 123 | */ 124 | def enableHermes = project.ext.react.get("enableHermes", false); 125 | 126 | android { 127 | compileSdkVersion rootProject.ext.compileSdkVersion 128 | 129 | compileOptions { 130 | sourceCompatibility JavaVersion.VERSION_1_8 131 | targetCompatibility JavaVersion.VERSION_1_8 132 | } 133 | 134 | defaultConfig { 135 | applicationId "com.exampleapp" 136 | minSdkVersion rootProject.ext.minSdkVersion 137 | targetSdkVersion rootProject.ext.targetSdkVersion 138 | versionCode 1 139 | versionName "1.0" 140 | } 141 | splits { 142 | abi { 143 | reset() 144 | enable enableSeparateBuildPerCPUArchitecture 145 | universalApk false // If true, also generate a universal APK 146 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" 147 | } 148 | } 149 | signingConfigs { 150 | debug { 151 | storeFile file('debug.keystore') 152 | storePassword 'android' 153 | keyAlias 'androiddebugkey' 154 | keyPassword 'android' 155 | } 156 | } 157 | buildTypes { 158 | debug { 159 | signingConfig signingConfigs.debug 160 | } 161 | release { 162 | // Caution! In production, you need to generate your own keystore file. 163 | // see https://reactnative.dev/docs/signed-apk-android. 164 | signingConfig signingConfigs.debug 165 | minifyEnabled enableProguardInReleaseBuilds 166 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 167 | } 168 | } 169 | 170 | // applicationVariants are e.g. debug, release 171 | applicationVariants.all { variant -> 172 | variant.outputs.each { output -> 173 | // For each separate APK per architecture, set a unique version code as described here: 174 | // https://developer.android.com/studio/build/configure-apk-splits.html 175 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 176 | def abi = output.getFilter(OutputFile.ABI) 177 | if (abi != null) { // null for the universal-debug, universal-release variants 178 | output.versionCodeOverride = 179 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 180 | } 181 | 182 | } 183 | } 184 | } 185 | 186 | dependencies { 187 | implementation fileTree(dir: "libs", include: ["*.jar"]) 188 | //noinspection GradleDynamicVersion 189 | implementation "com.facebook.react:react-native:+" // From node_modules 190 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" 191 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { 192 | exclude group:'com.facebook.fbjni' 193 | } 194 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 195 | exclude group:'com.facebook.flipper' 196 | exclude group:'com.squareup.okhttp3', module:'okhttp' 197 | } 198 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { 199 | exclude group:'com.facebook.flipper' 200 | } 201 | addUnimodulesDependencies() 202 | 203 | if (enableHermes) { 204 | def hermesPath = "../../node_modules/hermes-engine/android/"; 205 | debugImplementation files(hermesPath + "hermes-debug.aar") 206 | releaseImplementation files(hermesPath + "hermes-release.aar") 207 | } else { 208 | implementation jscFlavor 209 | } 210 | } 211 | 212 | // Run this once to be able to run the application with BUCK 213 | // puts all compile dependencies into folder libs for BUCK to use 214 | task copyDownloadableDepsToLibs(type: Copy) { 215 | from configurations.compile 216 | into 'libs' 217 | } 218 | 219 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 220 | -------------------------------------------------------------------------------- /example-app/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 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 | -------------------------------------------------------------------------------- /example-app/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/debug.keystore -------------------------------------------------------------------------------- /example-app/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 | -------------------------------------------------------------------------------- /example-app/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example-app/android/app/src/debug/java/com/exampleapp/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.exampleapp; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 32 | client.addPlugin(new ReactFlipperPlugin()); 33 | client.addPlugin(new DatabasesFlipperPlugin(context)); 34 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 35 | client.addPlugin(CrashReporterPlugin.getInstance()); 36 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 37 | NetworkingModule.setCustomClientBuilder( 38 | new NetworkingModule.CustomClientBuilder() { 39 | @Override 40 | public void apply(OkHttpClient.Builder builder) { 41 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 42 | } 43 | }); 44 | client.addPlugin(networkFlipperPlugin); 45 | client.start(); 46 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 47 | // Hence we run if after all native modules have been initialized 48 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 49 | if (reactContext == null) { 50 | reactInstanceManager.addReactInstanceEventListener( 51 | new ReactInstanceManager.ReactInstanceEventListener() { 52 | @Override 53 | public void onReactContextInitialized(ReactContext reactContext) { 54 | reactInstanceManager.removeReactInstanceEventListener(this); 55 | reactContext.runOnNativeModulesQueueThread( 56 | new Runnable() { 57 | @Override 58 | public void run() { 59 | client.addPlugin(new FrescoFlipperPlugin()); 60 | } 61 | }); 62 | } 63 | }); 64 | } else { 65 | client.addPlugin(new FrescoFlipperPlugin()); 66 | } 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /example-app/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 32 | 33 | 34 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /example-app/android/app/src/main/java/com/exampleapp/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.exampleapp; 2 | 3 | import android.os.Bundle; 4 | 5 | import com.facebook.react.ReactActivity; 6 | import com.facebook.react.ReactActivityDelegate; 7 | import com.facebook.react.ReactRootView; 8 | import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; 9 | 10 | import expo.modules.splashscreen.singletons.SplashScreen; 11 | import expo.modules.splashscreen.SplashScreenImageResizeMode; 12 | 13 | public class MainActivity extends ReactActivity { 14 | @Override 15 | protected void onCreate(Bundle savedInstanceState) { 16 | super.onCreate(null); 17 | // SplashScreen.show(...) has to be called after super.onCreate(...) 18 | // Below line is handled by '@expo/configure-splash-screen' command and it's discouraged to modify it manually 19 | SplashScreen.show(this, SplashScreenImageResizeMode.CONTAIN, ReactRootView.class, false); 20 | } 21 | 22 | 23 | /** 24 | * Returns the name of the main component registered from JavaScript. 25 | * This is used to schedule rendering of the component. 26 | */ 27 | @Override 28 | protected String getMainComponentName() { 29 | return "main"; 30 | } 31 | 32 | @Override 33 | protected ReactActivityDelegate createReactActivityDelegate() { 34 | return new ReactActivityDelegate(this, getMainComponentName()) { 35 | @Override 36 | protected ReactRootView createRootView() { 37 | return new RNGestureHandlerEnabledRootView(MainActivity.this); 38 | } 39 | }; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /example-app/android/app/src/main/java/com/exampleapp/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.exampleapp; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import android.net.Uri; 6 | 7 | import com.facebook.react.PackageList; 8 | import com.facebook.react.ReactApplication; 9 | import com.facebook.react.ReactInstanceManager; 10 | import com.facebook.react.ReactNativeHost; 11 | import com.facebook.react.ReactPackage; 12 | import com.facebook.react.shell.MainReactPackage; 13 | import com.facebook.soloader.SoLoader; 14 | import com.exampleapp.generated.BasePackageList; 15 | 16 | import org.unimodules.adapters.react.ReactAdapterPackage; 17 | import org.unimodules.adapters.react.ModuleRegistryAdapter; 18 | import org.unimodules.adapters.react.ReactModuleRegistryProvider; 19 | import org.unimodules.core.interfaces.Package; 20 | import org.unimodules.core.interfaces.SingletonModule; 21 | import expo.modules.constants.ConstantsPackage; 22 | import expo.modules.permissions.PermissionsPackage; 23 | import expo.modules.filesystem.FileSystemPackage; 24 | import expo.modules.updates.UpdatesController; 25 | 26 | import java.lang.reflect.InvocationTargetException; 27 | import java.util.Arrays; 28 | import java.util.List; 29 | import javax.annotation.Nullable; 30 | 31 | public class MainApplication extends Application implements ReactApplication { 32 | private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider( 33 | new BasePackageList().getPackageList() 34 | ); 35 | 36 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 37 | @Override 38 | public boolean getUseDeveloperSupport() { 39 | return BuildConfig.DEBUG; 40 | } 41 | 42 | @Override 43 | protected List getPackages() { 44 | List packages = new PackageList(this).getPackages(); 45 | packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider)); 46 | return packages; 47 | } 48 | 49 | @Override 50 | protected String getJSMainModuleName() { 51 | return "index"; 52 | } 53 | 54 | @Override 55 | protected @Nullable String getJSBundleFile() { 56 | if (BuildConfig.DEBUG) { 57 | return super.getJSBundleFile(); 58 | } else { 59 | return UpdatesController.getInstance().getLaunchAssetFile(); 60 | } 61 | } 62 | 63 | @Override 64 | protected @Nullable String getBundleAssetName() { 65 | if (BuildConfig.DEBUG) { 66 | return super.getBundleAssetName(); 67 | } else { 68 | return UpdatesController.getInstance().getBundleAssetName(); 69 | } 70 | } 71 | }; 72 | 73 | @Override 74 | public ReactNativeHost getReactNativeHost() { 75 | return mReactNativeHost; 76 | } 77 | 78 | @Override 79 | public void onCreate() { 80 | super.onCreate(); 81 | SoLoader.init(this, /* native exopackage */ false); 82 | 83 | if (!BuildConfig.DEBUG) { 84 | UpdatesController.initialize(this); 85 | } 86 | 87 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 88 | } 89 | 90 | /** 91 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 92 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 93 | * 94 | * @param context 95 | * @param reactInstanceManager 96 | */ 97 | private static void initializeFlipper( 98 | Context context, ReactInstanceManager reactInstanceManager) { 99 | if (BuildConfig.DEBUG) { 100 | try { 101 | /* 102 | We use reflection here to pick up the class that initializes Flipper, 103 | since Flipper library is not available in release mode 104 | */ 105 | Class aClass = Class.forName("com.exampleapp.ReactNativeFlipper"); 106 | aClass 107 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 108 | .invoke(null, context, reactInstanceManager); 109 | } catch (ClassNotFoundException e) { 110 | e.printStackTrace(); 111 | } catch (NoSuchMethodException e) { 112 | e.printStackTrace(); 113 | } catch (IllegalAccessException e) { 114 | e.printStackTrace(); 115 | } catch (InvocationTargetException e) { 116 | e.printStackTrace(); 117 | } 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /example-app/android/app/src/main/java/com/exampleapp/generated/BasePackageList.java: -------------------------------------------------------------------------------- 1 | package com.exampleapp.generated; 2 | 3 | import java.util.Arrays; 4 | import java.util.List; 5 | import org.unimodules.core.interfaces.Package; 6 | 7 | public class BasePackageList { 8 | public List getPackageList() { 9 | return Arrays.asList( 10 | new expo.modules.application.ApplicationPackage(), 11 | new expo.modules.constants.ConstantsPackage(), 12 | new expo.modules.errorrecovery.ErrorRecoveryPackage(), 13 | new expo.modules.filesystem.FileSystemPackage(), 14 | new expo.modules.font.FontLoaderPackage(), 15 | new expo.modules.imageloader.ImageLoaderPackage(), 16 | new expo.modules.keepawake.KeepAwakePackage(), 17 | new expo.modules.lineargradient.LinearGradientPackage(), 18 | new expo.modules.location.LocationPackage(), 19 | new expo.modules.permissions.PermissionsPackage(), 20 | new expo.modules.securestore.SecureStorePackage(), 21 | new expo.modules.splashscreen.SplashScreenPackage(), 22 | new expo.modules.sqlite.SQLitePackage(), 23 | new expo.modules.updates.UpdatesPackage() 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/drawable/splashscreen.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/drawable/splashscreen_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/drawable/splashscreen_image.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #FFFFFF 5 | 6 | -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | example-app 3 | 4 | -------------------------------------------------------------------------------- /example-app/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /example-app/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "29.0.2" 6 | minSdkVersion = 21 7 | compileSdkVersion = 29 8 | targetSdkVersion = 29 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.5.3") 16 | 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenLocal() 25 | maven { 26 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 27 | url("$rootDir/../node_modules/react-native/android") 28 | } 29 | maven { 30 | // Android JSC is installed from npm 31 | url("$rootDir/../node_modules/jsc-android/dist") 32 | } 33 | 34 | google() 35 | jcenter() 36 | maven { url 'https://www.jitpack.io' } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example-app/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 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | 25 | # Automatically convert third-party libraries to use AndroidX 26 | android.enableJetifier=true 27 | 28 | # Version of flipper SDK to use with React Native 29 | FLIPPER_VERSION=0.54.0 -------------------------------------------------------------------------------- /example-app/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sarathkcm/react-native-remote-components/587767e14ecbe1a1a4b0bde49900ae19b7d7ac74/example-app/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example-app/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example-app/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | # Determine the Java command to use to start the JVM. 86 | if [ -n "$JAVA_HOME" ] ; then 87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 88 | # IBM's JDK on AIX uses strange locations for the executables 89 | JAVACMD="$JAVA_HOME/jre/sh/java" 90 | else 91 | JAVACMD="$JAVA_HOME/bin/java" 92 | fi 93 | if [ ! -x "$JAVACMD" ] ; then 94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 95 | 96 | Please set the JAVA_HOME variable in your environment to match the 97 | location of your Java installation." 98 | fi 99 | else 100 | JAVACMD="java" 101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 102 | 103 | Please set the JAVA_HOME variable in your environment to match the 104 | location of your Java installation." 105 | fi 106 | 107 | # Increase the maximum file descriptors if we can. 108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 109 | MAX_FD_LIMIT=`ulimit -H -n` 110 | if [ $? -eq 0 ] ; then 111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 112 | MAX_FD="$MAX_FD_LIMIT" 113 | fi 114 | ulimit -n $MAX_FD 115 | if [ $? -ne 0 ] ; then 116 | warn "Could not set maximum file descriptor limit: $MAX_FD" 117 | fi 118 | else 119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 120 | fi 121 | fi 122 | 123 | # For Darwin, add options to specify how the application appears in the dock 124 | if $darwin; then 125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 126 | fi 127 | 128 | # For Cygwin or MSYS, switch paths to Windows format before running java 129 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 132 | JAVACMD=`cygpath --unix "$JAVACMD"` 133 | 134 | # We build the pattern for arguments to be converted via cygpath 135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 136 | SEP="" 137 | for dir in $ROOTDIRSRAW ; do 138 | ROOTDIRS="$ROOTDIRS$SEP$dir" 139 | SEP="|" 140 | done 141 | OURCYGPATTERN="(^($ROOTDIRS))" 142 | # Add a user-defined pattern to the cygpath arguments 143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 145 | fi 146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 147 | i=0 148 | for arg in "$@" ; do 149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 151 | 152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 154 | else 155 | eval `echo args$i`="\"$arg\"" 156 | fi 157 | i=`expr $i + 1` 158 | done 159 | case $i in 160 | 0) set -- ;; 161 | 1) set -- "$args0" ;; 162 | 2) set -- "$args0" "$args1" ;; 163 | 3) set -- "$args0" "$args1" "$args2" ;; 164 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;; 165 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 166 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 167 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 168 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 169 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 170 | esac 171 | fi 172 | 173 | # Escape application args 174 | save () { 175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 176 | echo " " 177 | } 178 | APP_ARGS=`save "$@"` 179 | 180 | # Collect all arguments for the java command, following the shell quoting and substitution rules 181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 182 | 183 | exec "$JAVACMD" "$@" 184 | -------------------------------------------------------------------------------- /example-app/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto init 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto init 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :init 68 | @rem Get command-line arguments, handling Windows variants 69 | 70 | if not "%OS%" == "Windows_NT" goto win9xME_args 71 | 72 | :win9xME_args 73 | @rem Slurp the command line arguments. 74 | set CMD_LINE_ARGS= 75 | set _SKIP=2 76 | 77 | :win9xME_args_slurp 78 | if "x%~1" == "x" goto execute 79 | 80 | set CMD_LINE_ARGS=%* 81 | 82 | :execute 83 | @rem Setup the command line 84 | 85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 86 | 87 | @rem Execute Gradle 88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 89 | 90 | :end 91 | @rem End local scope for the variables with windows NT shell 92 | if "%ERRORLEVEL%"=="0" goto mainEnd 93 | 94 | :fail 95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 96 | rem the _cmd.exe /c_ return code! 97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 98 | exit /b 1 99 | 100 | :mainEnd 101 | if "%OS%"=="Windows_NT" endlocal 102 | 103 | :omega 104 | -------------------------------------------------------------------------------- /example-app/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'exampleapp' 2 | 3 | apply from: '../node_modules/react-native-unimodules/gradle.groovy' 4 | includeUnimodulesProjects() 5 | 6 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); 7 | applyNativeModulesSettingsGradle(settings) 8 | 9 | include ':app' 10 | -------------------------------------------------------------------------------- /example-app/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-app", 3 | "displayName": "example-app", 4 | "expo": { 5 | "name": "example-app", 6 | "slug": "example-app", 7 | "version": "1.0.0", 8 | "assetBundlePatterns": [ 9 | "**/*" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /example-app/app/components/dynamic-component.js: -------------------------------------------------------------------------------- 1 | import React, { useMemo, Suspense } from 'react'; 2 | import { Text, View } from 'react-native'; 3 | import { fetchComponent } from "../utils"; 4 | 5 | const DynamicComponent = ({ __id, children, ...props }) => { 6 | const Component = useMemo(() => { 7 | return React.lazy(async () => fetchComponent(__id)) 8 | }, [__id]); 9 | 10 | return ( 11 | Loading...}> 12 | {children} 13 | 14 | ) 15 | }; 16 | 17 | export default React.memo(DynamicComponent); -------------------------------------------------------------------------------- /example-app/app/screens/home-page.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { StyleSheet, Switch, TouchableOpacity, View, ScrollView } from 'react-native' 3 | import { Text, Button, Input } from 'react-native-elements' 4 | import DynamicComponent from '../components/dynamic-component'; 5 | import { addTodo, toggleTodo } from '../store/actions'; 6 | import { useDispatch, useSelector } from 'react-redux'; 7 | import Icon from "react-native-vector-icons/MaterialCommunityIcons"; 8 | 9 | const HomePage = ({ navigation }) => { 10 | const [showDynamicComponents, setShowDynamicComponents] = useState(false); 11 | const [todoText, setTodoText] = useState(""); 12 | 13 | const todos = useSelector((state) => state.todos); 14 | const dispatch = useDispatch(); 15 | const addTodoToStore = () => todoText.trim() && dispatch(addTodo({ title: todoText })); 16 | const toggleTodoToStore = (id, completed) => dispatch(toggleTodo({ id, completed })); 17 | 18 | const renderDynamicComponentsSwitch = () => ( 19 | 20 | Toggle remote components 21 | 28 | 29 | ); 30 | 31 | const renderDynamicComponents = () => ( 32 | <> 33 | {showDynamicComponents && ( 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | )} 47 | 48 | ); 49 | 50 | const renderTodoSection = () => ( 51 | <> 52 | Todos 53 | 54 | } 56 | placeholder="Enter Todo" 57 | containerStyle={{ flex: 1, marginTop: 8 }} 58 | onChangeText={text => setTodoText(text)} 59 | value={todoText} 60 | /> 61 | 19 | 20 | 21 | ) 22 | } 23 | 24 | export default NewPage 25 | 26 | const styles = StyleSheet.create({}) 27 | -------------------------------------------------------------------------------- /remote-components/components/next-page-button.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StyleSheet, View } from 'react-native' 3 | import { useNavigation } from '@react-navigation/native' 4 | import { Button, Card, Text } from 'react-native-elements' 5 | import Icons from "react-native-vector-icons"; 6 | 7 | const NextPageButton = () => { 8 | const navigation = useNavigation(); 9 | return ( 10 | 11 | 12 | 27 | 28 | 29 | ) 30 | } 31 | 32 | export default Status 33 | -------------------------------------------------------------------------------- /remote-components/components/todo-status2.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from 'react-native' 3 | import { Button, Card, Text } from 'react-native-elements' 4 | import { connect } from 'react-redux'; 5 | 6 | const Status = ({ todos, markCompleted, children, flow }) => { 7 | console.log("children", children) 8 | return ( 9 | 10 | 11 | 12 | • There are {todos.length} Todos 13 | • Completed {todos.filter(a => a.completed).length} Todos 14 | • Using connect() 15 | 16 | {flow === "vertical" && } 17 | 22 | {children} 23 | 24 | 25 | ) 26 | } 27 | 28 | export default connect( 29 | state => ({ todos: state.todos }), 30 | dispatch => ({ 31 | markCompleted: (id) => dispatch({ 32 | type: "store/toggle-todo", 33 | payload: { id: id, completed: false } 34 | }) 35 | }) 36 | )(Status) 37 | -------------------------------------------------------------------------------- /remote-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "remote-components", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "start": "http-server ./dist", 7 | "build": "rollup --config ./rollup.config.js", 8 | "watch": "chokidar \"./components/*.js\" -c \"yarn build\"" 9 | }, 10 | "dependencies": { 11 | "@react-native-community/masked-view": "^0.1.10", 12 | "@react-navigation/native": "^5.9.3", 13 | "@react-navigation/stack": "^5.14.3", 14 | "expo": "~40.0.0", 15 | "expo-splash-screen": "~0.8.0", 16 | "expo-status-bar": "~1.0.3", 17 | "expo-updates": "~0.4.0", 18 | "nanoid": "^3.1.20", 19 | "react": "16.13.1", 20 | "react-dom": "16.13.1", 21 | "react-native": "~0.63.4", 22 | "react-native-elements": "^3.3.0", 23 | "react-native-gesture-handler": "^1.10.3", 24 | "react-native-get-random-values": "^1.6.0", 25 | "react-native-reanimated": "^2.0.0", 26 | "react-native-safe-area-context": "^3.2.0", 27 | "react-native-screens": "^2.18.1", 28 | "react-native-unimodules": "~0.12.0", 29 | "react-native-vector-icons": "^8.1.0", 30 | "react-native-web": "~0.13.12", 31 | "react-redux": "^7.2.2", 32 | "redux": "^4.0.5" 33 | }, 34 | "devDependencies": { 35 | "@babel/plugin-proposal-class-properties": "^7.13.0", 36 | "@babel/preset-env": "^7.13.9", 37 | "@babel/preset-react": "^7.12.13", 38 | "babel-core": "^6.26.3", 39 | "babel-plugin-module-resolver": "^4.1.0", 40 | "babel-preset-env": "^1.7.0", 41 | "chokidar-cli": "^2.1.0", 42 | "http-server": "^0.12.3", 43 | "rollup": "^2.40.0", 44 | "rollup-plugin-babel": "^4.4.0", 45 | "rollup-plugin-commonjs": "^10.1.0", 46 | "rollup-plugin-node-resolve": "^5.2.0", 47 | "rollup-plugin-terser": "^7.0.2" 48 | }, 49 | "author": "sarathkcm", 50 | "license": "MIT" 51 | } 52 | -------------------------------------------------------------------------------- /remote-components/rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import resolve from 'rollup-plugin-node-resolve' 4 | import { terser } from "rollup-plugin-terser"; 5 | 6 | const fs = require("fs"); 7 | 8 | const pkg = JSON.parse(require("fs") 9 | .readFileSync(require("path") 10 | .resolve('./package.json'), 'utf-8')); 11 | 12 | const external = Object.keys(pkg.dependencies || {}); 13 | 14 | const allComponents = fs.readdirSync("./components"); 15 | 16 | const allFiles = allComponents 17 | .filter(a => a.endsWith(".js")) 18 | .map(a => `./components/${a}`) 19 | 20 | const getConfig = (file) => ({ 21 | input: file, 22 | output: [ 23 | { 24 | dir: "dist", 25 | format: 'cjs', 26 | exports: "auto" 27 | } 28 | ], 29 | plugins: [ 30 | resolve(), 31 | babel(), 32 | commonjs(), 33 | terser() 34 | ], 35 | external 36 | }) 37 | 38 | export default allFiles.map(getConfig) --------------------------------------------------------------------------------