| 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 |