|
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="https://github.com/WrathChaos/react-native-header-view/blob/master/assets/Screenshots/logo.png" width="1050"/> |
2 | 2 |
|
3 | 3 | Fully customizable Header View for React Native.
|
4 | 4 |
|
@@ -71,115 +71,6 @@ npm i @freakycoder/react-native-header-view
|
71 | 71 | />
|
72 | 72 | ```
|
73 | 73 |
|
74 |
| -### Example Application |
75 |
| - |
76 |
| -- [check the code](examples/App.js), and yes! :) all of the images, screenshots are directly taken |
77 |
| - from the this example. Of course, you can simply clone the project and run the example on your own environment. |
78 |
| - |
79 |
| -### Configuration - Props |
80 |
| - |
81 |
| - |
82 |
| -| Property | Type | Default | Description | |
83 |
| -| --------------------- | :-------: | :--------: | ------------------------------------------------------------------- | |
84 |
| -| height | number | 50 | use this to change the header's height | |
85 |
| -| width | number | 100% | use this to change the header's width | |
86 |
| -| hitSlops | object | object: 30 | use this to change the header's left and right components' hitSlots | |
87 |
| -| bottomStick | boolean | false | stick the header to bottom side | |
88 |
| -| headerTitle | string | "" | use this to set header's title | |
89 |
| -| backgroundColor | color | #ffffff | use this to change the header's background color | |
90 |
| -| leftComponent | component | Icon | set the left component | |
91 |
| -| leftComponentStyle | style | style | set the left component's style | |
92 |
| -| leftComponentDisable | boolean | false | disable the left component | |
93 |
| -| leftComponentOnPress | function | null | set the left component's onPress function | |
94 |
| -| rightComponent | component | Icon | set the right component | |
95 |
| -| rightComponentStyle | style | style | set the right component's style | |
96 |
| -| rightComponentDisable | boolean | false | disable the right component | |
97 |
| -| rightComponentOnPress | function | null | set the right component's onPress function | |
98 |
| -| centerComponent | component | Icon | set the center component | |
99 |
| -| centerComponentStyle | style | style | set the center component's style | |
100 |
| - |
101 |
| -# Change Log |
102 |
| - |
103 |
| -## [0.2.0](https://github.com/wrathchaos/react-native-header-view/tree/0.2.0) (2019-02-23) |
104 |
| - |
105 |
| -## Author |
106 |
| - |
107 |
| -FreakyCoder, kurayogun@gmail.com |
108 |
| - |
109 |
| -## License |
110 |
| - |
111 |
| -React Native Header View Library is available under the MIT license. See the LICENSE file for more info. |
112 |
| -](<img alt="React Native Header View" src="https://github.com/WrathChaos/react-native-header-view/blob/master/assets/Screenshots/logo.png" width="1050"/> |
113 |
| - |
114 |
| -Fully customizable Header View for React Native. |
115 |
| - |
116 |
| -[](https://www.npmjs.com/package/@freakycoder/react-native-header-view) |
117 |
| -[](https://www.npmjs.com/package/@freakycoder/react-native-header-view) |
118 |
| -[](https://opensource.org/licenses/MIT) |
119 |
| - |
120 |
| -<p align="left"> |
121 |
| -<img alt="React Native Header View" src="https://github.com/WrathChaos/react-native-header-view/blob/master/assets/Screenshots/example.png" width="49.7%"/> |
122 |
| -</p> |
123 |
| - |
124 |
| -## Installation |
125 |
| - |
126 |
| -Add the dependency: |
127 |
| - |
128 |
| -### Pure React Native: |
129 |
| - |
130 |
| -```ruby |
131 |
| -npm i @freakycoder/react-native-header-view |
132 |
| -``` |
133 |
| - |
134 |
| -## Peer Dependencies |
135 |
| - |
136 |
| -##### IMPORTANT! You need install them. |
137 |
| - |
138 |
| -``` |
139 |
| -"react": ">= 16.x", |
140 |
| -"react-native": ">= 0.55.x", |
141 |
| -"react-native-iphone-x-helper": ">= 1.2.x", |
142 |
| -"react-native-dynamic-vector-icons": ">= x.x.x" |
143 |
| -``` |
144 |
| - |
145 |
| -## Basic Usage |
146 |
| - |
147 |
| -```ruby |
148 |
| -<Header |
149 |
| - headerTitle="Header" |
150 |
| - rightComponentDisable |
151 |
| - leftComponentOnPress={() => {}} |
152 |
| - hitSlops={ |
153 |
| - top: 30, |
154 |
| - bottom: 30, |
155 |
| - left: 30, |
156 |
| - right: 30 |
157 |
| - } |
158 |
| -/> |
159 |
| -``` |
160 |
| - |
161 |
| - |
162 |
| -## Advanced Usage |
163 |
| - |
164 |
| -```ruby |
165 |
| -<Header |
166 |
| - statusBarHidden |
167 |
| - headerTitle="Header" |
168 |
| - leftComponent={ |
169 |
| - <TouchableOpacity |
170 |
| - onPress={() => {}}> |
171 |
| - <Icon name="ios-arrow-back" type="Ionicons" size={30} color="blue" /> |
172 |
| - </TouchableOpacity> |
173 |
| - } |
174 |
| - hideRightComponent |
175 |
| -/> |
176 |
| -``` |
177 |
| - |
178 |
| -### Example Application |
179 |
| - |
180 |
| -- [check the code](examples/App.js), and yes! :) all of the images, screenshots are directly taken |
181 |
| - from the this example. Of course, you can simply clone the project and run the example on your own environment. |
182 |
| - |
183 | 74 | ### Configuration - Props
|
184 | 75 |
|
185 | 76 |
|
@@ -216,4 +107,3 @@ FreakyCoder, kurayogun@gmail.com
|
216 | 107 | ## License
|
217 | 108 |
|
218 | 109 | React Native Header View Library is available under the MIT license. See the LICENSE file for more info.
|
219 |
| -) |
0 commit comments