Skip to content

Commit

Permalink
v3.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
iRoachie authored Dec 27, 2017
1 parent bc14dd1 commit 51ad9bc
Show file tree
Hide file tree
Showing 77 changed files with 11,293 additions and 646 deletions.
12 changes: 12 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
17 changes: 17 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": ["react", "react-native", "jsx-a11y", "import"],
"rules": {
"semi": "off",
"no-underscore-dangle": "off",
"no-plusplus": "off",
"react/jsx-filename-extension": "off",
"no-unused-expressions": "off",
"no-alert": "off",
"no-debugger": "off"
},
"env": {
"browser": true
}
}
File renamed without changes
69 changes: 67 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,68 @@
# npm
#
node_modules
npm-debug.log

# OSX
#
.DS_Store

# Xcode
#
*.xcscmblueprint
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.js.map
node_modules
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace


# Android
#

# Built application files
*.apk
*.ap_

# Files for the Dalvik VM
*.dex

# Java class files
*.class

# Generated files
bin/
gen/

# Gradle files
.gradle/
build/
/*/build/

# IntelliJ files
.idea
*.iml

# Local configuration file (sdk path, etc)
local.properties

# Proguard folder generated by Eclipse
proguard/

# Log Files
*.log

# Visual Studio Code
.vscode
2 changes: 1 addition & 1 deletion .npmignore
Original file line number Diff line number Diff line change
@@ -1 +1 @@
SearchBarExample
example
4 changes: 4 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"semi": false,
"singleQuote": true
}
5 changes: 0 additions & 5 deletions Makefile

This file was deleted.

93 changes: 65 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,76 +1,113 @@
# react-native-search-bar
<h2 align="center">React Native Search Bar</h2>

<a href="https://www.npmjs.com/package/react-native-search-bar"><img src="https://badge.fury.io/js/react-native-search-bar.svg" alt="" height="18"></a>
<p align="center">The high-quality
<a href="https://developer.apple.com/documentation/uikit/uisearchbar">native iOS search bar</a> for <a href="https://facebook.github.io/react-native/">react native.</a>

The high-quality [iOS native search bar](https://developer.apple.com/documentation/uikit/uisearchbar) for [react native](https://facebook.github.io/react-native/).
<p align="center">
<a href="https://www.npmjs.com/package/react-native-search-bar">
<img alt="npm version" src="https://img.shields.io/npm/v/react-native-search-bar.svg?style=flat-square">
</a>
<a href="https://www.npmjs.com/package/react-native-react-native-search-bar">
<img alt="npm downloads" src="https://img.shields.io/npm/dm/react-native-search-bar.svg?style=flat-square">
</a>
<a href="https://prettier.io">
<img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square">
</a>
</p>

<img src="SearchBar.png"/>
<p align="center">
<img src="./.github/SearchBar.png"/>
</p>

:sunny: Battle-tested in [WeatherEh](https://itunes.apple.com/us/app/id1112813447) app.
<br>

## Installation
## Getting Started

In your react native project, run `npm install react-native-search-bar --save` or `yarn add react-native-search-bar`
1. Installation

To link this library, please follow the first two steps in the [Linking Libraries (iOS)](http://facebook.github.io/react-native/docs/linking-libraries-ios.html) guide on React Native website. The `.xcodeproj` file is in `node_modules/react-native-search-bar/`. In the end, you should have `RNSearchBar.xcodeproj` in the `Libaries` group on Xcode and `libRNSearchBar.a` in the `Link Binary With Libraries` section inside the `Build Phases` tab of your project target.
* Using npm: `npm install react-native-tableview --save`
* Using yarn: `yarn add react-native-tableview`

2. Link
* Run `react-native link react-native-search-bar`
* If linking fails, follow the
[manual linking steps](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)

## Update

In your react native project, run

```Bash
npm install react-native@latest --save # optional, just for the latest react-native
# npm
npm install react-native-search-bar@latest --save

# yarn
yarn add react-native-search-bar@latest
```

## Usage

```javascript
var SearchBar = require('react-native-search-bar');
import SearchBar from 'react-native-search-bar'
```

```JSX
<SearchBar
ref='searchBar'
placeholder='Search'
onChangeText={...}
onSearchButtonPress={...}
onCancelButtonPress={...}
/>
ref='searchBar'
placeholder='Search'
onChangeText={...}
onSearchButtonPress={...}
onCancelButtonPress={...}
/>
```

### Managing the keyboard

* Show - `this.refs.searchBar.focus();`
* Hide
- `this.refs.searchBar.blur();` - uses the iOS `endEditing:true` method on the underlying `UISearchBar` view.
- `this.refs.searchBar.unFocus();` - calls `resignFirstResponder` on the `UITextField` used by the `UISearchBar`.
* Examples
* Show the keyboard when the view loads:
* `this.refs.searchBar.blur();` - uses the iOS `endEditing:true` method on the
underlying `UISearchBar` view.
* `this.refs.searchBar.unFocus();` - calls `resignFirstResponder` on the
`UITextField` used by the `UISearchBar`.

### Examples

* Show the keyboard when the view loads:

```javascript
componentDidMount() {
this.refs.searchBar.focus();
}
```
* Hide the keyboard when the user searches:

* Hide the keyboard when the user searches:

```javascript
...
onSearchButtonPress={this.refs.searchBar.unFocus}
...
```

For all supportted properties, please check out `propTypes` in either [SearchBar.coffee](SearchBar.coffee) or [SearchBar.js](SearchBar.js).
For a full list of props check out
[the typescript definitions file](./src/index.d.ts).

There is also an example project in the [SearchBarExample](SearchBarExample) directory.
There is also an example project in the [example](./example) directory.

## Contribution

For now, implemented are only some of the features of [UISearchBar](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/).
Feel free to send a pull request. To get started, you can read the ["Native UI Components (iOS)"](http://facebook.github.io/react-native/docs/native-components-ios.html) guide on React Native website.
For now, only some of the features of
[UISearchBar](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/)
are implemented.

Feel free to send a pull request to the
[next](https://github.com/umhan35/react-native-search-bar/tree/next) branch. To
get started, you can read the
["Native UI Components (iOS)"](http://facebook.github.io/react-native/docs/native-components-ios.html)
guide on the React Native website.

Except code contribution, you are welcome to answer question asked in [Issues](https://github.com/umhan35/react-native-search-bar/issues).
Along with code contribution, you are welcomed to answer questions asked in the
[Issues](https://github.com/umhan35/react-native-search-bar/issues).

## License

MIT


86 changes: 0 additions & 86 deletions RNSearchBar.m

This file was deleted.

This file was deleted.

This file was deleted.

Loading

0 comments on commit 51ad9bc

Please sign in to comment.