@bumjoo/react-native-smooth-picker v1.0.0

React Native Smooth Picker

DEMO

https://snack.expo.io/@rdhox/smoothpicker

Flash for expo app:

install

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

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) {
    setStartedToScroll(true);
  }
  setIndexSelected(index);
}

...

<WrapperList start={!startedToScroll} >
  <SmoothPicker
    data={list}
    keyExtractor={item => `${item.id}-list`}
    initialScrollToIndex={indexSelected}
    scrollAnimation
    showsVerticalScrollIndicator={false}
    onSelected={({ item, index }) => handleChange(index)}
    renderItem={({item, index}) => <Item>...</Item>}
  />
</WrapperList>

...

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 => {
    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