react-native-ui-lib/src/components/WheelPicker/wheelPicker.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "WheelPicker",
  "category": "form",
  "description": "A customizable WheelPicker component",
  "note": "When using Android by default the FlatList will have <code>maxToRenderPerBatch</code> prop set to <code>items.length</code> to solve FlatList bug on Android, you can override it by passing your own <code>flatListProps</code> with <code>maxToRenderPerBatch</code> prop.<br/>See the RN FlatList issue for more info: https://github.com/facebook/react-native/issues/15990",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WheelPickerScreen.tsx",
  "images": [],
  "props": [
    {
      "name": "initialValue",
      "type": "number | string",
      "description": "Initial value (uncontrolled)"
    },
    {
      "name": "items",
      "type": "WheelPickerItemProps[]",
      "description": "Data source for WheelPicker"
    },
    {
      "name": "itemHeight",
      "type": "number",
      "description": "Height of each item in the WheelPicker",
      "default": "44"
    },
    {
      "name": "numberOfVisibleRows",
      "type": "number",
      "description": "Number of rows visible",
      "default": "5"
    },
    {
      "name": "activeTextColor",
      "type": "string",
      "description": "Text color for the focused row"
    },
    {
      "name": "inactiveTextColor",
      "type": "string",
      "description": "Text color for other, non-focused rows"
    },
    {
      "name": "textStyle",
      "type": "TextStyle",
      "description": "Row text custom style"
    },
    {
      "name": "label",
      "type": "string",
      "description": "Additional label to render next to the items text"
    },
    {
      "name": "labelStyle",
      "type": "TextStyle",
      "description": "Additional label's style"
    },
    {
      "name": "labelProps",
      "type": "TextProps",
      "description": "Additional label's props"
    },
    {
      "name": "onChange",
      "type": "(item: string | number, index: number) => void",
      "description": "Change item event callback"
    },
    {
      "name": "style",
      "type": "ViewStyle",
      "description": "Container's custom style",
      "note": "height is computed according to itemHeight * numberOfVisibleRows"
    },
    {
      "name": "align",
      "type": "WheelPickerAlign",
      "description": "Align the content to center, right ot left",
      "default": "center"
    },
    {
      "name": "separatorsStyle",
      "type": "ViewStyle",
      "description": "Extra style for the separators"
    },
    {
      "name": "testID",
      "type": "string",
      "description": "test identifier"
    },
    {
      "name": "flatListProps",
      "type": "FlatListProps",
      "description": "Props to be sent to the FlatList."
    }
  ],
  "snippet": [
    "<WheelPicker",
    "  items={[{label: 'Yes', value: 'yes'}, {label: 'No', value: 'no'}, {label: 'Maybe', value: 'maybe'}]$1}",
    "  initialValue={'yes'$2}",
    "  onChange={() => console.log('changed')$3}",
    "/>"
  ],
  "docs": {
    "hero": {
      "title": "WheelPicker",
      "description": "A customizable WheelPicker component"
    },
    "tabs": [
      {
        "title": "UX Guidelines",
        "sections": [
          {
            "type": "section",
            "content": [
              {
                "value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=13-134250&embed-host=share",
                "height": 1600
              }
            ]
          }
        ]
      }
    ]
  }
}