diff --git a/workspaces/docs/metro.config.js b/workspaces/docs/metro.config.js
index 5465f2d..40c4d31 100644
--- a/workspaces/docs/metro.config.js
+++ b/workspaces/docs/metro.config.js
@@ -5,13 +5,17 @@ const path = require('path');
 module.exports = (() => {
 	const projectRoot = __dirname;
 	const monorepoRoot = path.resolve(projectRoot, '../..');
+	const packageRoot = path.resolve(monorepoRoot, 'workspaces/package');
 
 	const config = getDefaultConfig(__dirname);
 	const { transformer, resolver } = config;
 
 	// Monorepo support: keep Metro focused on the app and hoisted dependencies.
 	// Watching the repository root makes web export crawl server/generated files.
-	config.watchFolders = [path.resolve(monorepoRoot, 'node_modules')];
+	config.watchFolders = [
+		packageRoot,
+		path.resolve(monorepoRoot, 'node_modules'),
+	];
 	config.resolver.nodeModulesPaths = [
 		path.resolve(projectRoot, 'node_modules'),
 		path.resolve(monorepoRoot, 'node_modules'),
@@ -19,6 +23,13 @@ module.exports = (() => {
 
 	const defaultResolveRequest = config.resolver.resolveRequest;
 	config.resolver.resolveRequest = (context, moduleName, platform) => {
+		if (moduleName === 'react-native-cross-elements') {
+			return {
+				type: 'sourceFile',
+				filePath: path.resolve(packageRoot, 'src/index.ts'),
+			};
+		}
+
 		if (moduleName === 'react') {
 			return {
 				type: 'sourceFile',