React Native Smooth Picker

A smooth picker for react-native.

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.

GitHub