All Projects → ThePaulMcBride → react-native-smart-picker

ThePaulMcBride / react-native-smart-picker

Licence: MIT license
React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-smart-picker

react-native-picker-box
Simple and configurable component picker for react native
Stars: ✭ 0 (-100%)
Mutual labels:  dropdown, picker
react-native-select-pro
React Native dropdown (select) component developed by Mobile Reality
Stars: ✭ 79 (+315.79%)
Mutual labels:  dropdown, picker
csc picker
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.
Stars: ✭ 25 (+31.58%)
Mutual labels:  dropdown, picker
React Native Modal Dropdown
A react-native dropdown/picker/selector component for both Android & iOS.
Stars: ✭ 1,103 (+5705.26%)
Mutual labels:  dropdown, picker
Re Spinner
A spinner that supports item click events
Stars: ✭ 19 (+0%)
Mutual labels:  dropdown, picker
Mkdropdownmenu
🔻 Dropdown Menu for iOS with many customizable parameters to suit any needs
Stars: ✭ 523 (+2652.63%)
Mutual labels:  dropdown, picker
react-native-multi-selectbox
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user interface & user experience on both platforms.
Stars: ✭ 169 (+789.47%)
Mutual labels:  dropdown, picker
React Native Dropdown Picker
A single / multiple, categorizable & searchable item picker (dropdown) component for react native which supports both Android & iOS.
Stars: ✭ 230 (+1110.53%)
Mutual labels:  dropdown, picker
React Native Number Please
🔢 Generate react-native pickers with range numbers.
Stars: ✭ 30 (+57.89%)
Mutual labels:  dropdown, picker
React Native Picker Select
🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
Stars: ✭ 1,229 (+6368.42%)
Mutual labels:  dropdown, picker
React Native In App Notification
🔔 Customisable in-app notification component for React Native
Stars: ✭ 206 (+984.21%)
Mutual labels:  dropdown
Expandabletable
AZExpandable is a lightweight proxy for UITableView to expand cells.
Stars: ✭ 218 (+1047.37%)
Mutual labels:  dropdown
Autocomplete
Blazing fast and lightweight autocomplete widget without dependencies. Only 1KB gzipped. Demo:
Stars: ✭ 244 (+1184.21%)
Mutual labels:  dropdown
react-native-monorepo
Monorepo with UI components.
Stars: ✭ 177 (+831.58%)
Mutual labels:  picker
Ng Multiselect Dropdown
Multiple Select Dropdown Component
Stars: ✭ 199 (+947.37%)
Mutual labels:  dropdown
Swiftui Animation
SwiftUI Animation
Stars: ✭ 233 (+1126.32%)
Mutual labels:  dropdown
Azdropdownmenu
A simple dropdown menu component for iPhone
Stars: ✭ 198 (+942.11%)
Mutual labels:  dropdown
Vue Treeselect
A multi-select component with nested options support for Vue.js
Stars: ✭ 2,347 (+12252.63%)
Mutual labels:  dropdown
Flutter smart select
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.
Stars: ✭ 179 (+842.11%)
Mutual labels:  dropdown
TimeRangePicker
A customizable, easy-to-use, and functional circular time range picker library for Android. Use this library to mimic Apple's iOS or Samsung's bedtime picker.
Stars: ✭ 266 (+1300%)
Mutual labels:  picker

react-native-smart-picker

React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android.

  • The SmartPicker scene should be wrapped in a ScrollView to allow the page to grow as the toggle opens
  • Works on Android but there are no toggle effect (follows native UX guidelines)
  • PRs welcome

Demo

Showtime

Installation

npm i react-native-smart-picker --save

or

yarn add react-native-smart-picker --save

Use

import SmartPicker from 'react-native-smart-picker'

...

 this.state = {
            selected: "A",
           
        };

 handleChange(value: string) {
        this.setState({
            selected: value
        });
    }

<ScrollView style={"Your custom styles here"}>
  <View style={{flex: 1, marginTop: 20}}>
    <ScrollView style={styles.container}>
      <SmartPicker
        selectedValue={this.state.selected}
        label='Set you favorite country'
        onValueChange={this.handleChange.bind(this)}
      >
        <Picker.Item label='Austria' value='A' />
        <Picker.Item label='Czechia' value='CZ' />
        <Picker.Item label='Germany' value='DE' />
        <Picker.Item label='Poland' value='PL' />
        <Picker.Item label='Slovakia' value='SLO' />
      </SmartPicker>
    </ScrollView>
  </View>
</ScrollView>

Props

Prop name Default prop Required Note
androidBoxStyle {} - Custom styles
androidPickerTitle true No Enable or disable title in android picker box
androidPickerStyle {} - Custom styles
androidPickerWrapperStyle {} - Custom styles
androidBoxStyle {} - Custom styles
arrowColor rgb(178, 178, 178) - -
arrowSize 30 - -
arrowDownType 'keyboard-arrow-down' - Icon name fromreact-native-vector-icons/MaterialIcons
arrowUpType 'keyboard-arrow-up' - Icon name fromreact-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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].