@uiw/react-native/lib/Picker/components/WheelPicker/index.js

UIW for React Native

import React, { useEffect, useMemo, useRef } from 'react';
import { Animated, SafeAreaView, StyleSheet, View } from 'react-native';
import { useTheme } from '@shopify/restyle';
import WheelPickerItem from './WheelPickerItem';
export default function WheelPicker({
  data,
  value,
  indicatorBackgroundColor,
  containerStyle,
  itemStyle,
  itemTextStyle,
  itemHeight = 40,
  onChange
}) {
  const theme = useTheme();
  const flatListRef = useRef(null);
  const scrollY = useRef(new Animated.Value(0)).current;
  const containerHeight = 5 * itemHeight;
  const paddedOptions = useMemo(() => {
    const array = [...data];
    for (let i = 0; i < 2; i++) {
      array.unshift(undefined);
      array.push(undefined);
    }
    return array;
  }, [data]);
  let selectedIndex = data.findIndex(item => item?.value === value);
  if (selectedIndex === -1) {
    selectedIndex = 0;
  }
  const offsets = useMemo(() => [...Array(paddedOptions.length)].map((_, i) => i * itemHeight), [paddedOptions, itemHeight]);
  const currentScrollIndex = Animated.add(Animated.divide(scrollY, itemHeight), 2);
  const handleMomentumScrollEnd = event => {
    const offsetY = Math.min(itemHeight * (data.length - 1), Math.max(event.nativeEvent.contentOffset.y, 0));
    let index = offsetY / itemHeight + 1;
    const currentItem = data[index - 1];
    if (currentItem) {
      onChange?.(currentItem.value);
    }
  };
  useEffect(() => {
    flatListRef.current?.scrollToIndex({
      index: selectedIndex,
      animated: false
    });
  }, [selectedIndex]);
  return <SafeAreaView style={[styles.container, {
    height: containerHeight
  }, containerStyle]}>
      <View style={[styles.selectedIndicator, {
      transform: [{
        translateY: -itemHeight / 2
      }],
      height: itemHeight,
      backgroundColor: indicatorBackgroundColor ?? theme.colors.gray100,
      borderRadius: 2
    }]} />
      <Animated.FlatList ref={flatListRef} style={styles.scrollView} showsVerticalScrollIndicator={false} onScroll={Animated.event([{
      nativeEvent: {
        contentOffset: {
          y: scrollY
        }
      }
    }], {
      useNativeDriver: true
    })} onMomentumScrollEnd={handleMomentumScrollEnd} snapToOffsets={offsets} decelerationRate={'fast'} initialScrollIndex={selectedIndex} getItemLayout={(_, index) => ({
      length: itemHeight,
      offset: itemHeight * index,
      index
    })} data={paddedOptions} keyExtractor={(_, index) => index.toString()} renderItem={({
      item: option,
      index
    }) => <WheelPickerItem index={index} option={option} style={itemStyle} textStyle={itemTextStyle} height={itemHeight} currentIndex={currentScrollIndex} visibleRest={2} />} />
    </SafeAreaView>;
}
const styles = StyleSheet.create({
  container: {
    position: 'relative',
    flex: 1
  },
  selectedIndicator: {
    position: 'absolute',
    width: '100%',
    top: '50%'
  },
  scrollView: {
    overflow: 'hidden',
    flex: 1
  }
});