1
- <img alt =" React Native Bottom Bar " src =" https://github.com/WrathChaos/react-native-header-view/blob/master/ assets/Screenshots /logo.png" width =" 1050 " />
1
+ <img alt =" React Native Bottom Bar " src =" assets/logo.png " width =" 1050 " />
2
2
3
3
[ ![ Battle Tested ✅] ( https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-button )
4
4
5
- [ ![ Fully customizable Header View with multiple design options for React Native. ] ( https://img.shields.io/badge/-Fully%20customizable %20Header%20View%20with%20multiple%20design%20options% 20for%20React%20Native.-lightgrey ?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-header-view )
5
+ [ ![ Collection of Header Views for React Native] ( https://img.shields.io/badge/-Collection%20of %20Header%20Views% 20for%20React%20Native-orange ?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-header-view )
6
6
7
7
[ ![ npm version] ( https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg?style=for-the-badge )] ( https://www.npmjs.com/package/@freakycoder/react-native-header-view )
8
8
[ ![ npm] ( https://img.shields.io/npm/dt/@freakycoder/react-native-header-view.svg?style=for-the-badge )] ( https://www.npmjs.org/package/@freakycoder/react-native-header-view )
9
9
![ Platform - Android and iOS] ( https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge )
10
10
[ ![ License: MIT] ( https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge )] ( https://opensource.org/licenses/MIT )
11
11
[ ![ styled with prettier] ( https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge )] ( https://github.com/prettier/prettier )
12
12
13
- <p align =" center " >
14
- <img alt =" React Native Header View " src =" assets/Screenshots/ss3.png " width =" 49.7% " />
15
- <img alt =" React Native Header View " src =" assets/Screenshots/ss2.png " width =" 49.7% " />
16
- </p >
13
+ <table >
14
+ <tr >
15
+ <td>
16
+ <b>Apple Header</b>
17
+ </td>
18
+ <td>
19
+ <b>Gorgeous Header</b>
20
+ </td>
21
+ </tr >
22
+ <tr >
23
+ <td align="center">
24
+ <img alt="React Native Apple Header View" src="assets/Screenshots/apple-header-view.png" width="686px"/>
25
+ </td>
26
+ <td align="center">
27
+ <img alt="React Native Gorgeous Header View" src="assets/Screenshots/gorgeous-header-view.png" width="686px" />
28
+ </td>
29
+ </tr >
30
+
31
+ </table >
32
+
33
+ <table >
34
+ <tr >
35
+ <td>
36
+ <b>Classic Header</b>
37
+ </td>
38
+ <td>
39
+ <b>Modern Header</b>
40
+ </td>
41
+ </tr >
42
+ <tr >
43
+ <td align="center">
44
+ <img alt="React Native Classic Header View" src="assets/Screenshots/classic-header-view.png" width="686px" />
45
+ </td>
46
+ <td align="center">
47
+ <img alt="React Native Modern Header View" src="assets/Screenshots/modern-header-view2.png" width="686px" />
48
+ </td>
49
+ </tr >
50
+ </table >
51
+
52
+ # Finally Version 1.0.0 🥳
53
+
54
+ Finally this library got the version ** 1.0.0** . More than ** 5k downloads** and it is separated by each header view. This library contains the collection of each header view. If you do not need to use them all, you can reach and install header views on its own repository.
17
55
18
- <p align =" center " >
19
- <img alt =" React Native Header View " src =" assets/Screenshots/ss1.png " width =" 49.7% " />
20
- </p >
56
+ # Options
21
57
22
- <p align =" center " >
23
- <b >Gorgeous Header View</b >
24
- </p >
25
- <p align =" center " >
26
- <img alt =" React Native Header View " src =" assets/Screenshots/gorgeous-header-view.png " width =" 70% " />
27
- </p >
58
+ - [ GorgeousHeader] ( https://github.com/WrathChaos/react-native-gorgeous-header )
59
+ - [ AppleHeader] ( https://github.com/WrathChaos/react-native-apple-header )
60
+ - [ ModernHeader] ( https://github.com/WrathChaos/react-native-modern-header )
61
+ - [ ClassicHeader] ( https://github.com/WrathChaos/react-native-classic-header )
28
62
29
63
## Installation
30
64
65
+ <b ><i >You can use each Header View separately if you do not want to use the collection.</i ></b >
66
+
31
67
Add the dependency:
32
68
33
- ### Pure React Native:
69
+ ### Pure React Native
34
70
35
- ``` ruby
71
+ ``` bash
36
72
npm i @freakycoder/react-native-header-view
37
73
```
38
74
39
75
## Peer Dependencies
40
76
41
77
##### IMPORTANT! You need install them.
42
78
79
+ ``` bash
80
+ " react-native-gorgeous-header" : " >= 0.1.0" ,
81
+ " react-native-classic-header" : " >= 0.1.0" ,
82
+ " react-native-modern-header" : " >= 0.1.0" ,
83
+ " react-native-apple-header" : " >= 0.1.0"
43
84
```
44
- "react": ">= 16.x",
45
- "react-native": ">= 0.55.x",
46
- "react-native-vector-icons": ">= 6.6.0",
47
- "react-native-dynamic-vector-icons": ">= x.x.x"
48
- "@freakycoder/react-native-helpers": ">= 0.0.2",
49
- ```
50
-
51
- # Options
52
-
53
- - GorgeousHeader
54
- - AppleHeader
55
- - ModernHeader
56
- - ClassicHeader
57
85
58
86
# Usage
59
87
@@ -81,7 +109,7 @@ import { ModernHeader } from "@freakycoder/react-native-header-view";
81
109
< ModernHeader / > ;
82
110
```
83
111
84
- #### Advanced Usage
112
+ ### Advanced Usage
85
113
86
114
``` jsx
87
115
import { ModernHeader } from " @freakycoder/react-native-header-view" ;
@@ -100,7 +128,7 @@ import { ModernHeader } from "@freakycoder/react-native-header-view";
100
128
101
129
## Classic Header Usage
102
130
103
- #### Basic Usage
131
+ ### Basic Usage
104
132
105
133
``` jsx
106
134
import { ClassicHeader } from " @freakycoder/react-native-header-view" ;
0 commit comments