react-native-searchable-dropdown
Advanced tools
Comparing version 1.0.5 to 1.0.6
21
index.js
| import React, { Component } from 'react'; | ||
| import { | ||
| StyleSheet, | ||
| Text, | ||
| ListView, | ||
| FlatList, | ||
| TextInput, | ||
@@ -36,2 +36,15 @@ View, | ||
| renderFlatList(){ | ||
| if(this.state.focus){ | ||
| return ( | ||
| <FlatList | ||
| style={{ ...this.props.itemsContainerStyle }} | ||
| keyboardShouldPersistTaps="always" | ||
| data={this.state.listItems} | ||
| keyExtractor={(item, index) => index.toString()} | ||
| renderItem={({ item }) => this.renderItems(item)} /> | ||
| ) | ||
| } | ||
| } | ||
| componentDidMount(){ | ||
@@ -83,2 +96,6 @@ const listItems = this.props.items; | ||
| renderListType(){ | ||
| return this.props.listType == 'ListView' ? this.renderList() : this.renderFlatList(); | ||
| } | ||
| render() { | ||
@@ -110,3 +127,3 @@ return ( | ||
| placeholder={this.props.placeholder} /> | ||
| { this.renderList() } | ||
| { this.renderListType() } | ||
| </View> | ||
@@ -113,0 +130,0 @@ ); |
| { | ||
| "name": "react-native-searchable-dropdown", | ||
| "version": "1.0.5", | ||
| "version": "1.0.6", | ||
| "description": "Searchable Dropdown", | ||
@@ -21,3 +21,5 @@ "main": "index.js", | ||
| "react-native-searchable-dropdown", | ||
| "react searchable dropdown" | ||
| "react searchable dropdown", | ||
| "react searchable list", | ||
| "react auto search dropdown" | ||
| ], | ||
@@ -24,0 +26,0 @@ "author": "Zubair Ibrahim <zubair.paizer11@gmail.com.com>", |
141
readme.md
@@ -10,3 +10,3 @@ [example-url]: https://i.imgur.com/mHGaOX5.gif | ||
| # React Native Searchable Dropdown | ||
| Searchable Dropdown help you to search with in the dropdown. and you can pick single item. | ||
| Searchable Dropdown to help you search with in the list (using `ListView` and `FlatList`), and you can pick single item. | ||
@@ -74,82 +74,83 @@ ![example][example-url] | ||
| </tr> | ||
| <tr> | ||
| <tr> | ||
| <td>underlineColorAndroid</td> | ||
| <td>TextInput underline height</td> | ||
| </tr> | ||
| <tr> | ||
| <td>listType</td> | ||
| <td>default will be FlatList or you can pass ListView</td> | ||
| </tr> | ||
| </table> | ||
| # Example | ||
| ```javascript | ||
| ```jsx | ||
| import React, { Component } from 'react'; | ||
| import SearchableDropdown from 'react-native-searchable-dropdown'; | ||
| import SearchableDropdown from 'react-native-searchable-dropdown'; | ||
| var items = [ | ||
| { | ||
| id: 1, | ||
| name: 'Javascript' | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: 'Java' | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: 'Ruby' | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: 'React Native' | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: 'PHP' | ||
| }, | ||
| { | ||
| id: 6, | ||
| name: 'Python' | ||
| }, | ||
| { | ||
| id: 7, | ||
| name: 'Go' | ||
| }, | ||
| { | ||
| id: 8, | ||
| name: 'Swift' | ||
| }, | ||
| var items = [ | ||
| { | ||
| id: 1, | ||
| name: 'JavaScript', | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: 'Java', | ||
| }, | ||
| { | ||
| id: 3, | ||
| name: 'Ruby', | ||
| }, | ||
| { | ||
| id: 4, | ||
| name: 'React Native', | ||
| }, | ||
| { | ||
| id: 5, | ||
| name: 'PHP', | ||
| }, | ||
| { | ||
| id: 6, | ||
| name: 'Python', | ||
| }, | ||
| { | ||
| id: 7, | ||
| name: 'Go', | ||
| }, | ||
| { | ||
| id: 8, | ||
| name: 'Swift', | ||
| }, | ||
| ]; | ||
| class Example extends Component { | ||
| render() { | ||
| <SearchableDropDown | ||
| onTextChange={(text) => alert(text)} | ||
| onItemSelect={(item) => alert(JSON.stringify(item))} | ||
| containerStyle={{ | ||
| padding: 5 | ||
| }} | ||
| textInputStyle={{ | ||
| padding: 12, | ||
| borderWidth: 1, | ||
| borderColor: '#ccc', | ||
| borderRadius: 5 | ||
| }} | ||
| itemStyle={{ | ||
| padding: 10, | ||
| marginTop: 2, | ||
| backgroundColor: '#ddd', | ||
| borderColor: '#bbb', | ||
| borderWidth: 1, | ||
| borderRadius:5 | ||
| }} | ||
| itemTextStyle={{ | ||
| color: '#222' | ||
| }} | ||
| itemsContainerStyle={{ | ||
| maxHeight: 140 | ||
| }} | ||
| items={items} | ||
| defaultIndex={2} | ||
| placeholder="Placeholder." | ||
| resetValue={false} | ||
| underlineColorAndroid='transparent' /> | ||
| } | ||
| render() { | ||
| return ( | ||
| <SearchableDropdown | ||
| onTextChange={text => alert(text)} | ||
| onItemSelect={item => alert(JSON.stringify(item))} | ||
| containerStyle={{ padding: 5 }} | ||
| textInputStyle={{ | ||
| padding: 12, | ||
| borderWidth: 1, | ||
| borderColor: '#ccc', | ||
| borderRadius: 5, | ||
| }} | ||
| itemStyle={{ | ||
| padding: 10, | ||
| marginTop: 2, | ||
| backgroundColor: '#ddd', | ||
| borderColor: '#bbb', | ||
| borderWidth: 1, | ||
| borderRadius: 5, | ||
| }} | ||
| itemTextStyle={{ color: '#222' }} | ||
| itemsContainerStyle={{ maxHeight: 140 }} | ||
| items={items} | ||
| defaultIndex={2} | ||
| placeholder="placeholder" | ||
| resetValue={false} | ||
| underlineColorAndroid="transparent" | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
| ``` |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by23.73%
8263
- Number of package files
- increased by33.33%
4
- Lines of code
- increased by14.29%
120
- Number of lines in readme file
- increased by0.65%
155
No dependency changes