Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/turker0/header
A header library for react-native. Uses power of ReAnimated 2.
https://github.com/turker0/header
animation header mobile react-native reanimated2
Last synced: about 2 months ago
JSON representation
A header library for react-native. Uses power of ReAnimated 2.
- Host: GitHub
- URL: https://github.com/turker0/header
- Owner: turker0
- License: mit
- Created: 2021-11-17T21:07:48.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-19T14:24:47.000Z (almost 3 years ago)
- Last Synced: 2024-07-07T23:48:55.938Z (3 months ago)
- Topics: animation, header, mobile, react-native, reanimated2
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@oguzturker8/header
- Size: 1.56 MB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# @oguzturker8/header
A header library for react-native. Uses power of reanimated2.
## Installation
```sh
npm install @oguzturker8/header
```
## Usage
### Basic Header Usage
##### Navigation.tsx
```js
import Header from '@oguzturker8/header';
// ...
// ....
// ...
,
}}
/>
// ...
;
// ...
```
### Header Scroll Animation
##### Navigation.tsx
```js
import Header from '@oguzturker8/header';
// ...
// ....
// ...
(
//
// ),
// }}
/>
// ...
;
// ...
```
##### Screen4.tsx
```js
import {
AnimatedScrollView,
Header,
useHeaderAnimation,
} from '@oguzturker8/header';
function Screen4({ navigation }: screenNavigation) {
const { scrollOffset, scrollHandler } = useHeaderAnimation();
React.useLayoutEffect(() => {
navigation.setOptions({
header: (props) => (
),
});
}, [navigation]);
return (
Screen4
navigation.popToTop()} />
Screen4
{Array.from({ length: 100 }, (_, i) => (
{`${i + 1}. Text`}
))}
);
}
```
### Properties
#### Header
| Prop | Description | Type |
| :-------: | :--------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------: |
| style | Header container style prop.
Includes 5 parts
leftStyle
rightStyle
centerStyle
wrapperStyle
titleStyle | leftStyle?: ViewStyle
rightStyle?: ViewStyle
centerStyle?: ViewStyle
wrapperStyle?: ViewStyle
titleStyle?: TextStyle |
| title | Header title text | string |
| type | Decides left and right parts' types | LeftType = 'back' - 'close'
RightType = 'back' - 'close' |
| callback | Parts' onPress callbacks | onLeft?: () => any
onRight?: () => any
onCenter?: () => any |
| size | Parts' text sizes | left?: number
right?: number
center?: number |
| animation | Header animations | Described below section |
#### Animation
| Animations | Description | Type |
| :--------: | :--------------------------------------------------------------------------------: | :----------------------------------------------: |
| background | Header backgroundColor interpolation animation based on ScrollView's scrollOffset. | colorRange: string[]
slidingRange: string[] |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT