react-native-infinite-wheel-picker v1.0.0

react-native-infinite-wheel-picker

The React Native Infinite Wheel Picker package offers a highly customizable, versatile, and seamless wheel picker component, enhancing the user experience with smooth scrolling and intuitive selection. It's dynamic design allows for endless scrolling, providing a natural and interactive interface for selecting values.

The library is compatible with both Android and iOS platforms, offering a versatile solution to elevate your app's user interface with ease.

🎬 Preview

Quick Access

Installation | Usage and Examples | Properties | Example Code | License

Getting Started

Here's how to get started with react-native-infinite-wheel-picker in your React Native project:

Installation

Install the package

npm install react-native-infinite-wheel-picker

Using Yarn:

yarn add react-native-infinite-wheel-picker

Usage

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { WheelPicker } from 'react-native-infinite-wheel-picker';

const App: React.FC = () => {
  const initialData = [1, 2, 3, 4, 5, 6, 7, 8];
  const [selectedIndex, setSelectedIndex] = React.useState(3);

  return (
    <View style={styles.container}>
      <WheelPicker
        initialSelectedIndex={3}
        data={initialData}
        restElements={2}
        elementHeight={30}
        onChangeValue={(index, value) => {
          console.log(value);
          setSelectedIndex(index);
        }}
        selectedIndex={selectedIndex}
        containerStyle={styles.containerStyle}
        selectedLayoutStyle={styles.selectedLayoutStyle}
        elementTextStyle={styles.elementTextStyle}
      />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  selectedLayoutStyle: {
    backgroundColor: '#00000026',
    borderRadius: 2,
  },
  containerStyle: { 
    backgroundColor: '#0000001a', 
    width: 150 
  },
  elementTextStyle: { 
    fontSize: 18 
  },
});

🎬 Preview

For, a simple scroll use infiniteScroll={false} that disable infinite scrolling of the items.

<WheelPicker
  initialSelectedIndex={3}
  data={initialData}
  restElements={2}
  elementHeight={30}
  onChangeValue={value => {
    console.log(value);
  }}
  infiniteScroll={false}
  selectedIndex={selectedIndex}
  containerStyle={styles.containerStyle}
  selectedLayoutStyle={styles.selectedLayoutStyle}
  elementTextStyle={styles.elementTextStyle}
/>;

🎬 Preview

Properties

Know more about ViewProps, ViewStyle, FlatListProps, TextStyle, decelerationRate

Note: In case of a manual prop change, make sure to reload the application to see the changes in the component.

WheelPickerRef Methods

scrollToIndex()

scrollToIndex(index: number): void

scrollToIndex function that scroll to particular index.

Example

A full working example project is here Example

yarn
yarn example ios   // For ios
yarn example android   // For Android

Find this library useful? ❤️

Support it by joining stargazers for this repository.⭐

Bugs / Feature requests / Feedbacks

For bugs, feature requests, and discussion please use GitHub Issues, GitHub New Feature, GitHub Feedback

🤝 How to Contribute

We'd love to have you improve this library or fix a problem 💪 Check out our Contributing Guide for ideas on contributing.

Awesome Mobile Libraries

• Check out our other available awesome mobile libraries

License

• MIT License