Merge pull request #4 from kanzitelli/web-support

Web support

README.md

@@ -2,7 +2,6 @@
   <img src="https://xxx-files.ggc.team/oss/rn-bounceable/logo.png" width="80%" title="Logo">
 </p>
 
-
 ## Quick start
 
 ```bash
@@ -26,6 +25,36 @@ class Screen = () => {
 }
 ```
 
+### Expo Web
+
+Since `rn-bounceable` uses Reanimated 2, we need its babel plugin to be applied. Expo Web doesn't transpile modules by default, so we'll need to tell it to transpile the library.
+
+1. Install `@expo/webpack-config`:
+
+```
+yarn add -D @expo/webpack-config
+```
+
+2. Create `webpack.config.js` in the root of your project:
+
+```
+const createExpoWebpackConfigAsync = require('@expo/webpack-config')
+
+module.exports = async function (env, argv) {
+  const config = await createExpoWebpackConfigAsync(
+    {
+      ...env,
+      babel: { dangerouslyAddModulePathsToTranspile: ['rn-bounceable'] },
+    },
+    argv
+  )
+
+  return config
+}
+```
+
+Don't forget to add `webpack.config.js` into `tsconfig.json` under `exclude` section, if needed.
+
 ##### Available props
 
 ```tsx
@@ -47,7 +76,7 @@ type BounceableProps = {
 
 Examples could be found in `expo-example` folder or in [expo-starter](https://github.com/kanzitelli/expo-starter), [rn-starter](https://github.com/kanzitelli/rn-starter) and [rnn-starter](https://github.com/kanzitelli/rnn-starter).
 
-See it in Expo Go - https://expo.io/@kanzitelli/rn-bounceable-example.
+See it with [Expo Web](https://rn-bounceable.batyr.io) or [Expo Go](https://expo.io/@kanzitelli/rn-bounceable-example).
 
 This library was bootstrapped from [kanzitelli/if-component](https://github.com/kanzitelli/if-component).
 

expo-example/package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
+    "@expo/webpack-config": "^0.16.13",
     "@types/react": "~17.0.21",
     "@types/react-native": "~0.64.12",
     "tslib": "^2.3.1",

expo-example/webpack.config.js

@@ -0,0 +1,13 @@
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+
+module.exports = async function (env, argv) {
+  const config = await createExpoWebpackConfigAsync(
+    {
+      ...env,
+      babel: {dangerouslyAddModulePathsToTranspile: ['rn-bounceable']},
+    },
+    argv,
+  );
+
+  return config;
+};