index.js

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import {
  Text,
  View,
  Modal,
  Image,
  FlatList,
  Platform,
  StyleSheet,
  TouchableOpacity,
  I18nManager,
  TextInput
} from "react-native";

console.disableYellowBox = true;
export default class RNModalPicker extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      selectedFlag: this.props.defaultValue,
      dataSource: []
    };
  }

   _setDefaultValue(
    defaultText,
    pickerStyle,
    textStyle,
    dropDownImageStyle,
    dropDownImage
  ) {
    return (
      <View style={pickerStyle}>
        <Text style={textStyle}>{defaultText}</Text>
        <Image
          style={dropDownImageStyle}
          resizeMode="contain"
          source={dropDownImage}
        />
      </View>
    );
  }

   _setSelectedValue(
    defaultText,
    pickerStyle,
    textStyle,
    dropDownImageStyle,
    dropDownImage
  ) {
    return (
      <View style={pickerStyle}>
        <Text style={textStyle}>{defaultText}</Text>
        <Image
          style={dropDownImageStyle}
          resizeMode="contain"
          source={dropDownImage}
        />
      </View>
    );
  }

  componentDidMount() {
    this.setState({ dataSource: this.props.dataSource });
  }

  _searchFilterFunction(searchText, data) {
    let newData = [];
    if (searchText) {
      newData = data.filter(function(item) {
        const itemData = item.name.toUpperCase();
        const textData = searchText.toUpperCase();
        return itemData.includes(textData);
      });
      this.setState({
        dataSource: [...newData]
      });
    } else {
      this.setState({ dataSource: this.props.dataSource });
    }
  }
  _flatListItemSeparator(itemSeparatorStyle){
    return (
      <View
        style={itemSeparatorStyle}
      />
    );
  }
  _renderItemListValues(item, index) {
    return (
      <TouchableOpacity
        activeOpacity={1}
        style={styles.listRowClickTouchStyle}
        onPress={() => this._setSelectedIndex(index, item)}
      >
        <View style={styles.listRowContainerStyle}>
          <Text style={this.props.pickerItemTextStyle}>{item.name}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  _setSelectedIndex(index, item) {
      this.props.selectedValue(index,item);

      this.setState({ selectedFlag: true ,modalVisible: false});
  }

  render() {
    return (
      <View style={styles.mainContainer}>
        {this.state.selectedFlag ? (
          <View>
            <TouchableOpacity
              disabled={this.props.disablePicker}
              onPress={() => this.setState({ modalVisible: true })}
              activeOpacity={0.7}
            >
              <View>
                {this._setSelectedValue(
                  this.props.selectedLabel,
                  this.props.pickerStyle,
                  this.props.selectLabelTextStyle,
                  this.props.dropDownImageStyle,
                  this.props.dropDownImage
                )}
              </View>
            </TouchableOpacity>
          </View>
        ) : (
          <View>
            <TouchableOpacity
              disabled={this.props.disablePicker}
              style={styles.picker}
              onPress={() => this.setState({ modalVisible: true })}
              activeOpacity={0.7}
            >
              <View>
                {this._setDefaultValue(
                  this.props.placeHolderLabel,
                  this.props.pickerStyle,
                  this.props.placeHolderTextStyle,
                  this.props.dropDownImageStyle,
                  this.props.dropDownImage
                )}
              </View>
            </TouchableOpacity>
          </View>
        )}

        <Modal
          visible={this.state.modalVisible}
          transparent={true}
          onShow={()=>this.setState({dataSource:this.props.dataSource})}
          animationType={this.props.changeAnimation}
          onRequestClose={() => this.setState({ modalVisible: false})}
        >
          <View style={styles.container}>
            <View style={styles.listDataContainerStyle}>
              <View style={styles.pickerTitleContainerStyle}>
                {this.props.showPickerTitle ? (
                  <Text style={styles.pickerTitleTextStyle}>
                    {" "}
                    {this.props.pickerTitle}
                  </Text>
                ) : null}

                <TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() => this.setState({ modalVisible: false })}
                >
                  <Image
                    resizeMode="contain"
                    style={styles.crossImageStyle}
                    source={require("./res/ic_cancel_grey.png")}
                  />
                </TouchableOpacity>
              </View>
              {this.props.showSearchBar ? (
                <View style={this.props.searchBarContainerStyle}>
                  {/* <Image
                          resizeMode="contain"
                          style={styles.iconGPSStyle}
                          source={Images.ic_search}
                        /> */}

                  <TextInput
                    onChangeText={text =>
                      this._searchFilterFunction(
                        text,
                        this.props.dummyDataSource
                      )
                    }
                    placeholder={this.props.searchBarPlaceHolder}
                    style={styles.textInputStyle}
                    underlineColorAndroid="transparent"
                    keyboardType="default"
                    returnKeyType={"done"}
                    blurOnSubmit={true}
                  />
                </View>
              ) : null}

              <FlatList
                style={styles.flatListStyle}
                keyExtractor={item => item.name}
                showsVerticalScrollIndicator={false}
                extraData={this.state}
                overScrollMode="never"
                ItemSeparatorComponent={()=>this._flatListItemSeparator(this.props.itemSeparatorStyle)}
                keyboardShouldPersistTaps="always"
                numColumns={1}
                data={this.state.dataSource}
                renderItem={({ item, index }) =>
                  this._renderItemListValues(item, index)
                }
              />
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}
RNModalPicker.defaultProps = {
  defaultValue: false,
  showSearchBar: false,
  showPickerTitle: false,
  disablePicker: false,
  changeAnimation: "slide",
  dropDownImage: require("./res/ic_drop_down.png"),
  placeHolderLabel: "Please select value from picker",
  searchBarPlaceHolder: "Search",

  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  selectLabelTextStyle: {
    color: "#000",
    textAlign: "left",
    width: "99%",
    padding: 10,
    flexDirection: "row"
  },
  searchBarContainerStyle: {
    marginBottom: 10,
    flexDirection: "row",
    height: 40,
    shadowOpacity: 1.0,
    shadowRadius: 5,
    shadowOffset: {
      width: 1,
      height: 1
    },
    backgroundColor: "rgba(255,255,255,1)",
    shadowColor: "#d3d3d3",
    borderRadius: 10,
    elevation: 3,
    marginLeft: 10,
    marginRight: 10
  },
  placeHolderTextStyle: {
    color: "#D3D3D3",
    padding: 10,
    textAlign: "left",
    width: "99%",
    flexDirection: "row"
  },
  dropDownImageStyle: {
    marginLeft: 10,
    width: 10,
    height: 10,
    alignSelf: "center"
  },
  pickerItemTextStyle: {
    color: "#000",
    marginVertical: 10,
    flex: 0.9,
    marginLeft: 20,
    marginHorizontal: 10,
    textAlign: "left"
  },
  pickerStyle: {
    marginLeft: 18,
    elevation: 3,
    paddingRight: 25,
    marginRight: 10,
    marginBottom: 2,
    shadowOpacity: 1.0,
    shadowOffset: {
      width: 1,
      height: 1
    },
    borderWidth: 1,
    shadowRadius: 10,
    backgroundColor: "rgba(255,255,255,1)",
    shadowColor: "#d3d3d3",
    borderRadius: 5,
    flexDirection: "row"
  }
};
RNModalPicker.propTypes = {
  placeHolderLabel: PropTypes.any,
  selectedLabel: PropTypes.any,
  pickerTitle: PropTypes.any,
  dataSource: PropTypes.any,
  dummyDataSource: PropTypes.any,
  dropDownImage: PropTypes.number,
  defaultSelected: PropTypes.any,
  defaultValue: PropTypes.bool,
  showSearchBar: PropTypes.bool,
  showPickerTitle: PropTypes.bool,
  disablePicker: PropTypes.bool,
  changeAnimation: PropTypes.string,
  searchBarPlaceHolder: PropTypes.string,
  itemSeparatorStyle:PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
    PropTypes.array
  ]),
  pickerItemTextStyle:PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
    PropTypes.array
  ]),
  dropDownImageStyle: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
    PropTypes.array
  ]),

  selectLabelTextStyle: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
    PropTypes.array
  ]),

  searchBarContainerStyle: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
    PropTypes.array
  ]),
  placeHolderTextStyle: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
    PropTypes.array
  ]),
  textStyle: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
    PropTypes.array
  ]),
  pickerStyle: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
    PropTypes.array
  ])
};
const styles = StyleSheet.create({
  mainContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center"
  },
  pickerTitleContainerStyle: {
    flexDirection: "row",
    width: "100%",
    alignItems: "flex-end",
    justifyContent: "flex-end",
    alignSelf: "flex-end"
  },
  searchBarContainerStyle: {
    marginBottom: 10,
    flexDirection: "row",
    height: 40,
    shadowOpacity: 1.0,
    shadowRadius: 5,
    shadowOffset: {
      width: 1,
      height: 1
    },
    backgroundColor: "rgba(255,255,255,1)",
    shadowColor: "#d3d3d3",
    borderRadius: 10,
    elevation: 3,
    marginLeft: 10,
    marginRight: 10
  },

  flatListStyle: {
    maxHeight: "85%",
    minHeight: "70%"
  },
  iconGPSStyle: {
    alignItems: "center",
    alignSelf: "center",
    height: 20,
    width: 20,
    margin: 5,
    transform: [
      {
        scaleX: I18nManager.isRTL ? -1 : 1
      }
    ]
  },

  container: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.3)",
    justifyContent: "center"
  },
  listRowContainerStyle: {
    width: "100%",
    justifyContent: "center"
  },
  textInputStyle: {
    color: "black",
    paddingLeft: 15,
    marginTop: Platform.OS == "ios" ? 10 : 0,
    marginBottom: Platform.OS == "ios" ? 10 : 0,
    alignSelf: "center",
    flex: 1,
    textAlign: I18nManager.isRTL ? "right" : "left"
  },
  crossImageStyle: {
    width: 40,
    height: 40,
    marginTop: -4,

    marginRight: -7,
    alignItems: "flex-end",
    justifyContent: "flex-start",
    alignSelf: "flex-end"
  },

  listDataContainerStyle: {
    alignSelf: "center",
    width: "90%",
    borderRadius: 10,
    maxHeight: "80%",
    backgroundColor: "white"
  },

 
  listRowClickTouchStyle: {
    justifyContent: "center",
    flexDirection: "row",
    flex: 1
  },

  pickerTitleTextStyle: {
    fontSize: 18,
    flex: 1,
    paddingBottom: 10,
    marginLeft: 40,
    color: "#000",
    textAlign: "center"
  }
});

//AppRegistry.registerComponent ('RNModalPicker', () => App);