https://github.com/zahidalidev/react-native-cross-picker
A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://github.com/zahidalidev/react-native-cross-picker
Last synced: 10 months ago
JSON representation
A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
- Host: GitHub
- URL: https://github.com/zahidalidev/react-native-cross-picker
- Owner: zahidalidev
- License: mit
- Created: 2021-04-02T13:39:56.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-22T10:45:01.000Z (over 4 years ago)
- Last Synced: 2025-07-07T01:52:01.814Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 21.5 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-cross-picker
[]()
A Picker component for React Native which emulates the native `` interfaces for iOS and Android
For iOS, Android or other platform this component looks same.
## [View examples on snack.expo.io](https://snack.expo.io/@zahidalidev/react-native-cross-picker)
## Getting Started
### Installing
```
npm install react-native-cross-picker
```
### Basic Usage
```js
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { MaterialCommunityIcons } from "@expo/vector-icons"; // for expo and any other for react-native-cli
import ReactNativeCrossPicker from "react-native-cross-picker"
export default function Picker() {
const [selectedItem, setItem] = useState('')
const items = [
{ label: "label1", value: 1 },
{ label: "label2", value: 2 },
{ label: "label3", value: 3 },
{ label: "label4", value: 4 },
{ label: "label5", value: 5 },
{ label: "label6", value: 6 },
{ label: "label7", value: 7 },
{ label: "label8", value: 8 },
{ label: "label9", value: 9 },
]
const iconComponent = () => {
return
}
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f2efef',
alignItems: 'center',
justifyContent: 'center',
},
});
```
### Props
| Name | Description | Details |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| `setItem` | Will set the selected value to selectedItem | **required**
useState hook |
| `items` | The items for the component to render
- Each item should be in the following format:
`{label: 'Orange', value: 'orange'}`
- `label` and `value` are required
- `value` can be any data type
- | **required**
array |
| `placeholder` | - An override for the default placeholder, a label of `Select item` | string |
| `placeholderStyle` | - An override for the default placeholder style | style |
| `modalTextStyle` | Style overrides for text parts of the popup component.
| style |
| `modalComponentStyle` | Style overrides the style of the popup component.
| style |
| `mainComponentStyle` | Style overrides style of the main component.
| style |
| `modalBottomBorderColor` | Additional props to pass to the Picker to display the bottom border of main component | color |
| `iconComponent` | Custom icon component to be rendered.
| function that return component |
| `width` | Additional props to pass to the main component to set the width default will be 100%. | number, percentage like width="80%". |
| `placeholder` | Default placeholder when item is not selected | string |
| `modalMarginTop`
| margin of the popup model from the top default will be 50% | number, percentage etc. |
| `modalMaxHeight`
| Maximum hight of the popup modal | number, percentage etc.
## License
react-native-cross-picker is [MIT licensed](https://github.com/zahidalidev/react-native-cross-picker/blob/master/LICENSE) and built with :heart: by Zahid Ali.