React Native Smooth Picker

install

npm i react-native-smooth-picker

A React Native picker that used Flatlist component to easily display vertical or horizontal list.
The item in the middle of the list (per default) is selected. Work exactly like a Flatlist component with the additionnals props:

Props

Props	Description	Type	Default
onSelected	function that have for argument ({ item, index }) of the selected item.	function
offsetSelection	offset to move the abstract line from the middle of the list where items are selected	number	0
magnet	scroll automatically on the selected item	boolean	false
initialScrollToIndex	if you want the list to scroll to an initial index after mounting	number
scrollAnimation	true if you want the scroll te be animated	boolean	false
snapInterval	if all items of the list have the same height (vertical) or width (horizontal), enter the dimension here to activate the snapToInterval props. Notice that if you use this prop, the magnet comportment will not work.	number	null
snapToAlignment	If you use snapInterval, you can set snapToAlignment to 'start', 'center', 'end'.	enum	'center'
startMargin	Values of margins at the extremities of the list are calculated automatically. If values do not correspond to your need, you can enter them manually.	number
endMargin	Values of margins at the extremities of the list are calculated automatically. If values do not correspond to your need, you can enter them manually.	number

Using Flatlist's methods

To use flatlist's methods with SmoothPicker, use the reference name "smoothPicker" (see /example/example.js) :

this.myref.refs.smoothPicker.scrollToIndex();

Simple Example

import SmoothPicker from "react-native-smooth-picker";

export default class App extends Component {
  state = {
    selected: null
  };

  handleChange = index => {
    this.setState({
      selected: index
    });
  };

  render() {
    const { selected } = this.state;
    return (
      <SmoothPicker
        offsetSelection={40}
        magnet
        scrollAnimation
        data={Array.from({ length: 16 }, (_, i) => i)}
        onSelected={({ item, index }) => this.handleChange(index)}
        renderItem={({ item, index }) => (
          <Number selected={index === selected}>{item}</Number>
        )}
      />
    );
  }
}

You can find the code of the gif above in the example/ folder.

Author

rdhox - Steed Monteiro