Skip to content

An all JavaScript wheel picker for react-native without any native code.

Notifications You must be signed in to change notification settings

erksch/react-native-wheely

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

74 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-wheely

CircleCI npm package npm downloads

An all JavaScript, highly customizable wheel picker for react native.

drawingdrawingdrawingdrawingdrawingdrawingdrawing

Installation

Install with npm

npm install --save react-native-wheely

Install with yarn

yarn add react-native-wheely

Usage

import React, { useState } from 'react';
import WheelPicker from 'react-native-wheely';

function CityPicker() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  return (
    <WheelPicker
      selectedIndex={selectedIndex}
      options={['Berlin', 'London', 'Amsterdam']}
      onChange={(index) => setSelectedIndex(index)}
    />
  );
}

Props

Name Type Description
options string[] Options to be displayed in the wheel picker. Options are rendered from top to bottom, meaning the first item in the options will be at the top and the last at the bottom.
selectedIndex number Index of the currently selected option.
onChange (index: number) => void Handler that is called when the selected option changes.
visibleRest number Amount of additional options that are visible in each direction. Default is 2, resulting in 5 visible options.
itemHeight number Height of each option in the picker. Default is 40.
itemStyle StyleProp<ViewStyle> Style for the option's container.
itemTextStyle StyleProp<TextStyle> Style for the option's text.
containerStyle StyleProp<ViewStyle> Style of the picker.
selectedIndicatorStyle StyleProp<ViewStyle> Style of overlaying selected-indicator in the middle of the picker.
rotationFunction (x: number) => number Function to determine the x rotation of items based on their current distance to the center (which is x). Default is rotation equation
scaleFunction (x: number) => number Function to determine the scale of items based on their current distance to the center (which is x). Default is scale quation
opacityFunction (x: number) => number Function to determine the opacity of items based on their current distance to the center (which is x). Default is opacity equation
decelerationRate "normal", "fast", number How quickly the underlying scroll view decelerates after the user lifts their finger. See the ScrollView docs. Default is "fast".
containerProps ViewProps Props that are applied to the container which wraps the FlatList and the selected indicator.
flatListProps FlatListProps Props that are applied to the FlatList.

Memoization

The individual items in the picker (<WheelPickerItem />) are strictly memoized, meaning that they will not rerender after the initial render. Rerendering the picker items uncontrollably would lead to bad performance with large number of options. Item styles, animation functions and other parameters of items therefore must be static and changes to them after the initial render will have no effect.

About

An all JavaScript wheel picker for react-native without any native code.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published