├── .npmignore ├── .github └── react-native-toggle-picker.gif ├── .editorconfig ├── src ├── styles.js └── index.js ├── package.json ├── LICENSE ├── .gitignore ├── README.md └── yarn.lock /.npmignore: -------------------------------------------------------------------------------- 1 | .github/ 2 | LICENCE 3 | README.md 4 | -------------------------------------------------------------------------------- /.github/react-native-toggle-picker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ThePaulMcBride/react-native-smart-picker/HEAD/.github/react-native-toggle-picker.gif -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_style = space 9 | indent_size = 2 10 | end_of_line = lf 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | -------------------------------------------------------------------------------- /src/styles.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | const styles = StyleSheet.create({ 4 | iosPicker: { 5 | backgroundColor: 'rgba(178,181,189,0.1)', 6 | borderColor: 'rgb(178,181,189)', 7 | borderTopWidth: 1, 8 | padding: 0, 9 | }, 10 | androidBoxStyle: { 11 | flex: 1, 12 | flexDirection: 'column', 13 | }, 14 | androidPicker: { 15 | flex: 1, 16 | alignItems: 'center' 17 | }, 18 | androidPickerWrapper: { 19 | borderBottomWidth: 1, 20 | borderColor: 'rgb(178,181,189)' 21 | }, 22 | toggleBox: { 23 | borderColor: 'rgb(178,181,189)', 24 | borderBottomWidth: 1, 25 | } 26 | }); 27 | 28 | export default styles; 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.5", 3 | "name": "react-native-smart-picker", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/thepaulmcbride/react-native-smart-picker" 7 | }, 8 | "license": "MIT", 9 | "author": "Paul McBride (https://paulmcbride.net)", 10 | "main": "./src/index.js", 11 | "description": "React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android", 12 | "keywords": [ 13 | "react-component", 14 | "react-native", 15 | "ios", 16 | "android", 17 | "toggle", 18 | "picker", 19 | "select" 20 | ], 21 | "dependencies": { 22 | "react-native-togglebox": "1.0.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Jan Václavík 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-smart-picker 2 | React Native Smart Picker is easy wrapper for React Native Picker. Allows toggling the picker open and closed on iOS and native behaviour on Android. 3 | 4 | * The `SmartPicker` scene should be wrapped in a `ScrollView` to allow the page to grow as the toggle opens 5 | * Works on Android but there are no toggle effect (follows native UX guidelines) 6 | * PRs welcome 7 | 8 | ## Demo 9 | 10 | ![Showtime](.github/react-native-toggle-picker.gif?raw=true "Showtime") 11 | 12 | ## Installation 13 | 14 | ```bash 15 | npm i react-native-smart-picker --save 16 | ``` 17 | 18 | or 19 | 20 | ```bash 21 | yarn add react-native-smart-picker --save 22 | ``` 23 | 24 | ## Use 25 | 26 | ```javascript 27 | import SmartPicker from 'react-native-smart-picker' 28 | 29 | ... 30 | 31 | this.state = { 32 | selected: "A", 33 | 34 | }; 35 | 36 | handleChange(value: string) { 37 | this.setState({ 38 | selected: value 39 | }); 40 | } 41 | 42 | 43 | 44 | 45 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | ``` 60 | 61 | ## Props 62 | 63 | |Prop name | Default prop | Required | Note 64 | | --- | --- | --- | --- | 65 | | `androidBoxStyle` | `{}` | - | Custom styles | 66 | | `androidPickerTitle` | `true` | No | Enable or disable title in android picker box 67 | | `androidPickerStyle` | `{}` | - | Custom styles | 68 | | `androidPickerWrapperStyle` | `{}` | - | Custom styles | 69 | | `androidBoxStyle` | `{}` | - | Custom styles | 70 | | `arrowColor` | `rgb(178, 178, 178)` | - | - | 71 | | `arrowSize` | `30` | - | - | 72 | | `arrowDownType` | `'keyboard-arrow-down'` | - | Icon name from`react-native-vector-icons/MaterialIcons` | 73 | | `arrowUpType` | `'keyboard-arrow-up'` | - | Icon name from`react-native-vector-icons/MaterialIcons` | 74 | | `expanded` | `false` | - | Boolean if box should be expanded or not | 75 | | `iosBoxStyle` | `{}` | - | Custom styles | 76 | | `iosPickerStyle` | `{}` | - | Custom styles | 77 | | `iosPickerWrapperStyle` | `{}` | - | Custom styles | 78 | | `onValueChange` | - | Yes | Prop from RNPicker (expects func) | 79 | | `label` | - | Yes | Left label on the left of title | 80 | | `selectedValue` | - | Yes | Prop from RNPicker (expects any) | 81 | | `value` | `null` | - | Value on the right title | 82 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import PropTypes from 'prop-types' 3 | import { Text, View, Image, TouchableWithoutFeedback, Animated, Picker, Platform, StyleSheet } from 'react-native' 4 | import ToggleBox from 'react-native-togglebox' 5 | import styles from './styles.js' 6 | 7 | class TogglePicker extends Component { 8 | renderPicker = () => ( 9 | 14 | {this.props.children} 15 | 16 | ) 17 | 18 | renderIos = () => ( 19 | 20 | 21 | {this.renderPicker()} 22 | 23 | 24 | ) 25 | 26 | renderAndroid = () => ( 27 | 28 | { 29 | this.props.androidPickerTitle && 30 | 31 | {this.props.label} 32 | 33 | } 34 | 35 | {this.renderPicker()} 36 | 37 | 38 | ) 39 | 40 | render() { 41 | return ( 42 | Platform.OS === 'ios' ? 43 | this.renderIos() : this.renderAndroid() 44 | ) 45 | } 46 | } 47 | 48 | TogglePicker.propTypes = { 49 | androidBoxStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), 50 | androidPickerTitle: PropTypes.bool, 51 | androidPickerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), 52 | androidPickerWrapperStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), 53 | arrowColor: PropTypes.string, 54 | arrowDownType: PropTypes.string, 55 | arrowSize: PropTypes.number, 56 | arrowUpType: PropTypes.string, 57 | enabled: PropTypes.bool, 58 | expanded: PropTypes.bool, 59 | iosBoxStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), 60 | iosPickerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), 61 | iosPickerWrapperStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), 62 | onValueChange: PropTypes.func.isRequired, 63 | selectedValue: PropTypes.any.isRequired, 64 | label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, 65 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), 66 | } 67 | 68 | TogglePicker.defaultProps = { 69 | androidBoxStyle: {}, 70 | androidPickerStyle: {}, 71 | androidPickerWrapperStyle: {}, 72 | androidPickerTitle: true, 73 | androidBoxStyle: {}, 74 | arrowColor: 'rgb(178, 178, 178)', 75 | arrowDownType: 'keyboard-arrow-down', 76 | arrowSize: 30, 77 | arrowUpType: 'keyboard-arrow-up', 78 | expanded: false, 79 | iosBoxStyle: {}, 80 | iosPickerStyle: {}, 81 | iosPickerWrapperStyle: {}, 82 | value: '', 83 | } 84 | 85 | export default TogglePicker 86 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | asap@~2.0.3: 6 | version "2.0.6" 7 | resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" 8 | 9 | core-js@^1.0.0: 10 | version "1.2.7" 11 | resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" 12 | 13 | encoding@^0.1.11: 14 | version "0.1.12" 15 | resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" 16 | dependencies: 17 | iconv-lite "~0.4.13" 18 | 19 | fbjs@^0.8.9: 20 | version "0.8.12" 21 | resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" 22 | dependencies: 23 | core-js "^1.0.0" 24 | isomorphic-fetch "^2.1.1" 25 | loose-envify "^1.0.0" 26 | object-assign "^4.1.0" 27 | promise "^7.1.1" 28 | setimmediate "^1.0.5" 29 | ua-parser-js "^0.7.9" 30 | 31 | iconv-lite@~0.4.13: 32 | version "0.4.18" 33 | resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2" 34 | 35 | is-stream@^1.0.1: 36 | version "1.1.0" 37 | resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" 38 | 39 | isomorphic-fetch@^2.1.1: 40 | version "2.2.1" 41 | resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" 42 | dependencies: 43 | node-fetch "^1.0.1" 44 | whatwg-fetch ">=0.10.0" 45 | 46 | js-tokens@^3.0.0: 47 | version "3.0.2" 48 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" 49 | 50 | loose-envify@^1.0.0, loose-envify@^1.3.1: 51 | version "1.3.1" 52 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" 53 | dependencies: 54 | js-tokens "^3.0.0" 55 | 56 | node-fetch@^1.0.1: 57 | version "1.7.1" 58 | resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.1.tgz#899cb3d0a3c92f952c47f1b876f4c8aeabd400d5" 59 | dependencies: 60 | encoding "^0.1.11" 61 | is-stream "^1.0.1" 62 | 63 | object-assign@^4.1.0: 64 | version "4.1.1" 65 | resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" 66 | 67 | promise@^7.1.1: 68 | version "7.3.1" 69 | resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" 70 | dependencies: 71 | asap "~2.0.3" 72 | 73 | prop-types@^15.5.10, prop-types@^15.5.4: 74 | version "15.5.10" 75 | resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" 76 | dependencies: 77 | fbjs "^0.8.9" 78 | loose-envify "^1.3.1" 79 | 80 | react-native-togglebox@1.0.3: 81 | version "1.0.3" 82 | resolved "https://registry.yarnpkg.com/react-native-togglebox/-/react-native-togglebox-1.0.3.tgz#df8e9370fa360361cf2f84e70a9bfa8a719b4e73" 83 | dependencies: 84 | prop-types "^15.5.10" 85 | react-style-proptype "^3.0.0" 86 | 87 | react-style-proptype@^3.0.0: 88 | version "3.0.0" 89 | resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.0.0.tgz#89e0b646f266c656abb0f0dd8202dbd5036c31e6" 90 | dependencies: 91 | prop-types "^15.5.4" 92 | 93 | setimmediate@^1.0.5: 94 | version "1.0.5" 95 | resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" 96 | 97 | ua-parser-js@^0.7.9: 98 | version "0.7.14" 99 | resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca" 100 | 101 | whatwg-fetch@>=0.10.0: 102 | version "2.0.3" 103 | resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" 104 | --------------------------------------------------------------------------------