npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-smooth-picker

v1.1.5

Published

A smooth picker for react-native

Downloads

2,322

Readme

React Native Smooth Picker

alt text

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

| 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 | View.style | {} | | 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) {
    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