react-native-cross-picker
A Picker component for React Native which emulates the native <select>
interfaces for iOS and Android
For iOS, Android or other platform this component looks same.
View examples on snack.expo.io
Getting Started
Installing
npm install react-native-cross-picker
Basic Usage
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 <MaterialCommunityIcons
name={"chevron-down"}
size={20}
color={"grey"}
/>
}
return (
<View style={styles.container}>
<ReactNativeCrossPicker
modalTextStyle={{ color: "rgb(0, 74, 173)" }}
mainComponentStyle={{ borderColor: "rgb(0, 74, 173)" }}
iconComponent={iconComponent}
items={items}
setItem={setItem} selectedItem={selectedItem}
placeholder="Select Item"
modalMarginTop={"50%"} // popup model margin from the top
/>
</View>
);
}
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 and built with