# react-native-ts-wheel-picker

> a sliding(wheel) picker built purely in JavaScript(use ts) that can be applied to iOS，Android and HarmonyOS platforms

Latest version **2.0.1** (published 2024-06-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-ts-wheel-picker
pnpm add react-native-ts-wheel-picker
yarn add react-native-ts-wheel-picker
bun add react-native-ts-wheel-picker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2024-06-16 |
| First published | 2024-06-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 37.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wangxin |
| Maintainers | wangchuaichuai |
| Keywords | wheel picker, react-native, native, HarmonyOS, iOS, Android, Slide selection, sliding, wheel, picker, 滑动选择, 选择, 跨平台 |

## Links

- npm: https://www.npmjs.com/package/react-native-ts-wheel-picker
- npm.io page: https://npm.io/package/react-native-ts-wheel-picker

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-native](https://npm.io/package/react-native.md) ^0.72.5

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2024-06-16
- 2.0.0 — 2024-06-16
- 1.0.0 — 2024-06-16
- 0.0.1 — 2024-06-16

## README

# Welcome to the RN sliding selection component, which is already compatible with iOS, Android, and HarmonyOS Next. It is a pure tsx component and does not require native dependency support

### Parameter Introduction

```typescript
interface THWheelPickerProps extends ViewStyle {
  /**
   * wheelHeader参数
   */
  // 点击取消触发的方法
  // Click to cancel the triggering method
  onCancel?: () => void
  // 点击确认触发的方法
  // Click to confirm the triggering method
  onConfirm?: (e: any) => void
  // 标题 title
  title?: string | undefined
  // 返回标题 left title
  leftTitle?: string | undefined
  // 确认标题 rightTitle
  rightTitle?: string | undefined
  // 返回自定义 custom left view
  leftHeaderView?: ReactNode | undefined
  // 确认自定义 custom right view
  rightHeaderView?: ReactNode | undefined
  // 标题自定义 custom title view
  titleHeaderView?: ReactNode | undefined

  /**
   * wheelContainer参数, titleview 和滑动选择中间的部分
   */
  containerView?: ReactNode | Function | undefined
  /**
   * wheelPicker参数
   */
  // 展示 is show ?
  visible: boolean
  // 数据源格式 data Source
  dataSource: Array<THWheelPickerDataSource>
  // 需要展示的行列数 cols
  cols: number
  // line为模拟iOS原生选择的样式，block为两行线的模式
  // Line is a style that simulates iOS native selection, while block is a two line pattern
  lineType?: 'line' | 'block'
  // 默认的数组，例如树形结构想选择某个初始化的值，需要先defaultValue中传入这一组初始化的值
  // A default array, such as a tree structure, to select an initialized value, you need to first pass in this set of initialized values from the defaultValue
  defaultValue?: Array<string>
  // 字体样式
  fontStyle?: StyleProp<TextStyle> | undefined
  // item的高度
  itemHeight?: number | undefined
  // 滚动区域的高度
  wheelHeight?: number | undefined
  // ref
  wheelRef?: Ref<IRefs | undefined>
}
```

- The above are optional parameters

####

1. **onCancel** is Cancel button method
2. **onConfirm** is Confirm button method
3. **title** is title view text
4. **leftTitle** is custom left title text
5. **rightTitle** is custom right title text
6. **leftHeaderView** is custom left title view
7. **rightHeaderView** is custom right title view
8. **titleHeaderView** is custom main title view
9. **containerView** The part located in the middle of the title and sliding area, which does not exist if not set
10. **visible** is show？
11. **dataSource** Data sources that match label, value, and children
12. **cols** num cols
13. **lineType** The type of sliding area mask, where line represents the style of simulating iOS, and block represents the horizontal line style
14. **defaultValue** Default data requires passing in the default selected value value value
15. **itemHeight** height of item
16. **wheelRef** ref of wheel, can get state

```typescript
<>
  <WheelPicker
    containerView={
      <View
        style={{ height: 40, justifyContent: 'center', alignItems: 'center' }}
      >
        <Text>{'container view'}</Text>
      </View>
    }
    style={{
      position: 'absolute',
      top: '50%',
      width: '100%',
      height: 400,
      borderWidth: 1,
      borderColor: 'red',
    }}
    lineType="block"
    visible={true}
    defaultValue={['a', 'mala']}
    dataSource={[
      { label: 'a', value: 'a', children: [{ label: 'b', value: 'b' }] },
      { label: 'a1', value: 'a1', children: [{ label: 'b1', value: 'b1' }] },
      { label: 'aa', value: 'aa', children: [{ label: 'ba', value: 'ba' }] },
      {
        label: 'aaa',
        value: 'aaaa',
        children: [{ label: 'baa', value: 'baa' }],
      },
      {
        value: 'mala',
        label: 'aaa',
        children: [
          {
            value: 'asda',
            label: 2222,
            children: [{ value: 'a', label: 'b' }],
          },
        ],
      },
    ]}
    cols={1}
  />
</>
```

1. This is line mode, and the mask color style can be changed. Zoom in to see the color difference in the image
   [![pkwBWo8.jpg](https://s21.ax1x.com/2024/06/16/pkwBWo8.jpg)](https://imgse.com/i/pkwBWo8)
2. use block
   [![pkwBRdf.jpg](https://s21.ax1x.com/2024/06/16/pkwBRdf.jpg)](https://imgse.com/i/pkwBRdf)

---
_Source: https://npm.io/package/react-native-ts-wheel-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._