Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pankod/react-native-picker-modal-view
An unified React Native Picker Modal component for iOS and Android.
https://github.com/pankod/react-native-picker-modal-view
picker-component react-native typescript
Last synced: about 1 month ago
JSON representation
An unified React Native Picker Modal component for iOS and Android.
- Host: GitHub
- URL: https://github.com/pankod/react-native-picker-modal-view
- Owner: pankod
- Created: 2019-04-12T09:05:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T20:18:15.000Z (almost 2 years ago)
- Last Synced: 2024-11-08T00:04:51.941Z (about 1 month ago)
- Topics: picker-component, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 5.79 MB
- Stars: 204
- Watchers: 8
- Forks: 56
- Open Issues: 61
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - react-native-picker-modal-view - React Native Module to select item picker modal. (Components / UI)
- awesome-react-native - react-native-picker-modal-view - React Native Module to select item picker modal. (Components / UI)
- awesome-react-native - react-native-picker-modal-view - React Native Module to select item picker modal. (Components / UI)
- awesome-react - react-native-picker-modal-view
- awesome-react-cn - react-native-picker-modal-view
- awesome-react - react-native-picker-modal-view - An unified React Native Picker Modal component for iOS and Android. ` 📝 6 months ago` (React Native [🔝](#readme))
- awesome-learning-resources - react-native-picker-modal-view
README
React Native Picker Modal View
React Native Module to select item picker modal.
[](https://codeclimate.com/github/pankod/react-native-picker-modal-view/maintainability)
[](https://codeclimate.com/github/pankod/react-native-picker-modal-view/test_coverage)
[](https://www.npmjs.com/package/react-native-picker-modal-view)
[](https://www.npmjs.com/package/react-native-picker-modal-view)
[](https://david-dm.org/pankod/react-native-picker-modal-view)
[](https://david-dm.org/pankod/react-native-picker-modal-view?type=dev)
[](https://travis-ci.com/pankod/react-native-picker-modal-view) [](https://meercode.io/pankod/react-native-picker-modal-view)
An alternative to [Picker](https://facebook.github.io/react-native/docs/picker) and [PickerIOS](https://facebook.github.io/react-native/docs/pickerios) components with an unified API and consistent look & feel on both plaforms. It's fully configurable and includes built-in support for text search and alphabetical index. Ideal for longer lists not suitable for "wheel-pickers".
## Getting started
```
$ npm install react-native-picker-modal-view --save
```
or
```
$ yarn add react-native-picker-modal-view
```
## Live Demo with Expo
[](https://snack.expo.io/@pankod/github.com-pankod-react-native-picker-modal-view:example)
## Example
```javascript
import * as React from 'react';
import { Button, SafeAreaView, Text, View } from 'react-native';
import PickerModal from 'react-native-picker-modal-view';
import data from '../../../top20.json';
export default class Main extends React.Component<{}, { selectedItem: {} }> {
constructor(props: {}) {
super(props);
this.state = {
selectedItem: {}
};
}
public render(): JSX.Element {
const { selectedItem } = this.state;
return (
}
onSelected={this.onSelected.bind(this)}
onClosed={this.onClosed.bind(this)}
onBackButtonPressed={this.onBackButtonPressed.bind(this)}
items={data}
sortingLanguage={'tr'}
showToTopButton={true}
selected={selectedItem}
showAlphabeticalIndex={true}
autoGenerateAlphabeticalIndex={true}
selectPlaceholderText={'Choose one...'}
onEndReached={() => console.log('list ended...')}
searchPlaceholderText={'Search...'}
requireSelection={false}
autoSort={false}
/>
Chosen:
{JSON.stringify(selectedItem)}
);
}
private onClosed(): void {
console.log('close key pressed');
}
private onSelected(selected: any): void {
this.setState({ selectedItem: selected });
return selected;
}
private onBackButtonPressed(): void {
console.log('back key pressed');
}
}
```
## Options
| Properties | Type | Description | Default |
| --------------------------------- | ---------- | ------------------------------------------------------ | ------------------------------------------- |
| **modalAnimationType** | `string` | The RN Modal show/hide animation type | `"slide"` |
| **showAlphabeticalIndex** | `boolean` | Hides alphabetical index | `"true"` |
| **onClosed** | `Function` | Fired when the modal is closed | |
| **onBackButtonPressed** | `Function` | Fired when the back key is pressed | |
| **onSelected**
**required* | `Function` | Returns selected item object | `"{Id, Name, Value, [key: string]: any}"` |
| **items**
**required* | `array` | Array of list items | `"[{Id, Name, Value, [key: string]: any}]"` |
| **renderSelectView** | `Element` | Render Select Component | `` |
| **renderListItem** | `Element` | Render List item | `` |
| **alphabeticalIndexChars** | `array` | Chracters array for the alphabetical index | `` |
| **searchInputTextColor** | `string` | Search input placeholder text color | `"#252525"` |
| **keyExtractor** | `Function` | Flatlist defined {key} function | `` |
| **autoGenerateAlphabeticalIndex** | `boolean` | Auto-generates alphabetical index from list items data | `"false"` |
| **sortingLanguage** | `string` | Country ISO (Alpha 2) Code for localeCompare | `"tr"` |
| **showToTopButton** | `boolean` | Button for scroll to offset 0 | `"true"` |
| **onEndReached** | `Function` | Fired when the list reaches the end | |
| **selectPlaceholderText** | `string` | Select box placeholder text | `"Choose one..."` |
| **searchPlaceholderText** | `string` | Search input placeholder text | `"Search..."` |
| **selected** | `object` | Default selected item | |
| **autoSort** | `boolean` | Auto-sort data list | `"false"` |
| **disabled** | `boolean` | Disable Select box | |
| **requireSelection** | `boolean` | Require at least one list item is selected | `"false"` |
| **backButtonDisabled** | `boolean` | Hide to back button | `"false"` |
| **renderSearch** | `Function` | Render custom search input | `` |
# Core Props of React Native
| Properties | Type | Description | Default |
| -------------------- | -------- | ---------------------------- | ------- |
| **ModalProps** | `object` | React Native Modal Props | |
| **FlatListProps** | `object` | React Native Flatlist Props | |
| **SearchInputProps** | `object` | React Native TextInput Props | |
## Running example project
1. You should have React Expo CLI to be installed in order to run example. Follow this [instructions](https://facebook.github.io/react-native/docs/getting-started) if you need to install Expo CLI.
2. Install the dependencies:
```sh
npm install
```
3. Once the installation is done, you can run the following command:
**npm**
```
npm start
```
You can also use:
**expo**
```
expo start
```
**yarn**
```
expo start
```
#### Notes
- Auto-alphabetical index supported for Turkish and English languages.
#### Releases
- 1.3.2 - Added renderSearch feature #54 Thanks to @murilo-campaner
- 1.3.1 - Fixed #44 Thanks to @fnando
- 1.3.0 - No back button support #42 Thanks to @ChildishForces
- 1.2.8 - Fixed #37
- 1.2.6 - Deprecated lifecycle methods fix
- 1.2.5 - Flatlist initialNumToRender property hotfix
- 1.2.3 - Refactor and code coverage
- 1.2.2 - Fixed #5
- 1.2.0 - Added renderSelectView and renderListItem properties.
- 1.0.0 - Initial release