| Apple Header | Gorgeous Header |
| Elegant Header | Modern Header |
| Profile Header | Classic 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, kurayogun@gmail.com
License
React Native Header View Library is available under the MIT license. See the LICENSE file for more info.
-
Android原生代码 CommonConstants.java package com.ifoxsmartfactory; import android.os.Environment; import java.io.File; public class CommonConstants { private static final String DEMO_PATH = Environ
-
直接上代码 import React, { Component } from 'react'; import { Text, View, StyleSheet, TouchableOpacity, Image, } from 'react-native'; const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
-
一、简介 第三方组件库react-native-tab-navigator是用于在场景之间切换的选项卡栏，用JS编写以提供跨平台支持。它适用于iOS和Android。该组件与React Native 0.16和更高版本兼容。外观与本地导航器略有不同，但在某些方面会更好。也是纯JavaScript。 注：这是与TabNavigation不一样的，使用了ExNavigation，API和实现方式略有不
-
在开讲前先介绍另外一种方法也可以进行代码的热更新，利用codepush大家可以参考这篇文章： 博客地址 快速入门-准备工作 首先你应该有一个基于React Native开发的应用，我们把具有package.json的目录叫做你的”应用根目录”。 如果你还没有初始化应用，请参阅开始使用React Native。 所以我们也假设你已经拥有了开发React Native应用的一切环境，包括Node.js
-
FlatList是ReactNative中一个常用控件，类似Android中的ListView，实质是基于<VirtulizedList>组件的封装。一个高性能的，用于渲染的列表组件,常见属性如下: data - 数据源 renderItem - 列表呈现方式 extraData - 用于告诉列表重新渲染，因为它实现了PureComponent，但是props浅拷贝是不会重新渲
-
react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android)，特别是在从0到1的项目搭建初期，至少可以为开发者减少30%的工作量。 react-native-easy-app 主要做了这些工作： 对AsyncStorage进行封装，开发者只需几行代码即可实现一个持久化数据管理器。 对fetch进行封装，使得开
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
百度移动统计SDK支持使用react native框架的H5页面统计，封装好的插件已经在github上开源，相关用法具体请参考：https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。
-
The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t
-
React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Ima
-
本文向大家介绍react-native setState，包括了react-native setState的使用技巧和注意事项，需要的朋友参考一下 示例 要在应用程序中更改视图，可以使用setState-这将重新渲染您的组件及其任何子组件。setState在新状态和先前状态之间执行浅表合并，并触发组件的重新呈现。 setState 接受键值对象或返回键值对象的函数 键值对象 功能 使用函数对于基于
-
诸葛io移动统计支持React Native插件，以下为集成方法。 1. 环境准备 1.1. iOS环境 iOS 8.0+ 代码支持iOS8.0的系统 pod 1.0+ iOS系统的集成依赖于cocoaPod工具 1.2. Android环境 Android SDK 16+ 代码支持Android 16+ 1.3. React Native环境 react-native 0.50+ react-n