From 62e7a5ba847b5d267eaf54740ac5827f2cb8d1be Mon Sep 17 00:00:00 2001 From: Nader Dabit Date: Thu, 2 Feb 2017 09:53:18 -0600 Subject: [PATCH] fixes issue #165 --- npm-debug.log | 113 +++++++++++++++++++++++++++++++++++++++++++ src/list/ListItem.js | 4 +- 2 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 npm-debug.log diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 0000000000..e2fa798a01 --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,113 @@ +0 info it worked if it ends with ok +1 verbose cli [ '/Users/naderdabit1/.nvm/versions/node/v6.8.0/bin/node', +1 verbose cli '/Users/naderdabit1/.nvm/versions/node/v6.8.0/bin/npm', +1 verbose cli 'publish' ] +2 info using npm@3.10.8 +3 info using node@v6.8.0 +4 verbose publish [ '.' ] +5 silly cache add args [ '.', null ] +6 verbose cache add spec . +7 silly cache add parsed spec Result { +7 silly cache add raw: '.', +7 silly cache add scope: null, +7 silly cache add escapedName: null, +7 silly cache add name: null, +7 silly cache add rawSpec: '.', +7 silly cache add spec: '/Users/naderdabit1/Desktop/openSource/react-native-elements', +7 silly cache add type: 'directory' } +8 verbose addLocalDirectory /Users/naderdabit1/.npm/react-native-elements/0.9.4/package.tgz not in flight; packing +9 verbose correctMkdir /Users/naderdabit1/.npm correctMkdir not in flight; initializing +10 info lifecycle react-native-elements@0.9.4~prepublish: react-native-elements@0.9.4 +11 silly lifecycle react-native-elements@0.9.4~prepublish: no script for prepublish, continuing +12 verbose tar pack [ '/Users/naderdabit1/.npm/react-native-elements/0.9.4/package.tgz', +12 verbose tar pack '/Users/naderdabit1/Desktop/openSource/react-native-elements' ] +13 verbose tarball /Users/naderdabit1/.npm/react-native-elements/0.9.4/package.tgz +14 verbose folder /Users/naderdabit1/Desktop/openSource/react-native-elements +15 verbose addLocalTarball adding from inside cache /Users/naderdabit1/.npm/react-native-elements/0.9.4/package.tgz +16 verbose correctMkdir /Users/naderdabit1/.npm correctMkdir not in flight; initializing +17 silly cache afterAdd react-native-elements@0.9.4 +18 verbose afterAdd /Users/naderdabit1/.npm/react-native-elements/0.9.4/package/package.json not in flight; writing +19 verbose correctMkdir /Users/naderdabit1/.npm correctMkdir not in flight; initializing +20 verbose afterAdd /Users/naderdabit1/.npm/react-native-elements/0.9.4/package/package.json written +21 silly publish { name: 'react-native-elements', +21 silly publish version: '0.9.4', +21 silly publish description: 'React Native Elements & UI Toolkit', +21 silly publish main: 'src/index.js', +21 silly publish repository: +21 silly publish { type: 'git', +21 silly publish url: 'git+ssh://git@github.com/dabit3/React-Native-Elements.git' }, +21 silly publish keywords: [ 'react-native', 'reactjs', 'reactnative', 'bootstrap' ], +21 silly publish peerDependencies: { 'react-native-vector-icons': '~4.0.0' }, +21 silly publish author: { name: 'Nader Dabit' }, +21 silly publish license: 'MIT', +21 silly publish bugs: { url: 'https://github.com/dabit3/React-Native-Elements/issues' }, +21 silly publish homepage: 'https://github.com/dabit3/React-Native-Elements#readme', +21 silly publish dependencies: +21 silly publish { 'react-native-side-menu': '^0.20.1', +21 silly publish 'react-native-tab-navigator': '^0.3.3' }, +21 silly publish readme: '![React Native Elements](http://i.imgur.com/Ok2KaWq.png)\n## Cross Platform React Native UI Toolkit\n\n![React Native UI Toolkit](http://i.imgur.com/UXrGTeG.png)\n\n## Get Started\n\n*If you are using Exponent, you can run `npm i react-native-elements --save` and skip to step 3.*\n\n#### Step 1\n\nInstall react-native-vector-icons (if you do not already have it)\n\n`npm i react-native-vector-icons --save && react-native link react-native-vector-icons`\n\n*If you have any issues with icons not working or installation of React Native Vector Icons, check out their installation guide [here](https://github.com/oblador/react-native-vector-icons#installation)*\n\n#### Step 2\n\nInstall React Native Elements\n\n`npm i react-native-elements --save`\n\nor\n\n`yarn add react-native-elements`\n\n#### Step 3\n\nStart using components\n\n```js\nimport {\n Button\n} from \'react-native-elements\'\n\n\n\n```\n## Included\n- [x] [Buttons](https://github.com/react-native-community/react-native-elements#buttons)\n- [x] [Social Icons / Buttons](https://github.com/react-native-community/react-native-elements#social-icons--buttons)\n- [x] [Icons](https://github.com/react-native-community/react-native-elements#icons--icon-buttons)\n- [x] [Side Menu](https://github.com/react-native-community/react-native-elements#sidemenu)\n- [x] [Form Elements](https://github.com/react-native-community/react-native-elements#forms)\n- [x] [Search Bar](https://github.com/react-native-community/react-native-elements#search-bar)\n- [x] [ButtonGroup](https://github.com/react-native-community/react-native-elements#buttongroup)\n- [x] [Checkboxes](https://github.com/react-native-community/react-native-elements#checkboxes)\n- [x] [List Element](https://github.com/react-native-community/react-native-elements#lists)\n- [x] [Linked List Element](https://github.com/react-native-community/react-native-elements#lists)\n- [x] [Tab Bar Component](https://github.com/react-native-community/react-native-elements#tab-bar-component)\n- [x] [HTML style headings (h1, h2, etc...)](https://github.com/react-native-community/react-native-elements#html-style-headings)\n- [x] [Card component](https://github.com/react-native-community/react-native-elements#card)\n- [x] [Pricing Component](https://github.com/react-native-community/react-native-elements#pricing-component)\n- [x] [Grid Component](https://github.com/react-native-community/react-native-elements#grid-component)\n- [x] [Slider Component](https://github.com/react-native-community/react-native-elements#slider-component)\n\n## Roadmap\n- [ ] Add radio buttons\n- [ ] Searchable Drop Down similar to [Bootstrap-3-Typehead](https://github.com/bassjobsen/Bootstrap-3-Typeahead)\n- [ ] [Swipeable List Item component](https://github.com/jemise111/react-native-swipe-list-view)\n- [ ] Add icons to TextInputs\n- [ ] Profile Component `in progress`\n- [ ] Custom Picker\n- [ ] Something you\'s like to see? Submit an [issue](https://github.com/dabit3/react-native-elements/issues) or a [pull request](https://github.com/dabit3/react-native-elements/pulls)\n\n## Examples\nCheck out the pre built and configured [React Native Hackathon Starter Project](https://github.com/dabit3/react-native-hackathon-starter) which uses all of these elements.\n\n## Notes\n\n#### Fonts\nReact Native Elements uses the System font as the default font family for iOS and Roboto as the default font family for Android.\n\n**In the example screenshots, we are using Lato which can be downloaded [here](https://fonts.google.com/specimen/Lato?selection.family=Lato).**\n\n> We are working on a way to make a custom font family configurable through the command line.\n\n[Here](https://github.com/dabit3/react-native-fonts) is a list of fonts available out of the box for each platform, or you can install and use a custom font of your own.\n\nTo override the fontFamily in any element, simply provide a fontFamily prop:\n\n```js\n\n\n```\n\n# API\n\n\n## Buttons\nButtons take a title and an optional [material icon name](https://design.google.com/icons/), as well as the props below.\n\n> You can override Material icons with one of the following: material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo by providing an icon.type as a prop.\n\n![Buttons](http://i.imgur.com/CVf1xbr.png)\n\n```js\nimport { Button } from \'react-native-elements\'\n\n\n\n\n\n\n\n\n\n\n\n```\n\n#### Button props\n\n> Also recevies all TouchableWithoutFeedback props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| Component | TouchableHighlight (iOS), TouchableNativeFeedback (android) | React Native Component | Specify other component such as TouchableOpacity or other (optional) |\n| buttonStyle | none | object (style) | add additional styling for button component (optional) |\n| title | none | string | button title (required) |\n| large | false | boolean | makes button large |\n| fontFamily | System font (iOS), Roboto (android) | string | specify different font family |\n| fontWeight | none | string | specify font weight for title (optional) |\n| iconRight | false | boolean | moves icon to right of title |\n| onPress | none | function | onPress method (required) |\n| onLongPress | none | function | onLongPress method (optional) |\n| icon | {color: \'white\'} | object {name: string, color: string, size: number, type: string (default is material, or choose one of material-community, simple-line-icon, zocial, font-awesome, octicon, ionicon, foundation, evilicon, or entypo), style: object(style)} | icon configuration (optional) |\n| backgroundColor | #397af8 | string (color) | background color of button (optional) |\n| borderRadius | none | number | adds border radius to card (optional) |\n| color | white | string(color) | font color (optional) |\n| textStyle | none | object (style) | text styling (optional) |\n| fontSize | 18 | number | font size (optional) |\n| underlayColor | transparent | string(color) | underlay color for button press (optional) |\n| raised | false | boolean | flag to add raised button styling (optional) |\n| disabled | false | boolean | prop to indicate button is disabled (optional) |\n| disabledStyle | none | object (style) | disabled button styling (optional) |\n\n## Social Icons & Buttons\n\n![Social Icons](http://i.imgur.com/HYZ5sbP.png)\n\n```js\nimport { SocialIcon } from \'react-native-elements\'\n\n// Icon\n\n\n\n\n\n\n\n\n\n// Button\n\n\n\n\n\n\n\n\n\n```\n\n#### SocialIcon props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| title | none | string | title if made into a button (optional) |\n| type | none | social media type (facebook, twitter, google-plus-official, pinterest, linkedin, youtube, vimeo, tumblr, instagram, quora, foursquare, wordpress, stumbleupon, github, github-alt, twitch, medium, soundcloud, gitlab, angellist, codepen) | social media type (required) |\n| raised | true | boolean | raised adds a drop shadow, set to false to remove |\n| button | false | boolean | creates button (optional) |\n| onPress | none | function | onPress method (optional) |\n| onLongPress | none | function | onLongPress method (optional) |\n| light | false | boolean | reverses icon color scheme, setting background to white and icon to primary color |\n| iconStyle | none | object (style) | extra styling for icon component (optional) |\n| style | none | object (style) | button styling (optional) |\n| iconColor | white | string | icon color (optional) |\n| iconSize | 24 | number | icon size (optional) |\n| component | TouchableHighlight | React Native Component | type of button (optional) |\n| fontFamily | System font bold (iOS), Roboto-Black (android) | string | specify different font family (optional) |\n| fontWeight | bold (ios), black(android) | string | specify font weight of title if set as a button with a title |\n| fontStyle | none | object (style) | specify text styling (optional) |\n| disabled | false | boolean | disable button (optional) |\n| loading | false | boolean | shows loading indicator (optional) |\n\n\n## Icons & Icon Buttons\n\n![Icons](http://i.imgur.com/2A28abz.png)\n\nIcons take the name of a [material icon](https://design.google.com/icons/) as a prop.\n\n> You can override Material icons with one of the following: [material-community](https://materialdesignicons.com/), [font-awesome](http://fontawesome.io/icons/), [octicon](https://octicons.github.com/), [ionicon](http://ionicons.com/), [foundation](http://zurb.com/playground/foundation-icon-fonts-3), [evilicon](http://evil-icons.io/), [simple-line-icon](http://simplelineicons.com/), [zocial](http://weloveiconfonts.com/), or [entypo](http://www.entypo.com/) by providing a type prop.\n\n> Hint: use **reverse** to make your icon look like a button\n\n```js\n\nimport { Icon } from \'react-native-elements\'\n\n\n\n\n\n\n\n\n\n console.log(\'hello\')} />\n\n```\n\n#### Icon props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| name | none | string | name of icon (required) |\n| type | material | string | type (defaults to material, options are `material-community, zocial, font-awesome, octicon, ionicon, foundation, evilicon, simple-line-icon, or entypo`) |\n| size | 26 | number | size of icon (optional) |\n| color | black | string | color of icon (optional) |\n| iconStyle | inherited style | object (style) | additional styling to icon (optional) |\n| component | View if no onPress method is defined, TouchableHighlight if onPress method is defined | React Native component | update React Native Component (optional) |\n| onPress | none | function | onPress method for button (optional) |\n| onLongPress | none | function | onLongPress method for button (optional) |\n| underlayColor | icon color | string | underlayColor for press event |\n| reverse | false | boolean | reverses color scheme (optional) |\n| raised | false | boolean | adds box shadow to button (optional) |\n| containerStyle | inherited styling | object (style) | add styling to container holding icon (optional) |\n| reverseColor | white | string | specify reverse icon color (optional) |\n\n\n\n## Lists\n\n![Lists](http://i.imgur.com/7V8CIfl.png)\n\n#### Using Map Function. Implemented with avatar.\n\n```\nimport { List, ListItem } from \'react-native-elements\'\n\nconst list = [\n {\n name: \'Amy Farha\',\n avatar_url: \'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg\',\n subtitle: \'Vice President\'\n },\n {\n name: \'Chris Jackson\',\n avatar_url: \'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg\',\n subtitle: \'Vice Chairman\'\n },\n ... // more items\n]\n\n\n {\n list.map((l, i) => (\n \n ))\n }\n\n\n```\n\n#### Using Map Function. Implemented with link and icon.\n\n```js\nimport { List, ListItem } from \'react-native-elements\'\n\nconst list = [\n {\n title: \'Appointments\',\n icon: \'av-timer\'\n },\n {\n title: \'Trips\',\n icon: \'flight-takeoff\'\n },\n ... // more items\n]\n\n\n {\n list.map((item, i) => (\n \n ))\n }\n\n```\n\n#### Using RN ListView. Implemented with link and avatar.\n\n```js\nimport { List, ListItem } from \'react-native-elements\'\n\nconst list = [\n {\n name: \'Amy Farha\',\n avatar_url: \'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg\',\n subtitle: \'Vice President\'\n },\n {\n name: \'Chris Jackson\',\n avatar_url: \'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg\',\n subtitle: \'Vice Chairman\'\n },\n ... // more items\n]\n\nrenderRow (rowData, sectionID) {\n return (\n \n )\n}\n\nrender () {\n return (\n \n \n \n )\n}\n\n```\n\n#### ListItem implemented with custom View for Subtitle\n\n```js\nimport { List, ListItem } from \'react-native-elements\'\n\nrender () {\n return (\n \n \n \n 5 months ago\n \n }\n avatar={require(\'../images/avatar1.jpg\')}\n />\n \n )\n}\n\nstyles = StyleSheet.create({\n subtitleView: {\n flexDirection: \'row\',\n paddingLeft: 10,\n paddingTop: 5\n },\n ratingImage: {\n height: 19.21,\n width: 100\n },\n ratingText: {\n paddingLeft: 10,\n color: \'grey\'\n }\n})\n\n```\n\n#### List Props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| containerStyle | marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9 | object (style) | style the list container |\n\n\n#### ListItem props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| avatar | none | object| left avatar (optional). Refer to [React Native Image Source](https://facebook.github.io/react-native/docs/images.html) |\n| avatarStyle | none | object (style) | avatar styling (optional) |\n| chevronColor | #bdc6cf | string | set chevron color |\n| component | View or TouchableHighlight if onPress method is added as prop | React Native element | replace element with custom element (optional) |\n| containerStyle | none | object (style) | additional main container styling (optional) |\n| hideChevron | false | boolean | set if you do not want a chevron (optional) |\n| leftIcon | none | object {name, color, style, type} (type defaults to material icons) | icon configuration for left icon (optional) |\n| rightIcon | {name: \'chevron-right\'} | object {name, color, style, type} (type defaults to material icons) | icon configuration for right icon (optional). Shows up unless hideChevron or rightTitle is set |\n| onPress | none | function | onPress method for link (optional) |\n| onLongPress | none | function | onLongPress method for link (optional) |\n| roundAvatar | false | boolean | make left avatar round |\n| subtitle | none | string or object | subtitle text or custom view (optional) |\n| subtitleContainerStyle | none | style (object) | provide styling for subtitle container |\n| subtitleStyle | none | object (style) | additional subtitle styling (optional ) |\n| title | none | string or object | main title for list item, can be text or custom view (required) |\n| titleStyle | none | object (style) | additional title styling (optional) |\n| titleContainerStyle | none | style (object) | provide styling for title container |\n| wrapperStyle | none | object (style) | additional wrapper styling (optional) |\n| underlayColor | white | string | define underlay color for TouchableHighlight (optional) |\n| fontFamily | HelevticaNeue (iOS), Roboto (android) | string | specify different font family |\n| rightTitle | none | string | provide a rightTitle to have a title show up on the right side of the button, will override any icon on the right |\n| rightTitleContainerStyle | flex: 1, alignItems: \'flex-end\', justifyContent: \'center\' | object (style) | style the outer container of the rightTitle text |\n| rightTitleStyle | marginRight: 5, color: \'#bdc6cf\' | object (style) | style the text of the rightTitle text |\n| label | none | react native component | add a label with your own styling by providing a label={} prop to ListItem |\n\n#### Badges\n![Badges](http://i.imgur.com/qvJgGF2.png)\n\nYou can now easily add a badge to your List Item \n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| badge | none | object, accepts the following properties: value (string), badgeContainerStyle (object), badgeTextStyle (object). You can override the default badge by providing your own component with it\'s own styling by providing badge={{ element: }} | add a badge to the ListItem by using this prop | \n\nExample badge usage\n```\n\n\n }}\n/>\n\n```\n\n\n## SideMenu\n\n![Side Menu](http://i.imgur.com/cjIcRl6.gif)\n\n> This component implements [react-native-side-menu](https://github.com/react-native-community/react-native-side-menu) which is part of the [react-native-community](https://github.com/react-native-community).\n\n```js\nimport { SideMenu, List, ListItem } from \'react-native-elements\'\n\nconstructor () {\n super()\n this.state = {\n isOpen: false\n }\n this.toggleSideMenu = this.toggleSideMenu.bind(this)\n}\n\ntoggleSideMenu () {\n this.setState({\n isOpen: !this.state.isOpen\n })\n}\n\nrender () {\n const MenuComponent = (\n \n \n {\n list.map((l, i) => (\n console.log(\'Pressed\')}\n avatar={l.avatar_url}\n key={i}\n title={l.name}\n subtitle={l.subtitle}\n />\n ))\n }\n \n \n )\n\n return (\n \n \n \n )\n}\n\n```\n\n#### SideMenu props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| menu | inherited | React.Component | Menu component |\n| isOpen |false | Boolean | Props driven control over menu open state |\n| openMenuOffset | 2/3 of device screen width | Number | Content view left margin if menu is opened |\n| hiddenMenuOffset | none | Number | Content view left margin if menu is hidden |\n| edgeHitWidth | none | Number | Edge distance on content view to open side menu, defaults to 60 |\n| toleranceX | none | Number | X axis tolerance |\n| toleranceY | none | Number | Y axis tolerance |\n| disableGestures | false | Bool | Disable whether the menu can be opened with gestures or not |\n| onStartShould
SetResponderCapture | none | Function | Function that accepts event as an argument and specify if side-menu should react on the touch or not. Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details |\n| onChange | none | Function | Callback on menu open/close. Is passed isOpen as an argument |\n| onMove | none | Function | Callback on menu move. Is passed left as an argument |\n| menuPosition | left | String | either \'left\' or \'right\' |\n| animationFunction | none | (Function -> Object) | Function that accept 2 arguments (prop, value) and return an object:
- `prop` you should use at the place you specify parameter to animate
- `value` you should use to specify the final value of prop |\n| animationStyle | none | (Function -> Object) | Function that accept 1 argument (value) and return an object:
- `value` you should use at the place you need current value of animated parameter (left offset of content view) |\n| bounceBackOnOverdraw | true | boolean | when true, content view will bounce back to openMenuOffset when dragged further |\n\n> For issues or feature requests related to SideMenu component please click [here](https://github.com/react-native-community/react-native-side-menu/issues)\n\n## Search Bar\n\n![Search Bar](http://i.imgur.com/QvSrF62.png)\n\n```js\nimport { SearchBar } from \'react-native-elements\'\n\n\n\n\n\n\n\n\n\n```\n\n#### SearchBar props\n\n##### This component inherits [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html), along with the following:\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| containerStyle | inherited styling | object (style) | style the container of the TextInput |\n| inputStyle | inherited styling | object (style) | style the TextInput |\n| icon | { color: \'#86939e\', name: \'search\' } | object {name (string), color (string), style (object)} | specify color, styling, or another [Material Icon Name](https://design.google.com/icons/) |\n| noIcon | false | boolean | remove icon from textinput |\n| lightTheme | false | boolean | change theme to light theme |\n| round | false | boolean | change TextInput styling to rounded corners |\n| containerRef | none | ref | ref for TextInput conainer |\n| textInputRef | none | ref | ref for TextInput |\n| focus | none | function | call focus on the textinput(optional), eg `this.refs.someInputRef.focus()` |\n| underlineColorAndroid | transparent | string (color) | specify other than the default transparent underline color |\n\n\n## Tab Bar Component\n\n![Tab Bar Component](http://i.imgur.com/61lOjCy.png)\n\n> This component implements the [react-native-tab-navigator](https://github.com/exponentjs/react-native-tab-navigator) from [Exponent](https://getexponent.com/). Check out [Exponent](https://getexponent.com/) if you haven\'t already!\n\n```js\nimport { Tabs, Tab, Icon } from \'react-native-elements\'\n\nconstructor() {\n super()\n this.state = {\n selectedTab: \'profile\',\n }\n}\n\nchangeTab (selectedTab) {\n this.setState({selectedTab})\n}\n\nconst { selectedTab } = this.state\n\n\n }\n renderSelectedIcon={() => }\n onPress={() => this.changeTab(\'feed\')}>\n \n \n }\n renderSelectedIcon={() => }\n onPress={() => this.changeTab(\'profile\')}>\n \n \n /* ... more tabs here */\n\n\n```\n\n### Hide Tab Bar\n\n```js\nconstructor () {\n super()\n this.state = {\n hideTabBar: true,\n }\n}\n\nhideTabBar(value) {\n this.setState({\n hideTabBar: value\n });\n}\n\nlet tabBarStyle = {};\nlet sceneStyle = {};\nif (this.state.hideTabBar) {\n tabBarStyle.height = 0;\n tabBarStyle.overflow = \'hidden\';\n sceneStyle.paddingBottom = 0;\n}\n\n\n \n \n \n /* ... tabs here */\n\n\n```\n\n### Tabs Props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| sceneStyle | inherited | object (style) | define for rendered scene |\n| tabBarStyle | inherited | object (style) | define style for TabBar |\n| tabBarShadowStyle | inherited | object (style) | define shadow style for tabBar |\n| hidesTabTouch | false | boolean | disable onPress opacity for Tab |\n\n### Tab Props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| renderIcon | none | function | returns Item icon |\n| renderSelectedIcon | none | function | returns selected Item icon |\n| badgeText | none | string or number | text for Item badge |\n| renderBadge | none | function | returns Item badge |\n| title | none | string | Item title |\n| titleStyle | inherited | style | styling for Item title |\n| selectedTitleStyle | none | style | styling for selected Item title |\n| tabStyle | inherited | style | styling for tab |\n| selected | none | boolean | return whether the item is selected |\n| onPress | none | function | onPress method for Item |\n| allowFontScaling | false | boolean | allow font scaling for title |\n\n> For issues or feature requests related to Tab Bar component please click [here](https://github.com/exponentjs/react-native-tab-navigator/issues)\n\n## HTML Style Headings\n\n![HTMLHeadings](https://i.imgur.com/xX3LCUY.png)\n\n```js\nHeading 1\nHeading 2\nHeading 3\nHeading 4\n```\n\n### Headings Props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| h1 | none | boolean | font size 40 (optional) |\n| h2 | none | boolean | font size 34 (optional) |\n| h3 | none | boolean | font size 28 (optional) |\n| h4 | none | boolean | font size 22 (optional) |\n| fontFamily | none | string | font family name (optional) |\n| style | none | object (style) | add additional styling for Text (optional) |\n\n## ButtonGroup\n\n![ButtonGroup](http://i.imgur.com/uBJbULr.png)\n\nUsing strings\n\n```js\nconstructor () {\n super()\n this.state = {\n selectedIndex: 2\n }\n this.updateIndex = this.updateIndex.bind(this)\n}\nupdateIndex (selectedIndex) {\n this.setState({selectedIndex})\n}\n\nrender () {\n const buttons = [\'Hello\', \'World\', \'Buttons\']\n const { selectedIndex } = this.state\n return (\n \n )\n}\n\n```\n\nUsing components\n\n```js\nconstructor () {\n super()\n this.state = {\n selectedIndex: 2\n }\n this.updateIndex = this.updateIndex.bind(this)\n}\nupdateIndex (selectedIndex) {\n this.setState({selectedIndex})\n}\n\nconst component1 = () => Hello\nconst component2 = () => World\nconst component3 = () => ButtonGroup\n\nrender () {\n const buttons = [{ element: component1 }, { element: component2 }, { element: component3 }]\n const { selectedIndex } = this.state\n return (\n \n )\n}\n\n```\n\n#### ButtonGroup props\n\n##### This component inherits [all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements](https://facebook.github.io/react-native/docs/touchablehighlight.html), along with the following:\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| selectedIndex | none | number | current selected index of array of buttons (required) |\n| onPress | none | function | method to update Button Group Index (required) |\n| buttons | none | array | array of buttons for component (required), if returning a component, must be an object with { element: componentName } |\n| component | TouchableHighlight | React Native Component | Choose other button component such as TouchableOpacity (optional) |\n| containerStyle | inherited styling | object (style) | specify styling for main button container (optional) |\n| selectedBackgroundColor | white | string | specify color for selected state of button (optional) |\n| textStyle | inherited styling | object (style) | specify specific styling for text (optional) |\n| selectedTextStyle | inherited styling | object (style) | specify specific styling for text in the selected state (optional)|\n| underlayColor | white | string | specify underlayColor for TouchableHighlight (optional) |\n| borderStyle | inherited styling | object (style) | update the styling of the interior border of the list of buttons (optional) |\n\n## Checkboxes\n\n![Checkboxes](http://i.imgur.com/8BKC77S.png)\n\n```js\n\nimport { CheckBox } from \'react-native-elements\'\n\n\n\n\n\n\n\n\n\n```\n\n#### Checkbox props\n\n> This component uses FontAwesome icons out of the box. You can also specify one of the following types of icons by specifying an iconType prop: Simple Line Icon, Zocial, Octicons, MaterialIcons, MaterialCommunityIcons, Ionicons, Foundation, EvilIcons, or Entypo\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| iconType | fontawesome | string | icon family, can be one of the following: simple-line-icon, zocial, octicon, material, material-community, ionicon, foundation, evilicon, entypo (required only if specifying an icon that is not from font-awesome) |\n| component | TouchableOpacity | React Native Component | specify React Native component for main button (optional) |\n| checked | false | boolean | flag for checking the icon (required) |\n| iconRight | false | boolean | moves icon to right of text (optional) |\n| right | false | boolean | aligns checkbox to right (optional) |\n| center | false | boolean | aligns checkbox to center (optional) |\n| title | none | string | title of checkbox (required) |\n| containerStyle | none | object (style) | style of main container (optional) |\n| textStyle | none | object (style) | style of text (optional) |\n| onLongPress | none | function | onLongPress function for checkbox (optional) |\n| onPress | none | function | onPress function for checkbox (required) |\n| checkedIcon | check-square-o | string | default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/)) (optional) |\n| uncheckedIcon | square-o | string | default checked icon ([Font Awesome Icon](http://fontawesome.io/icons/)) (optional) |\n| checkedColor | green | string | default checked color (optional) |\n| uncheckedColor | #bfbfbf | string | default unchecked color (optional) |\n| checkedTitle | none | string | specify a custom checked message (optional) |\n| fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |\n\n## Forms\n\n![Forms](http://i.imgur.com/bnoD5rl.png)\n\n```js\nimport { FormLabel, FormInput } from \'react-native-elements\'\n\nName\n\n\n```\n\n#### FormInput props\n\n##### This component inherits [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html), along with the following:\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| containerStyle | none | object (style) | TextInput container styling (optional) |\n| inputStyle | none | object (style) | TextInput styling (optional) |\n| textInputRef | none | ref | get ref of TextInput |\n| containerRef | none | ref | get ref of TextInput container |\n| focus | none | function | call focus on the textinput(optional), eg `this.refs.someInputRef.focus()` |\n\n#### FormLabel props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| containerStyle | none | object (style) | additional label container style (optional) |\n| labelStyle | none | object (style) | additional label styling (optional) |\n| fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |\n\n#### Using FormInput refs\n\n```\n\n```\nYou should be able to access the refs like this\n\n```\nthis.refs.forminput.refs.email\n\n```\n\n## Card\n\n![Card Component](http://i.imgur.com/bY5uAC3.png)\n\n```js\n\nconst users = [\n {\n name: \'brynn\',\n avatar: \'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg\'\n },\n ... // more users here\n]\n\nimport { Text } from \'react-native\'\nimport { Card, ListItem, Button } from \'react-native-elements\'\n\n// implemented without image with header\n\n {\n users.map((u, i) => {}\n }\n\n\n// implemented without image without header, using ListItem component\n \n {\n users.map((u, i) => {\n return (\n \n\n )\n })\n }\n\n\n\n// implemented with Text and Button as children\n\n \n The idea with React Native Elements is more about component structure than actual design.\n \n \n\n\n```\n\n#### Card props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| flexDirection | column | string | flex direction (row or column) (optional) |\n| containerStyle | none | object (style) | outer container style (optional) |\n| wrapperStyle | none | object (style) | inner container style (optional) |\n| title | none | string | optional card title (optional) |\n| titleStyle | none | object (style) | additional title styling (if title provided) (optional) |\n| dividerStyle | none | object (style) | additional divider styling (if title provided) (optional) |\n| fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |\n| imageStyle | inherited styling | object(style) | specify image styling if image is provided |\n| image | none | image uri or require pathh | add an image as the heading with the image prop (optional) |\n\n\n## Pricing Component\n\n![Pricing Component](http://i.imgur.com/EMMDZwo.png)\n\n```js\nimport { PricingCard } from \'react-native-elements\'\n\n\n\n```\n\n#### PricingCard props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| title | none | string | title (required) |\n| price | none | string | price (required) |\n| color | none | string | color scheme for button & title (required) |\n| info | none | array of strings | pricing information (optional) |\n| button | none | object {title, icon, buttonStyle} | button information (required) |\n| onButtonPress | none | any | function to be run when button is pressed |\n| containerStyle | inherited styling | object (style) | outer component styling (optional) |\n| wrapperStyle | inherited styling | object (style) | inner wrapper component styling (optional) |\n| titleFont | System font (font weight 800) (iOS), Roboto-Black (android) | string | specify title font family |\n| pricingFont | System font (font weight 700) (iOS), Roboto-Bold (android) | string | specify pricing font family |\n| infoFont | System font bold (iOS), Roboto-Bold (android) | string | specify pricing information font family |\n| buttonFont | System font (iOS), Roboto (android) | string | specify button font family |\n\n## Grid Component\n\nThe Grid component provides two types of layouts, Row and Column. This provides you with an easy way to position your elements on screen without using flex directly.\n\n> This component was inspired from [react-native-easy-grid](https://github.com/GeekyAnts/react-native-easy-grid) by [GeekyAnts](https://github.com/GeekyAnts). Check out [NativeBase.io](http://nativebase.io/) if you haven\'t already!\n\n#### Row\n\n\n\n```js\nimport {Grid, Row} from \'react-native-elements\';\n\n\n \n \n\n```\n\n#### Column\n\n\n\n```js\nimport {Grid, Col} from \'react-native-elements\';\n\n\n \n \n\n```\n\nCreating nested layout\n\n\n \n \n \n \n \n \n \n
12
3
\n\n\n\n```js\nimport {Grid, Col, Row} from \'react-native-elements\';\n\n\n \n \n \n \n \n\n```\n\n#### Using the size prop\n\nA ratio can be passed to the Size Prop\n\n\n\n```js\n\n \n \n\n```\n\n\n\n```js\n\n \n \n\n```\n\n#### GridComponent Props\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| style | none | object (style) | Outer grid styling (optional) |\n| onPress | none | function | onPress method (optional) |\n| activeOpacity | 1 | number | Opacity on pressing (optional) |\n\n#### ColComponent Props\n\n| props | default | type | description |\n| ---- | ---- | ---- | ---- |\n| style | none | object (style) | Styling for the outer column (optional) |\n| size | none | number | Size for column (optional) |\n| onPress | none | function | onPress method (optional) |\n| activeOpacity | 1 | number | Opacity on pressing (optional) |\n\n#### RowComponent Props\n\n| props | default | type | description |\n| ---- | ---- | ---- | ---- |\n| style | none | object (style) | Styling for the outer column (optional) |\n| size | none | number | Size for row (optional) |\n| onPress | none | function | onPress method (optional) |\n| activeOpacity | 1 | number | Opacity on pressing (optional) |\n\n\n## Slider Component\n\n![Slider Component](https://github.com/react-native-community/react-native-elements/blob/v0.9.0/src/slider/slider_screenshot.png)\n\nA pure JavaScript component for react-native. It is a drop-in replacement for Slider.\n\n> This component is a forked implementation of [react-native-slider](https://github.com/jeanregisser/react-native-slider). Also note that due to the nature of the platform, and the existence of breaking changes between React Native releases, this implementation currently only supports v0.26.0+\n\n```js\nimport { Slider } from \'react-native-elements\'\n\n\n this.setState({value})} />\n Value: {this.state.value}\n\n\n```\n## Slider Props\n\nprop | type | optional | default | description\n--------------------- | -------- | -------- | ------------------------- | -----------\nvalue | number | Yes | 0 | Initial value of the slider\ndisabled | bool | Yes | false | If true the user won\'t be able to move the slider\nminimumValue | number | Yes | 0 | Initial minimum value of the slider\nmaximumValue | number | Yes | 1 | Initial maximum value of the slider\nstep | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue)\nminimumTrackTintColor | string | Yes | \'#3f3f3f\' | The color used for the track to the left of the button\nmaximumTrackTintColor | string | Yes | \'#b3b3b3\' | The color used for the track to the right of the button\nthumbTintColor | string | Yes | \'#343434\' | The color used for the thumb\nthumbTouchSize | object | Yes | `{width: 40, height: 40}` | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily.\nonValueChange | function | Yes | | Callback continuously called while the user is dragging the slider\nonSlidingStart | function | Yes | | Callback called when the user starts changing the value (e.g. when the slider is pressed)\nonSlidingComplete | function | Yes | | Callback called when the user finishes changing the value (e.g. when the slider is released)\nstyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the slider container\ntrackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track\nthumbStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the thumb\ndebugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green.\nanimateTransitions | bool | Yes | false | Set to true if you want to use the default \'spring\' animation\nanimationType | string | Yes | \'timing\' | Set to \'spring\' or \'timing\' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html).\nanimationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html).\n', +21 silly publish readmeFilename: 'Readme.MD', +21 silly publish gitHead: '271b05ac046bb610c6996670c5b6ebf8d6540a54', +21 silly publish _id: 'react-native-elements@0.9.4', +21 silly publish scripts: {}, +21 silly publish _shasum: '368a4a03751d0e3c3058e8ccd3a0d64fe1a2ca1b', +21 silly publish _from: '.' } +22 verbose getPublishConfig undefined +23 silly mapToRegistry name react-native-elements +24 silly mapToRegistry using default registry +25 silly mapToRegistry registry https://registry.npmjs.org/ +26 silly mapToRegistry data Result { +26 silly mapToRegistry raw: 'react-native-elements', +26 silly mapToRegistry scope: null, +26 silly mapToRegistry escapedName: 'react-native-elements', +26 silly mapToRegistry name: 'react-native-elements', +26 silly mapToRegistry rawSpec: '', +26 silly mapToRegistry spec: 'latest', +26 silly mapToRegistry type: 'tag' } +27 silly mapToRegistry uri https://registry.npmjs.org/react-native-elements +28 verbose publish registryBase https://registry.npmjs.org/ +29 silly publish uploading /Users/naderdabit1/.npm/react-native-elements/0.9.4/package.tgz +30 verbose request uri https://registry.npmjs.org/react-native-elements +31 verbose request sending authorization for write operation +32 info attempt registry request try #1 at 7:01:08 PM +33 verbose request using bearer token for auth +34 verbose request id 59006e1cf434f78d +35 http request PUT https://registry.npmjs.org/react-native-elements +36 http 403 https://registry.npmjs.org/react-native-elements +37 verbose headers { 'content-type': 'application/json', +37 verbose headers 'cache-control': 'max-age=300', +37 verbose headers 'content-length': '95', +37 verbose headers 'accept-ranges': 'bytes', +37 verbose headers date: 'Thu, 02 Feb 2017 01:01:09 GMT', +37 verbose headers via: '1.1 varnish', +37 verbose headers connection: 'keep-alive', +37 verbose headers 'x-served-by': 'cache-dfw1838-DFW', +37 verbose headers 'x-cache': 'MISS', +37 verbose headers 'x-cache-hits': '0', +37 verbose headers 'x-timer': 'S1485997268.595759,VS0,VE912', +37 verbose headers vary: 'Accept-Encoding' } +38 verbose request invalidating /Users/naderdabit1/.npm/registry.npmjs.org/react-native-elements on PUT +39 error publish Failed PUT 403 +40 verbose stack Error: "You cannot publish over the previously published version 0.9.4." : react-native-elements +40 verbose stack at makeError (/Users/naderdabit1/.nvm/versions/node/v6.8.0/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:302:12) +40 verbose stack at CachingRegistryClient. (/Users/naderdabit1/.nvm/versions/node/v6.8.0/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:290:14) +40 verbose stack at Request._callback (/Users/naderdabit1/.nvm/versions/node/v6.8.0/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:210:14) +40 verbose stack at Request.self.callback (/Users/naderdabit1/.nvm/versions/node/v6.8.0/lib/node_modules/npm/node_modules/request/request.js:187:22) +40 verbose stack at emitTwo (events.js:106:13) +40 verbose stack at Request.emit (events.js:191:7) +40 verbose stack at Request. (/Users/naderdabit1/.nvm/versions/node/v6.8.0/lib/node_modules/npm/node_modules/request/request.js:1044:10) +40 verbose stack at emitOne (events.js:96:13) +40 verbose stack at Request.emit (events.js:188:7) +40 verbose stack at IncomingMessage. (/Users/naderdabit1/.nvm/versions/node/v6.8.0/lib/node_modules/npm/node_modules/request/request.js:965:12) +41 verbose statusCode 403 +42 verbose pkgid react-native-elements +43 verbose cwd /Users/naderdabit1/Desktop/openSource/react-native-elements +44 error Darwin 16.0.0 +45 error argv "/Users/naderdabit1/.nvm/versions/node/v6.8.0/bin/node" "/Users/naderdabit1/.nvm/versions/node/v6.8.0/bin/npm" "publish" +46 error node v6.8.0 +47 error npm v3.10.8 +48 error code E403 +49 error "You cannot publish over the previously published version 0.9.4." : react-native-elements +50 error If you need help, you may report this error at: +50 error +51 verbose exit [ 1, true ] diff --git a/src/list/ListItem.js b/src/list/ListItem.js index b8b972dc89..e00cda299a 100644 --- a/src/list/ListItem.js +++ b/src/list/ListItem.js @@ -118,9 +118,9 @@ const ListItem = ({