Initial

Author: bhavik66

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+package-lock.json

example/example.js

@@ -0,0 +1,124 @@
+import React, {Component} from 'react';
+import {StyleSheet, Text, View, Button, TouchableOpacity} from 'react-native';
+import Picker from 'react-native-simple-modal-picker'
+
+export default class Example extends Component {
+  constructor(props){
+    super(props)
+    this.state={
+      selectedIndex: 0
+    }
+    this.data=[
+      {
+        name:'Option 1',
+        value: '1'
+      },
+      {
+        name:'Option 2',
+        value: '2'
+      },
+      {
+        name:'Option 3',
+        value: '3'
+      },
+      {
+        name:'Option 4',
+        value: '4'
+      },
+      {
+        name:'Option 5',
+        value: '5'
+      }
+    ]
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        {this.simplePickerView()}
+        {this.customRowPickerView()}
+        {this.dropDownView()}
+      </View>
+    );
+  }
+
+  simplePickerView(){
+    return(
+      <View>
+        <Picker 
+          ref={instance => this.simplePicker = instance} 
+          data={this.data} 
+          label={'name'} 
+          value={'value'}
+          onValueChange={(value) => alert(value + ' selected')} />
+
+        <View style={styles.subContainer}>
+          <Button 
+            title={'Open Simple Picker'} 
+            onPress={() => this.simplePicker.setModalVisible(true)} />
+        </View>
+      </View>
+    )
+  }
+
+  customRowPickerView(){
+    return(
+      <View>
+        <Picker 
+          ref={instance => this.customRowPicker = instance} 
+          data={this.data} 
+          label={'name'} 
+          value={'value'}
+          onValueChange={(value) => alert(value + ' selected')}
+          renderRow={(rowData) => <Text style={styles.rowStyle}>{rowData.name}</Text>} />
+        <View style={styles.subContainer}>
+          <Button 
+            title={'Open Cutome Row Picker'} 
+            onPress={() => this.customRowPicker.setModalVisible(true)} />
+        </View>
+      </View>
+    )
+  }
+
+  dropDownView(){
+    return(
+      <View>
+        <Picker 
+          ref={instance => this.dropDownPicker = instance} 
+          data={this.data} 
+          label={'name'} 
+          value={'value'}
+          onValueChange={(value, selectedIndex) => this.setState({selectedIndex})} />
+        <View style={styles.subContainer}>
+          <TouchableOpacity style={styles.dropDownContainer} onPress={() => this.dropDownPicker.setModalVisible(true)}>
+            <Text style={styles.dropDownText}>{this.data[this.state.selectedIndex].name}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  subContainer:{
+    margin: 8
+  },
+  rowStyle:{
+    backgroundColor: '#FFF',
+    color: '#333',
+    padding: 8,
+    fontSize: 20
+  },
+  dropDownContainer:{
+    borderBottomWidth: 1,
+    padding: 8
+  },
+  dropDownText:{
+    fontSize: 20,
+    margin: 8
+  }
+});

index.js

@@ -0,0 +1,104 @@
+import React, { Component } from "react";
+import {
+  Modal,
+  Text,
+  TouchableHighlight,
+  View,
+  StyleSheet,
+  ListView
+} from "react-native";
+import PropTypes from "prop-types";
+
+export default class ModalPicker extends Component {
+  constructor(props) {
+    super(props);
+    const ds = new ListView.DataSource({
+      rowHasChanged: (r1, r2) => r1 !== r2
+    });
+    this.state = {
+      dataSource: ds.cloneWithRows(this.props.data),
+      modalVisible: false
+    };
+  }
+
+  setModalVisible(visible) {
+    this.setState({ modalVisible: visible });
+  }
+
+  render() {
+    return (
+      <View
+        style={{
+          backgroundColor: "transparent",
+          flex: 1,
+          position: "absolute"
+        }}
+      >
+        <Modal
+          animationType="fade"
+          transparent={true}
+          visible={this.state.modalVisible}
+          onRequestClose={() => {
+            this.setModalVisible(false);
+          }}
+        >
+          <TouchableHighlight
+            style={styles.container}
+            onPress={() => this.setModalVisible(false)}
+            underlayColor={"#333333cc"}
+          >
+            <View>
+              <ListView
+                dataSource={this.state.dataSource}
+                renderRow={(rowData, sectionID, rowID, higlightRow) => {
+                  return (
+                    <TouchableHighlight
+                      underlayColor={"transparent"}
+                      onPress={() => {
+                        this.setModalVisible(false);
+                        this.props.onValueChange(rowData[this.props.value], rowID);
+                      }}
+                    >
+                      {this.props.renderRow ? (
+                        this.props.renderRow(rowData, rowID)
+                      ) : (
+                        <Text style={styles.itemText}>
+                          {rowData[this.props.label]}
+                        </Text>
+                      )}
+                    </TouchableHighlight>
+                  );
+                }}
+              />
+            </View>
+          </TouchableHighlight>
+        </Modal>
+      </View>
+    );
+  }
+}
+
+ModalPicker.propTypes = {
+  data: PropTypes.array.isRequired,
+  value: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onValueChange: PropTypes.func,
+  renderRow: PropTypes.func
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    backgroundColor: "#333333cc",
+    padding: 16
+  },
+  itemText: {
+    backgroundColor: "#fff",
+    padding: 16,
+    fontSize: 18,
+    color: "#222",
+    borderTopWidth: 1,
+    borderColor: "#CCC"
+  }
+});

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-native-simple-modal-picker",
+  "version": "0.1.0",
+  "description": "Simple Picker/DropDown/Chooser/Selector for React Native",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/binbytes/react-native-simple-modal-picker.git"
+  },
+  "keywords": [
+    "react-native",
+    "react",
+    "picker",
+    "modal-picker",
+    "dropdown",
+    "chooser",
+    "selector",
+    "modal-selector",
+    "modal-dropdown"
+  ],
+  "author": "Bhavik Charola <bhavikcharola@gmail.com>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/binbytes/react-native-simple-modal-picker/issues"
+  },
+  "homepage": "https://github.com/binbytes/react-native-simple-modal-picker#readme",
+  "dependencies": {
+    "prop-types": "^15.6.2",
+    "react": "^16.4.2"
+  }
+}