diff --git a/README.md b/README.md index 4bdda84..fadac11 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,11 @@ Otherwise you will need to setup [Expo Dev Client](https://docs.expo.dev/develop Now you ready to add tentap to your app! +### Expo Web + +TenTap supports expo web! +See setup [here](https://10play.github.io/10tap-editor/docs/setup/expoWeb) + ## Usage ```tsx diff --git a/website/docs/setup/expoWeb.md b/website/docs/setup/expoWeb.md new file mode 100644 index 0000000..31dfc7e --- /dev/null +++ b/website/docs/setup/expoWeb.md @@ -0,0 +1,97 @@ +--- +sidebar_position: 3 +--- + +# Expo Web Setup (Beta) + +Some additional steps are necessary for supporting expo web - see working example [here](https://github.com/10play/10tap-web-example) + +### Step 1 - Install required deps + +`npx expo install @10play/react-native-web-webview expo-crypto` + +### Step 2 - Configuring your bundler + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +Which bundler are you using? + + + +Create config file if not already `npx expo customize metro.config.js` + +Into your `metro.config.js` add the following configuration + +```js +const { getDefaultConfig } = require('expo/metro-config'); + +/** @type {import('expo/metro-config').MetroConfig} */ +const config = getDefaultConfig(__dirname); + +const webAliases = { + 'react-native': 'react-native-web', + 'react-native-webview': '@10play/react-native-web-webview', + 'react-native/Libraries/Utilities/codegenNativeComponent': + '@10play/react-native-web-webview/shim', + 'crypto': 'expo-crypto', +}; + +config.resolver.resolveRequest = ( + context, + realModuleName, + platform, + moduleName +) => { + if (platform === 'web') { + const alias = webAliases[realModuleName]; + if (alias) { + return { + filePath: require.resolve(alias), + type: 'sourceFile', + }; + } + } + return context.resolveRequest(context, realModuleName, platform, moduleName); +}; + +module.exports = config; +``` + + + +Create config file if not already `npx expo customize webpack.config.js` + +Into your `webpack.config.js` add the following configuration + +```js +const createExpoWebpackConfigAsync = require('@expo/webpack-config'); + +module.exports = async function (env, argv) { + const config = await createExpoWebpackConfigAsync(env, argv); + + // Alias react-native-webview and crypto + config.resolve.alias = { + ...config.resolve.alias, + 'react-native': 'react-native-web', + 'react-native-webview': '@10play/react-native-web-webview', + 'crypto': 'expo-crypto', + }; + + // Shim codegenNativeComponent + config.resolve.fallback = { + ...config.resolve.fallback, + 'react-native/Libraries/Utilities/codegenNativeComponent': + '@10play/react-native-web-webview/shim', + }; + + return config; +}; +``` + + + + +### Step 3 - Restart Metro + +Restart metro for changes to take effect and the editor should load diff --git a/website/docs/setup/installation.md b/website/docs/setup/installation.md index 376b744..4448bfe 100644 --- a/website/docs/setup/installation.md +++ b/website/docs/setup/installation.md @@ -21,3 +21,7 @@ Now you ready to add tentap to your app! :::note On Android, API level 29+ is required. ::: + +### Expo Web + +For expo-web support follow this [guide](./expoWeb) diff --git a/website/sidebars.ts b/website/sidebars.ts index 67c2bee..5bafc17 100644 --- a/website/sidebars.ts +++ b/website/sidebars.ts @@ -10,7 +10,7 @@ const sidebars: SidebarsConfig = { { type: 'category', label: 'Setup', - items: ['setup/installation', 'setup/advancedSetup'], + items: ['setup/installation', 'setup/advancedSetup', 'setup/expoWeb'], }, { type: 'category',