https://github.com/jvaclavik/react-native-toggle-picker

React Native Toggle Picker is easy wrapper for React Native Picker. It has better user experience on iOS.
https://github.com/jvaclavik/react-native-toggle-picker

Last synced: 4 months ago
JSON representation

React Native Toggle Picker is easy wrapper for React Native Picker. It has better user experience on iOS.

• Host: GitHub
• URL: https://github.com/jvaclavik/react-native-toggle-picker
• Owner: jvaclavik
• License: mit
• Created: 2017-02-19T16:22:07.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-30T14:48:50.000Z (over 7 years ago)
• Last Synced: 2024-09-28T18:43:17.148Z (4 months ago)
• Language: JavaScript
• Size: 554 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-toggle-picker

React Native Toggle Picker is easy wrapper for [React Native Picker](https://facebook.github.io/react-native/docs/picker.html). It has better user experience on iOS.

* `TogglePicker` must be surrounded with `ScrollView` (not as the closest parent)

* Works also on Android but there are no toggle effect (it's not according UX guidelines)

* PRs welcome

## Demo

![Showtime](react-native-toggle-picker.gif?raw=true "Showtime")

## Installation

```bash

npm i react-native-toggle-picker --save

```

or

```bash

yarn add react-native-toggle-picker --save

```

## Use

```javascript

import TogglePicker from 'react-native-toggle-picker'

...

  

    

       {this.handleChange}}

      >

        

        

        

        

        

      

    

  

```

## Props

|Prop name | Default prop | Required | Note

| --- | --- | --- | --- |

| `androidBoxStyle` | `{}` | - | Custom styles |

| `androidPickerStyle` | `{}` | - | Custom styles |

| `androidPickerWrapperStyle` | `{}` | - | Custom styles |

| `arrowColor` | `rgb(178, 178, 178)` | - | - |

| `arrowSize` | `30` | - | - |

| `arrowDownType` | `'keyboard-arrow-down'` | - | Icon name from`react-native-vector-icons/MaterialIcons` |

| `arrowUpType` | `'keyboard-arrow-up'` | - | Icon name from`react-native-vector-icons/MaterialIcons` |

| `expanded` | `false` | - | Boolean if box should be expanded or not |

| `iosBoxStyle` | `{}` | - | Custom styles |

| `iosPickerStyle` | `{}` | - | Custom styles |

| `iosPickerWrapperStyle` | `{}` | - | Custom styles |

| `onValueChange` | - | Yes | Prop from RNPicker (expects func) |

| `label` | - | Yes | Left label on the left of title |

| `selectedValue` | - | Yes | Prop from RNPicker (expects any) |

| `value` | `null` | - | Value on the right title |