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

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