capacitor-native-pull-to-refresh

Native pull to refresh plugin for capacitor

Install

npm install capacitor-native-pull-to-refresh
npx cap sync
import { PullToRefresh } from "capacitor-native-pull-to-refresh";

This plugin Is a WIP.

API

• enable()
• disable()
• endRefreshing()
• setScrollPosition(...)
• manuallyTriggerRefreshingState(...)
• addListener('state', ...)
• removeAllListeners()
• Interfaces

enable()

enable() => Promise<PullToRefreshResponse>

Enables the pull-to-refresh functionality.

Returns: Promise<PullToRefreshResponse>

disable()

disable() => Promise<PullToRefreshResponse>

Disables the pull-to-refresh functionality.

Returns: Promise<PullToRefreshResponse>

endRefreshing()

endRefreshing() => Promise<PullToRefreshStateResponse>

Ends the refreshing state initiated by pull-to-refresh.

Returns: Promise<PullToRefreshStateResponse>

setScrollPosition(...)

setScrollPosition(options: SetScrollPositionOptions) => void

Sets the scroll position of the webView.scrollView.

Optional to use, default behavior of UIRefreshControl() only works with the main scrollview, so a workaround is needed for additional scroll containers e.g. modals.

This function is specific to iOS. platform: iOS

| Param | Type | Description | | ------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------ | | options | SetScrollPositionOptions | Configuration options for setting the scroll position. |

manuallyTriggerRefreshingState(...)

manuallyTriggerRefreshingState(options: ManuallyTriggerRefreshingStateOptions) => void

Manually triggers the refreshing state.

This method can be used in conjunction with @setScrollPosition to manage the refreshing state based on custom logic.

Example:

const threshold = -100;

scrollContainer.addEventListener("scroll", async function () { if (scrollContainer.scrollTop < 0) { PullToRefresh.setScrollPosition({ scroll_position: scrollContainer.scrollTop, threshold: threshold }); } });

scrollContainer.addEventListener("touchend", async function () { if (scrollContainer.scrollTop <= threshold) { PullToRefresh.manuallyTriggerRefreshingState({ offset: -30 }); } });

PullToRefresh.addListener("state", function ({ refreshing }) { if (refreshing) { setTimeout(() => { PullToRefresh.endRefreshing(); }, 3000); } });

This function is specific to iOS. platform: iOS

| Param | Type | Description | | ------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | options | ManuallyTriggerRefreshingStateOptions | Configuration options when manually triggering refreshing state. |

addListener('state', ...)

addListener(eventName: 'state', listenerFunc: (data: PullToRefreshStateResponse) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Adds a listener for the "state" event which is triggered when the pull-to-refresh state changes.

| Param | Type | Description | | ------------------ | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | | eventName | 'state' | The name of the event to listen for. | | listenerFunc | (data: PullToRefreshStateResponse) => void | The function to be executed when the event is triggered. |

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

removeAllListeners()

removeAllListeners() => Promise<void>

Interfaces

PullToRefreshResponse

| Prop | Type | | ------------- | -------------------- | | enabled | boolean |

PullToRefreshStateResponse

| Prop | Type | | ---------------- | -------------------- | | refreshing | boolean |

SetScrollPositionOptions

| Prop | Type | | --------------------- | ------------------- | | scroll_position | number | | threshold | number |

ManuallyTriggerRefreshingStateOptions

| Prop | Type | | ------------ | ------------------- | | offset | number |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |