0.0.2 • Published 5 years ago
react-native-spin-picker v0.0.2
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 |