react-native-wheel-pick
Advanced tools
React native wheel picker for both iOS and android. (Support DatePicker)
This is not original but inspired by react-native-wheel-datepicker
React Native >= 0.60+
npm install react-native-wheel-pick --save --legacy-peer-deps
npm install @react-native-picker/picker --save --legacy-peer-deps
npm install @react-native-community/datetimepicker --save --legacy-peer-deps
npx pod-install
npx react-native run-ios // re-build native-code
npx react-native run-android // re-build native-code for gradle
React Native < 0.60
npm install react-native-wheel-pick
react-native link react-native-wheel-pick
import { Picker, DatePicker } from 'react-native-wheel-pick';
// use Picker
<Picker
style={{ backgroundColor: 'white', width: 300, height: 215 }}
selectedValue='item4'
pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
onValueChange={value => { console.log(value) }}
/>
// use DatePicker
<DatePicker
style={{ backgroundColor: 'white', width: 370, height: 240 }}
onDateChange={date => { console.log(date) }}
/>
// DatePicker set default select date
<DatePicker
style={{ height: 215, width: 300 }}
date={new Date('2018-06-27')} // Optional prop - default is Today
onDateChange={date => { console.log(date) }}
/>
// DatePicker set min/max Date
<DatePicker
style={{ height: 215, width: 300 }}
minimumDate={new Date('2000-01-01')}
maximumDate={new Date('2050-12-31')}
onDateChange={date => { console.log(date) }}
/>
// pickerData also support array of object.
// Way 1
<Picker
selectedValue='item4'
pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
onValueChange={value => { console.log(value) }}
/>
// Optional Way 2
<Picker
style={{ backgroundColor: 'white', width: 300, height: 215 }}
selectedValue='5765387680'
pickerData={[
{ value : '5765387677', label : 'item1' },
{ value : '5765387678', label : 'item2' },
{ value : '5765387679', label : 'item3' },
{ value : '5765387680', label : 'item4' },
{ value : '5765387681', label : 'item5' },
{ value : '5765387682', label : 'item6' },
{ value : '5765387683', label : 'item7' },
]}
onValueChange={value => { console.log(value) }}
/>
// Android Only.
// These is special props for Android. (iOS not work)
// You can also use these props for DatePicker, too.
<Picker
textColor='red'
textSize={20}
selectTextColor='green'
isShowSelectBackground={false} // Default is true
selectBackgroundColor='#8080801A' // support HEXA color Style (#rrggbbaa)
// (Please always set 'aa' value for transparent)
isShowSelectLine={false} // Default is true
selectLineColor='black'
selectLineSize={6} // Default is 4
/>
// Android Only.
<DatePicker
order='D-M-Y' // Default is M-D-Y
/>
deprecated-react-native-prop-types--legacy-peer-deps[Android]
[Android]
[Android]
[IOS]
For version 1.1.3 - I update this library support for React Native Version 0.68.2 / Android 11 / iOS 15.2
If you use React Native Version less than 0.68.2 / Android older than 11 / iOS older than 15.2. It is possible to have unexpected bug.
I rarely check this lib. (6 Months - 3 Years). Up on my life's time.
If you want to pay me coffee for quickly check & merge your request. Please contact me directly facebook.com/tron.natthakorn OR you can fork this project.
import { Platform } from 'react-native';
import { Picker, DatePicker } from 'react-native-wheel-pick';
const isIos = Platform.OS === 'ios'
// use Picker
<Picker
style={{ backgroundColor: 'white', width: 300, height: 215 }}
selectedValue='item4'
pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
onValueChange={value => { }}
itemSpace={30} // this only support in android
/>
// use DatePicker
<DatePicker
style={{ backgroundColor: 'white', height: 215, width: isIos ? 300 : undefined }}
// android not support width
onDateChange={date => { }}
/>
// DatePicker set default choose date
<DatePicker
style={{ height: 215, width: isIos ? 300 : undefined }}
date={new Date('2018-06-27')} // Optional prop - default is Today
onDateChange={date => { }}
/>
// DatePicker set min/max Date
<DatePicker
style={{ height: 215, width: isIos ? 300 : undefined }}
minimumDate={new Date('2000-01-01')}
maximumDate={new Date('2050-12-31')}
onDateChange={date => { }}
/>
[Android]
[IOS]
[IOS]
[Android]
[Android]
[Android]
Copyright 2022 tron.natthakorn@engineer.com
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
FAQs
React native wheel picker iOS style with android.
The npm package react-native-wheel-pick receives a total of 4,673 weekly downloads. As such, react-native-wheel-pick popularity was classified as popular.
We found that react-native-wheel-pick demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Next.js has patched a critical vulnerability (CVE-2025-29927) that allowed attackers to bypass middleware-based authorization checks in self-hosted apps.
Security News
A survey of 500 cybersecurity pros reveals high pay isn't enough—lack of growth and flexibility is driving attrition and risking organizational security.
Product
Socket, the leader in open source security, is now available on Google Cloud Marketplace for simplified procurement and enhanced protection against supply chain attacks.