react-native-animated-wheel-picker

A cross-platform wheel picker use Reanimated 2 implementation.

Preview

Features

• Smooth scroll animations
• Custom text style, view style, mask component style
• Animations built by react-native-reanimated

Installation

npm install react-native-animated-wheel-picker

or

yarn add react-native-animated-wheel-picker

Need to install peer dependencies react-native-reanimated, react-native-gesture-handler, @react-native-masked-view/masked-view.

Usage

import Picker from "react-native-animated-wheel-picker";

// ...
const DATA = [
  { title: '2022', value: 1 },
  { title: '2023', value: 2 },
  { title: '2024', value: 3 },
];

const WheelPicker = () => {
  const [year, setYear] = useState();
  return (
    <View style={{height:200}}>
      <Picker
        pickerData={DATA}
        textStyle={{ fontSize: 27 }}
        onSelected={(item) => setYear(item)}
      />
    </View>
  );
};

Props

Inherite ViewProps

| Name | Type | Default | Description | | -------------------------------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | | pickerData | {"title":string,"value":any} | REQUIRED | Data for each element "title" key display on picker item | | itemHeight | number | 30 | Height of each picker item | | visible | number | 5 | Visible item on picker
| initialIndex | number | 0 | Set initial selected item | | maskedComponents | JSX.Element or JSX.Element[] | MaskedComponent | The component masked picker view | | contentContainerStyle | StyleProp<ViewStyle>| undefined | Item view style
| textStyle | StyleProp<TextStyle> | undefined | Item text style | | onSelected | ({"title":string,"value":any},index:number) => void |REQUIRED | Callback when user select item that will return element of pickerData array

MaskedComponent

<View>
  <View
    style={{
      height: itemHeight * Math.trunc(visible / 2),
      backgroundColor: 'grey',
    }}
  />

  <View style={{ height: itemHeight, backgroundColor: 'white' }} />
  <View
    style={{
      height: itemHeight * Math.trunc(visible / 2),
      backgroundColor: 'grey',
    }}
  />
</View>;

Credit

• Animation tutor https://www.youtube.com/watch?v=PVSjPswRn0U

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT