Skip to content

Commit

Permalink
feat: version 1.0.0 is here
Browse files Browse the repository at this point in the history
  • Loading branch information
WrathChaos committed Apr 17, 2022
1 parent 133da13 commit b134365
Show file tree
Hide file tree
Showing 10 changed files with 6,590 additions and 2,075 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
124 changes: 107 additions & 17 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,122 @@
module.exports = {
root: true,
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"@react-native-community",
"airbnb-typescript",
"prettier",
"prettier/@typescript-eslint",
"prettier/react"
],
parser: "babel-eslint",
plugins: ["react", "react-native"],
ignorePatterns: [
"**/*/*.js",
"*.js",
"*.svg",
"*.json",
"*.png",
"package.json",
"package-lock.json",
],
parser: "@typescript-eslint/parser",
plugins: [
"import",
"react",
"react-native",
"prettier",
"react-hooks",
"@typescript-eslint",
"promise",
"jest",
"unused-imports",
],
env: {
jest: true,
"react-native/react-native": true
browser: true,
es2021: true,
"jest/globals": true,
"react-native/react-native": true,
},
settings: {
"import/resolver": {
node: {
extensions: [
".js",
".jsx",
".ts",
".tsx",
".d.ts",
".android.js",
".android.jsx",
".android.ts",
".android.tsx",
".ios.js",
".ios.jsx",
".ios.ts",
".ios.tsx",
".web.js",
".web.jsx",
".web.ts",
".web.tsx",
],
},
},
},
rules: {
// allow js file extension
"react/jsx-filename-extension": [
quotes: [
"error",
"double",
{
extensions: [".js", ".jsx", ".tsx", ".ts"]
}
avoidEscape: true,
},
],
// for post defining style object in react-native
"no-use-before-define": ["error", { variables: false }],
// react-native rules
"import/extensions": [
"error",
"never",
{
svg: "always",
model: "always",
style: "always",
png: "always",
jpg: "always",
json: "always",
constant: "always",
},
],
"react-hooks/exhaustive-deps": 0,
"max-len": ["error", 120],
"@typescript-eslint/ban-ts-comment": 2,
"@typescript-eslint/no-empty-function": 0,
"@typescript-eslint/no-explicit-any": 1,
"@typescript-eslint/explicit-module-boundary-types": 0,
"react/jsx-filename-extension": ["error", { extensions: [".tsx"] }],
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 2,
"react-native/no-raw-text": 2
}
"react-native/no-inline-styles": 0,
"react-native/no-color-literals": 0,
"react-native/no-raw-text": 0,
"import/no-extraneous-dependencies": 2,
"import/no-named-as-default-member": 2,
"import/order": 0,
"import/no-duplicates": 2,
"import/no-useless-path-segments": 2,
"import/no-cycle": 2,
"import/prefer-default-export": 0,
"import/no-anonymous-default-export": 0,
"import/named": 0,
"@typescript-eslint/no-empty-interface": 0,
"import/namespace": 0,
"import/default": 0,
"import/no-named-as-default": 0,
"import/no-unused-modules": 0,
"import/no-deprecated": 0,
"@typescript-eslint/indent": 0,
"react-hooks/rules-of-hooks": 2,
camelcase: 2,
"prefer-destructuring": 2,
"no-nested-ternary": 2,
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
},
};
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/**
8 changes: 8 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"bracketSpacing": true,
"bracketSameLine": false,
"singleQuote": false,
"trailingComma": "all",
"tabWidth": 2,
"semi": true
}
8 changes: 0 additions & 8 deletions .prettierrc.js

This file was deleted.

40 changes: 18 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,7 @@ npm i react-native-gorgeous-header

## Peer Dependencies

<h5><i>IMPORTANT! You need install them</i></h5>

```js
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
```
<b><i>Zero Dependency</i></b>

# Usage

Expand All @@ -57,26 +52,27 @@ import GorgeousHeader from "react-native-gorgeous-header";

## 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 |
| 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 |
| style | style | default | set your own style for main container |
| contentContainerStyle | style | default | set your own style for content container style |
| 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 |
| profileImageStyle | style | default | set your own style for profile image |
| profileImageSource | asset | undefined | use this to set your own image for profile image |
| onMenuImagePress | function | undefined | use this to set your own function for pressing the hamburger menu image |
| onProfileImagePress | function | undefined | use this to set your own function for pressing the profile image |

## Future Plans

- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium

## Author

Expand Down
64 changes: 42 additions & 22 deletions lib/GorgeousHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,43 @@
import * as React from "react";
import { Text, View, Image, TouchableOpacity, TextInput } from "react-native";
import {
Text,
View,
Image,
TouchableOpacity,
TextInput,
StyleProp,
ViewStyle,
ImageStyle,
TextStyle,
ImageSourcePropType,
} from "react-native";
/**
* ? Local Imports
*/
import styles from "./GorgeousHeader.style";

type CustomViewStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
type CustomImageStyleProp =
| StyleProp<ImageStyle>
| Array<StyleProp<ImageStyle>>;
type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;

interface IProps {
menuImageStyle: any;
menuImageSource: any;
menuImageOnPress: () => void;
profileImageStyle: any;
profileImageSource: any;
profileImageOnPress: () => void;
title: string;
subtitle: string;
searchImageSource: any;
titleTextStyle: any;
searchBarStyle: any;
searchInputStyle: any;
subtitleTextStyle: any;
menuImageSource: ImageSourcePropType;
profileImageSource: ImageSourcePropType;
searchImageSource: ImageSourcePropType;
style?: CustomViewStyleProp;
contentContainerStyle?: CustomViewStyleProp;
titleTextStyle?: CustomTextStyleProp;
searchBarStyle?: CustomViewStyleProp;
searchInputStyle?: CustomTextStyleProp;
subtitleTextStyle?: CustomTextStyleProp;
menuImageStyle?: CustomImageStyleProp;
profileImageStyle?: CustomImageStyleProp;
onMenuImagePress: () => void;
onProfileImagePress: () => void;
}

interface IState {}
Expand All @@ -28,22 +47,22 @@ class GorgeousHeader extends React.Component<IProps, IState> {
const {
menuImageStyle,
menuImageSource,
menuImageOnPress,
onMenuImagePress,
profileImageStyle,
profileImageSource,
profileImageOnPress,
onProfileImagePress,
} = this.props;
return (
<View style={styles.topBarContainer}>
<TouchableOpacity style={styles.floatLeft} onPress={menuImageOnPress}>
<TouchableOpacity style={styles.floatLeft} onPress={onMenuImagePress}>
<Image
source={menuImageSource}
style={menuImageStyle || styles.menuImageStyle}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.floatRight}
onPress={profileImageOnPress}
onPress={onProfileImagePress}
>
<Image
source={profileImageSource}
Expand All @@ -63,17 +82,18 @@ class GorgeousHeader extends React.Component<IProps, IState> {
searchBarStyle,
searchInputStyle,
subtitleTextStyle,
contentContainerStyle,
} = this.props;
return (
<View style={styles.contentContainer}>
<Text style={titleTextStyle || styles.titleTextStyle}>{title}</Text>
<Text style={subtitleTextStyle || styles.subtitleTextStyle}>
<View style={[styles.contentContainer, contentContainerStyle]}>
<Text style={[styles.titleTextStyle, titleTextStyle]}>{title}</Text>
<Text style={[styles.subtitleTextStyle, subtitleTextStyle]}>
{subtitle}
</Text>
<View style={searchBarStyle || styles.searchBarStyle}>
<View style={[styles.searchBarStyle, searchBarStyle]}>
<Image style={styles.searchImageStyle} source={searchImageSource} />
<TextInput
style={searchInputStyle || styles.searchInputStyle}
style={[styles.searchInputStyle, searchInputStyle]}
placeholder="Search something"
{...this.props}
/>
Expand All @@ -84,7 +104,7 @@ class GorgeousHeader extends React.Component<IProps, IState> {

render() {
return (
<View style={styles.container}>
<View style={[styles.container, this.props.style]}>
{this.renderTopBar()}
{this.renderContent()}
</View>
Expand Down
12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-gorgeous-header",
"version": "0.1.0",
"version": "1.0.0",
"description": "Fully customizable & easy to use gorgeous header view for React Native",
"main": "./build/dist/GorgeousHeader.js",
"repository": "[email protected]:WrathChaos/react-native-gorgeous-header.git",
Expand Down Expand Up @@ -31,19 +31,19 @@
},
"peerDependencies": {
"react": ">= 16.x.x",
"react-native": ">= 0.55.x"
"react-native": "^0.68.1"
},
"devDependencies": {
"@react-native-community/eslint-config": "^0.0.5",
"@types/react": "^16.9.22",
"@types/react-native": "^0.63.0",
"react-native-typescript-transformer": "^1.2.13",
"typescript": "^3.7.4",
"@react-native-community/eslint-config": "^0.0.5",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.0",
"husky": "^4.2.5",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5"
"prettier": "^2.0.5",
"react-native-typescript-transformer": "^1.2.13",
"typescript": "^3.7.4"
},
"husky": {
"hooks": {
Expand Down
Loading

0 comments on commit b134365

Please sign in to comment.