Use flex to automatically size optionContainer to its contents.

.eslintignore

@@ -0,0 +1,2 @@
+docs
+SampleApp

.eslintrc.cjs

@@ -0,0 +1,87 @@
+module.exports = {
+  parser: "@babel/eslint-parser",
+  env: {
+    es6: true,
+    node: true,
+  },
+  extends: ["plugin:react/recommended", "eslint:recommended"],
+  plugins: ["babel", "import", "react", "react-native"],
+  parserOptions: {
+    ecmaVersion: 9,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      restParams: true,
+      spread: true,
+      jsx: true,
+    },
+    sourceType: "module",
+    requireConfigFile: false,
+    babelOptions: {
+      babelrc: false,
+      configFile: false,
+      presets: ["@babel/preset-react"],
+    },
+  },
+  rules: {
+    indent: ["error", 4],
+    semi: ["error", "always"],
+    "no-mixed-spaces-and-tabs": 2,
+    "react/no-unknown-property": 1,
+    "react/jsx-filename-extension": 0,
+    "react/prefer-stateless-function": 0,
+    "react/sort-comp": 0,
+    "no-use-before-define": 0,
+    "no-underscore-dangle": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/no-unresolved": [2, { ignore: ["react", "react-native"] }],
+    "no-spaced-func": 2,
+    "space-in-parens": ["error", "never"],
+    "no-var": "error",
+    "no-constant-condition": 2,
+    eqeqeq: 2,
+    "no-else-return": 2,
+    "no-eval": 2,
+    "no-lone-blocks": 2,
+    "no-loop-func": 2,
+    "no-useless-return": 2,
+    "block-spacing": 2,
+    "no-lonely-if": 2,
+    "no-trailing-spaces": 2,
+    "one-var": ["error", "never"],
+    "arrow-body-style": ["error", "as-needed"],
+    "no-console": 1,
+    "no-unused-vars": 1,
+    "jsx-quotes": ["error", "prefer-double"],
+    "no-unused-expressions": 2,
+    "require-await": 2,
+    "no-irregular-whitespace": 2,
+    "arrow-spacing": "error",
+    "arrow-parens": ["error", "as-needed"],
+    "brace-style": ["error", "1tbs", { allowSingleLine: false }],
+    "no-multi-spaces": [
+      "error",
+      {
+        exceptions: { ImportDeclaration: true },
+      },
+    ],
+    "key-spacing": [
+      2,
+      {
+        beforeColon: false,
+        afterColon: true,
+        align: "value",
+      },
+    ],
+    "no-empty-function": [2, { allow: ["arrowFunctions"] }],
+    "comma-dangle": [
+      "error",
+      {
+        arrays: "always-multiline",
+        objects: "always-multiline",
+        imports: "always-multiline",
+        exports: "never",
+        functions: "ignore",
+      },
+    ],
+  },
+};

.gitignore

@@ -1,5 +1,8 @@
 .idea
 npm-debug.log
+node_modules
+package-lock.json
+yarn.lock
 
 # vim
 *.sw*

.npmignore

@@ -2,4 +2,5 @@ test
 .idea
 SampleApp
 .gitignore
-docs
+docs
+*~

README.md

@@ -1,34 +1,32 @@
-[![npm version](https://badge.fury.io/js/react-native-modal-picker.svg)](https://badge.fury.io/js/react-native-modal-picker)
+# react-native-modal-selector [![npm version](https://badge.fury.io/js/react-native-modal-selector.svg)](https://badge.fury.io/js/react-native-modal-selector)
 
-# react-native-modal-picker
 A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
 
+This project is the official continuation of the abandoned `react-native-modal-picker` repo. Contributors are welcome to [request a promotion to collaborator status](https://github.com/peacechen/react-native-modal-selector/issues/1).
+
 ## Demo
 
-<img src="https://raw.githubusercontent.com/d-a-n/react-native-modal-picker/master/docs/demo.gif" />
+<img src="https://github.com/peacechen/react-native-modal-selector/blob/master/docs/demo.gif" />
 
 ## Install
 
 ```sh
-npm i react-native-modal-picker --save
+npm install react-native-modal-selector
 ```
 
 ## Usage
 
-You can either use this component as an wrapper around your existing component or use it in its default mode. In default mode a customizable button is rendered.
+You can either use this component in its default mode, as a wrapper around your existing component or provide a custom component (where you need to control opening of the modal yourself). In default mode a customizable button is rendered.
 
 See `SampleApp` for an example how to use this component.
 
 ```jsx
-
-import ModalPicker from 'react-native-modal-picker'
-
-[..]
+import ModalSelector from 'react-native-modal-selector'
 
 class SampleApp extends Component {
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
 
         this.state = {
             textInputValue: ''
@@ -41,59 +39,150 @@ class SampleApp extends Component {
             { key: index++, section: true, label: 'Fruits' },
             { key: index++, label: 'Red Apples' },
             { key: index++, label: 'Cherries' },
-            { key: index++, label: 'Cranberries' },
-            { key: index++, label: 'Pink Grapefruit' },
-            { key: index++, label: 'Raspberries' },
-            { key: index++, section: true, label: 'Vegetables' },
-            { key: index++, label: 'Beets' },
-            { key: index++, label: 'Red Peppers' },
-            { key: index++, label: 'Radishes' },
-            { key: index++, label: 'Radicchio' },
-            { key: index++, label: 'Red Onions' },
-            { key: index++, label: 'Red Potatoes' },
-            { key: index++, label: 'Rhubarb' },
-            { key: index++, label: 'Tomatoes' }
+            { key: index++, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' },
+            // etc...
+            // Can also add additional custom keys which are passed to the onChange callback
+            { key: index++, label: 'Vegetable', customKey: 'Not a fruit' }
         ];
 
         return (
             <View style={{flex:1, justifyContent:'space-around', padding:50}}>
 
-                <ModalPicker
+                // Default mode
+                <ModalSelector
                     data={data}
                     initValue="Select something yummy!"
                     onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }} />
 
-                <ModalPicker
+                // Wrapper
+                <ModalSelector
                     data={data}
                     initValue="Select something yummy!"
+                    supportedOrientations={['landscape']}
+                    accessible={true}
+                    scrollViewAccessibilityLabel={'Scrollable options'}
+                    cancelButtonAccessibilityLabel={'Cancel Button'}
                     onChange={(option)=>{ this.setState({textInputValue:option.label})}}>
-                    
+
                     <TextInput
                         style={{borderWidth:1, borderColor:'#ccc', padding:10, height:30}}
                         editable={false}
                         placeholder="Select something yummy!"
                         value={this.state.textInputValue} />
-
-                </ModalPicker>
+
+                </ModalSelector>
+
+                // Custom component
+                <ModalSelector
+                    data={data}
+                    ref={selector => { this.selector = selector; }}
+                    customSelector={<Switch onValueChange={() => this.selector.open()} />}
+                />
             </View>
         );
     }
 }
 ```
 
-## Props
-
-* `data - []` required, array of objects with a unique key and label
-* `style - object` optional, style definitions for the root element
-* `onChange - function` optional, callback function, when the users has selected an option
-* `initValue - string` optional, text that is initially shown on the button
-* `cancelText - string` optional, text of the cancel button
-* `selectStyle - object` optional, style definitions for the select element (available in default mode only!)
-* `selectTextStyle - object` optional, style definitions for the select element (available in default mode only!)
-* `overlayStyle - object` optional, style definitions for the overly/background element
-* `sectionStyle - object` optional, style definitions for the section element
-* `sectionTextStyle - object` optional, style definitions for the select text element
-* `optionStyle - object` optional, style definitions for the option element
-* `optionTextStyle - object` optional, style definitions for the option text element
-* `cancelStyle - object` optional, style definitions for the cancel element
-* `cancelTextStyle - object` optional, style definitions for the cancel text element
+## Data Format
+
+The selector accepts a specific format of data:
+```javascript
+[{ key: 5, label: 'Red Apples' }]
+```
+
+Optionally provide a `component` key which overrides the default label text. Optionally provide a unique `testID` for each item:
+```javascript
+[{
+  key: 5,
+  label: 'Red Apples',
+  // The next keys are optional --
+  component: <View style={{backgroundColor: 'red'}}><Text style={{color: 'white'}}>Red Apples custom component ☺</Text></View>,
+  testID: '5-red-apples'
+}]
+```
+
+<img src="https://user-images.githubusercontent.com/6295083/51210593-d3fbae00-18d8-11e9-8f51-d1ca4f9f8267.png" />
+
+If your data has a specific format, you can define extractors of data, example:
+```javascript
+this.setState({data: [{ id: 5, name: 'Red Apples' }]});
+
+return (
+  <ModalSelector
+    data={this.state.data}
+    keyExtractor= {item => item.id}
+    labelExtractor= {item => item.name}
+  />
+);
+```
+
+## API
+
+### Props
+
+Prop                | Type     | Optional | Default      | Description
+------------------- | -------- | -------- | ------------ | -----------
+`data`              | array    | No       | []           | array of objects with a unique `key` and `label` to select in the modal. Optional `component` overrides label text. Optional unique `testID` for each item.
+`onChange`          | function | Yes      | () => {}     | callback function, when the users has selected an option
+`onModalOpen`       | function | Yes      | () => {}     | callback function, when modal is opening
+`onModalClose`      | function | Yes      | (item) => {} | callback function, when modal is closing. Returns the selected item.
+`keyExtractor`      | function | Yes      | (data) => data.key   | extract the key from the data item
+`labelExtractor`    | function | Yes      | (data) => data.label | extract the label from the data item
+`componentExtractor`| function | Yes      | (data) => data.component | extract the component from the data item
+`visible`           | bool     | Yes      | false        | control open/close state of modal
+`closeOnChange`     | bool     | Yes      | true         | control if modal closes on select
+`initValue`         | string   | Yes      | `Select me!` | text that is initially shown on the button
+`cancelText`        | string   | Yes      | `cancel`     | text of the cancel button
+`disabled`          | bool     | Yes      | false        | `true` disables opening of the modal
+`supportedOrientations`    | ['portrait', 'landscape'] | Yes      | both      | orientations the modal supports
+`keyboardShouldPersistTaps`| `string` / `bool`         | Yes      | `always`  | passed to underlying ScrollView
+`listType`          | string   | Yes      | `SCROLLVIEW` | scroller type: `SCROLLVIEW` or `FLATLIST`
+`animationType`     | string   | Yes      | `slide`      | type of animation to be used to show the modal. Must be one of `none`, `slide` or `fade`.
+`style`             | object   | Yes      |              | style definitions for the root element
+`childrenContainerStyle`| object   | Yes      | {}           | style definitions for the children container view
+`touchableStyle`    | object   | Yes      | {}           | style definitions for the touchable element
+`touchableActiveOpacity`    | number   | Yes      | 0.2           | opacity for the touchable element on touch
+`selectStyle`       | object   | Yes      | {}           | style definitions for the select element (available in default mode only!). NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass `flex:1` explicitly to `selectStyle` as a prop.
+`selectTextStyle`   | object   | Yes      | {}           | style definitions for the select element (available in default mode only!)
+`overlayStyle`      | object   | Yes      | { flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' } | style definitions for the overlay background element. RN <= 0.41 should override this with pixel value for padding.
+`sectionStyle`      | object   | Yes      | {}           | style definitions for the section element
+`sectionTextStyle`  | object   | Yes      | {}           | style definitions for the select text element
+`selectedItemTextStyle` | object | Yes    | {}           | style definitions for the currently selected text element
+`optionStyle`       | object   | Yes      | {}           | style definitions for the option element
+`optionTextStyle`   | object   | Yes      | {}           | style definitions for the option text element
+`optionContainerStyle`| object | Yes      | {}           | style definitions for the option container element
+`cancelStyle`       | object   | Yes      | {}           | style definitions for the cancel element
+`cancelTextStyle`   | object   | Yes      | {}           | style definitions for the cancel text element
+`initValueTextStyle`| object   | Yes      | {}           | style definitions for the initValue text element
+`cancelContainerStyle`| object | Yes      | {}           | style definitions for the cancel container
+`backdropPressToClose`| bool   | Yes  | false        | `true` makes the modal close when the overlay is pressed
+`passThruProps`| object   | Yes  | {}        | props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
+`selectTextPassThruProps`| object   | Yes  | {}        | props to pass through to the select text component
+`optionTextPassThruProps`| object   | Yes  | {}        | props to pass through to the options text components in the modal
+`cancelTextPassThruProps`| object   | Yes  | {}        | props to pass through to the cancel text components in the modal
+`scrollViewPassThruProps`| object   | Yes  | {}        | props to pass through to the internal ScrollView
+`openButtonContainerAccessible`| bool   | Yes  | false        | `true` enables accessibility for the open button container. Note: if `false` be sure to define accessibility props directly in the wrapped component.
+`listItemAccessible`| bool   | Yes  | false        | `true` enables accessibility for data items. Note: data items should have an `accessibilityLabel` property if this is enabled
+`cancelButtonAccessible`| bool   | Yes  | false        | `true` enables accessibility for cancel button.
+`scrollViewAccessible`| bool   | Yes  | false        | `true` enables accessibility for the scroll view. Only enable this if you don't want to interact with individual data items.
+`scrollViewAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the modal ScrollView
+`cancelButtonAccessibilityLabel` | string   | Yes      | undefined | Accessibility label for the cancel button
+`modalOpenerHitSlop` | object | Yes | {} | How far touch can stray away from touchable that opens modal ([RN docs](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#hitslop))
+`customSelector`     | node   | Yes | undefined          | Render a custom node instead of the built-in select box.
+`selectedKey`        | any    | Yes | ''                 | Key of the item to be initially selected
+`enableShortPress`          | bool   | Yes | true               | enables short press. This is regular touch behavior.
+`enableLongPress`           | bool   | Yes | false              | enables long press. When true, `onModalOpen` returns `{longPress: true}`
+`optionsTestIDPrefix`       | string   | Yes | `'default'`      | This prefixes each selectable option's testID prop if no testID keys are provided in `props.data` array objects. Default for each option's testID: 'default-\<optionLabel\>'
+`header`     | node   | Yes | undefined          | Render a header above the list
+`onEndReached`     | function                  | Yes | undefined          | Called once when the scroll position gets of the rendered content.
+
+### Methods
+
+* `open()`: open the modal.
+* `close()`: close the modal.
+* `getSelectedItem()`: get current selected item, updated by onChange event.
+
+## See also
+
+* A similar project is [hepter/react-native-modal-selector-searchable](https://github.com/hepter/react-native-modal-selector-searchable), which is a fork of this module that adds searching capabilities.

SampleApp/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}