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.

License

react-native-cross-picker is MIT licensed and built with :heart: by Zahid Ali.