0.1.2 • Published 5 years ago
react-native-search-select-list v0.1.2
react-native-search-select-list
A customizeable search/select list & it's costumizable to your own liking.
Getting started
npm install react-native-search-select-list --save
or
yarn add react-native-search-select-list
and
react-native link react-native-vector-icons
Example
import React, {Component} from 'react';
import Search from 'react-native-search-select-list'
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
}
render() {
return (
<Search
/* Add your own JSON file */
jsonList={ require('./list.json') }
/*
Name is the name of the key in the JSON file
if you want to use custom styling (change the textStyle to however you want)
defaultkey={{ name: 'key', textStyle: { color: '#000', fontSize: 19, fontWeight:'bold' }}}
subkey={{ name: 'subkey', textStyle: { color: '#000', fontSize: 15, fontWeight:'bold' }}}
*/
defaultkey={{ name: 'name', textStyle: { color: '#000', fontSize: 15, fontWeight:'bold' }}}
subkey="subtitle"
/* Extra data & custom color of the text in app*/
data="data"
/* Make sure the icon is a image */
icon="avatar_url"
/* Costumize the box style of the list */
boxStyle={{ backgroundColor: '#fff' }}
/* Get selected data back from list*/
selectedItems={ (selected) => { /*console.log(selected)*/ }}
/* option button includes alphabet list */
optionbutton="false"
/>
);
}
}
List.json example (keys are changeable to fit your own list)
[
{
name: "Natalie",
subtitle: "United States",
data: "I make a million dollars a month",
avatar_url: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
},{
name: "Bianca",
subtitle: "Australia",
data: "Hello, I'm from Australia!",
avatar_url: "https://media.apnarm.net.au/media/images/2017/10/27/imagev1731006674e03c04fb1c1b2c0030d2895-kne29a0sc2909sas5p2_ct677x380.jpg",
},{
name: "Willem",
subtitle: "The Netherlands",
data: "I like banana's tbh",
avatar_url: "https://20401z3eigij1ugd3g2szg83-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg",
}
]
Properties
Prop | Type | Description |
---|---|---|
jsonList | json | JSON file with all your data key can be changed in component {key: "key", subkey: "subkey", data: "extra data", icon: "icon.jpg"} |
defaultkey | object | First key in JSON data (from jsonList) and style of how it looks in list. |
subkey | func | Subkey in JSON data(from jsonList) and style of how it looks in list. |
data | object | Data in JSON data (from jsonList). |
icon | object | Icon in JSON data (from jsonList). |
boxStyle | object | Style boxes of list |
selectedItems | object | All selected items (do what you want with it) |
optionbutton | object | Option button there's an alphabet list in it. Put on true to turn on |