feat: added web support

[gorhom]

Motivation

This PR will introduce the first official web support for this library. The feature been tested on:

• Safari
• Chrome iOS
• Chrom Android

So far it works as expected but there are some limitations:

• Continuance scrollability between the sheet and the content scrollable.
• Sometimes scrolling won't capture the gesture.

More testing is needed.

yarn add ssh://git@github.com:gorhom/react-native-bottom-sheet#feature/add-web-support

[axeldelafosse]

Hey Mo! Thank you so much for your work!

Can you upgrade to the latest Reanimated version please? Right now we are experiencing this issue: TypeError: undefined is not an object (evaluating 'react_native_reanimated__WEBPACK_IMPORTED_MODULE_17__.Extrapolate.CLAMP')

cc @alantoa @intergalacticspacehighway

[intergalacticspacehighway]

In 2.3x reanimated, Extrapolate.CLAMP becomes Extrapolation.CLAMP. I think Extrapolate is not exported anymore. We faced this on reanimated upgrade at Showtime. showtime-xyz/showtime-frontend#1533

Did a PR 😄 - #1152

[alantoa]

can replace all Extrapolate with Extrapolation, pretty work!

[axeldelafosse]

Also experiencing this issue: ReferenceError: Can't find variable: animateToPositionCompleted

[andreibahachenka]

when this feature is going to be supported?

[github-actions]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[MoOx]

Can't be tested using the branch since lib folder is not versioned and that package.json main/module point to this.
It needs to be cloned, deps installed, compiled, then it can be used.

And if you try to npm install from inside node_modules, you might get this issue

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @gorhom/bottom-sheet@4.4.5
npm ERR! Found: react@16.9.0
npm ERR! node_modules/react
npm ERR!   dev react@"~16.9.0" from the root project
npm ERR!   peer react@"*" from @gorhom/portal@1.0.14
npm ERR!   node_modules/@gorhom/portal
npm ERR!     @gorhom/portal@"1.0.14" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.11.0" from react-native@0.62.3
npm ERR! node_modules/react-native
npm ERR!   dev react-native@"^0.62.2" from the root project
npm ERR!   peer react-native@"*" from @gorhom/portal@1.0.14
npm ERR!   node_modules/@gorhom/portal
npm ERR!     @gorhom/portal@"1.0.14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

So try using yarn or use npm install --legacy-peer-deps but this might cause issue since you might have duplicated deps...

[MoOx]

And when you try to build...

❯ yarn build
yarn run v1.22.19
$ bob build && yarn copy-dts && yarn delete-dts.js && yarn delete-debug-view
ℹ Building target commonjs
ℹ Cleaning up previous build at lib/commonjs
ℹ Compiling 128 files in src with babel
✔ Wrote files to lib/commonjs
ℹ Building target module
ℹ Cleaning up previous build at lib/module
ℹ Compiling 128 files in src with babel
✔ Wrote files to lib/module
ℹ Building target typescript
ℹ Cleaning up previous build at lib/typescript
ℹ Generating type definitions with tsc
✖ Couldn't find a tsconfig.json in the project root.
bob build

Hard to try this way.

[MoOx]

I am having a hard time to test this properly.
I made this branch with required (compiled) files https://github.com/MoOx/react-native-bottom-sheet.git#feature/add-web-support.
I am using Next and had to inject some fake polyfills (otherwise, errors are thrown) :

// NEXT_PUBLIC___DEV__ needs to be defined in .env file
if (process.env.NEXT_PUBLIC___DEV__) {
  global.__DEV__ = process.env.NEXT_PUBLIC___DEV__;
}
if (typeof requestAnimationFrame === "undefined") {
  global.requestAnimationFrame = (cb) => cb();
}

if (!global.setImmediate) {
  global.setImmediate = (cb) => setTimeout(cb, 0);
}

// https://github.com/software-mansion/react-native-reanimated/issues/3355
if (!global._frameTimestamp) {
  global._frameTimestamp = null;
}

After that, the thing does not work. Sometimes it display the thing you want but in some case not (I am working on a responsive website so this lib is used for small viewport only).
In all case, it's not possible to interact using a mouse.
I could not display the thing on iOS Safari (Simulator).
It seems changing dimensions of the window (which create re-render, using useWindowDimensions()) allows the lib to correctly display what it should in some case.

[jspizziri]

@gorhom any chance of getting a nightly build or some sort of RC build on the v5 branch? I'd love to test this out if possible.