{"id":22339793,"url":"https://github.com/iagormoraes/react-native-im-pull-refresh","last_synced_at":"2025-09-21T06:55:17.703Z","repository":{"id":57337568,"uuid":"435179794","full_name":"iagormoraes/react-native-im-pull-refresh","owner":"iagormoraes","description":"A smooth pull to refresh component made with love.","archived":false,"fork":false,"pushed_at":"2022-07-27T20:36:19.000Z","size":430,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-12T07:43:30.797Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iagormoraes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-05T13:50:18.000Z","updated_at":"2022-01-06T13:54:06.000Z","dependencies_parsed_at":"2022-09-13T02:42:38.152Z","dependency_job_id":null,"html_url":"https://github.com/iagormoraes/react-native-im-pull-refresh","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/iagormoraes/react-native-im-pull-refresh","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagormoraes%2Freact-native-im-pull-refresh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagormoraes%2Freact-native-im-pull-refresh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagormoraes%2Freact-native-im-pull-refresh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagormoraes%2Freact-native-im-pull-refresh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iagormoraes","download_url":"https://codeload.github.com/iagormoraes/react-native-im-pull-refresh/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iagormoraes%2Freact-native-im-pull-refresh/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276204841,"owners_count":25602738,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-21T02:00:07.055Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-04T07:09:25.123Z","updated_at":"2025-09-21T06:55:17.653Z","avatar_url":"https://github.com/iagormoraes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-im-pull-refresh\n\nA smooth pull to refresh component made with love.\n\n![sample](https://user-images.githubusercontent.com/13892132/147877500-865d529e-58c2-437a-92c5-6deb1352797f.gif)\n\n\n# Motivation\n\nAfter some time implementing the pull to refresh component using v1 of gesture handler and v2 of reanimated,\nI decided to recreate the component with the new features of gesture handler that make the experience more simple and bring a very cool experience to the end user.\n\n\n## Installation\n\n```sh\nnpm install react-native-im-pull-refresh\n```\n\nor\n\n```sh\nyarn add react-native-im-pull-refresh\n```\n\nNote: the package uses gesture handler V2 and reanimated V2, so to make it compatible, make sure your project are using those.\n\n#### Support version\n\n| version | react-native version |\n|---------|----------------------|\n| 0.1.0+  | 0.60.0+              |\n\n\n## Example\n\nIs simple to instance this component into your view.\n\n```tsx\n        \u003cPullRefreshScrollView\u003cScrollViewProps\u003e\n          view={ScrollView}\n          viewRef={ref}\n          loadingChildren={({ animatedValue }) =\u003e (\n            \u003cSampleLoader animatedValue={animatedValue} /\u003e\n          )}\n          onPullRefresh={handleRefresh}\n          refreshing={refreshing}\n          loaderHeight={200}\n          bounceOnPull={false}\n          wrapperStyle={{ opacity: 1 }}\n          containerStyle={{ opacity: 1 }}\n          onScroll={() =\u003e {\n            'worklet';\n            console.log('scrolling...');\n          }}\u003e\n          {/*... YOUR COMPONENTS HERE ...*/}\n        \u003c/PullRefreshScrollView\u003e\n```\n\nIt accepts a custom loader component, also it is can be controlled by state or not.\n\nNOTE: onScroll handler is invoked by JSI by Reanimated context (Native Side), so always use `\"worklet\"` on top of the function.\n\n## Props\n\nBelow there is props to customize the look n' feel of your component and also the state view of it.\n\n### `view` - `React.ComponentType\u003cT\u003e`\nThis prop tell to the component what to render and how, you pass to the `PullRefreshScrollView` the props of that view component.\n\nFor example:\n\n```tsx\n\u003cPullRefreshScrollView\u003cMyViewPropsType\u003e /\u003e\n```\n\nDoing this all the props of `MyViewPropsType` is inherited to the component.\n\n### `loadingChildren` - `React Element`\n\nReceives a function that return a component, in parameter it includes the `animatedValue` that is the value of how much pan the gesture received.\n\n\n### `loaderHeight` - `number`\nDefault: `50`\n\nProp that specifies the size of loading area that the loading content will show.\n\n### `refreshing` - `boolean`\n\nProp that tells the component if it is loading or not, it changes the visual state.\n\n### `onPullRefresh` - `Function`\n\nFunction that trigger once the pull gesture is made.\n\n### `bounceOnPull` - `boolean`\nDefault: `true`\n\nProp that will constriant the pan on pull to the height of loader content when it is higher value.\n\n## TODO\n\n- [X] Make scroll component customizable by props\n\n- [ ] Add option to get dynamically the height of loadingChildren content\n- [X] Make animations customizable\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiagormoraes%2Freact-native-im-pull-refresh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiagormoraes%2Freact-native-im-pull-refresh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiagormoraes%2Freact-native-im-pull-refresh/lists"}