Local modules documentation

apps/bare-expo/android/.gitignore

@@ -81,6 +81,7 @@ gen-external-apklibs
 # Java class files
 
 # Generated files
+app/src/main/java/local/
 
 # Gradle files
 .gradle

apps/bare-expo/android/app/build.gradle

@@ -139,6 +139,15 @@ android {
     androidResources {
         ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
     }
+    if (project.properties["expo.localModules.enabled"] == "true") {
+        sourceSets {
+            main {
+                java {
+                    srcDirs += [file('build/local/modules/').absolutePath]
+                }
+            }
+        }
+    }
 }
 
 // Apply static values from `gradle.properties` to the `android.packagingOptions`
@@ -205,3 +214,21 @@ class ExecuteSetupAndroidProject implements Plugin<Project> {
 }
 
 apply plugin: ExecuteSetupAndroidProject
+
+gradle.projectsEvaluated {
+  if (project.properties["expo.localModules.enabled"] == "true") {
+    providers.exec {
+      workingDir(projectRoot)
+      commandLine(
+        "node",
+        "--no-warnings",
+        "--eval",
+        "require(require.resolve('expo-modules-autolinking', { paths: [require.resolve('expo/package.json')] }))(process.argv.slice(1))",
+        "mirror-kotlin-local-modules",
+        file('src/main/java/local/modules/').absolutePath,
+        file('build/local/modules/').absolutePath,
+        project.properties["expo.localModules.watchedDirs"]
+      )
+    }.standardOutput.asText.get()
+  }
+}

apps/bare-expo/android/gradle.properties

@@ -64,3 +64,6 @@ expo.useLegacyPackaging=false
 EXPO_ALLOW_GLIDE_LOGS=true
 
 android.enableMinifyInReleaseBuilds=true
+
+expo.localModules.enabled=true
+expo.localModules.watchedDirs=["../native-component-list/src/screens/LocalModules/localModulesExamples"]

apps/bare-expo/app.json

@@ -92,6 +92,12 @@
       ],
       "./plugins/withAndroidNetworkSecurityConfig",
       "./plugins/withBenchmarkModules"
-    ]
+    ],
+    "experiments": {
+      "localModules": true
+    },
+    "localModules": {
+      "watchedDirs": ["../native-component-list/src/screens/LocalModules/localModulesExamples"]
+    }
   }
 }

apps/bare-expo/ios/Podfile.properties.json

@@ -2,5 +2,7 @@
   "expo.jsEngine": "hermes",
   "newArchEnabled": "true",
   "EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
+  "expo.localModules.enabled": "true",
+  "expo.localModules.watchedDirs": "[\"../native-component-list/src/screens/LocalModules/localModulesExamples\"]",
   "ios.buildReactNativeFromSource": "false"
 }

apps/bare-expo/metro.config.js

@@ -1,6 +1,7 @@
 /* eslint-env node */
 // Learn more https://docs.expo.dev/guides/customizing-metro/
 const { getDefaultConfig } = require('expo/metro-config');
+const fs = require('node:fs');
 const path = require('node:path');
 
 /** @type {import('expo/metro-config').MetroConfig} */
@@ -24,6 +25,26 @@ config.watchFolders = [
   path.join(monorepoRoot, 'apps/test-suite'), // Workaround for Yarn v1 workspace issue where workspace dependencies aren't properly linked, should be at `<root>/node_modules/apps/test-suite`
 ];
 
+function findUpTSConfig(cwd) {
+  const tsconfigPath = path.resolve(cwd, './tsconfig.json');
+  if (fs.existsSync(tsconfigPath)) {
+    return path.dirname(tsconfigPath);
+  }
+
+  const parent = path.dirname(cwd);
+  if (parent === cwd) return null;
+
+  return findUpTSConfig(parent);
+}
+
+function findUpTSProjectRootOrAssert(dir) {
+  const tsProjectRoot = findUpTSConfig(dir);
+  if (!tsProjectRoot) {
+    throw new Error('Local modules watched dir needs to be inside a TS project with tsconfig.json');
+  }
+  return tsProjectRoot;
+}
+
 // When testing on MacOS we need to swap out `react-native` for `react-native-macos`
 config.resolver.resolveRequest = (context, moduleName, platform) => {
   if (
@@ -33,7 +54,36 @@ config.resolver.resolveRequest = (context, moduleName, platform) => {
     const newModuleName = moduleName.replace('react-native', 'react-native-macos');
     return context.resolveRequest(context, newModuleName, platform);
   }
-  return context.resolveRequest(context, moduleName, platform);
+
+  const localModulesModulesPath = path.resolve(__dirname, './.expo/localModules/modules');
+
+  let localModuleFileExtension = null;
+  if (moduleName.endsWith('.module')) {
+    localModuleFileExtension = '.module.js';
+  } else if (moduleName.endsWith('.view')) {
+    localModuleFileExtension = '.view.js';
+  }
+  if (localModuleFileExtension) {
+    const tsProjectRoot = findUpTSProjectRootOrAssert(path.dirname(context.originModulePath));
+    const relativePathToOriginModule = path.relative(
+      tsProjectRoot,
+      fs.realpathSync(path.dirname(context.originModulePath))
+    );
+
+    const modulePath = path.resolve(
+      localModulesModulesPath,
+      relativePathToOriginModule,
+      moduleName.substring(0, moduleName.lastIndexOf('.')) + localModuleFileExtension
+    );
+
+    return {
+      filePath: modulePath,
+      type: 'sourceFile',
+    };
+  }
+
+  const resolution = context.resolveRequest(context, moduleName, platform);
+  return resolution;
 };
 
 // When testing on MacOS we need to include the `react-native-macos/Libraries/Core/InitializeCore` as prepended global module

apps/native-component-list/app.json

@@ -81,6 +81,12 @@
       "eas": {
         "projectId": "2c28de10-a2cd-11e6-b8ce-59d1587e6774"
       }
+    },
+    "experiments": {
+      "localModules": true
+    },
+    "localModules": {
+      "watchedDirs": ["src/screens/LocalModules/localModulesExamples/"]
     }
   }
 }

apps/native-component-list/src/navigation/ExpoApisStackNavigator.tsx

@@ -126,6 +126,12 @@ export const ScreensList: ScreenConfig[] = [
     },
     name: 'Battery',
   },
+  {
+    getComponent() {
+      return optionalRequire(() => require('../screens/LocalModules/LocalModulesScreen'));
+    },
+    name: 'LocalModules',
+  },
   {
     getComponent() {
       return optionalRequire(() => require('../screens/Blob/BlobScreen'));

apps/native-component-list/src/screens/LocalModules/LocalModulesScreen.tsx

@@ -0,0 +1,13 @@
+import { Text } from 'react-native';
+
+import SimpleModule from './localModulesExamples/SimpleModule.module';
+import TestView from './localModulesExamples/TestView.view';
+
+export default function LocalModulesScreen() {
+  return (
+    <>
+      <Text>{SimpleModule.test}</Text>
+      <TestView style={{ flex: 1 }} url="https://docs.expo.dev/modules/" />
+    </>
+  );
+}

apps/native-component-list/src/screens/LocalModules/localModulesExamples/SimpleModule.kt

@@ -0,0 +1,12 @@
+package localModulesExamples
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+public class SimpleModule : Module() {
+    override fun definition() = ModuleDefinition {
+        Constant("test") { ->
+            "Kotlin constant 1 new localModulesProvider"
+        }
+    }
+}

apps/native-component-list/src/screens/LocalModules/localModulesExamples/SimpleModule.swift

@@ -0,0 +1,10 @@
+import ExpoModulesCore
+import WebKit
+
+public class SimpleModule: Module {
+  public func definition() -> ModuleDefinition {
+    Constant("test") {
+      return "Swift constant 1283"
+    }
+  }
+}

apps/native-component-list/src/screens/LocalModules/localModulesExamples/TestView.kt

@@ -0,0 +1,44 @@
+
+package localModulesExamples
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import java.net.URL
+
+import android.content.Context
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class TestView : Module() {
+  override fun definition() = ModuleDefinition {
+    View(ExpoWebView::class) {
+      Events("onLoad")
+
+      Prop("url") { view: ExpoWebView, url: URL? ->
+        view.webView.loadUrl(url.toString())
+      }
+    }
+  }
+}
+
+class ExpoWebView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  private val onLoad by EventDispatcher()
+
+  internal val webView = WebView(context).also {
+    it.layoutParams = LayoutParams(
+      LayoutParams.MATCH_PARENT,
+      LayoutParams.MATCH_PARENT
+    )
+
+    it.webViewClient = object : WebViewClient() {
+      override fun onPageFinished(view: WebView, url: String) {
+        onLoad(mapOf("url" to url))
+      }
+    }
+
+    addView(it)
+  }
+}

apps/native-component-list/src/screens/LocalModules/localModulesExamples/TestView.swift

@@ -0,0 +1,41 @@
+import ExpoModulesCore
+import WebKit
+
+public class TestView: Module {
+  public func definition() -> ModuleDefinition {
+    View(ExpoWebView.self) {
+      Events("onLoad")
+
+      Prop("url") { (view, url: URL) in
+        if view.webView.url != url {
+          let urlRequest = URLRequest(url: url)
+          view.webView.load(urlRequest)
+        }
+      }
+    }
+  }
+}
+
+class ExpoWebView: ExpoView, WKNavigationDelegate {
+  let webView = WKWebView()
+  let onLoad = EventDispatcher()
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    webView.navigationDelegate = self
+    addSubview(webView)
+  }
+
+  override func layoutSubviews() {
+    webView.frame = bounds
+  }
+
+  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
+    if let url = webView.url {
+      onLoad([
+        "url": url.absoluteString
+      ])
+    }
+  }
+}

apps/native-component-list/tsconfig.json

@@ -15,7 +15,13 @@
     "strictPropertyInitialization": true,
     "strictFunctionTypes": true,
     "noImplicitThis": true,
-    "noImplicitReturns": true
+    "noImplicitReturns": true,
+    "rootDirs": ["./", "../bare-expo/.expo/localModules/types"]
   },
-  "include": ["App.tsx", "src/**/*", "ts-declarations/**/*"]
+  "include": [
+    "App.tsx",
+    "src/**/*",
+    "ts-declarations/**/*",
+    "../bare-expo/.expo/localModules/types/**/*"
+  ]
 }

docs/constants/navigation.js

@@ -305,6 +305,7 @@ export const general = [
       makeSection('Tutorials', [
         makePage('modules/native-module-tutorial.mdx'),
         makePage('modules/native-view-tutorial.mdx'),
+        makePage('modules/local-native-modules-tutorial.mdx'),
         makePage('modules/config-plugin-and-native-module-tutorial.mdx'),
         makePage('modules/use-standalone-expo-module-in-your-project.mdx'),
         makePage('modules/third-party-library.mdx'),
@@ -313,6 +314,7 @@ export const general = [
       ]),
       makeSection('Reference', [
         makePage('modules/module-api.mdx'),
+        makePage('modules/local-native-modules-reference.mdx'),
         makePage('modules/android-lifecycle-listeners.mdx'),
         makePage('modules/appdelegate-subscribers.mdx'),
         makePage('modules/autolinking.mdx'),