@wavemaker-ai/rn-codegen 1.0.0-rc.647469

package/src/templates/project/esbuild/esbuild.script.js

@@ -0,0 +1,461 @@
+const esbuild = require('esbuild');
+const resolve = require('esbuild-plugin-resolve');
+const fs = require('fs-extra');
+const { exec } = require('child_process');
+const babel = require('./esbuild-plugin-babel');
+const path = require('path');
+const WM_NPM_SCOPE = process.env.WM_NPM_SCOPE || '@wavemaker-ai';
+
+const BUILD_DIR = './web-build';
+
+async function readAndReplaceFileContent(path, writeFn) {
+  const content = fs.readFileSync(path, 'utf-8');
+  return Promise.resolve().then(() => {
+      return writeFn && writeFn(content);
+  }).then((modifiedContent) => {
+      if (modifiedContent !== undefined && modifiedContent !== null) {
+          fs.writeFileSync(path, modifiedContent);
+          return modifiedContent;
+      }
+      return content;
+  });
+}
+
+class EsBuilder {
+  cleanBuildDir() {
+    if (fs.existsSync(BUILD_DIR)) {
+      fs.removeSync(BUILD_DIR);
+    }
+  }
+
+  prepareIndexHtml(result) {
+    console.log('build success');
+    try {
+    const bundleName = fs.readdirSync('./web-build').find(n => /^bundle.*js$/.test(n));
+    let content = fs.readFileSync(__dirname + '/index.html', 'utf-8');
+    content = content.replace(/".\/bundle.js"/, `"./${bundleName}"`);
+    fs.writeFileSync('./web-build/index.html', content);
+
+    const metafilePath = path.join(__dirname, './', 'metafile.json');
+    fs.writeFileSync(metafilePath, JSON.stringify(result.metafile));
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  patchPackageLib(paths) {
+    paths.forEach((path) => {
+      const packageFile = `${__dirname}/../node_modules/${path}/package.json`;
+      if (fs.existsSync(packageFile)) {
+        const _package = fs.readJSONSync(packageFile);
+        console.log('patch applied on package at.. ', packageFile);
+        delete _package['module'];
+        delete _package['type'];
+        fs.writeFileSync(packageFile, JSON.stringify(_package, null, 4));
+      }
+    });
+  }
+
+  patchTouchableRipple(){
+    const path = `${__dirname}/../node_modules/react-native-paper/lib/module/core/PaperProvider.js`;
+    const updateProps = (content) => {
+        if (content.includes("const getTheme = () => {")) {
+            content = content.replace(`const getTheme = () => {`, `const themeValue = React.useMemo(() => {`);
+            content = content.replace(/\};\n.*const.*\{/g,`}, [props.theme, colorScheme, reduceMotionEnabled]);\n  const {`);
+            content = content.replace(/\} = props;/,`\} = props;
+                const settingsValue = React.useMemo(() => ({
+                    icon: MaterialCommunityIcon,
+                    rippleEffectEnabled: true,
+                    ...settings
+                }), [settings]);`);
+            content = content.replace(/value:\s*\{[\s\S]*?\}/g, `value: settingsValue`);
+            content = content.replace(/theme:\s*getTheme\(\)/g, `theme: themeValue`);
+        }
+        return content;
+    }
+    console.log('Applied TouchableRipple patch.');
+    return readAndReplaceFileContent(path, updateProps);
+}
+
+
+  async patchCamera() {
+    return readAndReplaceFileContent(`${__dirname}/../node_modules/expo-camera/build/useWebQRScanner.js`, (c) => {
+      if (c.indexOf('@koale/useworker') > 0) {
+          return fs.readFileSync(`${__dirname}/expo-camera-patch/useWebQRScanner.js`, {
+              encoding: 'utf-8'
+          })
+      }
+      return c;
+    });
+  }
+
+  async patchReactNativeAssets() {
+    const path = `${__dirname}/../node_modules/@react-native/assets-registry/`
+    fs.removeSync(path+'registry.js');
+    const registry_content = `
+    'use strict';
+
+    export type PackagerAsset = {
+      __packager_asset: boolean,
+      fileSystemLocation: string,
+      httpServerLocation: string,
+      width?: number,
+      height?: number,
+      scales: Array<number>,
+      hash: string,
+      name: string,
+      type: string,
+    };
+    
+    const assets: Array<PackagerAsset> = [];
+    
+    export function registerAsset(asset: PackagerAsset): number {
+      // push returns new array length, so the first asset will
+      // get id 1 (not 0) to make the value truthy
+      return assets.push(asset);
+    }
+    
+    export function getAssetByID(assetId: number): PackagerAsset {
+      return assets[assetId - 1];
+    }
+    `;
+    fs.writeFileSync(path+'registry.ts', registry_content);
+    const content = fs.readFileSync(path+'path-support.js', 'utf-8');
+    fs.removeSync(path+'path-support.js')
+    fs.writeFileSync(path+'path-support.ts', content);
+    await readAndReplaceFileContent(path+'path-support.ts', (content)=>{
+      return content.replace(`import type {PackagerAsset} from './registry.js';`,`import type {PackagerAsset} from './registry.ts';`)
+      .replace(` | $TEMPORARY$string<'raw'> `, '');
+    });
+  }
+
+  async patchReactNativeWeb() {
+    const path = `${__dirname}/../node_modules/react-native-web/dist/cjs/exports/render/index.js`;
+    await readAndReplaceFileContent(path, (content) => {
+        return content.replace(
+            'var _reactDom = require("react-dom");',
+            `var React = require("react");
+            var _reactDom = require("react-dom");
+            var _reactDomClient = require("react-dom/client");`
+        ).replace('hydrate(element', 'hydrateOld(element')
+        .replace('render(element', 'renderOld(element') +
+        `
+        function hydrate(element, root, callback) {
+          (0, _dom.createSheet)(root);
+          return (0, _reactDomClient.hydrateRoot)(element, root, callback);
+        }
+        
+        function AppWithCallbackAfterRender(props) {
+          React.useEffect(() => {props.callback && props.callback()});
+          return props.element;
+        }
+        
+        function render(element, root, callback) {
+          (0, _dom.createSheet)(root);
+          return (0, _reactDomClient.createRoot)(root).render(
+            React.createElement(AppWithCallbackAfterRender, 
+              {
+                "callback": callback,
+                element: element
+              }
+            )
+          );
+        }`;
+    });
+    const target = `${__dirname}/../node_modules/react-native-web/dist/cjs/exports/BackHandler/index.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace('console.error', '// console.error');
+    });
+    console.log('Patched react-native-web');
+  }
+
+  patchWithDevTools(path) {
+    const packageFile = `${__dirname}/../node_modules/${path}`;
+    if (fs.existsSync(packageFile)) {
+      const _package = "import * as React from 'react';export function withDevTools(AppRootComponent) {return (props) => React.createElement(AppRootComponent, { ...props });}"
+      fs.writeFileSync(packageFile, _package);
+    }
+  }
+
+  async patchReactNativeAssetRegistry() {
+    const content = `
+    /**
+     * Copyright (c) Meta Platforms, Inc. and affiliates.
+     *
+     * This source code is licensed under the MIT license found in the
+     * LICENSE file in the root directory of this source tree.
+     *
+     * @flow strict
+     * @format
+     */
+    
+    'use strict';
+    
+    const assets = [];
+    
+    function registerAsset(asset) {
+      // push returns new array length, so the first asset will
+      // get id 1 (not 0) to make the value truthy
+      return assets.push(asset);
+    }
+    
+    function getAssetByID(assetId) {
+      return assets[assetId - 1];
+    }
+    
+    module.exports = {registerAsset, getAssetByID};
+    
+    `;
+    fs.writeFileSync(`${__dirname}/../node_modules/@react-native/assets-registry/registry.js`, content);
+    const expoAssetRegistry = `${__dirname}/../node_modules/expo-asset/node_modules/@react-native/assets-registry/registry.js`;
+    readAndReplaceFileContent(expoAssetRegistry, () => content);
+    console.log('Patched @react-native/assets-registry');
+  }
+
+  async patchBabelExpoPreset() {
+    const target = `${__dirname}/../node_modules/babel-preset-expo/build/index.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(
+        `(0, common_1.hasModule)('react-native-reanimated') &&`,
+        `//(0, common_1.hasModule)('react-native-reanimated') &&`)
+        .replace(
+          `platformOptions.reanimated !== false && [require.resolve('react-native-reanimated/plugin')],`,
+          `//platformOptions.reanimated !== false && [require.resolve('react-native-reanimated/plugin')],`
+        )
+    });
+    console.log('Patched babel-expo-preset');
+  }
+
+  async patchUUID() {
+    const target = `${__dirname}/../node_modules/expo-modules-core/build/uuid/uuid.web.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(`require('crypto')`, 'crypto');
+    });
+    console.log('Patched UUID.');
+  }
+
+  async patchExpoRootComponent() {
+    const target = `${__dirname}/../node_modules/expo/build/launch/registerRootComponent.js`;
+    await readAndReplaceFileContent(target, content => {
+      return content.replace(`export default`,
+      `
+      const process = {env: {
+        NODE_ENV: 'development',
+        EXPO_PUBLIC_USE_STATIC: '0'
+      }};
+      export default `);
+    });
+    console.log('Patched Expo Root Component.');
+  }
+
+  // async patchReactNavigation() {
+  //   // https://github.com/react-navigation/react-navigation/pull/11496/files
+  //   fs.copyFileSync(
+  //     `${__dirname}/@react-navigation/drawer/6.6.3/lib/module/views/modern/Drawer.js`,
+  //     `${__dirname}/../node_modules/@react-navigation/drawer/lib/module/views/modern/Drawer.js`
+  //   );
+  //   fs.copyFileSync(
+  //     `${__dirname}/@react-navigation/drawer/6.6.3/lib/module/views/modern/Overlay.js`,
+  //     `${__dirname}/../node_modules/@react-navigation/drawer/lib/module/views/modern/Overlay.js`
+  //   );
+  //   console.log('Patched React Navigation.');
+  // }
+
+  async patchReactNativeReanimated() {
+    // Check and patch PlatformChecker.js
+    const platformCheckerPath = `${__dirname}/../node_modules/react-native-reanimated/lib/module/reanimated2/PlatformChecker.js`;
+    if (fs.existsSync(platformCheckerPath)) {
+      await readAndReplaceFileContent(platformCheckerPath, (c) => {
+        return c.replace(
+          '!!process.env.JEST_WORKER_ID',
+          'false; // !!process.env.JEST_WORKER_ID'
+        )
+      });
+      console.log('Applied PlatformChecker.js patch.');
+    }
+
+    // Check and patch useSharedValue.ts
+    const useSharedValuePath = `${__dirname}/../node_modules/react-native-reanimated/src/reanimated2/hook/useSharedValue.ts`;
+    if (fs.existsSync(useSharedValuePath)) {
+      await readAndReplaceFileContent(useSharedValuePath, (c) => {
+        return c.replace(
+          'useRef<SharedValue<Value>>',
+          'useRef'
+        )
+      });
+      console.log('Applied useSharedValue.ts patch.');
+    }
+
+    // Patch useHandler to handle web worklets
+    const useHandlerPath = `${__dirname}/../node_modules/react-native-reanimated/lib/module/hook/useHandler.js`;
+    if (fs.existsSync(useHandlerPath)) {
+      await readAndReplaceFileContent(useHandlerPath, (c) => {
+        return c.replace(
+          `throw new ReanimatedError('Passed a function that is not a worklet. Please provide a worklet function.');`,
+          `// Web fallback: skip worklet validation on web
+      if (typeof window !== "undefined") {
+        continue;
+      }
+      throw new ReanimatedError('Passed a function that is not a worklet. Please provide a worklet function.');`
+        )
+      });
+      console.log('Applied useHandler.js web worklet patch.');
+    }
+
+    // Patch useAnimatedScrollHandler for web compatibility
+    const useAnimatedScrollHandlerPath = `${__dirname}/../node_modules/react-native-reanimated/lib/module/hook/useAnimatedScrollHandler.js`;
+    if (fs.existsSync(useAnimatedScrollHandlerPath)) {
+      await readAndReplaceFileContent(useAnimatedScrollHandlerPath, (c) => {
+        return c.replace(
+          'export function useAnimatedScrollHandler(handler, dependencies) {',
+          `export function useAnimatedScrollHandler(handler, dependencies) {
+  // Web fallback for scroll handlers
+  if (typeof window !== "undefined" && handler && typeof handler === "object" && handler.onScroll) {
+    return handler.onScroll;
+  }`
+        )
+      });
+      console.log('Applied useAnimatedScrollHandler.js web patch.');
+    }
+
+    // Patch worklet detection for web
+    const workletPath = `${__dirname}/../node_modules/react-native-reanimated/lib/module/reanimated2/commonTypes.js`;
+    if (fs.existsSync(workletPath)) {
+      await readAndReplaceFileContent(workletPath, (c) => {
+        return c.replace(
+          'export function isWorklet(fun) {',
+          `export function isWorklet(fun) {
+  // Always return true on web to bypass worklet checks
+  if (typeof window !== "undefined") {
+    return true;
+  }`
+        )
+      });
+      console.log('Applied worklet detection web patch.');
+    }
+
+    console.log('Patched React Native Reanimated.');
+  }
+
+  async patchExpoVideo() {
+    await readAndReplaceFileContent(`${__dirname}/../node_modules/expo-video/build/index.js`, (c) => {
+      return c.replace(
+        '{ VideoThumbnail }',
+        '{ default as VideoThumbnail }'
+      )
+    });
+    console.log('Patched Expo video.')
+  }
+
+
+  buildLibraries() {
+    const promises = [{
+      name: 'expo-web-browser',
+      build: (path) => {
+        fs.writeFileSync(`${path}/build/WebBrowser.js`, `
+        export const openBrowserAsync = (url) => {
+          window.open(url, '_blank');
+        };`);
+      }
+    }].map(p => {
+      let libPath = `${__dirname}/../node_modules/${p.name}`;
+      if (!fs.existsSync(libPath)) {
+        libPath = `${__dirname}/../node_modules/${WM_NPM_SCOPE}/app-rn-runtime/node_modules/${p.name}`;
+      }
+      if (!fs.existsSync(libPath)) {
+        const msg = `${p.name} library is not found`;
+        console.error(msg);
+        return Promise.reject(msg);
+      }
+      const destPath = `${__dirname}/node_modules/${p.name}`;
+      if (fs.existsSync(destPath)) {
+        fs.removeSync(destPath);
+      }
+      fs.copySync(libPath, destPath);
+      return p.build && p.build(destPath);
+    });
+    return Promise.all(promises)
+        .then(() => this.patchPackageLib(['@koale/useworker', 'victory',
+          'd3-array', 'd3-color', 'd3-ease', 'd3-format', 'd3-interpolate',
+          'd3-path', 'd3-scale', 'd3-shape', 'd3-time', 'd3-time-format',
+          'd3-timer', 'd3-voronoi']))
+        .then(() => this.patchWithDevTools('expo/build/launch/withDevTools.js'))
+        // .then(() => this.patchReactNativeWeb())
+        .then(() => this.patchReactNativeAssets())
+        // .then(() => this.patchBabelExpoPreset())
+        // .then(() => this.patchReactNavigation())
+        .then(() => this.patchTouchableRipple())
+        .then(() => this.patchReactNativeReanimated())
+        .then(() => this.patchExpoVideo())
+        .then(() => {
+          console.log('*********** LIBRARIES ARE BUILT FOR ESBUILD **************');
+        }, (e) => {
+          console.error(e);
+          console.log('*********** FAILED TO BUILD LIBRARIES FOR ESBUILD **************');
+        });
+  }
+
+  build() {
+    console.log('excluded react-native-vector-icons module in esbuild');
+    const appJsonPath = path.resolve('app.json');
+     //static process.env.APP_MANIFEST data for (process is not defined expo-constants esbuild web preview issue)
+    const appJson = JSON.parse(fs.readFileSync(appJsonPath, 'utf8'));
+    return esbuild.build({
+      entryPoints: ['./node_modules/expo/AppEntry.js'],
+      external:['./node_modules/react-native-vector-icons'],
+      bundle: true,
+      entryNames: 'bundle-[hash]',
+      outdir: 'web-build',
+      jsx: 'automatic',
+      jsxImportSource: 'react',
+      tsconfig: './esbuild/jsconfig.json',
+      define: {'process.env': '{}', 'process.env.NODE_ENV': '"development"', '__DEV__': false, global:'window', 'process.env.EXPO_OS': '"web"', 'process.env.APP_MANIFEST': JSON.stringify(appJson.expo)},
+      resolveExtensions: ['.web.tsx','.web.ts','.web.jsx','.web.js','.tsx','.ts','.jsx','.js',],
+      loader: {".png": "file", ".jpeg": "file", ".ttf": "file", ".js": "jsx", ".gif": "file", ".svg": "file" },
+      minifyWhitespace: true,
+      minifySyntax: true,
+      metafile: true,
+      sourcemap: true,
+      plugins: [babel({
+        filter: /\/src\/.*jsx?/,
+        config : {
+          targets: {
+            browsers: 'last 2 versions',
+            esmodules: true
+          },
+          sourceMaps: 'inline',
+          plugins: [
+            __dirname + '/../scripts/wm-babel.transform.plugin.js',
+            '@babel/plugin-proposal-export-namespace-from',
+            'react-native-reanimated/plugin',
+          ]
+        }
+      }), resolve({
+        'victory-native': 'victory'
+      })]
+    })
+  }
+
+  triggerBuild() {
+    console.log('*********** REACT NATIVE ESBUILD STARTED **************');
+    console.time('react native with esbuild');
+    this.cleanBuildDir();
+    this.build()
+    .then((result) => this.prepareIndexHtml(result))
+    .then(() => {
+      console.timeEnd('react native with esbuild');
+      console.log('*********** REACT NATIVE ESBUILD SUCCESSFUL **************');
+    }).catch((error) => {
+      console.log('*********** REACT PROJECT ESBUILD ERROR **************');
+      console.error(error);
+      console.timeEnd('react native with esbuild');
+      console.log('*********** REACT PROJECT ESBUILD FAILED **************');
+    });
+  }
+}
+
+if (process.argv[2] === '--prepare-lib') {
+  (new EsBuilder()).buildLibraries();
+} else {
+  (new EsBuilder()).triggerBuild();
+}

package/src/templates/project/esbuild/expo-camera-patch/useWebQRScanner.js

@@ -0,0 +1,100 @@
+// import { useWorker } from '@koale/useworker';
+import * as React from 'react';
+import { captureImageData } from './WebCameraUtils';
+const qrWorkerMethod = ({ data, width, height }) => {
+    // eslint-disable-next-line no-undef
+    const decoded = self.jsQR(data, width, height, {
+        inversionAttempts: 'attemptBoth',
+    });
+    let parsed;
+    try {
+        parsed = JSON.parse(decoded);
+    }
+    catch {
+        parsed = decoded;
+    }
+    if (parsed?.data) {
+        const nativeEvent = {
+            type: 'qr',
+            data: parsed.data,
+            cornerPoints: [],
+            bounds: { origin: { x: 0, y: 0 }, size: { width: 0, height: 0 } },
+        };
+        if (parsed.location) {
+            nativeEvent.cornerPoints = [
+                parsed.location.topLeftCorner,
+                parsed.location.bottomLeftCorner,
+                parsed.location.topRightCorner,
+                parsed.location.bottomRightCorner,
+            ];
+        }
+        return nativeEvent;
+    }
+    return parsed;
+};
+function useRemoteJsQR() {
+    /*return useWorker(qrWorkerMethod, {
+        remoteDependencies: ['https://cdn.jsdelivr.net/npm/jsqr@1.2.0/dist/jsQR.min.js'],
+        autoTerminate: false,
+    });*/
+}
+export function useWebQRScanner(video, { isEnabled, captureOptions, interval, onScanned, onError, }) {
+    const isRunning = React.useRef(false);
+    const timeout = React.useRef(undefined);
+    const [decode, clearWorker] = useRemoteJsQR();
+    async function scanAsync() {
+        // If interval is 0 then only scan once.
+        if (!isRunning.current || !onScanned) {
+            stop();
+            return;
+        }
+        try {
+            const data = captureImageData(video.current, captureOptions);
+            if (data) {
+                const nativeEvent = await decode(data);
+                if (nativeEvent?.data) {
+                    onScanned({
+                        nativeEvent,
+                    });
+                }
+            }
+        }
+        catch (error) {
+            if (onError) {
+                onError({ nativeEvent: error });
+            }
+        }
+        finally {
+            // If interval is 0 then only scan once.
+            if (interval === 0) {
+                stop();
+                return;
+            }
+            const intervalToUse = !interval || interval < 0 ? 16 : interval;
+            // @ts-ignore: Type 'Timeout' is not assignable to type 'number'
+            timeout.current = setTimeout(() => {
+                scanAsync();
+            }, intervalToUse);
+        }
+    }
+    function stop() {
+        isRunning.current = false;
+        clearTimeout(timeout.current);
+    }
+    React.useEffect(() => {
+        if (isEnabled) {
+            isRunning.current = true;
+            scanAsync();
+        }
+        else {
+            stop();
+        }
+    }, [isEnabled]);
+    React.useEffect(() => {
+        return () => {
+            stop();
+            clearWorker.kill();
+        };
+    }, []);
+}
+//# sourceMappingURL=useWebQRScanner.js.map

package/src/templates/project/esbuild/index.html

@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="%LANG_ISO_CODE%">
+
+<head>
+    <meta charset="utf-8" />
+    <meta httpequiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport"
+        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover" />
+    <title>WaveMaker Preview</title>
+    <style>
+        #root,
+        body,
+        html {
+            width: 100%;
+            -webkit-overflow-scrolling: touch;
+            margin: 0;
+            padding: 0;
+            min-height: 100%
+        }
+
+        #root {
+            flex-shrink: 0;
+            flex-basis: auto;
+            flex-grow: 1;
+            display: flex;
+            flex: 1
+        }
+
+        html {
+            scroll-behavior: smooth;
+            -webkit-text-size-adjust: 100%;
+            height: calc(100% + env(safe-area-inset-top))
+        }
+
+        body {
+            display: flex;
+            overflow-y: hidden;
+            overscroll-behavior-y: none;
+            text-rendering: optimizeLegibility;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            -ms-overflow-style: scrollbar;
+        }    
+        /* Scroll Bar */
+        * {
+            scrollbar-width: thin;
+            scrollbar-color: #888 transparent;
+        }
+
+        *::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        *::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        *::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 4px;
+        }
+        video {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body><noscript>
+        <form action="" style="background-color:#fff;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999">
+            <div style="font-size:18px;font-family:Helvetica,sans-serif;line-height:24px;margin:10%;width:80%">
+                <p>Oh no! It looks like JavaScript is not enabled in your browser.</p>
+                <p style="margin:20px 0"><button type="submit"
+                        style="background-color:#4630eb;border-radius:100px;border:none;box-shadow:none;color:#fff;cursor:pointer;font-weight:700;line-height:20px;padding:6px 16px">Reload</button>
+                </p>
+            </div>
+        </form>
+    </noscript>
+    <div id="root"></div>
+    <script src="./bundle.js"></script>
+</body>
+
+</html>

package/src/templates/project/esbuild/jsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "expo-web-browser": ["./node_modules/expo-web-browser"],
+      "react": ["../node_modules/react"],
+      "react-native": ["../node_modules/react-native-web"],
+      "react-native-web/src/*": ["../node_modules/react-native-web/dist/*"],
+      "@wavemaker-ai/app-rn-runtime/*": ["../node_modules/@wavemaker-ai/app-rn-runtime/*"],
+      "@wavemaker-ai/variables/*": ["../node_modules/@wavemaker-ai/variables/*"],
+      "@wavemaker-ai/rn-codegen/*": ["../node_modules/@wavemaker-ai/rn-codegen/*"],
+      "@wavemaker-ai/x-component/*": ["../node_modules/@wavemaker-ai/x-component/src/*"]
+    }
+  }
+}

package/src/templates/project/font.config.js

@@ -0,0 +1,11 @@
+export default {
+    baseFont: '',
+    fonts: [
+        /**
+         * {
+         *  name: fontName,
+         *  path: 'relative (from webapp) path of font files in webapp folder.'
+         * }
+         */
+    ]
+};

package/src/templates/project/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);