{"id":18815196,"url":"https://github.com/just1and0/react-native-header-types","last_synced_at":"2025-04-13T21:42:51.436Z","repository":{"id":57337382,"uuid":"182436800","full_name":"just1and0/react-native-header-types","owner":"just1and0","description":"📱😊Fully customizable Header View for React Native. ","archived":false,"fork":false,"pushed_at":"2019-12-12T12:36:43.000Z","size":7,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-24T01:22:36.001Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/just1and0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-20T17:44:02.000Z","updated_at":"2024-01-31T00:58:31.000Z","dependencies_parsed_at":"2022-09-13T02:40:56.767Z","dependency_job_id":null,"html_url":"https://github.com/just1and0/react-native-header-types","commit_stats":null,"previous_names":["just1and0/react-native-headers"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just1and0%2Freact-native-header-types","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just1and0%2Freact-native-header-types/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just1and0%2Freact-native-header-types/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just1and0%2Freact-native-header-types/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/just1and0","download_url":"https://codeload.github.com/just1and0/react-native-header-types/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248788867,"owners_count":21161726,"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":[],"created_at":"2024-11-07T23:48:02.955Z","updated_at":"2025-04-13T21:42:51.407Z","avatar_url":"https://github.com/just1and0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-headers\n[![NPM](https://nodei.co/npm/react-native-header-types.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-native-header-types/)\n\n - Fully customizable Header View for React Native.\n \n \n## Installation\n\n```sh\n$ npm install react-native-header-types\n\nor\n\n$ yarn add react-native-header-types\n```\n\n\n## Demo\n ![HeaderView](https://lh3.googleusercontent.com/R1_RDmuVhyfPZE_HiR2NL7iBzMRdi4g5TMSBvlXCYjgUEgLzJWZFAmmKtPpe3DlkltN8KMNVh5LvNQ \"HeaderView\") \n \u003e  HeaderView\n\n\n\n ![Progress Header](https://lh3.googleusercontent.com/46un_f9Ugios0HBrMSwEy3B3KPXyVD3o8HwMgzaFpSYcnTOhoj9xPgh1na2KnNY1Ad_YjRfK6d7Jfw)\n\n\u003e Progress Header\n\n\n\n## Example\n\n### ProgressHeader\n\n\n```sh\n import  React  from  'react';\n\nimport {StyleSheet, Text, View, TouchableOpacity } from  'react-native';\nimport { ProgressHeader } from  'react-native-header-types'; \n \n  \nclass  Index  extends  React.Component {\n\nconstructor(props) {\n\t super(props);\n\t this.state  = {\n\t\t isLoading:true,\n\t\t modalVisible:  false,\n\t};\n }\n\n\trender() {\n\t\t return (\n\t\t\t\u003cView  style={styles.container}\u003e\n\t\t\t\t \u003cProgressHeader\n\t\t\t\t\theaderBackgroundColor=\"transparent\"\n\t\t\t\t\theaderTitle=\"ProgressBar\"\n\t\t\t\t\theaderTitleColor=\"#5DB482\"\n\t\t\t\t\tcurrentprogress=\"1\"\n\t\t\t\t\ttotalProgress=\"5\"\n\t\t\t\t\tprogressBottomBarColor=\"#5DB482\"\n\t\t\t\t\tprogressInactiveColor=\"#F8F8F8\"\n\t\t\t\t\tprogressActiveColor=\"#5DB482\"\n\t\t\t\t\tshowHeaderTitle={false}/\u003e\n\n\t\t\t\t\u003c/View\u003e\n\t\t\t);\n\t}\n\n}\n\n \nconst  styles  =  StyleSheet.create({\n\tcontainer:{\n\tflex:  1,\n\tbackgroundColor:'#f5f5f5',\n\t},\n});\n \n```\n\n###  API Usage\n|Property| Type | Required | Description | Default |\n|--|--|--|--|--|\n|headerBackgroundColor| string | no | Background color of Header | null |\n|headerTitle| string | no | Title of Header | Default |\n|headerTitleColor| string | no | Header Title color | null |\n|currentprogress| number | yes | Current progress of view | null |\n|totalProgress| number | yes | Total amount of view expected  | null |\n|progressBottomBarColor| string | no | color of progress bar bottom color | null |\n|progressInactiveColor| string | no | Inactive progress bar color | null |\n|progressActiveColor| string| no | active progress bar color | null |\n|showHeaderTitle| boolean| no | show or hide header content| true |\n \n\n\n### HeaderView\n\n\n```sh\n import  React  from  'react';\n\nimport {StyleSheet, Text, View, TouchableOpacity } from  'react-native';\nimport { HeaderView } from  'react-native-header-types';\nimport  LottieView  from  'lottie-react-native';\n \n  \nclass  Index  extends  React.Component {\n\nconstructor(props) {\n\t super(props);\n\t this.state  = {\n\t\t isLoading:true,\n\t\t modalVisible:  false,\n\t};\n }\n\n\trender() {\n\t\t return (\n\t\t\t\u003cView  style={styles.container}\u003e\n\t\t\t\t\u003cHeaderView \n\t\t\t\t\theaderBackgroundColor=\"#8E8E93\"\n\t\t\t\t\theaderTitle=\"Header\"\n\t\t\t\t\theaderTitleColor=\"white\"\n\t\t\t\t\ttitleCenter=\"false\"\n\t\t\t\t\trightComponent={\u003cTouchableOpacity onPress={()=\u003ethis.hello()} \u003e\u003cText\u003eright gey\u003c/Text\u003e\u003c/TouchableOpacity\u003e}\n\t\t\t\t\tleftComponent={\u003cTouchableOpacity onPress={()=\u003ethis.hello()} \u003e\n\t\t\t\t\t\u003cLottieView source={require('./../../../assets/lottiefiles/menu.json')} autoPlay style={{width:60}} /\u003e\u003c/TouchableOpacity\u003e}\n\t\t\t\t\t/\u003e\n\t\t\t \u003c/View\u003e\n\t\t\t);\n\t}\n\n}\n\n \nconst  styles  =  StyleSheet.create({\n\tcontainer:{\n\tflex:  1,\n\tbackgroundColor:'#f5f5f5',\n\t},\n});\n \n```\n\n###  API Usage\n|Property| Type | Required | Description | Default |\n|--|--|--|--|--|\n|headerBackgroundColor| string | no | Background color of Header | null |\n|headerTitle| string | no | Title of Header | null |\n|headerTitleColor| string | no | Header Title color | Default |\n|titleCenter| boolean | no | align Header title center | false |\n|rightComponent| component | no | Right component | null |\n|leftComponent| component | no | left component | null |\n \n \n## don't forget to star, like and share :)\n\n## Licensing\nThis project is licensed under MIT license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust1and0%2Freact-native-header-types","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjust1and0%2Freact-native-header-types","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust1and0%2Freact-native-header-types/lists"}