# @gracebrigham/react-native-spin-picker-formatted

> A simple picker for React Native

Latest version **0.0.3** (published 2022-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gracebrigham/react-native-spin-picker-formatted
pnpm add @gracebrigham/react-native-spin-picker-formatted
yarn add @gracebrigham/react-native-spin-picker-formatted
bun add @gracebrigham/react-native-spin-picker-formatted
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-05-22 |
| First published | 2022-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 27.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | CampbellMG |
| Maintainers | gracebrigham |
| Keywords | expo, react native, picker, select |

## Links

- npm: https://www.npmjs.com/package/@gracebrigham/react-native-spin-picker-formatted
- Repository: https://github.com/CampbellMG/react-native-picker
- Issues: https://github.com/CampbellMG/react-native-picker/issues
- npm.io page: https://npm.io/package/@gracebrigham/react-native-spin-picker-formatted

## Recent versions

- 0.0.3 (latest) — 2022-05-22
- 0.0.2 — 2022-05-22

## README

# react-native-spin-picker

A pure react native, spinner style select list with a simple interface.

<p align="center">
    <img src="images/preview.gif" height="500" />
</p>

## Features

- Snap to element selection
- Text input
- Single or long-press button navigation
- Flat list style jsx interface
- Customisable

## Setup

This library is available on npm, install it with: `npm i react-native-spin-picker` or `yarn add react-native-spin-picker`.

## Usage

```typescript jsx
    render() {
        return (
            <SpinPicker
                data={[...Array(100).keys()]}
                value={this.state.selectedItem}
                onValueChange={selectedItem => this.setState({selectedItem})}
                keyExtractor={number => number.toString()}
                renderItem={item => <Text>{item.toString()}</Text>}/>
        );
    }
```
## A complete example

```typescript jsx
import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import {SpinPicker} from 'react-native-spin-picker'

interface AppState {
  selectedItem: number
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff'
  }
});

export default class App extends React.Component<{}, AppState> {
  constructor(props) {
    super(props);

    this.state = {
      selectedItem: 57
    };
  }

  render() {
    return (
        <SafeAreaView style={styles.container}>
          <View>
            <SpinPicker 
                    data={[...Array(100).keys()]}
                    value={this.state.selectedItem}
                    onValueChange={selectedItem => this.setState({selectedItem})}
                    keyExtractor={number => number.toString()}
                    showArrows
                    onInputValueChanged={this.onValueChanged}
                    renderItem={item => <Text>{item.toString()}</Text>}/>
          </View>
        </SafeAreaView>
    );
  }

  private onValueChanged = (value: string, previousValue: string): string => {
    const numberValue = Number(value);
    if (!isNaN(numberValue) && numberValue < 100) {
      this.setState({selectedItem: numberValue});
      return value;
    }

    return previousValue;
  };
}
```

## Available props

| Name                           | Type             | Default                        | Description                                                                                                                                |
| ------------------------------ | ---------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| data                           | array            | **required**                   | An array of any data to be presented                                                                                                       |
| value                          | any              | **required**                   | Value that is currently selected                                                                                                           |
| onValueChange                  | function         | **required**                   | Called whenever the selected item changed, should update value prop                                                                        |
| renderItem                     | function         | **required**                   | Renders list items, **all items should be rendered with the same height (use fixed height if possible)**                                   |
| keyExtractor                   | function         | **required**                   | Extracts a unique key from each data item, used for object comparison                                                                      |
| showArrows                     | bool             | false                          | Shows navigation arrows                                                                                                                    |
| onInputValueChanged            | function         | undefined (no text input)      | Include to enable text entry, return value updates input (allows formatting or restrictions)                                               |
| textInputProps                 | object           | undefined                      | Input props applied to text input when enabled by onInputValueChanged (allows for input type, etc)                                         |
| textInputStyle                 | object           | undefined                      | Input style applied to text input when enabled by onInputValueChanged                                                                      |

---
_Source: https://npm.io/package/@gracebrigham/react-native-spin-picker-formatted · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._