{"id":21520446,"url":"https://github.com/mrnkr/react-native-expo-headers","last_synced_at":"2026-05-10T10:13:34.299Z","repository":{"id":97409123,"uuid":"127182010","full_name":"mrnkr/react-native-expo-headers","owner":"mrnkr","description":"A compilation of header components for React Native with Expo","archived":false,"fork":false,"pushed_at":"2018-04-27T19:29:51.000Z","size":29,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-24T04:43:31.874Z","etag":null,"topics":["headers","human-interface-design","material-design","mobile-app","plugin","react","react-native"],"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/mrnkr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-28T18:30:35.000Z","updated_at":"2018-04-27T19:29:52.000Z","dependencies_parsed_at":"2023-03-13T16:14:20.428Z","dependency_job_id":null,"html_url":"https://github.com/mrnkr/react-native-expo-headers","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/mrnkr%2Freact-native-expo-headers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrnkr%2Freact-native-expo-headers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrnkr%2Freact-native-expo-headers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrnkr%2Freact-native-expo-headers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrnkr","download_url":"https://codeload.github.com/mrnkr/react-native-expo-headers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244075637,"owners_count":20393979,"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":["headers","human-interface-design","material-design","mobile-app","plugin","react","react-native"],"created_at":"2024-11-24T01:01:38.202Z","updated_at":"2026-05-10T10:13:29.258Z","avatar_url":"https://github.com/mrnkr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Headers\n\n## Nice looking headers for React Native\n\n### Intro\n\nJust a compilation of header components I have made since I started working on React Native :)\n\n### Quick Start\n\n```javascript\nconst { scrollY } = this.state;\n\n{Platform.OS === \"ios\" ?\n  \u003cHeader offset={scrollY} \n          title=\"Hello World!\"\n          color=\"#000000\"\n          backgroundColor=\"#E8E8EF\"\n          leftButton={{\n            icon: \u003cIonicons name=\"ios-menu-outline\" size={30} color=\"#F47983\" /\u003e,\n            onPress: () =\u003e console.log(\"Pressed the left button!\")\n          }}\n          rightButton={{\n            icon: \u003cIonicons name=\"ios-funnel-outline\" size={30} color=\"#F47983\" /\u003e,\n            onPress: () =\u003e console.log(\"Pressed the right button!\")\n          }} /\u003e : null}\n\n{Platform.OS === \"ios\" ?\n  \u003cSimpleHeader title=\"Hello World!\"\n                color=\"#000000\"\n                backgroundColor=\"#E8E8EF\"\n                leftButton={{\n                  icon: \u003cIonicons name=\"ios-menu-outline\" size={30} color=\"#F47983\" /\u003e,\n                  onPress: () =\u003e console.log(\"Pressed the left button!\")\n                }}\n                rightButton={{\n                  icon: \u003cIonicons name=\"ios-funnel-outline\" size={30} color=\"#F47983\" /\u003e,\n                  onPress: () =\u003e console.log(\"Pressed the right button!\")\n                }} /\u003e : null}\n\n{Platform.OS === 'android' ? \n  \u003cHeader offset={scrollY}\n          title=\"Hello World!\"\n          color=\"#FFFFFF\"\n          backgroundColor=\"#F47983\"\n          image={{\n            preview: \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==\",\n            uri: \"http://potatoprank.com/wp-content/uploads/2017/06/Happy-Potato_1-600x372.jpg\"\n          }}\n          leftButton={{ icon: \u003cIonicons name=\"md-menu\" size={28} color=\"#FFFFFF\" /\u003e, onPress: () =\u003e console.log('Menu') }}\n          rightButtons={[{ icon: \u003cIonicons name=\"md-funnel\" size={28} color=\"#FFFFFF\" /\u003e, onPress: () =\u003e console.log(\"Filter\"), showAsAction: 'ifRoom' },\n                         { icon: \u003cIonicons name=\"md-share\" size={28} color=\"#FFFFFF\" /\u003e, onPress: () =\u003e console.log(\"Share!\"), showAsAction: 'ifRoom' },\n                         { icon: \u003cIonicons name=\"md-beer\" size={28} color=\"#000000\" /\u003e, title: 'Give the man a beer!', onPress: () =\u003e console.log('Sure! He will get his beer!'), showAsAction: 'never' },\n                         { icon: \u003cIonicons name=\"md-bowtie\" size={28} color=\"#000000\" /\u003e, title: 'Bowtie?', onPress: () =\u003e console.log('Bowties are cool!'), showAsAction: 'never' }]} /\u003e : null}\n\n{Platform.OS === \"android\" ?\n  \u003cSimpleHeader title=\"Hello World!\"\n                color=\"#FFFFFF\"\n                backgroundColor=\"#F47983\"\n                leftButton={{ icon: \u003cIonicons name=\"md-menu\" size={28} color=\"#FFFFFF\" /\u003e, onPress: () =\u003e console.log('Menu') }}\n                rightButtons={[{ icon: \u003cIonicons name=\"md-funnel\" size={28} color=\"#FFFFFF\" /\u003e, onPress: () =\u003e console.log(\"Filter\"), showAsAction: 'ifRoom' },\n                              { icon: \u003cIonicons name=\"md-share\" size={28} color=\"#FFFFFF\" /\u003e, onPress: () =\u003e console.log(\"Share!\"), showAsAction: 'ifRoom' },\n                              { icon: \u003cIonicons name=\"md-beer\" size={24} color=\"#000000\" /\u003e, title: 'Give the man a beer!', onPress: () =\u003e console.log('Sure! He will get his beer!'), showAsAction: 'never' },\n                              { icon: \u003cIonicons name=\"md-bowtie\" size={24} color=\"#000000\" /\u003e, title: 'Bowtie?', onPress: () =\u003e console.log('Bowties are cool!'), showAsAction: 'never' }]} /\u003e : null}\n```\n\nFor `zIndex` is not supported on Android, always position Android headers below all the rest of the Component code in order for it to show on top of it all.\nAlso, remember all these are absolutely positioned, just in case.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrnkr%2Freact-native-expo-headers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrnkr%2Freact-native-expo-headers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrnkr%2Freact-native-expo-headers/lists"}