Native pull to refresh plugin for capacitor
npm install capacitor-native-pull-to-refresh
npx cap sync
import { PullToRefresh } from "capacitor-native-pull-to-refresh";
This plugin Is a WIP, only iOS supported atm.enable()disable()endRefreshing()setScrollPosition(...)manuallyTriggerRefreshingState(...)addListener('state', ...)removeAllListeners()- Interfaces
enable() => Promise<PullToRefreshResponse>Enables the pull-to-refresh functionality.
Returns: Promise<PullToRefreshResponse>
disable() => Promise<PullToRefreshResponse>Disables the pull-to-refresh functionality.
Returns: Promise<PullToRefreshResponse>
endRefreshing() => Promise<PullToRefreshStateResponse>Ends the refreshing state initiated by pull-to-refresh.
Returns: Promise<PullToRefreshStateResponse>
setScrollPosition(options: SetScrollPositionOptions) => voidSets the scroll position of the webView.scrollView.
| Param | Type | Description |
|---|---|---|
options |
SetScrollPositionOptions |
Configuration options for setting the scroll position. 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. |
manuallyTriggerRefreshingState(options: ManuallyTriggerRefreshingStateOptions) => voidUsed with @setScrollPosition
Example Usage:
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) } })
| Param | Type | Description |
|---|---|---|
options |
ManuallyTriggerRefreshingStateOptions |
Configuration options when manually triggering refreshing state. |
addListener(eventName: 'state', listenerFunc: (data: PullToRefreshStateResponse) => void) => Promise<PluginListenerHandle> & PluginListenerHandleAdds 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() => Promise<void>| Prop | Type |
|---|---|
enabled |
boolean |
| Prop | Type |
|---|---|
refreshing |
boolean |
| Prop | Type |
|---|---|
scroll_position |
number |
threshold |
number |
| Prop | Type |
|---|---|
offset |
number |
| Prop | Type |
|---|---|
remove |
() => Promise<void> |