react-native-animated-wheel-picker

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