An awesome native wheel picker component for React Native.

Related tags

Spring Boot react typescript react-native picker wheelpicker
Overview

⛏️ react-native-picky

An awesome native wheel picker component for react-native.

Features

  • Supports multiple columns ✅

  • Supports looping ✅

  • Native Android and iOS components for improved performance ✅

  • Typescript ✅

Preview

Preview iOS Android
Single Column
Multiple Columns with looping

Installation

yarn add react-native-picky

Quick Start

import { Picker, PickerColumn, PickerItem } from 'react-native-picky';

export const Demo = () => (
  <Picker>
    <PickerColumn>
      <PickerItem label="Monday" value="Monday" />
      <PickerItem label="Tuesday" value="Tuesday" />
      <PickerItem label="Wednesday" value="Wednesday" />
      <PickerItem label="Thursday" value="Thursday" />
      <PickerItem label="Friday" value="Friday" />
    </PickerColumn>
  </Picker>
);

Props

<Picker />

Property Type Description Platform Default
loop boolean Enable looping options iOS, Android false
style object View style prop iOS, Android
onChange function A callback function when a value is changed in any column iOS, Android
numberOfLines number The number of lines for each row in a column iOS 1
hasCurtain boolean Enable the curtain to highlight the selected value Android true
curtainColor string Color of the curtain Android hsla(0, 0%, 0%, 0.1)
hasIndicator boolean Enable the indicator to highlight the selected value Android true
indicatorColor string Color of the indicator Android hsla(0, 0%, 0%, 0.1)
indicatorSize number The size of the indicator Android 1
itemSpace number The amount of space between items Android 12
textColor string The color of the item text Android #000000
textSize number The size of the item text Android 20

<PickerColumn />

Property Type Description Platform Default
selectedValue string | number The selected value iOS, Android
onChange function A callback function if the value is changed in this column iOS, Android
width number The width of this column iOS, Android Takes up the available space

<PickerItem />

Property Type Description Platform Default
label string The label of the item iOS, Android
value string | number The value of the item iOS, Android
testID string The testID of the item iOS
color string The color of the item text iOS

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Comments
  • Multiple Picker Groups is overflowing from screen

    Multiple Picker Groups is overflowing from screen

    I am trying to simulate a datetime picker , but because it is alotting the same space for every group, one of the groups is overflowing. Is it possible to maybe assign a flex value to each GroupPicker or something similar to shrink, expand? rsz_1655826009762

    bug 
    opened by itsramiel 4
  • (iOS)PickerGroup internal Props SelectValue has no effect after being set

    (iOS)PickerGroup internal Props SelectValue has no effect after being set

    When I set selectValue to A2, the inner scroll still points to A1！ image

    I checked in iOS and setSelectedIndexes internal Data was nil, the loop didn't finish image

    bug 
    opened by muyiyangyu 3
  • No more than the 24th serial number

    No more than the 24th serial number

    Hi, the PickerColumn`s 'selectedValue' prop error is no more than the 24th serial number. such as:

    const [list, setList] = useState([ {label: '1', value: 1}, {label: '2', value: 2}, ... {label: '29', value: 29}, {label: '30', value: 30}, ]) const [defaultValue, setDefaultValue] = useState(29)

    ' <Picker loop={true}> <PickerColumn selectedValue={defaultValue} onChange={obj=> setDefaultValue({value})}> {list.map((item, index) => ( <PickerItem label={item.label} value={item.value} key={index} /> ))} </ Picker >

    '

    but, the initialized view result show '24'

    opened by levi-li-yi 0
  • Add Maven Central repo

    Add Maven Central repo

    https://github.com/Liamandrew/react-native-picky/blob/79f5cf11d4b80b3b0778a3934ff237a237107c8e/android/build.gradle#L23

    JCenter is down today, breaking my builds. Being the JCenter is shutting down it would be the correct thing to add mavenCentral()

    opened by mordechaim 0
  • [Feature request] Groups separator

    [Feature request] Groups separator

    I'm using picky as a price picker and at some point I thought that I'd like to have a separator located between PickerGroups. The image below shows an example of the location of such a separator (absolute positioning). image

    I think one implementation approach to the separator would be a PickerGroup with a single PickerItem element that has scrolling disabled and custom style that i.e. allows to change the width.

    It would be really cool if you would consider such functionality 😊

    enhancement 
    opened by szpanel 0
Releases(v0.4.0)
Owner
null
GitHub
A React Native project starter with Typescript, a theme provider with hook to easy styling component, a folder architecture ready and some configs to keep a codebase clean.

React Native Boilerplate Folder structure : src ├── assets │   ├── audios │   ├── fonts │   ├── icons │   └── images ├── components │   ├── Layout.tsx

LazyRabbit 23 Sep 1, 2022
NPM Package - A react native component that let you to add a wavy background UI.

react-native-wavy-background A react native component that let you to add a wavy background UI. Installation npm install react-native-wavy-background

Shevon Soyza 10 Oct 19, 2022
With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any other file server

React Native In-App update With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any o

Nepein Andrey 7 Dec 21, 2022
An awesome Spring Boot Starter!

spring-boot-tony-starter An awesome Spring Boot Starter! Explore the docs » View Demo · Report Bug · Request Feature Table of Contents About The Proje

徐植君 11 Sep 13, 2022
PipelinR is a lightweight command processing pipeline ❍ ⇢ ❍ ⇢ ❍ for your Java awesome app.

PipelinR PipelinR is a lightweight command processing pipeline ❍ ⇢ ❍ ⇢ ❍ for your awesome Java app. PipelinR has been battle-proven on production, as

Eduards Sizovs 288 Jan 8, 2023
This app is simple and awesome notepad. It is a quick notepad editing experience when writing notes,emails,message,shoppings and to do list.

This app is simple and awesome notepad. It is a quick notepad editing experience when writing notes,emails,message,shoppings and to do list.It is easy to use and enjoy hassle free with pen and paper.

Md Arif Hossain 1 Jan 18, 2022
The lightweight library for compress image, video, and audio with an awesome experience

Would you like to support me? react-native-compressor Compress videos, images and audio before upload react-native-compressor package is a set of func

Shobbak 265 Jan 1, 2023
React native wrapper for Jitsi Meet SDK Library that rely on the native view (Activity / ViewController)

react-native-jitsi-meet-sdk React native wrapper for Jitsi Meet SDK Library. This Library implements the Jitsi SDK with a native activity on the Andro

null 7 May 2, 2022
Projeto criado na semana Spring React organizado pela escola Dev Superior com foco na prática/aprendizado das tecnologias Spring e React.

DSVendas Projeto criado na semana Spring React organizado pela escola Dev Superior com foco na prática/aprendizado das tecnologias Spring e React. htt

João Gabriel 3 May 18, 2021
In this course, we will learn how to build a complete full-stack web application using Spring boot as backend and React (React Hooks) as frontend

In this course, we will learn how to build a complete full-stack web application using Spring boot as backend and React (React Hooks) as frontend. We will use MySQL database to store and retrieve the data.

Ramesh Fadatare 43 Dec 22, 2022
A straight table component designed for performance

@qlik-oss/react-native-simple-grid A straight table component designed for performance Installation npm install @qlik-oss/react-native-simple-grid Usa

Qlik - Open Source Software 2 Apr 23, 2022
MiniMessage Component-based Placeholders for PaperMC and Velocity platforms

MiniMessage Component-based Placeholders for PaperMC and Velocity platforms

null 10 Dec 28, 2022
Insanely fast ECS (Entity Component System) for Java

|) () |\/| | |\| | () |\| Dominion is an Entity Component System library for Java. Entity Component System architecture promotes data-oriented program

Dominion 151 Jan 3, 2023
GalaxyCDC is a core component of PolarDB-X which is responsible for global binary log generation, publication and subscription.

中文文档 What is ApsaraDB GalaxyCDC ? GalaxyCDC is a core component of PolarDB-X which is responsible for global binary log generation, publication and su

null 56 Dec 19, 2022
Lightweight React Native UI Components inspired on Vant

vant-react-native Install yarn add vant-react-native Or npm install vant-react-native Usage import React, { Component } from 'react'; import { View, T

洛竹 51 Sep 29, 2022
Admob for React Native with powerful hooks and components

React Native Admob ⚠️ Please note, this package is under active development, which means it may be not stable to apply on production. Please use this

null 128 Jan 6, 2023
React Native wrapper around Indy SDK Java and Objective-C wrappers.

React Native Indy SDK React Native Indy SDK wrapper. Installation with npm: $ npm install indy-sdk-react-native --save with Yarn: $ yarn add indy-sdk-

Hyperledger 21 Dec 5, 2022
Ship React Native .jsbundles compressed by Brotli algorithm.

Ship compressed JS bundles Warning: not yet available for Android. Sometimes you need a very small .app, for example if you are building an App Clip.

Ivan Moskalev 37 Nov 15, 2022
Prevent Screenshots in your React Native app when needed. 🦄

React Native Prevent Screenshots Prevent Screenshots in your React Native app when needed. ?? Installation First, you need to install the package usin

Ahmed Mahmoud 64 Oct 19, 2022