react-native-ui-lib/src/incubator/WheelPicker/Item.js

<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a

import React, { useCallback, useMemo, memo } from 'react';
import { StyleSheet } from 'react-native';
import Animated, { interpolateColor, useAnimatedStyle } from 'react-native-reanimated';
import Text from "../../components/text";
import TouchableOpacity from "../../components/touchableOpacity";
import { Colors, Spacings } from "../../../src/style";
import { asBaseComponent } from "../../commons/new";
import { WheelPickerAlign } from "./types";
const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
const AnimatedText = Animated.createAnimatedComponent(Text);
const WheelPickerItem = memo(({
  index,
  label,
  fakeLabel,
  fakeLabelStyle,
  fakeLabelProps,
  itemHeight,
  onSelect,
  offset,
  activeColor = Colors.primary,
  inactiveColor = Colors.grey20,
  style,
  testID,
  centerH = true,
  align
}) => {
  const selectItem = useCallback(() => onSelect(index), [index]);
  const itemOffset = index * itemHeight;
  const animatedColorStyle = useAnimatedStyle(() => {
    const color = interpolateColor(offset.value, [itemOffset - itemHeight, itemOffset, itemOffset + itemHeight], [inactiveColor, activeColor, inactiveColor]);
    return {
      color
    };
  }, [itemHeight]);
  const containerStyle = useMemo(() => {
    return [{
      height: itemHeight
    }, styles.container];
  }, [itemHeight]);
  return <AnimatedTouchableOpacity activeOpacity={1} style={containerStyle} key={index} centerV centerH={align ? align === WheelPickerAlign.CENTER : centerH} right={align ? align === WheelPickerAlign.RIGHT : !centerH} left={align === WheelPickerAlign.LEFT} onPress={selectItem} // @ts-ignore reanimated2
  index={index} testID={testID} row>
      <AnimatedText text60R testID={`${testID}.text`} numberOfLines={1} style={[animatedColorStyle, style, fakeLabel ? styles.textWithLabelPadding : styles.textPadding]}>
        {label}
      </AnimatedText>
      {fakeLabel && <Text marginL-s2 marginR-s5 text80M color={'white'} {...fakeLabelProps} style={fakeLabelStyle}>
          {fakeLabel}
        </Text>}
    </AnimatedTouchableOpacity>;
});
WheelPickerItem.displayName = 'Incubator.WheelPickerItem';
export default asBaseComponent(WheelPickerItem);
const styles = StyleSheet.create({
  container: {
    minWidth: Spacings.s10
  },
  textPadding: {
    paddingHorizontal: Spacings.s5
  },
  textWithLabelPadding: {
    paddingLeft: Spacings.s5
  }
});