fix: fix web support in expo example

Author: satya164

.github/workflows/build-templates.yml

@@ -168,6 +168,12 @@ jobs:
         run: |
           yarn test
 
+      - name: Build example (Web)
+        working-directory: ${{ env.work_dir }}
+        if: matrix.language == 'js'
+        run: |
+          yarn example expo export:web
+
       - name: Install JDK
         if: env.android_build == 1
         uses: actions/setup-java@v3

packages/create-react-native-library/src/utils/generateExampleApp.ts

@@ -32,10 +32,20 @@ const PACKAGES_TO_REMOVE = [
   'typescript',
 ];
 
-const PACKAGES_TO_ADD = {
+const PACKAGES_TO_ADD_DEV = {
   'babel-plugin-module-resolver': '^4.1.0',
 };
 
+const PACKAGES_TO_ADD_WEB = {
+  'react-dom': '18.1.0',
+  'react-native-web': '~0.18.9',
+};
+
+const PACKAGES_TO_ADD_WEB_DEV = {
+  '@expo/webpack-config': '^0.17.2',
+  'babel-loader': '^8.1.0',
+};
+
 export default async function generateExampleApp({
   type,
   dest,
@@ -101,7 +111,7 @@ export default async function generateExampleApp({
   // Remove Jest config for now
   delete pkg.jest;
 
-  const { scripts, devDependencies } = pkg;
+  const { scripts, dependencies, devDependencies } = pkg;
 
   delete scripts.test;
   delete scripts.lint;
@@ -115,7 +125,12 @@ export default async function generateExampleApp({
     delete devDependencies[pkg];
   });
 
-  Object.assign(devDependencies, PACKAGES_TO_ADD);
+  Object.assign(devDependencies, PACKAGES_TO_ADD_DEV);
+
+  if (type === 'expo') {
+    Object.assign(dependencies, PACKAGES_TO_ADD_WEB);
+    Object.assign(devDependencies, PACKAGES_TO_ADD_WEB_DEV);
+  }
 
   await fs.writeFile(
     path.join(directory, 'package.json'),

packages/create-react-native-library/templates/common/$package.json

@@ -35,7 +35,7 @@
     "example": "yarn --cwd example",
 <% if (example === 'native' && turborepo) { -%>
     "build:android": "cd example/android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
-    "build:ios": "cd example/ios && xcodebuild -workspace <%- project.name %>Example.xcworkspace -scheme <%- project.name %>Example -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf GCC_OPTIMIZATION_LEVEL=fast GCC_PRECOMPILE_PREFIX_HEADER=YES GCC_UNROLL_LOOPS=YES COMPILER_INDEX_STORE_ENABLE=NO",
+    "build:ios": "cd example/ios && xcodebuild -workspace <%- project.name %>Example.xcworkspace -scheme <%- project.name %>Example -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO",
 <% } -%>
 <% if (example === 'native') { -%>
     "bootstrap": "yarn example && yarn install && yarn example pods",

packages/create-react-native-library/templates/native-common/android/build.gradle

@@ -51,7 +51,7 @@ def resolveReactNativeDirectory() {
 
   throw new Exception(
     "${project.name}: Failed to resolve 'react-native' in the project. " +
-    "Altenatively, you can specify 'reactNativeDir' with the path to 'react-native' in your 'gradle.properties' file."
+    "If you have a non-standard project structure, you can specify 'reactNativeDir' with the path to 'react-native' in your 'gradle.properties' file."
   )
 }