Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
Menu
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

How to use picker in react native

Published by: Muhammad Ahmed Mallick | October 6, 2020 msaqlain
SCROLL AND BE AMAZED!
Home > Blog > How to use picker in react native

Technological trends are rapidly evolving and bringing newer trends. React Native, a library started as an experimental stance now has a huge community contributing towards growth and development.

In this article, we will create a simple picker in react native. React Native Picker is a component for selection between multiple choices. It’s the same as a dropdown in web development.

In react native we have multiple options to implement the picker it depends upon the requirements. If you want picker native controls for Android and iOS then it is pretty straightforward by using the picker module of the react-native Picker module.

Here we have used the following props:

  • selectedValue: 

Value matching value of one of the items. Can be a string or an integer.

  • onValueChange: 

onValueChange Callback is triggered when an item is selected from a picker. Following params are sent: 

  • itemValue: Value of selected item
  • itemPosition: Index of selected item

Other than these values we have some other props like

  • Enabled

Can be used to enable/disable picker. If the value is set to false, the user will not be able to make a selection.

  • Prompt

Android Only. Prompt string for this picker when dialog mode is enabled.

  • Mode

Android Only. The developer can specify the mode of picker, this will set the behavior of how picker will display for items selection:

‘dialog’: Enabled by default. Displays picker in the dialog.

‘dropdown’: Shows a dropdown anchored to the picker view

IOS:

Android (Dialog):

Android (drop down):

Other than native control there are more libraries available for react native picker. eg: react-native-picker-select

If you want wheel picker for both android and iOS you can also use

React-native-wheel-picker

React native wheel picker android:

React native wheel picker iOS:


Avatar
About Muhammad Ahmed Mallick

Muhammad Ahmed is working as a senior software engineer at Folio3. He comes with years of hands-on experience with the web and software technologies, including software design and architecture development, collaborating with external and internal teams for product improvement, and ensuring that the product fulfills the client requirements. His core competencies includes; React, Reacts Native, Angular, Node js, Netsuite, and flutter. He has a great interest in playing cricket and also frequently shares his technical experience through blog writing.

Newsletter

Search

Archives

  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019
  • Categories

    • Android App Development
    • App Development
    • App Testing
    • Blog
    • Elasticsearch
    • flutter-app-development
    • IOT
    • React Native
    • Staff Augmentation

Recent Posts

  • Startup Incubator – How to Make an App Start on Startup?
  • Jquery Vs. React: Which One Is The Best Option To Create An App For Business?
  • One codebase to rule them all – Sharing code in mobile & web apps using Flutter
  • What is Tree Shaking and Implementation in React
  • Vue VS. React – Crowning the King of Web App Development in 2021

Tags

  • android
  • Automation
  • cross-platform
  • development
  • firebase
  • ios
  • QA
  • react-native
  • Testing
  • Test Script

Newsletter

Newsletter

Post navigation

Previous Usability Testing of Mobile Applications
Next WORKING REMOTELY- HOW TO HIRE REMOTE APP DEVELOPMENT TEAM AND REMOTELY MANAGE YOUR TEAM

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Schedule an appointment with our Mobile App Development Expert

Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

163 Bangalore Town, Main Shahrah-e-Faisal, Karachi –
75350

705, Business Center, PECHS Block-6, Shahrah-e-Faisal,
Karachi – 75350

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore

Tel: +92-21-3432 3721-4 

© 2020, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f
Twitter
Linkedin-in

Get a free app audit

Tired of your app not performing up to the mark?

Get a free technology and app strategy review.