# rn-touchable-sort-list

> React Native Touchable Sort List

Latest version **0.1.2** (published 2018-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-touchable-sort-list
pnpm add rn-touchable-sort-list
yarn add rn-touchable-sort-list
bun add rn-touchable-sort-list
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-11-08 |
| First published | 2018-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 182.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Luiz Otavio Vidoto |
| Maintainers | luizvidoto |
| Keywords | react-native, react-component, react, sort, list |

## Links

- npm: https://www.npmjs.com/package/rn-touchable-sort-list
- Repository: https://github.com/luizvidoto/rn-touchable-sort-list
- Issues: https://github.com/luizvidoto/rn-touchable-sort-list/issues
- npm.io page: https://npm.io/package/rn-touchable-sort-list

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2018-11-08
- 0.1.1 — 2018-11-08
- 0.1.0 — 2018-11-08

## README

## React Native Sort List

This is a beta package, some issues may appear!  
It should work with Redux and normal state for changes.

### Installation

```sh
npm install rn-touchable-sort-list --save
yarn add rn-touchable-sort-list
```

### Usage of Touchable Sort List

Usage is similar to FlatList, you should use a function to render items.
`DATA` must be an array of object with **id** and **order** properties, otherwise it won't work.

```js
class Main extends Component {
    state = {
        data: T[] = [
            {id: 'ID1', order: 0, title: 'Some Text', ...},
            {id: 'ID2', order: 1, title: 'Another Text', ...},
            {id: 'ID3', order: 2, title: 'Lorem Text', ...},
            ...
        ]
    }
    renderRow = (item: T, isActive: boolean, isTarget: boolean) => {
        return (
            <View style={{backgroundColor: isActive ? 'green' : 'white'}}>
                <Text>
                    {item.title}
                </Text>
            </View>
        )
    }
    onItemActivation = (item: T) => {
        console.log(item)
    }
    onOrderChange = (newData: T[]) => {
        this.setState({data: newData})
    }
    render() {
        return (
            <TouchableSortList
                data={this.state.data}
                renderRow={this.renderRow}
                onItemActivation={this.onItemActivation}
                onOrderChange={this.onOrderChange}
            />
        )
    }
}
```

### API

##### Props

- **data**: Array of objects that must have {id: string, order: number}  
  `item = T = {id: string, order: number, ...}`  
  `data = T[] = [item1, item2, item3, ...]`
- **renderRow**: Function that receives item, isActive and isTarget values and render it's children.  
  `(item: T, isActive: boolean, isTarget: boolean) => ReactChild`
- **onItemActivation**?: Optional function that receives the item that is moving/active.  
  `(item: T) => void`
- **onOrderChange**: A function that receives the input data but with the order values changed.  
  `(newData: T[]) => void`

---
_Source: https://npm.io/package/rn-touchable-sort-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._