@quiltt/react-native 3.9.2 → 3.9.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @quiltt/react-native
 
+## 3.9.4
+
+### Patch Changes
+
+- [#321](https://github.com/quiltt/quiltt-js/pull/321) [`642ec0f`](https://github.com/quiltt/quiltt-js/commit/642ec0f34f2506672993b82785b5b5ddb5c69069) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Bugfix: iOS WebView header drag behavior and scrolling
+
+- Updated dependencies [[`642ec0f`](https://github.com/quiltt/quiltt-js/commit/642ec0f34f2506672993b82785b5b5ddb5c69069)]:
+  - @quiltt/core@3.9.4
+  - @quiltt/react@3.9.4
+
+## 3.9.3
+
+### Patch Changes
+
+- [#319](https://github.com/quiltt/quiltt-js/pull/319) [`b97a814`](https://github.com/quiltt/quiltt-js/commit/b97a814b87b8bfec9f8b4bb155e1140724e441eb) Thanks [@zubairaziz](https://github.com/zubairaziz)! - Improve typings for query client and react components
+
+- Updated dependencies [[`b97a814`](https://github.com/quiltt/quiltt-js/commit/b97a814b87b8bfec9f8b4bb155e1140724e441eb)]:
+  - @quiltt/react@3.9.3
+  - @quiltt/core@3.9.3
+
 ## 3.9.2
 
 ### Patch Changes

package/dist/index.js

@@ -3,13 +3,13 @@ export * from '@quiltt/core';
 import { useQuilttSession, ConnectorSDKEventType } from '@quiltt/react';
 export { QuilttAuthProvider, QuilttProvider, QuilttSettingsProvider, useQuilttClient, useQuilttConnector, useQuilttSession, useQuilttSettings, useSession, useStorage } from '@quiltt/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { useRef, useState, useCallback, useMemo, useEffect } from 'react';
 import { StyleSheet, Platform, StatusBar, SafeAreaView, View, Text, Pressable, ActivityIndicator, Linking } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
 import { WebView } from 'react-native-webview';
 import { generateStackTrace, makeBacktrace, getCauses } from '@honeybadger-io/core/build/src/util';
 
-var version = "3.9.2";
+var version = "3.9.4";
 
 const ErrorReporterConfig = {
     honeybadger_api_key: 'undefined'
@@ -101,10 +101,10 @@ const getErrorMessage = (responseStatus, error)=>{
 
 const AndroidSafeAreaView = ({ testId, children })=>/*#__PURE__*/ jsx(SafeAreaView, {
         testID: testId,
-        style: styles$1.AndroidSafeArea,
+        style: styles$2.AndroidSafeArea,
         children: children
     });
-const styles$1 = StyleSheet.create({
+const styles$2 = StyleSheet.create({
     AndroidSafeArea: {
         flex: 1,
         backgroundColor: 'white',
@@ -116,8 +116,8 @@ const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaV
         testId: testId,
         children: /*#__PURE__*/ jsxs(View, {
             style: [
-                styles.container,
-                styles.padding
+                styles$1.container,
+                styles$1.padding
             ],
             children: [
                 /*#__PURE__*/ jsxs(View, {
@@ -135,14 +135,14 @@ const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaV
                             },
                             children: /*#__PURE__*/ jsx(Text, {
                                 style: [
-                                    styles.title
+                                    styles$1.title
                                 ],
                                 children: "Cannot connect to the internet."
                             })
                         }),
                         /*#__PURE__*/ jsx(Text, {
                             style: [
-                                styles.subtitle
+                                styles$1.subtitle
                             ],
                             children: error
                         })
@@ -150,12 +150,12 @@ const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaV
                 }),
                 /*#__PURE__*/ jsx(Pressable, {
                     style: [
-                        styles.pressable
+                        styles$1.pressable
                     ],
                     onPress: cta,
                     children: /*#__PURE__*/ jsx(Text, {
                         style: [
-                            styles.pressableText
+                            styles$1.pressableText
                         ],
                         children: "Exit"
                     })
@@ -163,7 +163,7 @@ const ErrorScreen = ({ testId, error, cta })=>/*#__PURE__*/ jsx(AndroidSafeAreaV
             ]
         })
     });
-const styles = StyleSheet.create({
+const styles$1 = StyleSheet.create({
     container: {
         flex: 1,
         flexDirection: 'column',
@@ -259,6 +259,24 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
     const [preFlightCheck, setPreFlightCheck] = useState({
         checked: false
     });
+    // Script to disable scrolling on header
+    const disableHeaderScrollScript = `
+    (function() {
+      const header = document.querySelector('header');
+      if (header) {
+        header.style.position = 'fixed';
+        header.style.top = '0';
+        header.style.left = '0';
+        header.style.right = '0';
+        header.style.zIndex = '1000';
+      }
+    })();
+  `;
+    const onLoadEnd = useCallback(()=>{
+        if (Platform.OS === 'ios') {
+            webViewRef.current?.injectJavaScript(disableHeaderScrollScript);
+        }
+    }, []);
     const encodedOAuthRedirectUrl = useMemo(()=>encodeURIComponent(oauthRedirectUrl), [
         oauthRedirectUrl
     ]);
@@ -402,6 +420,7 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             ref: webViewRef,
             // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
             // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
+            style: styles.webview,
             originWhitelist: [
                 '*'
             ],
@@ -409,6 +428,7 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
                 uri: connectorUrl
             },
             onShouldStartLoadWithRequest: requestHandler,
+            onLoadEnd: onLoadEnd,
             javaScriptEnabled: true,
             domStorageEnabled: true,
             webviewDebuggingEnabled: true,
@@ -417,13 +437,17 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
             automaticallyAdjustContentInsets: false,
             contentInsetAdjustmentBehavior: "never" // Controls how the WebView adjusts its content layout relative to safe areas and system UI
             ,
+            showsVerticalScrollIndicator: false,
+            showsHorizontalScrollIndicator: false,
             ...Platform.OS === 'ios' ? {
                 decelerationRate: 'normal',
                 keyboardDisplayRequiresUserAction: false,
                 dataDetectorTypes: 'none',
                 allowsInlineMediaPlayback: true,
                 allowsBackForwardNavigationGestures: false,
-                startInLoadingState: true
+                startInLoadingState: true,
+                scrollEventThrottle: 16,
+                overScrollMode: 'never'
             } : {
                 androidLayerType: 'hardware',
                 cacheEnabled: true,
@@ -432,6 +456,17 @@ const QuilttConnector = ({ testId, connectorId, connectionId, institution, oauth
         })
     });
 };
+// Add styles for the WebView container
+const styles = StyleSheet.create({
+    webviewContainer: {
+        flex: 1,
+        backgroundColor: '#ffffff'
+    },
+    webview: {
+        flex: 1,
+        overflow: 'hidden'
+    }
+});
 QuilttConnector.displayName = 'QuilttConnector';
 
 // Hermes doesn't have atob

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quiltt/react-native",
-  "version": "3.9.2",
+  "version": "3.9.4",
   "description": "React Native Components for Quiltt Connector",
   "homepage": "https://github.com/quiltt/quiltt-js/tree/main/packages/react-native#readme",
   "repository": {
@@ -30,23 +30,23 @@
   "dependencies": {
     "@honeybadger-io/core": "6.6.0",
     "lodash.debounce": "4.0.8",
-    "@quiltt/react": "3.9.2",
-    "@quiltt/core": "3.9.2"
+    "@quiltt/core": "3.9.4",
+    "@quiltt/react": "3.9.4"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@types/base-64": "1.0.2",
     "@types/lodash.debounce": "4.0.9",
-    "@types/node": "22.10.2",
+    "@types/node": "22.10.5",
     "@types/react": "18.3.12",
     "base-64": "1.0.0",
-    "bunchee": "5.6.1",
+    "bunchee": "6.2.0",
     "react": "18.3.1",
     "react-native": "0.76.5",
     "react-native-url-polyfill": "2.0.0",
     "react-native-webview": "13.12.5",
     "rimraf": "6.0.1",
-    "typescript": "5.7.2"
+    "typescript": "5.7.3"
   },
   "peerDependencies": {
     "base-64": "^1.0.0",

package/src/components/QuilttConnector.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Linking, Platform } from 'react-native'
+import { StyleSheet } from 'react-native'
 import { URL } from 'react-native-url-polyfill' // https://github.com/facebook/react-native/issues/16434
 import { WebView } from 'react-native-webview'
 import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes'
@@ -83,6 +84,26 @@ const QuilttConnector = ({
   const { session } = useQuilttSession()
   const [preFlightCheck, setPreFlightCheck] = useState<PreFlightCheck>({ checked: false })
 
+  // Script to disable scrolling on header
+  const disableHeaderScrollScript = `
+    (function() {
+      const header = document.querySelector('header');
+      if (header) {
+        header.style.position = 'fixed';
+        header.style.top = '0';
+        header.style.left = '0';
+        header.style.right = '0';
+        header.style.zIndex = '1000';
+      }
+    })();
+  `
+
+  const onLoadEnd = useCallback(() => {
+    if (Platform.OS === 'ios') {
+      webViewRef.current?.injectJavaScript(disableHeaderScrollScript)
+    }
+  }, [])
+
   const encodedOAuthRedirectUrl = useMemo(
     () => encodeURIComponent(oauthRedirectUrl),
     [oauthRedirectUrl]
@@ -227,9 +248,11 @@ const QuilttConnector = ({
         ref={webViewRef}
         // Plaid keeps sending window.location = 'about:srcdoc' and causes some noise in RN
         // All whitelists are now handled in requestHandler, handleQuilttEvent and handleOAuthUrl
+        style={styles.webview}
         originWhitelist={['*']}
         source={{ uri: connectorUrl }}
         onShouldStartLoadWithRequest={requestHandler}
+        onLoadEnd={onLoadEnd}
         javaScriptEnabled
         domStorageEnabled // To enable localStorage in Android webview
         webviewDebuggingEnabled
@@ -237,6 +260,8 @@ const QuilttConnector = ({
         scrollEnabled={true} // Enables scrolling within the WebView
         automaticallyAdjustContentInsets={false} // Disables automatic padding adjustments based on navigation bars/safe areas
         contentInsetAdjustmentBehavior="never" // Controls how the WebView adjusts its content layout relative to safe areas and system UI
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
         {...(Platform.OS === 'ios'
           ? {
               decelerationRate: 'normal',
@@ -245,6 +270,8 @@ const QuilttConnector = ({
               allowsInlineMediaPlayback: true,
               allowsBackForwardNavigationGestures: false,
               startInLoadingState: true,
+              scrollEventThrottle: 16, // Optimize scroll performance
+              overScrollMode: 'never', // Prevent overscroll effect
             }
           : {
               androidLayerType: 'hardware',
@@ -256,6 +283,18 @@ const QuilttConnector = ({
   )
 }
 
+// Add styles for the WebView container
+const styles = StyleSheet.create({
+  webviewContainer: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  webview: {
+    flex: 1,
+    overflow: 'hidden', // Prevent content from overflowing
+  },
+})
+
 QuilttConnector.displayName = 'QuilttConnector'
 
 export { QuilttConnector }