react-native-cross-picker

A fully customizable react native picker for android and ios

Usage no npm install needed!

<script type="module">
  import reactNativeCrossPicker from 'https://cdn.skypack.dev/react-native-cross-picker';
</script>

README

react-native-cross-picker

npm version

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 :heart: by Zahid Ali.