React Native Modal Picker

This is a cross-platform picker with search bar for react native which supports iOS, Android and Web

Android	iOS	Web

Features

1. Easy to use.
2. Cross-platform compatibility Android, iOS and Web.
3. Hide and show search bar.
4. Dynamically change dropdown and search image.
5. Customize font size, font color and picker style.
6. Change animation(Slide, fade, none)

Installation

Step 1 Install

npm i rn-modal-picker

Usage

import React, { useState } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import ModalPicker from "rn-modal-picker";

const dataSource = [
  {
    id: 1,
    name: "Afghanistan",
  },
  {
    id: 2,
    name: "Bahrain",
  },
  {
    id: 3,
    name: "Canada",
  },
  {
    id: 4,
    name: "Denmark",
  },
  {
    id: 5,
    name: "Egypt",
  },
  {
    id: 6,
    name: "France",
  },
  {
    id: 7,
    name: "Greece",
  },
  {
    id: 8,
    name: "Hong Kong",
  },
  {
    id: 9,
    name: "India",
  },
  {
    id: 10,
    name: "Japan",
  }
];
const App = () => {
  const [value, setValue] = useState("");

  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>React Native Modal Picker</Text>

      <ModalPicker
        value={value}
        data={dataSource}
        animationType={"slide"}
        pickerContainerStyle={styles.pickerStyle}
        dropDownIcon={require("./res/ic_drop_down.png")}
        selectedTextStyle={styles.selectedTextStyle}
        listTextStyle={styles.listTextStyle}
        placeHolderText={"Please select country"}
        searchBarPlaceHolder={"Search......"}
        searchBarPlaceHolderColor={"grey"}
        placeHolderTextColor={"black"}
        searchBarStyle={styles.searchBarStyle}
        searchClearIcon={require("./res/ic_close.png")}
        onChange={(value) => {
          setValue(value);
        }}
      />
    </View>
  );
};
export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  titleText: {
    color: "#000",
    fontSize: 25,
    marginBottom: 25,
    fontWeight: "bold",
  },
  pickerStyle: {
    height: 50,
    width: "100%",
    marginVertical: 10,
    borderColor: "#303030",
    alignItems: "center",
    alignSelf: "center",
    padding: 10,
    backgroundColor: "white",
    borderRadius: 5,
    borderWidth: 1.5,
    fontSize: 16,
    color: "#000",
  },
  selectedTextStyle: {
    paddingLeft: 5,
    color: "#000",
    textAlign: "right",
  },
  listTextStyle: {
    color: "#000",
    textAlign: "right",
  },

  searchBarStyle: {
    margin: 10,
    padding: 10,
    flexDirection: "row",
    height: 45,
    shadowOpacity: 1.0,
    shadowRadius: 2,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    backgroundColor: "rgba(255,255,255,1)",
    shadowColor: Platform.OS === "ios" ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,1)",
    borderRadius: 10,
    elevation: 5,
  },
});

Properties

Prop	Default	Type	Description	Required/Optional
data	[]	array	Array of objects with a unique id and name	Required
hideSearchBar	false	bool	Show and hide search bar	Optional
value	-	string	Set selected value otherwise its blank $ use for default value	Optional
placeHolderText	-	string	Use to Show place holder hint text	Required
pickerContainerStyle	-	object	Customize picker style	Required
listTextStyle	-	object	Customize list item text style	Optional
placeHolderTextColor	-	object	Customize placeholder text color	Optional
itemSeparatorStyle	-	object	Style for Horizontal Line between item	Optional
selectedTextStyle	-	object	Customize selected text style	Optional
searchBarStyle	-	object	Customize Search bar Container style	Optional
onChange	-	function	callback function received value from list selection	Required
animationType	-	string [slide,none,fade]	Change Modal Animation	Optional
disable	-	bool	Disable picker if you show default value and no need to change	Optional
searchBarPlaceHolder	-	string	Search bar place holder text	Optional
searchBarPlaceHolderColor	-	color code	Add color code	Optional
dropDownIconStyle	-	object	Change drop down icon style color	Optional
searchClearIcon	-	png/jpg	Change search bar text clear icon style	Optional
searchIcon	-	png/jpg	Change search bar icon style color	Optional
dropDownIcon	-	png/jpg	Change picker drop down icon	Optional