@gracebrigham/react-native-spin-picker-formatted v0.0.3

react-native-spin-picker

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

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

    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

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