https://github.com/jinosh05/react-native-age-picker
An Age/Number Picker which is easily understandable and modified for react native.
https://github.com/jinosh05/react-native-age-picker
android macos navigator picker react reactnative xcode
Last synced: 8 months ago
JSON representation
An Age/Number Picker which is easily understandable and modified for react native.
- Host: GitHub
- URL: https://github.com/jinosh05/react-native-age-picker
- Owner: jinosh05
- Created: 2020-11-28T09:21:59.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-03T08:53:45.000Z (almost 5 years ago)
- Last Synced: 2025-02-05T21:25:23.988Z (10 months ago)
- Topics: android, macos, navigator, picker, react, reactnative, xcode
- Language: Java
- Homepage:
- Size: 1.01 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Age_Picker_react_native
A simple Picker that is modified to select age.
# `@react-native-picker/picker`
[](https://www.npmjs.com/package/@react-native-picker/picker)
[](https://github.com/react-native-picker/picker/actions)   [](https://github.com/facebook/react-native/issues/23313)
| Android | iOS | PickerIOS | Windows | MacOS |
| --- | --- | --- | --- | --- |
## Supported Versions
| @react-native-picker/picker | react-native |
| --- | --- |
| >= 1.2.0 | 0.60+ or 0.59+ with [Jetifier](https://www.npmjs.com/package/jetifier) |
| >= 1.0.0 | 0.57 |
## For Managed Workflow users using Expo 37
This component is not supported in the managed workflow for expo sdk 37. Please import the `Picker` from `react-native`.
See more info [here](https://github.com/react-native-picker/picker/issues/45#issuecomment-633163973)
## Getting started
`$ npm install @react-native-picker/picker --save`
or
`$ yarn add @react-native-picker/picker`
### For react-native@0.60.0 or above
As [react-native@0.60.0](https://reactnative.dev/blog/2019/07/03/version-60) or above supports autolinking, so there is no need to run linking process.
Read more about autolinking [here](https://github.com/react-native-picker/cli/blob/master/docs/autolinking.md).
#### iOS
CocoaPods on iOS needs this extra step
```
npx pod-install
```
#### Android
No additional step is required.
#### Windows
##### Add the `ReactNativePicker` project to your solution.
1. Open the solution in Visual Studio 2019
2. Right-click Solution icon in Solution Explorer > Add > Existing Project
Select `D:\dev\RNTest\node_modules\@react-native-picker\picker\windows\ReactNativePicker\ReactNativePicker.vcxproj`
##### **windows/myapp.sln**
Add a reference to `ReactNativePicker` to your main application project. From Visual Studio 2019:
Right-click main application project > Add > Reference...
Check `ReactNativePicker` from Solution Projects.
##### **pch.h**
Add `#include "winrt/ReactNativePicker.h"`.
##### **app.cpp**
Add `PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider());` before `InitializeComponent();`.
#### MacOS
CocoaPods on MacOS needs this extra step (called from the MacOS directory)
```
pod install
```
### Mostly automatic installation (react-native < 0.60)
`$ react-native link @react-native-picker/picker`
### Manual installation (react-native < 0.60)
#### iOS
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ ` @react-native-picker/picker` and add `RNCPicker.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNCPicker.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<
#### Android
1. Open **application** file (`android/app/src/main/java/[...]/MainApplication.java`)
- Add `import com.reactnativecommunity.picker.RNCPickerPackage;` to the imports at the top of the file
- Add `new RNCPickerPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
```
include ':@react-native-picker_picker'
project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-picker/picker/android')
```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
```
implementation project(path: ':@react-native-picker_picker')
```
#### MacOS
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ ` @react-native-picker/picker` and add `RNCPicker.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNCPicker.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<
## Usage
### Picker
Renders the native picker component on iOS and Android. Example:
#### Usage
Import Picker from `@react-native-picker/picker`
```javascript
import {Picker} from '@react-native-picker/picker';
```
Create state which will be used by the `Picker`
```javascript
state = {
language: 'java',
};
```
Add `Picker` like this:
```javascript
this.setState({language: itemValue})
}>
```
### Props
* [Inherited `View` props...](https://reactnative.dev/docs/view#props)
- [`onValueChange`](#onvaluechange)
- [`selectedValue`](#selectedvalue)
- [`style`](#style)
- [`testID`](#testid)
- [`enabled`](#enabled)
- [`mode`](#mode)
- [`prompt`](#prompt)
- [`itemStyle`](#itemstyle)
---
# Reference
## Props
### `onValueChange`
Callback for when an item is selected. This is called with the following parameters:
* `itemValue`: the `value` prop of the item that was selected
* `itemPosition`: the index of the selected item in this picker
| Type | Required |
| -------- | -------- |
| function | No |
---
### `selectedValue`
Value matching value of one of the items. Can be a string or an integer.
| Type | Required |
| ---- | -------- |
| any | No |
---
### `style`
| Type | Required |
| --------------- | -------- |
| pickerStyleType | No |
---
### `testID`
Used to locate this view in end-to-end tests.
| Type | Required |
| ------ | -------- |
| string | No |
---
### `enabled`
If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.
| Type | Required | Platform |
| ---- | -------- | -------- |
| bool | No | Android, Windows |
---
### `mode`
On Android, specifies how to display the selection items when the user taps on the picker:
* 'dialog': Show a modal dialog. This is the default.
* 'dropdown': Shows a dropdown anchored to the picker view
| Type | Required | Platform |
| -------------------------- | -------- | -------- |
| enum('dialog', 'dropdown') | No | Android |
---
### `dropdownIconColor`
On Android, specifies color of dropdown triangle. Input value should be hexadecimal string
| Type | Required | Platform |
| ------ | -------- | -------- |
| string | No | Android |
---
### `prompt`
Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
| Type | Required | Platform |
| ------ | -------- | -------- |
| string | No | Android |
---
### `itemStyle`
Style to apply to each of the item labels.
| Type | Required | Platform |
| ---------------------------------- | -------- | -------- |
| [text styles](https://reactnative.dev/docs/text-style-props) | No | iOS, Windows |
### PickerIOS
### Props
* [Inherited `View` props...](https://reactnative.dev/docs/view#props)
- [`itemStyle`](#itemstyle)
- [`onValueChange`](#onvaluechange)
- [`selectedValue`](#selectedvalue)
---
# Reference
## Props
### `itemStyle`
| Type | Required |
| ---------------------------------- | -------- |
| [text styles](https://reactnative.dev/docs/text-style-props) | No |
---
### `onValueChange`
| Type | Required |
| -------- | -------- |
| function | No |
---
### `selectedValue`
| Type | Required |
| ---- | -------- |
| any | No |