Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/talut/react-native-picker-module
React Native Picker Module Android & IOS
https://github.com/talut/react-native-picker-module
Last synced: about 1 month ago
JSON representation
React Native Picker Module Android & IOS
- Host: GitHub
- URL: https://github.com/talut/react-native-picker-module
- Owner: talut
- License: mit
- Created: 2019-01-24T07:55:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-15T15:29:43.000Z (over 1 year ago)
- Last Synced: 2024-04-26T02:36:27.328Z (5 months ago)
- Language: Java
- Size: 259 KB
- Stars: 97
- Watchers: 4
- Forks: 34
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-native - react-native-picker-module ★1 - A different approach for React Native Picker. (Components / UI)
- awesome-react-native - react-native-picker-module ★1 - A different approach for React Native Picker. (Components / UI)
- awesome-react-native - react-native-picker-module *1 - A different approach for React Native Picker. (Components / UI)
- awesome-react-native - react-native-picker-module ★1 - A different approach for React Native Picker. (Components / UI)
README
# React Native Picker Module for Android & IOS
With this package you can easily use picker with onPress function.
Using `react-native-modal` and `@react-native-picker/picker` component for IOS and using `RecyclerView` and `AlertDialog` for Android as `NativeModule`.
## v2.0.7 released.
- Picker library updated to `@react-native-picker/picker` from `@react-native-community/picker`
## v2.0.6 released.
- TypeScript type definitions updated.
- Android Gradle updated.
- `backgroundColor` prop added for Android.
- `tintColor` prop added for Android & IOS.
- `confirmButtonAlwaysEnabled` prop added for IOS.
- `pickerRef` changed to `ref` and `forwardRef` used.
## v2.0.4 released.
- @react-native-picker/picker added because picker maintainer is changed.
### v2.0.31 released.
### v2.0.31
- PRs merged. Some issues fixed
### v2.0.2
- Android input.substr issue solved.
### v2.0.1
- On IOS null value issue solved.
### Version 2.0.0
- useNativeDriver flag added.
- @react-native-community/picker added because picker extracted from core react native
- react-native-modal added to package for IOS
- selectedColor added
- disabled & enabled IOS confirm button styles added.
- Now we can set object array for items or array.
- IOS part start using hooks
- confirmButtonStyle & cancelButtonStyle & contentContainerStyle added
- Adding image to picker item at Android removed. If you need this feature please use v1.3.1
- **And a lot of upgrade...**
## Getting Started
**With YARN**
```
yarn add react-native-picker-module && yarn add react-native-modal && yarn add @react-native-picker/picker
```
#### After React Native v0.60.0
```
cd ios && pod install
```
#### Before React Native v0.60.0
**Automatic linking**
```
react-native link react-native-picker-module
```
**Manual Linking**
**[Manual Installation](/docs/manual-installation.md)** (If something went wrong with react-native link)
## Props
| Props | Type | Default & Description | Required | OS |
|--------------------------------|----------------------|-------------------------|----------|-----------|
| value | string | - |**No** |Android, IOS|
| useNativeDriver | bool | `true` |**No** |IOS|
| backdropColor | string | - |**No** |IOS|
| backdropOpacity | double | `0.7` |**No** |IOS|
| items | array / object array | - |**Yes** |Android, IOS|
| title | string | - |**No** |Android, IOS|
| titleStyle | object | {} |**No** |IOS |
| confirmButtonStyle | object | {} |**No** |IOS |
| cancelButtonStyle | object | {} |**No** |IOS |
| contentContainerStyle | object | {} |**No** |IOS |
| itemStyle | object | {} |**No** |IOS |
| cancelButtonTextStyle | object | {} |**No** |IOS |
| confirmButtonEnabledTextStyle | object | {} |**No** |IOS |
| confirmButtonDisabledTextStyle | object | {} |**No** |IOS |
| ref | RefObject | - |**Yes** |Android, IOS|
| onValueChange | func | (value: string) => void |**Yes** |Android, IOS|
| cancelButton | string | `Cancel` |**No** |IOS |
| confirmButton | string | `Confirm` |**No** |IOS |
| onCancel | func | - |**No** |Android, IOS|
| selectedColor | string | - |**No** |Android, IOS|
| backgroundColor | string | - |**No** |Android|
| tintColor | string | - |**No** |Android, IOS|
| confirmButtonAlwaysEnabled | bool | `false` |**No** |IOS|
## Usage with Hooks
```javascript
import React, {useRef, useState} from 'react';
import {Button, SafeAreaView, Text} from 'react-native';
import ReactNativePickerModule, {PickerRef} from 'react-native-picker-module';
const App = () => {
const pickerRef = useRef(null);
const [value, setValue] = useState();
const dataset_1 = [1, 2, 'Java', 'Kotlin', 'C++', 'C#', 'PHP'];
return (
<>
pickerRef.current?.show()}
/>
Selected Item Text: {value}
{
console.log('Cancelled');
}}
onValueChange={value => {
console.log('value: ', value);
setValue(value);
}}
/>
>
);
};
export default App;
```
## FYI
You can use more than one picker in same screen. You just need to set different pickerRef.
## License
This project is licensed under the MIT License - see the LICENSE.md file for details