WrathChaos / React Native Header View
Licence: mit
Fully customizable Header View with multiple design options for React Native.
Stars: ✭ 221
Programming Languages
javascript
184084 projects - #8 most used programming language
java
68154 projects - #9 most used programming language
Projects that are alternatives of or similar to React Native Header View
Open Source Xamarin Apps
📱 Collaborative List of Open Source Xamarin Apps
Stars: ✭ 318 (+43.89%)
Mutual labels: google, apple, mobile
Ngx Auth Firebaseui
Angular Material UI component for firebase authentication
Stars: ✭ 518 (+134.39%)
Mutual labels: google, apple
Mobly
E2E test framework for tests with complex environment requirements.
Stars: ✭ 424 (+91.86%)
Mutual labels: google, mobile
Daily Coding Problem
Series of the problem 💯 and solution ✅ asked by Daily Coding problem👨🎓 website.
Stars: ✭ 90 (-59.28%)
Mutual labels: google, apple
react-native-header-search-bar
Fully customizable header search bar for React Native
Stars: ✭ 101 (-54.3%)
Mutual labels: apple, header
React Native Streetview
React Native Google's Panorama/StreetView component for iOS and Android.
Stars: ✭ 79 (-64.25%)
Mutual labels: google, mobile
Appstoreconnect Cli
An easy to use command-line tool for interacting with the Apple AppStore Connect API
Stars: ✭ 110 (-50.23%)
Mutual labels: apple, mobile
Laravel Amp
Package that helps you set up AMP (Accelerated Mobile Pages) using Laravel
Stars: ✭ 106 (-52.04%)
Mutual labels: google, mobile
Ampify
Convert your HTML to Google AMP (Accelerated Mobile Pages)
Stars: ✭ 104 (-52.94%)
Mutual labels: google, mobile
Contacttracing Framework Interface
Objective-C header and synthesized Swift interface for Apple & Google's Contact Tracing Framework
Stars: ✭ 59 (-73.3%)
Mutual labels: google, apple
Covid19 mobility
COVID-19 Mobility Data Aggregator. Scraper of Google, Apple, Waze and TomTom COVID-19 Mobility Reports🚶🚘🚉
Stars: ✭ 156 (-29.41%)
Mutual labels: google, apple
Stompclientlib
Simple STOMP Client library, Swift 3 and 4, 4.2, 5 compatible
Stars: ✭ 99 (-55.2%)
Mutual labels: apple, mobile
Combinefirebase
Combine wrapper on Google's iOS Firebase library.
Stars: ✭ 126 (-42.99%)
Mutual labels: google, apple
Magicalexoplayer
The Easiest Way To Play/Stream Video And Audio Using Google ExoPlayer In Your Android Application
Stars: ✭ 171 (-22.62%)
Mutual labels: google, mobile
Shrine Materialdesign2
implementation of Material Design 2 Shrine project
Stars: ✭ 215 (-2.71%)
Mutual labels: google
Search Engine Parser
Lightweight package to query popular search engines and scrape for result titles, links and descriptions
Stars: ✭ 216 (-2.26%)
Mutual labels: google
Periphery
A tool to identify unused code in Swift projects.
Stars: ✭ 3,017 (+1265.16%)
Mutual labels: apple
Bit Preserve
Project for capturing vintage, classic, aka old computer schematics in KiCad.
Stars: ✭ 219 (-0.9%)
Mutual labels: apple
Apple Header | Gorgeous Header |
Classic Header | Modern Header |
Profile Header |
Finally Version 1.0.0 🥳
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.
Options
Installation
You can use each Header View separately if you do not want to use the collection.
Add the dependency:
Pure React Native
npm i @freakycoder/react-native-header-view
Peer Dependencies
IMPORTANT! You need install them.
"react-native-gorgeous-header": ">= 0.1.0",
"react-native-classic-header": ">= 0.1.0",
"react-native-modern-header": ">= 0.1.0",
"react-native-apple-header": ">= 0.1.0",
"react-native-profile-header": ">= 0.1.0",
Usage
Gorgeous Header Usage
import { GorgeousHeader } from "@freakycoder/react-native-header-view";
<GorgeousHeader onChangeText={(text) => console.log(text)} />;
Apple Header Usage
import { AppleHeader } from "@freakycoder/react-native-header-view";
<AppleHeader />;
Modern Header Usage
import { ModernHeader } from "@freakycoder/react-native-header-view";
<ModernHeader />;
Advanced Usage
import { ModernHeader } from "@freakycoder/react-native-header-view";
<ModernHeader
text="Profile"
rightIconType="Ionicons"
backgroundColor="#fdfdfd"
rightIconName="ios-settings"
rightIconColor={colors.light.primary}
leftIconComponent={your - icon - component}
rightIconComponent={your - icon - component}
leftIconOnPress={() => NavigationService.back()}
/>;
Classic Header Usage
Basic Usage
import { ClassicHeader } from "@freakycoder/react-native-header-view";
<ClassicHeader
headerTitle="Header"
rightComponentDisable
leftComponentOnPress={() => {}}
hitSlops={
top: 30,
bottom: 30,
left: 30,
right: 30
}
/>
Advanced Custom Usage
import { ClassicHeader } from "@freakycoder/react-native-header-view";
<ClassicHeader
headerTitle="Header"
leftComponent={
<TouchableOpacity onPress={() => {}}>
<Icon name="ios-arrow-back" type="Ionicons" size={30} color="blue" />
</TouchableOpacity>
}
rightComponent={
<TouchableOpacity onPress={() => {}}>
<Icon name="github" type="AntDesign" size={30} color="purple" />
</TouchableOpacity>
}
/>;
Profile Header Usage
import { ProfileHeader } from "@freakycoder/react-native-header-view";
<ProfileHeader />;
Configuration - Props
Gorgeous Header Props
Property | Type | Default | Description |
---|---|---|---|
title | string | Order | change the title |
subtitle | string | Healthy food can keep you fit. | change the subtitle |
searchIcon | asset | default | set your own icon for the search one |
titleTextStyle | style | default | set your own style for title text |
subtitleTextStyle | style | default | set your own style for subtitle text |
searchBarStyle | style | default | set your own style for search text input container |
searchInputStyle | style | default | set your own style for search text input |
menuImageStyle | style | default | set your own style for hamburger menu image |
menuImageSource | asset | default | set your own image instead of default hamburger menu image |
menuImageOnPress | function | undefined | use this to set your own function for pressing the hamburger menu image |
profileImageStyle | style | default | set your own style for profile image |
profileImageSource | asset | undefined | use this to set your own image for profile image |
profileImageOnPress | function | undefined | use this to set your own function for pressing the profile image |
Apple Header Props
Property | Type | Default | Description |
---|---|---|---|
dateTitle | string | MONDAY, 27 NOVEMBER | set your own string instead of date title |
largeTitle | string | For You | set your own large title |
imageSource | image | image | set your own image |
onPress | function | null | use this to set onPress functionality |
backgroundColor | color | transparent | use this to change the main container's background color |
borderColor | color | #EFEFF4 | use this to change the bottom border color |
dateTitleFontColor | color | #8E8E93 | use this to change the date title's font color |
dateTitleFontSize | number | 13 | use this to set the date title's font size |
dateTitleFontWeight | string | "600" | use this to set the date title's font weight |
largeTitleFontColor | color | default color | use this to change the large title's font color |
largeTitleFontSize | number | 34 | use this to set the large title's font size |
largeTitleFontWeight | string | "bold" | use this to set the large title's font weight |
dateTitleStyle | style | default style | use this to set your own style for date title (DO NOT RECOMMENDED!) |
largeTitleStyle | style | default style | use this to set your own style for large title (DO NOT RECOMMENDED!) |
containerStyle | style | default style | use this to set your own style for whole container (DO NOT RECOMMENDED!) |
avatarStyle | style | default style | use this to set your own style for avatar style (DO NOT FORGET TO ADD BORDER-RADIUS!) |
Modern Header Props
Property | Type | Default | Description |
---|---|---|---|
height | string OR number | 70 | change the height of the header |
width | string OR number | "100%" | change the width of the header |
backgroundColor | string | #fff | change the background color of the header |
styles | styles | styles | use this to change main style of the header |
text | string | Header Title | set the header's title |
textStyle | style | style | set your own style for the header's text |
left | number | 16 | use this to set left icon's align |
right | number | 16 | use this to set right icon's align |
leftIconName | string | ios-arrow-back | change the left icon depends on the React Native Vector Icons |
leftIconType | string | Ionicons | change the left icon's type |
leftIconSize | number | 25 | change the left icon's size |
leftIconColor | color | #bbbabe | change the left icon's color |
rightIconName | string | heart | change the right icon depends on the React Native Vector Icons |
rightIconType | string | Entypo | change the right icon's type |
rightIconSize | number | 25 | change the right icon's size |
rightIconColor | color | #23c4c1 | change the right icon's color |
leftIconComponent | component | Icon | use your own component instead of the integrated Icon component |
rightIconComponent | component | Icon | use your own component instead of the integrated Icon component |
leftIconOnPress | function | function | set the function for left icon's onPress |
rightIconOnPress | function | function | set the function for right icon's onPress |
leftDisable | boolean | false | disable the left icon component |
rightDisable | boolean | false | disable the right icon component |
Classic Header Props
Property | Type | Default | Description |
---|---|---|---|
styles | styles | styles | use this to change main style of the header |
height | number | 50 | use this to change the header's height |
width | number | 100% | use this to change the header's width |
statusBarHidden | boolean | false | use this to let Header Component itself re-arrange depends on the status bar |
hitSlops | object | object: 30 | use this to change the header's left and right components' hitSlots |
bottomStick | boolean | false | stick the header to bottom side |
headerTitle | string | "" | use this to set header's title |
backgroundColor | color | #ffffff | use this to change the header's background color |
leftComponent | component | Icon | set the left component |
leftComponentStyle | style | style | set the left component's style |
leftComponentDisable | boolean | false | disable the left component |
leftComponentOnPress | function | null | set the left component's onPress function |
rightComponent | component | Icon | set the right component |
rightComponentStyle | style | style | set the right component's style |
rightComponentDisable | boolean | false | disable the right component |
rightComponentOnPress | function | null | set the right component's onPress function |
centerComponent | component | Icon | set the center component |
centerComponentStyle | style | style | set the center component's style |
ProfileHeader Props
Property | Type | Default | Description |
---|---|---|---|
onLeftButtonPress | function | undefined | set the logic for left aligned button |
onProfilePicPress | function | undefined | set the logic for profile picture |
onFirstIconPress | function | undefined | set the logic for first icon button |
onSecondIconPress | function | undefined | set the logic for second icon button |
onThirdIconPress | function | undefined | set the logic for third icon button |
profileImageSource | image | default | change the profile image source |
leftAlignedButtonImageSource | image | default | change the left aligned button image source |
firstIconImageSource | image | default | change the first icon image source |
secondIconImageSource | image | default | change the second icon image source |
thirdIconImageSource | image | default | change the third icon image source |
titleText | string | undefined | change the title text |
height | number | 50 | change the profile header's height |
backgroundColor | color | #fff | change the profile header's background color |
leftButtonComponent | component | Image | set your own component instead of default left aligned Button Image |
disableFirstIcon | boolean | false | disable the first icon |
disableSecondIcon | boolean | false | disable the second icon |
disableThirdIcon | boolean | false | disable the third icon |
disableLeftAlignedButton | boolean | false | disable the left aligned icon |
ImageComponent | component | Image | set your own Image component instead of default react native Image such as; FastImage
|
Change Log
0.4.13 (2019-11-22)
0.4.11 (2019-11-13)
0.4.10 (2019-11-13)
Implemented enhancements:
- Apple header Bg colour options #6
0.4.7 (2019-10-04)
0.4.6 (2019-10-04)
Closed issues:
- Request to Add product in Start React #5
Merged pull requests:
- Bump eslint-utils from 1.4.0 to 1.4.2 in /example #4 (dependabot[bot])
0.4.5 (2019-08-17)
0.3.0 (2019-08-12)
Merged pull requests:
- Bump lodash from 4.17.11 to 4.17.14 in /examples #3 (dependabot[bot])
- Bump handlebars from 4.1.0 to 4.1.2 in /examples #2 (dependabot[bot])
- Bump js-yaml from 3.12.1 to 3.13.1 in /examples #1 (dependabot[bot])
0.2.61 (2019-03-19)
0.2.6 (2019-03-05)
0.2.5 (2019-03-05)
0.2.4 (2019-03-05)
0.2.3 (2019-03-05)
0.2.2 (2019-03-05)
0.2.0 (2019-02-23)
* This Change Log was automatically generated by github_changelog_generator
Credits
Photo by Joanna Nix on Unsplash
Author
FreakyCoder, [email protected]
License
React Native Header View Library is available under the MIT license. See the LICENSE file for more info.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].