@amabeth/repeating-wheel-picker
    Preparing search index...

    Type Alias RepeatingWheelPickerProps<T>

    type RepeatingWheelPickerProps<T> = {
        setSelected: (t: T) => void;
        initialIndex: number;
        data: T[];
        getLabel?: (t: T) => string;
        containerOnLayout?: (event: LayoutChangeEvent) => void;
        enabled?: boolean;
        itemHeight?: number;
        itemDisplayCount?: number;
        containerVerticalPadding?: number;
        containerHorizontalPadding?: number;
        containerStyle?: ViewStyle;
        itemContainerStyle?: ViewStyle;
        itemTextStyle?: TextStyle;
        enableGradient?: boolean;
        gradientFadeColor?: ColorValue;
    }

    Type Parameters

    • T
    Index

    Properties

    setSelected initialIndex data getLabel? containerOnLayout? enabled? itemHeight? itemDisplayCount? containerVerticalPadding? containerHorizontalPadding? containerStyle? itemContainerStyle? itemTextStyle? enableGradient? gradientFadeColor?

    Properties

    setSelected: (t: T) => void

    Function to set currently selected element and use it in your application.

    Type declaration

      • (t: T): void

      • Parameters

        • t: T

          currently selected element

        Returns void

    const [selected, setSelected] = useState(0);

    return (
      <RepeatingWheelPicker
        setSelected={setSelected}
        //...
      />
    );
    initialIndex: number

    Index to initially center.

    data: T[]

    Data to display.

    getLabel?: (t: T) => string

    Function to retrieve the text to display for an element as a label.

    Type declaration

      • (t: T): string

      • Parameters

        • t: T

          element to retrieve label for

        Returns string

    (t: T) => `${t}`
    containerOnLayout?: (event: LayoutChangeEvent) => void

    Function called when the layout of the container changes.

    Example usage for monitoring the container's height:

    const [pickerHeight, setPickerHeight] = useState<number>(0);

    const onLayout = useCallback((event: LayoutChangeEvent) => {
      const { height } = event.nativeEvent.layout;
      setPickerHeight(height);
    }, []);

    return (
      <View style={{flexDirection: "row"}}>
        <View style={{height: height}}>
          <Text>Picker label</Text>
        </View>
        <RepeatingWheelPicker
          //...
          containerOnLayout={onLayout}
        />
      </View>
    );

    Type declaration

      • (event: LayoutChangeEvent): void

      • Parameters

        • event: LayoutChangeEvent

          layout change event that triggered onLayout

        Returns void

    () => {}
    enabled?: boolean

    Enables / disables scrolling of the wheel picker.

    true
    itemHeight?: number

    Height per displayed item.

    itemTextStyle.fontSize + 15
    itemDisplayCount?: number

    Number of items to display.

    3
    containerVerticalPadding?: number

    Vertical padding for the container of the wheel picker.

    0
    containerHorizontalPadding?: number

    Horizontal padding for the container of the wheel picker.

    10
    containerStyle?: ViewStyle

    Styling for the container of the wheel picker.

      {
        backgroundColor: "black"
      }
    itemContainerStyle?: ViewStyle

    Styling for the container of each element.

      {
        backgroundColor: "transparent",
        justifyContent: "center"
      }
    itemTextStyle?: TextStyle

    Styling for the text of the elements.

      {
        fontSize: "18",
        color: "white"
      }
    enableGradient?: boolean

    If enabled, will show a gradient fade towards the top and bottom of the wheel picker.

    true
    gradientFadeColor?: ColorValue

    Color the gradient should fade to at the top and bottom.

    containerStyle.backgroundColor

    Settings

    Member Visibility

    On This Page

    Properties