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.
The npm package react-native-wheel-pick receives a total of 0 weekly downloads. As such, react-native-wheel-pick popularity was classified as not popular.
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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.