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

1import React, { useState } from "react";
2import { Platform, StyleSheet, Text, View } from "react-native";
3import ModalPicker from "rn-modal-picker";
4
5const dataSource = [
6  {
7    id: 1,
8    name: "Afghanistan",
9  },
10  {
11    id: 2,
12    name: "Bahrain",
13  },
14  {
15    id: 3,
16    name: "Canada",
17  },
18  {
19    id: 4,
20    name: "Denmark",
21  },
22  {
23    id: 5,
24    name: "Egypt",
25  },
26  {
27    id: 6,
28    name: "France",
29  },
30  {
31    id: 7,
32    name: "Greece",
33  },
34  {
35    id: 8,
36    name: "Hong Kong",
37  },
38  {
39    id: 9,
40    name: "India",
41  },
42  {
43    id: 10,
44    name: "Japan",
45  }
46];
47const App = () => {
48  const [value, setValue] = useState("");
49
50  return (
51    <View style={styles.container}>
52      <Text style={styles.titleText}>React Native Modal Picker</Text>
53
54      <ModalPicker
55        value={value}
56        data={dataSource}
57        animationType={"slide"}
58        pickerContainerStyle={styles.pickerStyle}
59        dropDownIcon={require("./res/ic_drop_down.png")}
60        selectedTextStyle={styles.selectedTextStyle}
61        listTextStyle={styles.listTextStyle}
62        placeHolderText={"Please select country"}
63        searchBarPlaceHolder={"Search......"}
64        searchBarPlaceHolderColor={"grey"}
65        placeHolderTextColor={"black"}
66        searchBarStyle={styles.searchBarStyle}
67        searchClearIcon={require("./res/ic_close.png")}
68        onChange={(value) => {
69          setValue(value);
70        }}
71      />
72    </View>
73  );
74};
75export default App;
76
77const styles = StyleSheet.create({
78  container: {
79    flex: 1,
80    justifyContent: "center",
81    alignItems: "center",
82    backgroundColor: "#F5FCFF",
83  },
84  titleText: {
85    color: "#000",
86    fontSize: 25,
87    marginBottom: 25,
88    fontWeight: "bold",
89  },
90  pickerStyle: {
91    height: 50,
92    width: "100%",
93    marginVertical: 10,
94    borderColor: "#303030",
95    alignItems: "center",
96    alignSelf: "center",
97    padding: 10,
98    backgroundColor: "white",
99    borderRadius: 5,
100    borderWidth: 1.5,
101    fontSize: 16,
102    color: "#000",
103  },
104  selectedTextStyle: {
105    paddingLeft: 5,
106    color: "#000",
107    textAlign: "right",
108  },
109  listTextStyle: {
110    color: "#000",
111    textAlign: "right",
112  },
113
114  searchBarStyle: {
115    margin: 10,
116    padding: 10,
117    flexDirection: "row",
118    height: 45,
119    shadowOpacity: 1.0,
120    shadowRadius: 2,
121    shadowOffset: {
122      width: 1,
123      height: 1,
124    },
125    backgroundColor: "rgba(255,255,255,1)",
126    shadowColor: Platform.OS === "ios" ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,1)",
127    borderRadius: 10,
128    elevation: 5,
129  },
130});
131

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