feat: added web support (#1150)

* chore: updated dependencies

* refactor: updated ReText view for web

* chore: added cursor for handle container

* chore: updated expo version for example project

* feat: added scrollable component for web

* feat: added gesture and scroll handler for web

* chore: added getRefNativeTag for web

* feat: rewrite gesture apis with gesture handler 2 (#1126)

* chore: updated dependencies

* feat: rewrite the gesture api with gh2

* fix(#1119): fixed race condition between onmount and keyboard animations

* fix: update ref handler for web

* chore: removed unused component

* chore: updated expo

* fix: detached example on web

Author: gorhom

example/app/package.json

@@ -20,10 +20,10 @@
     "nanoid": "^3.3.3",
     "react": "17.0.2",
     "react-native": "0.68.1",
-    "react-native-gesture-handler": "^2.5.0",
+    "react-native-gesture-handler": "~2.8.0",
     "react-native-maps": "^0.30.1",
     "react-native-pager-view": "^5.4.24",
-    "react-native-reanimated": "^2.9.1",
+    "react-native-reanimated": "~2.12.0",
     "react-native-redash": "^16.0.11",
     "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "^3.15.0",

example/app/src/components/contactList/styles.web.ts

@@ -9,10 +9,10 @@ export const styles = StyleSheet.create({
   sectionHeaderTitle: {
     fontSize: 16,
     textTransform: 'uppercase',
+    color: 'black',
   },
   container: {
     flex: 1,
-    paddingHorizontal: 16,
   },
   contentContainer: {
     paddingHorizontal: 16,

example/app/src/screens/modal/DetachedExample.tsx

@@ -76,7 +76,7 @@ const DetachedExample = () => {
         snapPoints={animatedSnapPoints}
         handleHeight={animatedHandleHeight}
         contentHeight={animatedContentHeight}
-        bottomInset={safeBottomArea + 34}
+        bottomInset={safeBottomArea + 16}
         enablePanDownToClose={true}
         style={styles.sheetContainer}
         backgroundComponent={null}
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingTop: 12,
     paddingBottom: 12,
-    paddingHorizontal: 16,
+    paddingHorizontal: 12,
   },
   footer: {
     justifyContent: 'center',

example/bare/ios/Podfile.lock

@@ -306,7 +306,7 @@ PODS:
     - React
   - react-native-maps (0.30.2):
     - React-Core
-  - react-native-pager-view (5.4.24):
+  - react-native-pager-view (5.4.25):
     - React-Core
   - react-native-safe-area-context (4.2.4):
     - RCT-Folly
@@ -382,7 +382,7 @@ PODS:
     - React-perflogger (= 0.69.4)
   - RNCMaskedView (0.1.11):
     - React
-  - RNGestureHandler (2.6.2):
+  - RNGestureHandler (2.7.0):
     - React-Core
   - RNReanimated (2.10.0):
     - DoubleConversion
@@ -411,7 +411,7 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (3.15.0):
+  - RNScreens (3.17.0):
     - React-Core
     - React-RCTImage
   - SocketRocket (0.6.0)
@@ -629,7 +629,7 @@ SPEC CHECKSUMS:
   React-logger: 1088859f145b8f6dd0d3ed051a647ef0e3e80fad
   react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
   react-native-maps: df7b9fca1b1c8d356fadbf5b8a63a5f8cf32fc73
-  react-native-pager-view: 95d0418c3c74279840abec6926653d32447bafb6
+  react-native-pager-view: da490aa1f902c9a5aeecf0909cc975ad0e92e53e
   react-native-safe-area-context: f98b0b16d1546d208fc293b4661e3f81a895afd9
   React-perflogger: cb386fd44c97ec7f8199c04c12b22066b0f2e1e0
   React-RCTActionSheet: f803a85e46cf5b4066c2ac5e122447f918e9c6e5
@@ -644,9 +644,9 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 61ee22a8cdf8b6bb2a7fb7b4ba2cc763e5285196
   ReactCommon: 8f67bd7e0a6afade0f20718f859dc8c2275f2e83
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
-  RNGestureHandler: 4defbd70b2faf3d6761b82fa7880285241762cb0
+  RNGestureHandler: 7673697e7c0e9391adefae4faa087442bc04af33
   RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa
-  RNScreens: 4a1af06327774490d97342c00aee0c2bafb497b7
+  RNScreens: 0df01424e9e0ed7827200d6ed1087ddd06c493f9
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: ff994563b2fd98c982ca58e8cd9db2cdaf4dda74
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

example/expo/babel.config.js

@@ -16,6 +16,7 @@ module.exports = function (api) {
   return {
     presets: ['babel-preset-expo'],
     plugins: [
+      '@babel/plugin-proposal-export-namespace-from',
       'react-native-reanimated/plugin',
       [
         'module-resolver',

example/expo/index.ts

@@ -1,5 +1,8 @@
 import { registerRootComponent } from 'expo';
 
+import { enableExperimentalWebImplementation } from 'react-native-gesture-handler';
+enableExperimentalWebImplementation(true);
+
 import { enableScreens } from 'react-native-screens';
 enableScreens(true);
 

example/expo/package.json

@@ -5,13 +5,13 @@
   "private": true,
   "main": "./index.ts",
   "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "eject": "expo eject"
+    "start": "npx expo start",
+    "android": "npx expo start --android",
+    "ios": "npx expo start --ios",
+    "web": "npx expo start --web"
   },
   "dependencies": {
+    "@expo/webpack-config": "^0.17.2",
     "@gorhom/portal": "^1.0.13",
     "@gorhom/showcase-template": "^2.1.0",
     "@react-navigation/bottom-tabs": "^6.3.1",
@@ -20,28 +20,29 @@
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "^6.6.2",
     "@react-navigation/stack": "^6.2.1",
-    "expo": "^46.0.0",
-    "expo-status-bar": "~1.4.0",
+    "expo": "^47.0.0",
+    "expo-status-bar": "~1.4.2",
     "faker": "^4.1.0",
     "nanoid": "^3.3.3",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.4",
-    "react-native-gesture-handler": "~2.5.0",
-    "react-native-pager-view": "5.4.24",
-    "react-native-reanimated": "~2.9.1",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-gesture-handler": "~2.8.0",
+    "react-native-pager-view": "6.0.1",
+    "react-native-reanimated": "~2.12.0",
     "react-native-redash": "^16.2.4",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-screens": "~3.15.0",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-screens": "~3.18.0",
     "react-native-tab-view": "^3.1.1",
     "react-native-web": "~0.18.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@types/react": "~18.0.0",
-    "@types/react-native": "~0.69.1",
+    "@babel/core": "^7.19.3",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@types/react": "~18.0.24",
+    "@types/react-native": "~0.70.6",
+    "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0",
-    "expo-cli": "^6.0.2",
     "typescript": "^4.6.3"
   },
   "resolutions": {

example/expo/web/index.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="%LANG_ISO_CODE%">
+  <head>
+    <meta charset="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <!-- 
+      This viewport works for phones with notches.
+      It's optimized for gestures by disabling global zoom.
+     -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
+    />
+    <meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#000" media="(prefers-color-scheme: dark)">
+    <title>%WEB_TITLE%</title>
+    <style>
+      /**
+       * Extend the react-native-web reset:
+       * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+       */
+      html,
+      body,
+      #root {
+        width: 100%;
+        /* To smooth any scrolling behavior */
+        -webkit-overflow-scrolling: touch;
+        margin: 0px;
+        padding: 0px;
+        /* Allows content to fill the viewport and go beyond the bottom */
+        min-height: 100%;
+        background-color: #000;
+      }
+      #root {
+        flex-shrink: 0;
+        flex-basis: auto;
+        flex-grow: 1;
+        display: flex;
+        flex: 1;
+        background-color: #000;
+      }
+
+      html {
+        scroll-behavior: smooth;
+        /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
+        -webkit-text-size-adjust: 100%;
+        height: calc(100% + env(safe-area-inset-top));
+      }
+
+      body {
+        display: flex;
+        /* Allows you to scroll below the viewport; default value is visible */
+        overflow-y: auto;
+        overscroll-behavior-y: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        -ms-overflow-style: scrollbar;
+      }
+      /* Enable for apps that support dark-theme */
+      /*@media (prefers-color-scheme: dark) {
+        body {
+          background-color: black;
+        }
+      }*/
+    </style>
+  </head>
+
+  <body>
+    <!-- 
+      A generic no script element with a reload button and a message.
+      Feel free to customize this however you'd like.
+    -->
+    <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: bold;
+                line-height: 20px;
+                padding: 6px 16px;
+              "
+            >
+              Reload
+            </button>
+          </p>
+        </div>
+      </form>
+    </noscript>
+    <!-- The root element for your Expo app. -->
+    <div id="root"></div>
+  </body>
+</html>

package.json

@@ -69,8 +69,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": ">=2.5.0",
-    "react-native-reanimated": ">=2.9.0"
+    "react-native-gesture-handler": ">=2.6.0",
+    "react-native-reanimated": ">=2.10.0"
   },
   "react-native-builder-bob": {
     "source": "src",

src/components/bottomSheet/BottomSheet.tsx

@@ -1370,12 +1370,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
         /**
          * Calculate the keyboard height in the container.
          */
-        animatedKeyboardHeightInContainer.value = $modal
-          ? Math.abs(
-              _keyboardHeight -
-                Math.abs(bottomInset - animatedContainerOffset.value.bottom)
-            )
-          : Math.abs(_keyboardHeight - animatedContainerOffset.value.bottom);
+        animatedKeyboardHeightInContainer.value =
+          _keyboardHeight === 0
+            ? 0
+            : $modal
+            ? Math.abs(
+                _keyboardHeight -
+                  Math.abs(bottomInset - animatedContainerOffset.value.bottom)
+              )
+            : Math.abs(_keyboardHeight - animatedContainerOffset.value.bottom);
 
         /**
          * if keyboard state is equal to the previous state, then exit the method