fix: prevent overflow bouncing on desktop and mobile (#1743)

* fix: prevent overflow bouncing on desktop and mobile * fix: add black bg to webview for debugging purposes
standardnotes · Oct 5, 2022 · 6bd5534 · 6bd5534
1 parent de0f91c
commit 6bd5534
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 7 deletions.
diff --git a/packages/mobile/ios/Podfile.lock b/packages/mobile/ios/Podfile.lock
@@ -419,7 +419,7 @@ PODS:
     - React-RCTImage
   - RNSearchBar (3.5.1):
     - React-Core
-  - RNShare (7.6.4):
+  - RNShare (7.9.0):
     - React-Core
   - RNStoreReview (0.2.1):
     - React-Core
@@ -744,7 +744,7 @@ SPEC CHECKSUMS:
   RNReanimated: b5b17149593e7c05e4ec5c0efea1f21e05829510
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   RNSearchBar: 5ed8e13ba8a6c701fbd2afdfe4164493d24b2aee
-  RNShare: 4406f61af043027b695c3a0b8f39e2c2bdacde12
+  RNShare: be91a5c149585affb02c25b351bd07ba927c7006
   RNStoreReview: e05edbbf426563070524cec384ac0b8df69be801
   RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8

diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -9,7 +9,7 @@
     "android-prod-debug": "react-native run-android --variant prodDebug",
     "android-prod-release": "yarn run android:bundle && react-native run-android --variant prodRelease",
     "android:bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/build/intermediates/res/merged/release/",
-    "build": "yarn web:bundle && yarn install:pods && yarn android:bundle",
+    "build": "yarn bundle:web && yarn install:pods && yarn android:bundle",
     "clear-cache": "watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-*",
     "format:fix": "yarn format --write",
     "format": "prettier ./src",
@@ -22,7 +22,7 @@
     "start": "react-native start",
     "tsc": "tsc --noEmit",
     "upgrade:snjs": "ncu -u '@standardnotes/*'",
-    "web:bundle": "mkdir -p html/Web.bundle/src/web-src/ && cp -r ../web/dist/. html/Web.bundle/src/web-src/ && mkdir -p html/Web.bundle/src/components/assets && cp -r ../components/dist/assets/. html/Web.bundle/src/components/assets/"
+    "bundle:web": "mkdir -p html/Web.bundle/src/web-src/ && cp -r ../web/dist/. html/Web.bundle/src/web-src/ && mkdir -p html/Web.bundle/src/components/assets && cp -r ../components/dist/assets/. html/Web.bundle/src/components/assets/"
   },
   "installConfig": {
     "hoistingLimits": "workspaces"

diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx
@@ -195,13 +195,12 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     webViewRef.current?.postMessage(JSON.stringify({ messageId, returnValue, messageType: 'reply' }))
   }
 
-  /* eslint-disable @typescript-eslint/no-empty-function */
   return (
     <WebView
       ref={webViewRef}
       source={{ uri: sourceUri }}
+      style={{ backgroundColor: 'black' }}
       originWhitelist={['*']}
-      onLoad={() => {}}
       onError={(err) => console.error('An error has occurred', err)}
       onHttpError={() => console.error('An HTTP error occurred')}
       onMessage={onMessage}
@@ -211,5 +210,4 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       bounces={false}
     />
   )
-  /* eslint-enable @typescript-eslint/no-empty-function */
 }
diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
@@ -55,6 +55,7 @@ body {
 
 * {
   box-sizing: border-box;
+  overscroll-behavior: none;
 }
 
 .uppercase {