RNVisitableView: introduce progressViewOffset property (#195)

software-mansion-labs · Apr 26, 2024 · 5b7fe1c · 5b7fe1c
1 parent 3c03f9d
commit 5b7fe1c
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 0 deletions.
diff --git a/packages/turbo/README.md b/packages/turbo/README.md
@@ -97,6 +97,12 @@ The amount by which the web view content is inset from the edges of the scroll v
 
 Note: available only on iOS.
 
+### `progressViewOffset`
+
+The refresh indicator starting and resting position is always positioned near the top of the refreshing content. This position is a consistent location, but can be adjusted in either direction based on whether or not there is a header or other content that should be visible when the refresh indicator is shown.
+
+Note: available only on Android.
+
 ### `stradaComponents`
 
 `VisitableView` supports defining [Strada components](https://strada.hotwired.dev/) that receive and reply to messages from web components that are present on the page within one session. This prop accepts an array of Strada components that will be registered in the webview.

diff --git a/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableView.kt b/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableView.kt
@@ -12,6 +12,7 @@ import androidx.core.view.isVisible
 import androidx.lifecycle.findViewTreeLifecycleOwner
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.RCTEventEmitter
 import dev.hotwire.turbo.views.TurboView
@@ -53,6 +54,17 @@ class RNVisitableView(context: Context) : LinearLayout(context), SessionSubscrib
       field = value
       setPullToRefresh(value)
     }
+  var progressViewOffset: ReadableMap? = null
+    set(value) {
+      field = value
+      progressViewOffset?.let {
+        turboView.webViewRefresh?.setProgressViewOffset(
+          it.getBoolean("scale"),
+          it.getInt("start"),
+          it.getInt("end")
+        )
+      }
+    }
 
   // Session
   private var _session: RNSession? = null

diff --git a/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableViewManager.kt b/packages/turbo/android/src/main/java/com/reactnativeturbowebview/RNVisitableViewManager.kt
@@ -2,6 +2,7 @@ package com.reactnativeturbowebview
 
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -62,6 +63,11 @@ class RNVisitableViewManager(
     view.scrollEnabled = scrollEnabled
   }
 
+  @ReactProp(name = "progressViewOffset")
+  fun setProgressViewOffset(view: RNVisitableView, progressViewOffset: ReadableMap?) {
+    view.progressViewOffset = progressViewOffset
+  }
+
   override fun getCommandsMap(): MutableMap<String, Int> = RNVisitableViewCommand.values()
     .associate {
       it.jsCallbackName to it.ordinal

diff --git a/packages/turbo/src/RNVisitableView.ts b/packages/turbo/src/RNVisitableView.ts
@@ -20,6 +20,7 @@ import type {
   FormSubmissionEvent,
   ContentProcessDidTerminateEvent,
   ContentInsetObject,
+  ProgressViewOffsetObject,
 } from './types';
 
 // Interface should match RNVisitableView exported properties in native code
@@ -30,6 +31,7 @@ export interface RNVisitableViewProps {
   pullToRefreshEnabled: boolean;
   scrollEnabled: boolean;
   contentInset: ContentInsetObject;
+  progressViewOffset?: ProgressViewOffsetObject;
   onLoad?: (e: NativeSyntheticEvent<LoadEvent>) => void;
   onMessage?: (e: NativeSyntheticEvent<MessageEvent>) => void;
   onError?: (e: NativeSyntheticEvent<ErrorEvent>) => void;

diff --git a/packages/turbo/src/VisitableView.tsx b/packages/turbo/src/VisitableView.tsx
@@ -41,6 +41,7 @@ import type {
   FormSubmissionEvent,
   ContentProcessDidTerminateEvent,
   ContentInsetObject,
+  ProgressViewOffsetObject,
 } from './types';
 import { nextEventLoopTick } from './utils/nextEventLoopTick';
 
@@ -52,6 +53,7 @@ export interface Props {
   pullToRefreshEnabled?: boolean;
   scrollEnabled?: boolean;
   contentInset?: ContentInsetObject;
+  progressViewOffset?: ProgressViewOffsetObject;
   renderLoading?: RenderLoading;
   renderError?: RenderError;
   onVisitProposal: (proposal: VisitProposal) => void;
@@ -83,6 +85,7 @@ const VisitableView = React.forwardRef<RefObject, React.PropsWithRef<Props>>(
       pullToRefreshEnabled = true,
       scrollEnabled = true,
       contentInset = { top: 0, left: 0, right: 0, bottom: 0 },
+      progressViewOffset,
       renderLoading,
       renderError,
       onLoad,
@@ -221,6 +224,7 @@ const VisitableView = React.forwardRef<RefObject, React.PropsWithRef<Props>>(
           pullToRefreshEnabled={pullToRefreshEnabled}
           scrollEnabled={scrollEnabled}
           contentInset={contentInset}
+          progressViewOffset={progressViewOffset}
           onError={onErrorCombinedHandlers}
           onVisitProposal={handleVisitProposal}
           onMessage={handleOnMessage}

diff --git a/packages/turbo/src/types.ts b/packages/turbo/src/types.ts
@@ -51,6 +51,12 @@ export type ContentInsetObject = {
   top?: number;
 };
 
+export type ProgressViewOffsetObject = {
+  scale: boolean;
+  start: number;
+  end: number;
+};
+
 export type StradaMessage = {
   component: string;
   event: string;