{"id":24300886,"url":"https://github.com/vinicarra/react-native-scrollable-header","last_synced_at":"2025-09-26T02:31:51.906Z","repository":{"id":57339773,"uuid":"141817036","full_name":"vinicarra/react-native-scrollable-header","owner":"vinicarra","description":"Just scroll. Just collapse the header. Just works.","archived":false,"fork":false,"pushed_at":"2018-08-31T13:45:25.000Z","size":6021,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-09T11:13:01.879Z","etag":null,"topics":["header","react-native","reactjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinicarra.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-21T13:46:58.000Z","updated_at":"2023-11-15T12:42:47.000Z","dependencies_parsed_at":"2022-09-04T15:02:30.715Z","dependency_job_id":null,"html_url":"https://github.com/vinicarra/react-native-scrollable-header","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinicarra%2Freact-native-scrollable-header","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinicarra%2Freact-native-scrollable-header/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinicarra%2Freact-native-scrollable-header/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinicarra%2Freact-native-scrollable-header/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinicarra","download_url":"https://codeload.github.com/vinicarra/react-native-scrollable-header/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234286202,"owners_count":18808445,"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","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":["header","react-native","reactjs"],"created_at":"2025-01-16T23:18:14.990Z","updated_at":"2025-09-26T02:31:46.670Z","avatar_url":"https://github.com/vinicarra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scrollable Header\n\n[![npm version](https://badge.fury.io/js/survey-monkey-streams.svg)](//npmjs.com/package/react-native-scrollable-header)\n\nSimple but useful. I've always wanted to use this kind of header in my projects and I've tried many solutions available but most of them had issues with the core feature: the header. Based on that, I've created this EXTREME basic header that JUST scrolls the header: that's all. It's simple so anyone can read this code and make changes if needed (hopefully you don't need).\n\n## Instalation\n\n\u003e npm install react-native-scrollable-header --save\n\n## Demo\n\n![Demo](https://i.giphy.com/media/w7waGojMm5ggjYxccv/giphy.webp)\n\n## Example\n\n~~~~\nimport RNScrollable from 'react-native-scrollable-header';\n\nexport default class App extends Component {\n\n  renderExpanded = () =\u003e (\n    \u003cView style={{ flex: 1, backgroundColor: 'pink', padding: 20, justifyContent: 'center' }}\u003e\n      \u003cText style={{ fontWeight: 'bold', fontSize: 22, alignSelf: 'center' }}\u003e\n        Expanded Header\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  );\n\n  renderCollapsed = () =\u003e (\n    \u003cView style={{ flex: 1, backgroundColor: 'red', padding: 10, justifyContent: 'center' }}\u003e\n      \u003cText style={{ fontWeight: 'bold', fontSize: 14, alignSelf: 'center' }}\u003e\n        Collapsed Header\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  );\n\n\n  render() {\n    return (\n      \u003cRNScrollable \n        content={() =\u003e \u003cText\u003e{content}\u003c/Text\u003e}\n        collapsedHeader={this.renderCollapsed}\n        expandedHeader={this.renderExpanded}\n        collapsedHeight={60}\n        expandedHeight={200}\n      /\u003e\n    );\n  }\n}\n~~~~\n\n## Documentation\n\n| Props                | Description                                      | Example                    | Required |\n|----------------------|--------------------------------------------------|----------------------------|----------|\n| content              | Renders the content of the page                  | \u003cText\u003eContent\u003c/Text\u003e       | Yes      |\n| collapsedHeader      | Renders the collapsed header                     | \u003cView style={{flex: 1}} /\u003e | Yes      |\n| expandedHeader       | Renders the expanded header (full)               | \u003cView style={{flex: 1}} /\u003e | Yes      |\n| collapsedHeight      | Collapsed header height                          | 60                         | Yes      |\n| expandedHeight       | Expanded header height                           | 200                        | Yes      |\n| containerStyle       | The style for the whole screen                   |                            | No       |\n| scrollContainerStyle | The style for ScrollView's contentContainerStyle |                            | No       |\n| headerContainerStyle | The style for the top most header view           |                            | No       |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinicarra%2Freact-native-scrollable-header","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinicarra%2Freact-native-scrollable-header","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinicarra%2Freact-native-scrollable-header/lists"}