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-dev --legacy-peer-deps
npm install @react-native-picker/picker --save-dev --legacy-peer-deps
npm install @react-native-community/datetimepicker --save-dev --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) }}
/>
// for TypeScript
onValueChange={(value: string) => { console.log(value) }}
onDateChange={(date: Date) => { console.log(date) }}
// Set Text Color
<Picker textColor="red" />
// 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. (Optional Way)
// Normal Way
<Picker
selectedValue='item4'
pickerData={['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7']}
onValueChange={value => { console.log(value) }}
/>
// Optional Way
// `label` only use for show Text to UI.
// You cannot get `label` from onValueChange
<Picker
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) }} // '5765387680'
/>
// Android Only.
// These is special props for Android. (iOS not work)
// You can also use these props for DatePicker, too.
<Picker
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
/>
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. You can sponsor me
OR you can fork this project instead.
[iOS]
textColor, too. Add missing color option for iOS @aurotones[Android]
deprecated-react-native-prop-types--legacy-peer-deps[Android]
[Android]
[Android]
[IOS]
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.
We found that react-native-wheel-pick demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.