{"id":13679127,"url":"https://github.com/turker0/header","last_synced_at":"2025-04-29T16:31:13.091Z","repository":{"id":46023209,"uuid":"429201117","full_name":"turker0/header","owner":"turker0","description":"A header library for react-native. Uses power of ReAnimated 2.","archived":false,"fork":false,"pushed_at":"2021-11-19T14:24:47.000Z","size":1631,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-11T21:38:19.861Z","etag":null,"topics":["animation","header","mobile","react-native","reanimated2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@oguzturker8/header","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/turker0.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-11-17T21:07:48.000Z","updated_at":"2023-09-19T11:55:43.000Z","dependencies_parsed_at":"2022-08-28T09:31:35.025Z","dependency_job_id":null,"html_url":"https://github.com/turker0/header","commit_stats":null,"previous_names":["oguzturker8/header"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turker0%2Fheader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turker0%2Fheader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turker0%2Fheader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turker0%2Fheader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/turker0","download_url":"https://codeload.github.com/turker0/header/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251540127,"owners_count":21605846,"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":["animation","header","mobile","react-native","reanimated2"],"created_at":"2024-08-02T13:01:02.238Z","updated_at":"2025-04-29T16:31:08.075Z","avatar_url":"https://github.com/turker0.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# @oguzturker8/header\n\nA header library for react-native. Uses power of reanimated2.\n\n## Installation\n\n```sh\nnpm install @oguzturker8/header\n```\n\n## Usage\n\n### Basic Header Usage\n\n##### Navigation.tsx\n\n```js\nimport Header from '@oguzturker8/header';\n\n// ...\n\n\u003cNavigationContainer\u003e\n  // ....\n  \u003cStack.Navigator\u003e\n    // ...\n    \u003cStack.Screen\n      name=\"Screen1\"\n      component={Screen1}\n      options={{\n        header: (props) =\u003e \u003cHeader {...props} title=\"title1337\" /\u003e,\n      }}\n    /\u003e\n    // ...\n  \u003c/Stack.Navigator\u003e\n\u003c/NavigationContainer\u003e;\n\n// ...\n```\n\n### Header Scroll Animation\n\n##### Navigation.tsx\n\n```js\nimport Header from '@oguzturker8/header';\n\n// ...\n\n\u003cNavigationContainer\u003e\n  // ....\n  \u003cStack.Navigator\u003e\n    // ...\n    \u003cStack.Screen\n      name=\"Screen4\"\n      component={Screen4}\n      //  Declare it in Screen Component\n      //  options={{\n      //    header: (props) =\u003e (\n      //      \u003cHeader {...props} title=\"Screen 04\" type={{ right: 'close' }} /\u003e\n      //    ),\n      //  }}\n    /\u003e\n    // ...\n  \u003c/Stack.Navigator\u003e\n\u003c/NavigationContainer\u003e;\n\n// ...\n```\n\n##### Screen4.tsx\n\n```js\nimport {\n  AnimatedScrollView,\n  Header,\n  useHeaderAnimation,\n} from '@oguzturker8/header';\n\nfunction Screen4({ navigation }: screenNavigation) {\n  const { scrollOffset, scrollHandler } = useHeaderAnimation();\n  React.useLayoutEffect(() =\u003e {\n    navigation.setOptions({\n      header: (props) =\u003e (\n        \u003cHeader\n          {...props}\n          title=\"Screen 04\"\n          type={{ right: 'close' }}\n          animation={{\n            animatedValue: scrollOffset,\n            background: {\n              colorRange: ['blue', 'red'],\n              slidingRange: [0, 100],\n            },\n          }}\n        /\u003e\n      ),\n    });\n  }, [navigation]);\n\n  return (\n    \u003cAnimatedScrollView onScroll={scrollHandler}\u003e\n      \u003cView style={styles.container}\u003e\n        \u003cText\u003eScreen4\u003c/Text\u003e\n        \u003cButton title=\"Reset stack\" onPress={() =\u003e navigation.popToTop()} /\u003e\n        \u003cText\u003eScreen4\u003c/Text\u003e\n        {Array.from({ length: 100 }, (_, i) =\u003e (\n          \u003cText key={i}\u003e{`${i + 1}. Text`}\u003c/Text\u003e\n        ))}\n      \u003c/View\u003e\n    \u003c/AnimatedScrollView\u003e\n  );\n}\n```\n\n### Properties\n\n#### Header\n\n|   Prop    |                                                            Description                                                             |                                                                   Type                                                                   |\n| :-------: | :--------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: |\n|   style   | Header container style prop.\u003cbr\u003eIncludes 5 parts \u003cbr\u003e leftStyle \u003cbr\u003e rightStyle \u003cbr\u003e centerStyle \u003cbr\u003e wrapperStyle \u003cbr\u003e titleStyle | leftStyle?: ViewStyle \u003cbr\u003e rightStyle?: ViewStyle \u003cbr\u003e centerStyle?: ViewStyle \u003cbr\u003e wrapperStyle?: ViewStyle \u003cbr\u003e titleStyle?: TextStyle |\n|   title   |                                                         Header title text                                                          |                                                                  string                                                                  |\n|   type    |                                                Decides left and right parts' types                                                 |                                      LeftType = 'back' - 'close' \u003cbr\u003e RightType = 'back' - 'close'                                       |\n| callback  |                                                      Parts' onPress callbacks                                                      |                                  onLeft?: () =\u003e any \u003cbr\u003e onRight?: () =\u003e any \u003cbr\u003e onCenter?: () =\u003e any                                   |\n|   size    |                                                         Parts' text sizes                                                          |                                          left?: number \u003cbr\u003e right?: number \u003cbr\u003e center?: number                                          |\n| animation |                                                         Header animations                                                          |                                                        Described below section                                                        |\n\n#### Animation\n\n| Animations |                                    Description                                     |                       Type                       |\n| :--------: | :--------------------------------------------------------------------------------: | :----------------------------------------------: |\n| background | Header backgroundColor interpolation animation based on ScrollView's scrollOffset. | colorRange: string[] \u003cbr\u003e slidingRange: string[] |\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%2Fturker0%2Fheader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fturker0%2Fheader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturker0%2Fheader/lists"}