TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    React Native Smooth Picker

    alt text


    Flash for expo app:



    yarn add react-native-smooth-picker

    A React Native picker coded in TypeScript 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 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 ends 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 ends of the list are calculated automatically. If values do not correspond to your need, you can enter them manually. number
    selectOnPress Activate the item selection by pressing it (add a TouchableOpacity component around your item) boolean false
    styleButton Style of the TouchableOpacity if selectOnPress is true {}
    activeOpacityButton Determines what the opacity of the wrapped view should be when selectOnPress is true. number 0.2

    Using Flatlist's methods

    To use flatlist's methods with SmoothPicker, pass to the props "refFlatList" a ref create by "useRef" or React.CreateRef() (see /example/example.js).

    !! Important !!

    1. To avoid strange behaviour, be sure that your list's items have a define width or height (depending if the list is horizontal or vertical).
    2. To be able to scroll and select the items at the ends of the list, a View component contain the Flatlist component to create margin. Those margins are calculated automatically, but you can also enter their value with the props startMargin and endMargin.

    => Being aware of those two points should help you having a good behaviour. You can add a View component around the Smoothpicker to make it goes with your UI. Example to have the list centered at the mount:

    function handleChange(index) {
      if(!startedToScroll) {
    <WrapperList start={!startedToScroll} >
        keyExtractor={item => `${}-list`}
        onSelected={({ item, index }) => handleChange(index)}
        renderItem={({item, index}) => <Item>...</Item>}
    const WrapperList = styled.View`
      width: 100%;
      height: 350px;
      justify-content: center;
      align-items: center;
      padding-top: ${({start}) => start ? '150px' : '0px'};

    Simple Example

    import SmoothPicker from "react-native-smooth-picker";
    export default class App extends Component {
      state = {
        selected: null
      handleChange = index => {
          selected: index
      render() {
        const { selected } = this.state;
        return (
            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.


    rdhox - Steed Monteiro


    npm i react-native-smooth-picker

    DownloadsWeekly Downloads






    Unpacked Size

    22.6 kB

    Total Files


    Last publish


    • rdhox