react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

Last update: Aug 3, 2021

The React-Native-Picker

react native Picker component for both Android and iOS based on pure JavaScript.

Main

  • For the iOS, using PickerIOS as the basic.
  • This whole picker includes two types of pickers, one is the basic wheel picker which the wheels have no connection with each other, another is the cascade wheel picker which the whees have connection with each other.

How to install

npm install react-native-picker-xg --save

Example

image

Properties

  • For the cascade wheel Picker:

    • level: number, the number of the level of the wheels, and please make sure the number equals the length of the selectIndex's array if you have.[Mandatory]
    • data: [object, for more details to see the data structure part], the content of the picker.[Mandatory]
    • pickerNameStyle: CSS-layout, the style of the pickerName
    • cancelBtnStyle: CSS-layout, the style of the cancel button
    • confirmBtnStyle: CSS-layout, the confirm button's style
    • iconStyle: CSS-layout, the right downdrop button's style
    • iconName: string, the name of the icon
    • iconSize: number, the size of the icon
    • inputStyle: CSS-layout, the textInput's style
    • navStyle: CSS-layout, the style of the nav of the picker
    • textStyle: CSS-layout, the style of the inputText's inner text
    • pickerName: string, the text of the picker's name
    • inputValue: string, the initial text of the textInput
    • enable: bool, to enable or disable the textInput
    • confirmBtnText: string, the text of the confirm button
    • cancelBtnText: string, the text of the cancel button
    • visible: bool, init to show the wheels, when 'enable' is false, nomatter the value of 'visible', the wheels will not show. And there should not be more than 1 wheels with 'visible' is true in one page.
    • id: string, the id of your data
    • name: string, the label of your data
    • parentId: string, the parentId of your data
    • loading: array, the array of loading status
  • For the basic wheel picker:

    • data: [array, for more details to see the data structure part], the content of the picker.[Mandatory]
    • pickerNameStyle: CSS-layout, the style of the pickerName
    • cancelBtnStyle: CSS-layout, the style of the cancel button
    • confirmBtnStyle: CSS-layout, the confirm button's style
    • inputStyle: CSS-layout, the textInput's style
    • navStyle: CSS-layout, the style of the nav of the picker
    • textStyle: CSS-layout, the style of the inputText's inner text
    • iconStyle: CSS-layout, the right downdrop button's style
    • pickerName: string, the text of the picker's name
    • inputValue: string, the initial text of the textInput
    • enable: bool, to enable or disable the textInput
    • confirmBtnText: string, the text of the confirm button
    • cancelBtnText: string, the text of the cancel button
    • selectIndex: [number] ,initial selected item
    • visible: bool, init to show the wheels, when 'enable' is false, nomatter the value of 'visible', the wheels will not show. And there should not be more than 1 wheels with 'visible' is true in one page.

Method

  • For the cascade wheel Picker: we believe in the One-way flow of data, so, all the data is depend on you. And the picker is just the reflection of the data.

    • onresult: function, to get the final chose
    • onWheelChange: function, when wheel changes
    • onCancel: function, when you cancel the chose
  • For the basic data:

    • on Result: function, to get the final chose

Usage: you can see the example file to know how to use the component

We provide two ways for you to use this component.

The first one

npm install react-native-picker-xg --save

The second one

  • Step1--download the zip from the github
  • Step2--init an react-native project
  • Step3--copy the zip's content into your project
  • Step4--change the index.android.js's last line AppRegistry.registerComponent('widgets', () => TpickerEx);'s widgets into your project's name.
  • Step5--change the yourownip in line 19 in example/index.js to your own ip
  • Step6--npm install

GitHub

https://github.com/xgfe/react-native-picker-xg
You might also like...

A react-native dropdown component easy to customize for both iOS and Android.

A react-native dropdown component easy to customize for both iOS and Android.

react-native-element-dropdown react-native-element-dropdown A react-native dropdown component easy to customize for both iOS and Android. Getting star

May 16, 2022

The video recorder component that extends from react-native-camera. It works for both iOS & Android.

The video recorder component that extends from react-native-camera. It works for both iOS & Android.

react-native-beautiful-video-recorder The video recorder component that extends from react-native-camera. It works for both iOS & Android. Features: R

Apr 22, 2022

💃đŸģ Display Animated WebP images in React Native the hacky way, support for Android & iOS both

💃đŸģ Display Animated WebP images in React Native the hacky way, support for Android & iOS both

💃đŸģ react-native-animated-webp Display and control Animated WebP images in React Native the hacky way đŸ“Ļ Installation 👋 PeerDependencies first This

Apr 26, 2022

Native CardView for react-native (All Android version and iOS)

Native CardView for react-native (All Android version and iOS)

react-native-card-view Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop). Website Material Design Card Spec CardView

May 1, 2022

Animated Submit button. Works on both android and ios.

Animated Submit button. Works on both android and ios.

react-native-submit-button An Animated Submit Button. Works on both android and IOS. folds when in progress expands back when its ready Inspiration ht

Oct 1, 2021

đŸ”Ŋ A Picker component for React Native which emulates the native select interfaces for iOS and Android

đŸ”Ŋ A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native select interfaces for iOS and Android For iOS, by default w

May 8, 2022

An awesome and cross-platform React Native date picker and calendar component for iOS and Android

An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

Apr 7, 2022

An unified React Native Picker Modal component for iOS and Android.

An unified React Native Picker Modal component for iOS and Android.

React Native Picker Modal View React Native Module to select item picker modal. Created by Pankod An alternative to Picker and PickerIOS components wi

May 10, 2022
Comments
  • 1. uninstall error

    when i run "yarn remove react-native-picker-xg",and it looks like didn't uninstall correctly,because when i start project,it occurs error, can not find module "react-native-picker-xg", but i have uninstalled it,and in project, i didn't used this. so what happend?

    Reviewed by guopeng1994 at 2017-09-18 08:06
  • 2. Improve this component like datepicker

    I would improve this component like you wrote the datepicker. As the animation on the datepicker is much more smoother, has more options, etc Also would be nice to have better documentation like the datepicker instead of having to look in the example file. As last, The icons are not working, app gives error message that it can't find 'Entypo'

    Reviewed by MakhouT at 2017-10-14 16:22
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

Apr 4, 2022
A react-native dropdown/picker/selector component for both Android & iOS.
A react-native dropdown/picker/selector component for both Android & iOS.

react-native-modal-dropdown A react-native dropdown/picker/selector component for both Android & iOS. Features Pure JS. Compatible with both iOS and A

May 8, 2022
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

May 8, 2022
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.
Based on pure JS scripts, without relying on native, no need for react-native link, Title / Header / Tabs / Sticky / Screen components can be flexibly configured, among which Tabs / Sticky can slide When it reaches the top, it will be topped.

react-native-scrollable-tabview English | įŽ€äŊ“中文 Based on pure JS scripts, without relying on native, no need for react-native link,Title / Header / Tab

May 1, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

Mar 7, 2022
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

May 5, 2022
react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS
react native datePicker component for both Android and IOS, useing DatePikcerAndroid, TimePickerAndroid and DatePickerIOS

react-native-datepicker React Native DatePicker component for both Android and iOS, using DatePickerAndroid, TimePickerAndroid and DatePickerIOS Insta

May 10, 2022
A React Native component for drawing by touching on both iOS and Android.
A React Native component for drawing by touching on both iOS and Android.

react-native-sketch-canvas A React Native component for drawing by touching on both iOS and Android. Features Support iOS and Android Stroke thickness

May 11, 2022
đŸ”ĸ React-Native component to input confirmation code for both Android and IOS
đŸ”ĸ React-Native component to input confirmation code for both Android and IOS

rn-verifcode React-Native component to input confirmation code for both Android and IOS customizable fast paste SMS-code copy from clipboard reset cod

Nov 4, 2021