# react-native-select-list-easy

> A customizeable search list.

Latest version **0.1.2** (published 2019-02-12) · 0 weekly downloads

## Install

```sh
npm install react-native-select-list-easy
pnpm add react-native-select-list-easy
yarn add react-native-select-list-easy
bun add react-native-select-list-easy
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-02-12 |
| First published | 2019-02-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 31.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ilias1998 |

## Links

- npm: https://www.npmjs.com/package/react-native-select-list-easy
- npm.io page: https://npm.io/package/react-native-select-list-easy

## Dependencies (7)

- [react](https://npm.io/package/react.md) 16.6.3
- [react-native](https://npm.io/package/react-native.md) 0.57.8
- [rn-sliding-up-panel](https://npm.io/package/rn-sliding-up-panel.md) ^1.3.1
- [react-native-elements](https://npm.io/package/react-native-elements.md) ^1.0.0-beta7
- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^6.2.0
- [react-native-alphabetlistview](https://npm.io/package/react-native-alphabetlistview.md) ^0.3.0
- [react-native-circular-action-menu](https://npm.io/package/react-native-circular-action-menu.md) ^0.5.0

## Recent versions

- 0.1.2 (latest) — 2019-02-12
- 0.1.0 — 2019-02-12

## README

# react-native-select-list-easy

A customizeable search list.

## Example

```js
import React, {Component} from 'react';
import Search from 'search-all-list-comp'

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)
```js
[ 
  {
    name: "Natalie",
    subtitle: "United States",
    data: "Extra Data",
    avatar_url: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg",
  },{
    name: "Bianca",
    subtitle: "Australia",
    data: "Hoi ik ben banaan!",
    avatar_url: "https://media.apnarm.net.au/media/images/2017/10/27/imagev1731006674e03c04fb1c1b2c0030d2895-kne29a0sc2909sas5p2_ct677x380.jpg",
  },{
    name: "Willem",
    subtitle: "The Netherlands",
    data: "haha yoo ik  ben willem gap!",
    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 |

----

![list](https://im4.ezgif.com/tmp/ezgif-4-181664465efe.gif)


Ilias Harvey

---
_Source: https://npm.io/package/react-native-select-list-easy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._