React-native-cross-picker NPM

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	requireduseState 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-	requiredarray
`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.