├── .babelrc ├── .eslintrc ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── AUTHORS ├── LICENSE ├── README.md ├── assets └── icons │ ├── close-3x.png │ ├── hide-3x.png │ ├── history-3x.png │ ├── recall-3x.png │ ├── search-3x.png │ └── star-3x.png ├── babel.config.js ├── demo.gif ├── demo ├── .buckconfig ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── Demo.js ├── __tests__ │ └── App.js ├── android │ ├── app │ │ ├── BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── proguard-rules.pro │ │ └── src │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── demo │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── keystores │ │ ├── BUCK │ │ └── debug.keystore.properties │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── Demo-tvOS │ │ └── Info.plist │ ├── Demo-tvOSTests │ │ └── Info.plist │ ├── Demo.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── Demo-tvOS.xcscheme │ │ │ └── Demo.xcscheme │ ├── Demo │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── DemoTests │ │ ├── DemoTests.m │ │ └── Info.plist ├── package-lock.json └── package.json ├── index.d.ts ├── index.js ├── package-lock.json ├── package.json └── search-header.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["module:metro-react-native-babel-preset"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "plugins": [ 4 | "react", 5 | "react-native" 6 | ], 7 | "parserOptions": { 8 | "ecmaVersion": 6, 9 | "sourceType": "module", 10 | "ecmaFeatures": { 11 | "arrowFunctions": true, 12 | "binaryLiterals": true, 13 | "blockBindings": true, 14 | "classes": true, 15 | "defaultParams": true, 16 | "destructuring": true, 17 | "forOf": true, 18 | "generators": true, 19 | "globalReturn": false, 20 | "jsx": true, 21 | "modules": true, 22 | "objectLiteralComputedProperties": true, 23 | "objectLiteralDuplicateProperties": false, 24 | "objectLiteralShorthandMethods": true, 25 | "objectLiteralShorthandProperties": true, 26 | "octalLiterals": true, 27 | "regexYFlag": true, 28 | "restParams": true, 29 | "spread": true, 30 | "superInFunctions": true, 31 | "templateStrings": true, 32 | "unicodeCodePointEscapes": true 33 | }, 34 | "extends": "plugin:react/recommended" 35 | }, 36 | "settings": { 37 | "react": { 38 | "pragma": "React" // Pragma to use, default to "React" 39 | } 40 | }, 41 | "env": { 42 | "browser": true, 43 | "commonjs": true, 44 | "es6": true, 45 | "node": true 46 | }, 47 | "rules": { 48 | "react/jsx-uses-react": 1, 49 | "react/jsx-uses-vars": 1, 50 | 51 | "comma-dangle": [2, "never"], 52 | "no-cond-assign": [2, "always"], 53 | "no-console": 0, 54 | "no-constant-condition": 2, 55 | "no-control-regex": 2, 56 | "no-debugger": 2, 57 | "no-dupe-args": 2, 58 | "no-dupe-keys": 2, 59 | "no-duplicate-case": 2, 60 | "no-empty": 2, 61 | "no-empty-character-class": 2, 62 | "no-ex-assign": 2, 63 | "no-extra-boolean-cast": 2, 64 | "no-extra-parens": 0, 65 | "no-extra-semi": 2, 66 | "no-func-assign": 2, 67 | "no-inner-declarations": [2, "both"], 68 | "no-invalid-regexp": 2, 69 | "no-irregular-whitespace": 2, 70 | "no-negated-in-lhs": 2, 71 | "no-obj-calls": 2, 72 | "no-regex-spaces": 2, 73 | "no-reserved-keys": 0, 74 | "no-sparse-arrays": 2, 75 | "no-unreachable": 2, 76 | "use-isnan": 2, 77 | "valid-jsdoc": 0, 78 | "valid-typeof": 2, 79 | 80 | "block-scoped-var": 2, 81 | "complexity": [0, 11], 82 | "consistent-return": 0, 83 | "curly": [2, "all"], 84 | "default-case": 2, 85 | "dot-location": [2, "property"], 86 | "dot-notation": [2, { 87 | "allowKeywords": true 88 | }], 89 | "eqeqeq": 2, 90 | "guard-for-in": 2, 91 | "no-alert": 2, 92 | "no-caller": 2, 93 | "no-div-regex": 2, 94 | "no-else-return": 2, 95 | "no-eq-null": 2, 96 | "no-eval": 2, 97 | "no-extend-native": 2, 98 | "no-extra-bind": 2, 99 | "no-fallthrough": 2, 100 | "no-floating-decimal": 2, 101 | "no-implied-eval": 2, 102 | "no-iterator": 2, 103 | "no-labels": 2, 104 | "no-lone-blocks": 2, 105 | "no-loop-func": 2, 106 | "no-multi-spaces": 2, 107 | "no-multi-str": 2, 108 | "no-native-reassign": 2, 109 | "no-new": 2, 110 | "no-new-func": 2, 111 | "no-new-wrappers": 2, 112 | "no-octal": 2, 113 | "no-octal-escape": 2, 114 | "no-param-reassign": 0, 115 | "no-process-env": 2, 116 | "no-proto": 2, 117 | "no-redeclare": 2, 118 | "no-return-assign": 2, 119 | "no-script-url": 2, 120 | "no-self-compare": 2, 121 | "no-sequences": 2, 122 | "no-throw-literal": 2, 123 | "no-unused-expressions": 2, 124 | "no-void": 2, 125 | "no-warning-comments": 0, 126 | "no-with": 2, 127 | "radix": 2, 128 | "vars-on-top": 2, 129 | "wrap-iife": [2, "inside"], 130 | "yoda": [2, "never"], 131 | 132 | "strict": [2, "global"], 133 | 134 | "generator-star-spacing": [2, "before"], 135 | "no-var": 2, 136 | "object-shorthand": 0, 137 | 138 | "max-depth": [0, 4], 139 | "max-len": [0, 80, 4], 140 | "max-params": [0, 3], 141 | "max-statements": [0, 10], 142 | "no-bitwise": 0, 143 | "no-plusplus": 0, 144 | "no-catch-shadow": 2, 145 | "no-delete-var": 2, 146 | "no-label-var": 2, 147 | "no-shadow": 2, 148 | "no-shadow-restricted-names": 2, 149 | "no-undef": 2, 150 | "no-undef-init": 2, 151 | "no-undefined": 0, 152 | "no-unused-vars": [2, { 153 | "vars": "all", 154 | "args": "after-used" 155 | }], 156 | "no-use-before-define": 2, 157 | 158 | "handle-callback-err": [2, "err"], 159 | "no-mixed-requires": [2, true], 160 | "no-new-require": 2, 161 | "no-path-concat": 2, 162 | "no-process-exit": 2, 163 | "no-restricted-modules": 0, 164 | "no-sync": 0, 165 | 166 | "brace-style": [2, "1tbs", { 167 | "allowSingleLine": false 168 | }], 169 | "camelcase": 2, 170 | "comma-spacing": [2, { 171 | "before": false, 172 | "after": true 173 | }], 174 | "comma-style": [2, "last"], 175 | "consistent-this": 0, 176 | "eol-last": 2, 177 | "func-names": 0, 178 | "func-style": 0, 179 | "indent": [2, 4], 180 | "key-spacing": [2, { 181 | "beforeColon": false, 182 | "afterColon": true 183 | }], 184 | "linebreak-style": 0, 185 | "max-nested-callbacks": [0, 3], 186 | "new-cap": 0, 187 | "new-parens": 2, 188 | "newline-after-var": 0, 189 | "no-array-constructor": 2, 190 | "no-continue": 0, 191 | "no-inline-comments": 0, 192 | "no-lonely-if": 0, 193 | "no-mixed-spaces-and-tabs": [2], 194 | "no-multiple-empty-lines": 0, 195 | "no-nested-ternary": 2, 196 | "no-new-object": 2, 197 | "no-spaced-func": 2, 198 | "no-ternary": 0, 199 | "no-trailing-spaces": [2, { 200 | "skipBlankLines": false 201 | }], 202 | "no-underscore-dangle": 0, 203 | "no-unneeded-ternary": 2, 204 | "one-var": 0, 205 | "operator-assignment": [2, "always"], 206 | "operator-linebreak": [2, "after"], 207 | "padded-blocks": [2, "never"], 208 | "quote-props": [2, "as-needed"], 209 | "quotes": [2, "backtick"], 210 | "semi": [2, "always"], 211 | "semi-spacing": [2, { 212 | "before": false, 213 | "after": true 214 | }], 215 | "sort-vars": 0, 216 | "space-before-blocks": [2, "always"], 217 | "space-before-function-paren": [2, { 218 | "anonymous": "always", 219 | "named": "always" 220 | }], 221 | "object-curly-spacing": [2, "always"], 222 | "array-bracket-spacing": [2, "always", { 223 | "objectsInArrays": false, 224 | "arraysInArrays": false 225 | }], 226 | "space-in-parens": [2, "never"], 227 | "space-infix-ops": [2, { 228 | "int32Hint": false 229 | }], 230 | "space-unary-ops": [2, { 231 | "words": true, 232 | "nonwords": false 233 | }], 234 | "spaced-comment": [2, "always"], 235 | "wrap-regex": 0, 236 | } 237 | } 238 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # Ignore examples 4 | .*/examples 5 | 6 | # Ignore tests 7 | .*/tests 8 | 9 | # We fork some components by platform 10 | .*/*.android.js 11 | 12 | # Ignore templates with `@flow` in header 13 | .*/local-cli/generator.* 14 | 15 | # Ignore malformed json 16 | .*/node_modules/y18n/test/.*\.json 17 | 18 | [include] 19 | 20 | [libs] 21 | 22 | [options] 23 | module.system=haste 24 | 25 | esproposal.class_static_fields=enable 26 | esproposal.class_instance_fields=enable 27 | 28 | experimental.strict_type_args=true 29 | 30 | munge_underscores=true 31 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Handle line endings automatically for files detected as text 2 | # and leave all files detected as binary untouched. 3 | * text=auto 4 | 5 | # 6 | # The above will handle all files NOT found below 7 | # 8 | # These files are text and should be normalized (Convert crlf => lf) 9 | *.gitattributes text 10 | .gitignore text 11 | *.md text 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ##### 2 | # Ignore OS X temporary files 3 | 4 | .DS_Store 5 | *.DS_Store 6 | *.swp 7 | *.lock 8 | profile 9 | 10 | ##### 11 | # Ignore Windows image file caches 12 | 13 | Thumbs.db 14 | ehthumbs.db 15 | 16 | ##### 17 | # Ignore Log files 18 | 19 | *.log 20 | 21 | ##### 22 | # Ignore Xcode 23 | 24 | *.pbxuser 25 | !default.pbxuser 26 | *.mode1v3 27 | !default.mode1v3 28 | *.mode2v3 29 | !default.mode2v3 30 | *.perspectivev3 31 | !default.perspectivev3 32 | xcuserdata 33 | *.xccheckout 34 | *.moved-aside 35 | DerivedData 36 | *.hmap 37 | *.ipa 38 | *.xcuserstate 39 | project.xcworkspace 40 | 41 | ##### 42 | # Ignore Android/IJ 43 | 44 | .idea 45 | .gradle 46 | local.properties 47 | 48 | ##### 49 | # Ignore compiled *bundle.js 50 | 51 | *bundle.js 52 | 53 | ##### 54 | # Ignore Node modules folder 55 | 56 | node_modules/ 57 | 58 | #### 59 | # Ignore DB folders 60 | 61 | db/ 62 | 63 | #### 64 | # Ignore Compiled build folders 65 | 66 | build/ 67 | 68 | ##### 69 | # Ignore Misc folders 70 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | ##### 2 | # OS X temporary files 3 | 4 | .DS_Store 5 | *.swp 6 | *.lock 7 | profile 8 | 9 | ##### 10 | # Windows image file caches 11 | 12 | Thumbs.db 13 | ehthumbs.db 14 | 15 | ##### 16 | # Xcode 17 | 18 | *.pbxuser 19 | !default.pbxuser 20 | *.mode1v3 21 | !default.mode1v3 22 | *.mode2v3 23 | !default.mode2v3 24 | *.perspectivev3 25 | !default.perspectivev3 26 | xcuserdata 27 | *.xccheckout 28 | *.moved-aside 29 | DerivedData 30 | *.hmap 31 | *.ipa 32 | *.xcuserstate 33 | project.xcworkspace 34 | 35 | ##### 36 | # Log files 37 | 38 | *.log 39 | 40 | ##### 41 | # Ignore compiled *bundle.js 42 | 43 | *bundle.js 44 | 45 | ##### 46 | # Ignore babel, jdoc, jspm, npm, git, and other configs 47 | .gitattributes 48 | .gitignore 49 | .npmignore 50 | .eslintrc 51 | .babelrc 52 | jsdoc.json 53 | config.js 54 | 55 | ##### 56 | # Node modules folder 57 | 58 | node_modules/ 59 | 60 | #### 61 | # Compiled build folders 62 | 63 | build/ 64 | 65 | #### 66 | # Docs folders 67 | 68 | docs/ 69 | 70 | ##### 71 | # Tests folders 72 | 73 | tests/ 74 | __tests__/ 75 | 76 | ##### 77 | # Misc folders 78 | 79 | examples/ 80 | demo/ 81 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | Tuan Le 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2010-2015 Tuan Le. https://github.com/tuantle 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-seach-header 2 | 3 | [![npm version](https://img.shields.io/npm/v/react-native-search-header.svg?style=flat)](https://www.npmjs.com/package/react-native-search-header) 4 | [![npm downloads](https://img.shields.io/npm/dm/react-native-search-header.svg?style=flat-square)](https://www.npmjs.com/package/react-native-search-header) 5 | 6 | Easy to use React Native search header component based on material design patterns. 7 | 8 | ![demo](/demo.gif) 9 | 10 | ## Installation 11 | 12 | `$ npm install react-native-search-header --save` 13 | 14 | ### Example 15 | 16 | To use search header you simply import the component factory function to create a renderable component: 17 | 18 | ```js 19 | import React from 'react'; 20 | import { 21 | Dimensions, 22 | AppRegistry, 23 | StyleSheet, 24 | View, 25 | Text, 26 | Button, 27 | StatusBar 28 | } from 'react-native'; 29 | import SearchHeader from 'react-native-search-header'; 30 | 31 | const DEVICE_WIDTH = Dimensions.get(`window`).width; 32 | 33 | const styles = StyleSheet.create({ 34 | container: { 35 | flex: 1, 36 | justifyContent: 'flex-start', 37 | alignItems: 'center', 38 | backgroundColor: '#f5fcff' 39 | }, 40 | status: { 41 | zIndex: 10, 42 | elevation: 2, 43 | width: DEVICE_WIDTH, 44 | height: 21, 45 | backgroundColor: '#0097a7' 46 | }, 47 | header: { 48 | justifyContent: 'center', 49 | alignItems: 'center', 50 | width: DEVICE_WIDTH, 51 | height: 56, 52 | marginBottom: 6, 53 | backgroundColor: '#00bcd4' 54 | }, 55 | label: { 56 | flexGrow: 1, 57 | fontSize: 20, 58 | fontWeight: `600`, 59 | textAlign: `left`, 60 | marginVertical: 8, 61 | paddingVertical: 3, 62 | color: `#f5fcff`, 63 | backgroundColor: `transparent` 64 | }, 65 | button: { 66 | justifyContent: 'center', 67 | alignItems: 'center', 68 | width: 130, 69 | height: 40, 70 | marginTop: 40, 71 | borderRadius: 2, 72 | backgroundColor: `#ff5722` 73 | } 74 | }); 75 | 76 | const Demo = () => { 77 | const searchHeaderRef = React.useRef(null); 78 | return ( 79 | 80 | 81 | 82 | 83 | Demo 84 |