{"_id":"@ark-us/react-native-settings-list","_rev":"2-a06cee9d398684bd5cd6bdbcb66d6527","name":"@ark-us/react-native-settings-list","dist-tags":{"latest":"1.8.3"},"versions":{"1.8.1":{"name":"@ark-us/react-native-settings-list","version":"1.8.1","description":"A clean and highly customizable React Native implementation of a list of settings for a settings page.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/loredanacirstea/react-native-settings-list.git"},"keywords":["react-native","react-component","ios","android","settings-list","settings"],"author":{"name":"Steve Singrattana","email":"steve@projectinf.com"},"license":"MIT","bugs":{"url":"https://github.com/evetstech/react-native-settings-list/issues"},"homepage":"https://github.com/evetstech/react-native-settings-list#readme","devDependencies":{"react-native":">=0.18.0","react":">=0.14.0"},"dependencies":{"create-react-class":"^15.6.2","prop-types":"^15.5.10"},"publishConfig":{"access":"public"},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016 \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@ark-us/react-native-settings-list@1.8.1","dist":{"shasum":"f90eb9e89463fe838d5460b4a013751100d2b4d8","integrity":"sha512-W0UWK234VJCUeFjBOcdibCCSfB4rimFsj+C40qWbyTTGAuLdeR3CHtO4gJLcVr+sNaH3rwawz58TsgJEj3raIw==","tarball":"https://registry.npmjs.org/@ark-us/react-native-settings-list/-/react-native-settings-list-1.8.1.tgz","fileCount":39,"unpackedSize":1715714,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA73tPoiovkonHoSqUT5O2RGg82CHxwuew2kShnkw/vdAiBGGzAfm9VUyK96Q0iB/fnRyw1lirOmIBVtKp452BvcQg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOrMHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozUQ/9G6HhPM2Y1Eog3SvUsw8TfcGw63rN7pAd0t0oARoH1X/55YxQ\r\nNKCR6ZG6CQNvoTdm8Z3YgzCVRzswkDw8LQGx3nV2vBVXB27jS4TbSnm4Eg5N\r\nl6tiLaE2LNb+CU74GieR+B0WQXpk4jFQqs+GM0QBeoDajWxI9qQa8ayHagTB\r\nXkjzdKoJGfAOW1lIbNKc3PqSO0yh6sZgc31MBkXfBd0t2NgUhRSEKVGp+UVR\r\nLHH8DrQrc9FzzXma+jGWEARUaPZrz4Lq4eWLDuw5J2UafA/vVzafIjR0OgbO\r\nZtBaRhOZyuSBAlf8QlcivSaz1t0odyqGpGbELNP+tLxWyq2nvDqf38U5B9b5\r\nEUG3WWiMmgazNAep2defulAxdbABj7oc2Ub52qhsUKDN/keYFnPgo9lgTTG8\r\n+/5/1gjrKKEvVGl28bOPNpR+dRDmy0rNN+Qhzsk3lUXxmi9tJzU3YRNV20Rs\r\nLmF6v2HHC0fdQO3iyn/4ni+foO/8GRuag8ZAvqPlEsNvZva4nKYi0fWqB2fv\r\nwZaWjiSpbz5Zcv/HmOrtB4e/yVEPvgLRjmKZJSKD5CvKUzkRGVHjnuJ1ROq/\r\nPkkRRB/LlW2QaG62PrxHNASq/pYHV8lsubq4Mn5FmwIjjNa4pIwkCt8p43zg\r\nxVZt3j9oUQd8MIKrKQnnqqQsfgJj5mJFO/w=\r\n=Wcqj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"loredanacirstea","email":"loredana.cirstea@gmail.com"},"directories":{},"maintainers":[{"name":"loredanacirstea","email":"loredana.cirstea@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-settings-list_1.8.1_1664791302989_0.4686249136819649"},"_hasShrinkwrap":false},"1.8.2":{"name":"@ark-us/react-native-settings-list","version":"1.8.2","description":"A clean and highly customizable React Native implementation of a list of settings for a settings page.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/loredanacirstea/react-native-settings-list.git"},"keywords":["react-native","react-component","ios","android","settings-list","settings"],"author":{"name":"Steve Singrattana","email":"steve@projectinf.com"},"license":"MIT","bugs":{"url":"https://github.com/evetstech/react-native-settings-list/issues"},"homepage":"https://github.com/evetstech/react-native-settings-list#readme","devDependencies":{"react-native":">=0.18.0","react":">=0.14.0"},"dependencies":{"create-react-class":"^15.6.2","prop-types":"^15.5.10"},"publishConfig":{"access":"public"},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016 \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@ark-us/react-native-settings-list@1.8.2","dist":{"shasum":"ee1cb48a59cd03822ce050ce285223b077aa8a32","integrity":"sha512-ckDAcaw2ODOkayigNta+QWJGuWr0iiX1Ps3aoTSIgB2FswZa5mIdqO31FBdLNHv8DpFpYW96wVfSSBdkSu9Zdg==","tarball":"https://registry.npmjs.org/@ark-us/react-native-settings-list/-/react-native-settings-list-1.8.2.tgz","fileCount":39,"unpackedSize":1715745,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGV0JTShzsBMoHE/v0AItHHe0HFyITZ2LqdRNRD6ctxmAiEA01qhIXrTbtl8Ez+O6ZMbYyRjz3m9yVIW0rv7/yQChtM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOvcEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZ8w//QvUl1itIjdv6DrS7TdDXzRMHK3x6q20wYdCYFot2Hd2omPRm\r\nIlRpvMlfmjs4qqx/8Ry9O5y5gdqzgqHffdLBig28K3T+M0tZvAn7i3Ub8IG0\r\nShnFKF6g5juuvKgFnc23OGw3ucHdIYZ2EnSorI+RbwrzVJ6WTODENAdv/4Pi\r\nHHoZlvKs55K/g6TeebZ8KoRRfY51dDBUwnyMAiyY3pNbtEzlXtgWE7TZLfnZ\r\nsuSX8NLZxAlLXipDguzeUm7pnYIf+5ucg3A/xezNH2ack0Uf1LK2UpXii6P4\r\nAoOG0LLej/hw+f0hZteQUp5OH9s7+7WWrA2w0f6uraZfb8ixjXPTY0ur1YoM\r\nMKK4lzkAAWFiFmIoszcJmXtVQS416S+SAgjYIA7wdxQSsZoxDcT4aocZgQh0\r\nQ7PJFcCc1LFNDeBj9thNQ+C2tSzobv0JKQ6wWzu330UuTk3svu9ChymM0+Z3\r\nfShk3KA+3GELIaMFnPyBmoOhiPpTygDdAmqBgIAzTjccXvkRGOdEOr/o6pKh\r\nC7KypJz/Oh1yfO4pPL0uZgyWEdVJNnoZaVNCHu3mS1/mxxo4Cxq5o3EkBsNs\r\ndrwDTZXFYGbqRwYVbBIEjxsJGPgBytYoUsmOyTLzmKr3te0qp55GZVaxAXq5\r\n6d95eZ857PCf3D14cJLQF5LLCqMtFbylPC0=\r\n=hypq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"loredanacirstea","email":"loredana.cirstea@gmail.com"},"directories":{},"maintainers":[{"name":"loredanacirstea","email":"loredana.cirstea@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-settings-list_1.8.2_1664808708469_0.6260929237463855"},"_hasShrinkwrap":false},"1.8.3":{"name":"@ark-us/react-native-settings-list","version":"1.8.3","description":"A clean and highly customizable React Native implementation of a list of settings for a settings page.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/loredanacirstea/react-native-settings-list.git"},"keywords":["react-native","react-component","ios","android","settings-list","settings"],"author":{"name":"Steve Singrattana","email":"steve@projectinf.com"},"license":"MIT","bugs":{"url":"https://github.com/evetstech/react-native-settings-list/issues"},"homepage":"https://github.com/evetstech/react-native-settings-list#readme","devDependencies":{"react":">=0.14.0","react-native":">=0.18.0"},"dependencies":{"create-react-class":"^15.6.2","prop-types":"^15.5.10"},"publishConfig":{"access":"public"},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016 \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@ark-us/react-native-settings-list@1.8.3","dist":{"shasum":"3f64a0f04bf1b9500f0d562dc40e8707bfc5aa9f","integrity":"sha512-uESGlTKVoglIY0H3DBEES74FHha2DnlSiFe5pyOYx8fU608SUWeMYXsegSQ9QwjEYD+HGyhQmSwXZVnN28LoWQ==","tarball":"https://registry.npmjs.org/@ark-us/react-native-settings-list/-/react-native-settings-list-1.8.3.tgz","fileCount":39,"unpackedSize":1715911,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1AhUevpBC58rtFBmGPUVPS1uHkSp9D5gxrogM/E4SigIgWBZLgCMOzTQ3lSxKoRhR+LAZqaHJGwVq9wGLln67fY8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT+oFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK1w//XemDbfFIQ1mFtyGybsgIhnQ6gkRdj6DHxY+0/vzpiY7tCcbT\r\nuFPiaXHR1R7CaWKXBNhNWvfGR0awGSFDJ8lAZ9d69R6vL9NOiHn2y5Uq1JLG\r\naDt8t+goVxUQG728pdZhexstMjZSE7xJjjtM3jbApvB/vcSqEM+npiPuWpj3\r\nJdS22BghHhK6c6jzX7jDiXZozY2meZyRrYsnx+NaYtHoSU+aNp8R2WSBnpGK\r\nJ01sTfWbzJqBltpu3tLjuDsau6XE5RDc32cxcJeHGDJUNJk6OGNTvvfgZx69\r\n72HNajFS2GmjVjSvQfbObFYKA9ObaV+SaPw4xNcAPttqRVTV0/L0ZmN5xJ/X\r\n/xMw2sAiiaPg7PPjLWzqNoVmr2+dCOE+5iPavtOKcb/Qbpqo++EGJgX7eIsD\r\ncyBKPtaUNYRAufnsqu9s+84zpql1eUsPKsSNZlGPMg4+xRnHoy7eKKb6d1yp\r\nWhvQdJaGPXYXuf/yIMRwruTBr4oClgIgJVqIYceftWVy3rQCqn2NR4IGB7pG\r\n0+E6cT6Gzvq0Z+lDfIzQcDxffafQ6v9p2vTaARQ20C9RYoghGv5MRRapEpao\r\nAjpHK4iC1a4KA5TqHMGCBszXydC6ZWazPnVBnPkQlJi2EX6bIBCNL1JFlcPl\r\nWXkUaSG4gJIookQk7rK6YXlJQ8ppx5wgwUU=\r\n=Cl0B\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"loredanacirstea","email":"loredana.cirstea@gmail.com"},"directories":{},"maintainers":[{"name":"loredanacirstea","email":"loredana.cirstea@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-settings-list_1.8.3_1666181637383_0.5100070922108746"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-03T10:01:42.778Z","1.8.1":"2022-10-03T10:01:43.174Z","modified":"2022-10-19T12:13:57.795Z","1.8.2":"2022-10-03T14:51:48.696Z","1.8.3":"2022-10-19T12:13:57.681Z"},"maintainers":[{"name":"loredanacirstea","email":"loredana.cirstea@gmail.com"}],"description":"A clean and highly customizable React Native implementation of a list of settings for a settings page.","homepage":"https://github.com/evetstech/react-native-settings-list#readme","keywords":["react-native","react-component","ios","android","settings-list","settings"],"repository":{"type":"git","url":"git+https://github.com/loredanacirstea/react-native-settings-list.git"},"author":{"name":"Steve Singrattana","email":"steve@projectinf.com"},"bugs":{"url":"https://github.com/evetstech/react-native-settings-list/issues"},"license":"MIT","readme":"# react-native-settings-list\n---\nA clean and highly customizable React Native implementation of a list of settings for a settings page.<a name='top'/>\n\n[![NPM Version](https://img.shields.io/npm/v/react-native-settings-list.svg?style=flat)](https://www.npmjs.com/package/react-native-settings-list)\n[![NPM Downloads](https://img.shields.io/npm/dm/react-native-settings-list.svg?style=flat)](https://www.npmjs.com/package/react-native-settings-list)\n\n## Quick Access\n* <a href='#install'>Installation</a>\n* <a href='#usage'>Usage</a>\n* <a href='#new'>New changes/additions</a>\n* <a href='#contribute'>Contributing</a>\n* <a href='#prop'>Prop values</a>\n\t* <a href='#sl'>\\<SettingsList></a>\n\t* <a href='#slh'>\\<SettingsList.Header></a>\n\t* <a href='#sli'>\\<SettingsList.Item></a>\n* <a href='#simple'>Simple Example</a>\n* <a href='#realistic'>Realistic Example</a>\n\n\n## <a name='install'>Installation</a>\n---\nInstall the module with:\n\n\n```\nnpm install react-native-settings-list --save\n```\n## <a name='usage'>Usage</a>\n---\nIn your code, simply require/import the module:\n\n\n```\nimport SettingsList from 'react-native-settings-list';\n```\n\n###### <a href='#top'>Top</a>\n\n## <a name='#new'>New changes/additions</a>\n* Ability for an authorization-type component [example updated to show a practical use]\n * Allows for complete customization of the TextInput by passing into the two props authPropsUser and authPassPW (overwrites defaults\n * Uses existing onPress prop for callback\n * Preview:\n * <img src=\"./documentation/auth.gif\" width=\"250\">\n* Ability for custom arrow image/component\n * Simply use the new arrowIcon prop to inject any type of object as the new arrow (with proper style formatting)\n* Added defaultTitleStyle prop to \\<SettingsList> to set the style of the tiles for all children removing the need for duplicate code\n\n###### <a href='#top'>Top</a>\n\n## <a name='#contribute'>Contributing</a>\nFeel free to do pull requests if a certain feature you want is missing.  I accept all PR's that are enhancements to the project.\n\n###### <a href='#top'>Top</a>\n\n## <a name='prop'>Prop values</a>\n---\n### <a name='sl'>\\<SettingsList></a>\nThe following props are used:\n\n| Name              | Description                                    | Type                   |\n|-------------------|------------------------------------------------|------------------------|\n| backgroundColor   | Sets default background color for all children | React.PropTypes.string |\n| borderColor       | Sets default border color for all children     | React.PropTypes.string |\n| defaultItemSize   | Sets default width for all children            | React.PropTypes.number |\n| underlayColor     | Sets default underlayColor for all children    | React.PropTypes.string |\n| defaultTitleStyle | Sets default style for all children's titles   | React.PropTypes.string |\n\n### <a name='slh'>\\<SettingsList.Header></a>\nThe following props are used:\n\n| Name        | Description                             | Type                   |\n|-------------|-----------------------------------------|------------------------|\n| headerText  | Text for the header                     | React.PropTypes.string |\n| headerStyle | Sets border color for the settings list | Text.propTypes.style   |\n| headerRef   | Sets a `ref` on the header component    | React.PropTypes.func   |\n\n### <a name='sli'>\\<SettingsList.Item></a>\nThe following props are used:\n\n| Name                | Description                                                                                              | Type                   |\n|---------------------|----------------------------------------------------------------------------------------------------------|------------------------|\n| title               | Text for the item                                                                                        | React.PropTypes.string |\n| titleStyle          | Text Style                                                                                               | Text.propTypes.style   |\n| icon                | A component for the icon.  Doesn't need to be an image                                                   | React.PropTypes.node   |\n| itemWidth           | Changes the individual item's width.  Overwrites **\\<SettingsLists>** defaultItemSize                    | React.PropTypes.number |\n| backgroundColor     | Changes the individual item's background color.  Overwrites default **\\<SettingsList>** backgroundColor  | React.PropTypes.string |\n| underlayColor       | Changes the individual item's underlayColor color.  Overwrites default **\\<SettingsList>** underlayColor | React.PropTypes.string |\n| onPress             | On press Callback for item [used for auth callback as well]                                              | React.PropTypes.func   |\n| hasNavArrow         | Displays a navigation arrow                                                                              | React.PropTypes.bool   |\n| arrowStyle          | Style for the navigation arrow                                                                           | Image.propTypes.style  |\n| arrowIcon           | Inject custom arrow into the end of the item                                                             | React.PropTypes.node   |\n| hasSwitch           | Enable a switch component                                                                                | React.PropTypes.bool   |\n| switchProps         | RN switch props                                                                                          | React.PropTypes.object |\n| switchOnValueChange | On switches value change callback                                                                        | React.PropTypes.func   |\n| titleInfo           | Right side title information string                                                                      | React.PropTypes.string |\n| titleInfoStyle      | Style for title information string                                                                       | Text.propTypes.style   |\n| isAuth              | Sets item as an authorization item                                                                       | React.PropTypes.bool   |\n| authPropsUser       | Changes the props for the first TextInput component; overwrites default                                  | React.PropTypes.node   |\n| authPropsPW         | Changes the props for the second TextInput component; overwrites default                                 | React.PropTypes.node   |\n| itemRef             | Sets a `ref` on the TouchableHighlight that SettingsList.Item renders to                                 | React.PropTypes.func   |\n\n###### <a href='#top'>Top</a>\n\n\n## <a name='simple'>Simple Example</a>\n---\nHere is a simple example of the different things you can do with the module:\n\n<img src=\"./documentation/simple.png\" width=\"300\" height=\"534\">\n\nThe code behind it:\n\n```\nconstructor(){\n  super();\n  this.onValueChange = this.onValueChange.bind(this);\n  this.state = {switchValue: false};\n}\n\nrender() {\n  return (\n    <View style={{backgroundColor:'gray',flex:1}}>\n      <View style={{flex:1, marginTop:50}}>\n        <SettingsList>\n        \t<SettingsList.Header headerText='First Grouping' headerStyle={{color:'white'}}/>\n          <SettingsList.Item\n            icon={\n              <View style={{height:30,marginLeft:10,alignSelf:'center'}}>\n                <Image style={{alignSelf:'center',height:40, width:40}} source={require('./about.png')}/>\n              </View>\n            }\n            itemWidth={50}\n            title='Icon Example'\n            onPress={() => Alert.alert('Icon Example Pressed')}\n          />\n          <SettingsList.Item\n            hasNavArrow={false}\n            switchState={this.state.switchValue}\n            switchOnValueChange={this.onValueChange}\n            hasSwitch={true}\n            title='Switch Example'/>\n          <SettingsList.Item\n            title='Different Colors Example'\n            backgroundColor='#D1D1D1'\n            titleStyle={{color:'blue'}}\n            arrowStyle={{tintColor:'blue'}}\n            onPress={() => Alert.alert('Different Colors Example Pressed')}/>\n          <SettingsList.Header headerText='Different Grouping' headerStyle={{color:'white', marginTop:50}}/>\n          <SettingsList.Item titleInfo='Some Information' hasNavArrow={false} title='Information Example'/>\n          <SettingsList.Item title='Settings 1'/>\n          <SettingsList.Item title='Settings 2'/>\n        </SettingsList>\n      </View>\n    </View>\n  );\n}\n\nonValueChange(value){\n  this.setState({switchValue: value});\n}\n```\n\n###### <a href='#top'>Top</a>\n\n## <a name='realistic'>A more realistic example</a>\n\n---\nHere is an example that looks very very close to the default iPhone settings page.\n\n\n<img src=\"./documentation/realistic.png\" width=\"300\" height=\"534\">\n\nThe code behind this is:\n\n\n```\nconstructor(){\n  super();\n  this.onValueChange = this.onValueChange.bind(this);\n  this.state = {switchValue: false};\n}\nrender() {\n  var bgColor = '#DCE3F4';\n  return (\n    <View style={{backgroundColor:'#EFEFF4',flex:1}}>\n      <View style={{borderBottomWidth:1, backgroundColor:'#f7f7f8',borderColor:'#c8c7cc'}}>\n        <Text style={{alignSelf:'center',marginTop:30,marginBottom:10,fontWeight:'bold',fontSize:16}}>Settings</Text>\n      </View>\n      <View style={{backgroundColor:'#EFEFF4',flex:1}}>\n        <SettingsList borderColor='#c8c7cc' defaultItemSize={50}>\n          <SettingsList.Header headerStyle={{marginTop:15}}/>\n          <SettingsList.Item\n            icon={\n                <Image style={styles.imageStyle} source={require('./images/airplane.png')}/>\n            }\n            hasSwitch={true}\n            switchState={this.state.switchValue}\n            switchOnValueChange={this.onValueChange}\n            hasNavArrow={false}\n            title='Airplane Mode'\n          />\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/wifi.png')}/>}\n            title='Wi-Fi'\n            titleInfo='Bill Wi The Science Fi'\n            titleInfoStyle={styles.titleInfoStyle}\n            onPress={() => Alert.alert('Route to Wifi Page')}\n          />\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/blutooth.png')}/>}\n            title='Blutooth'\n            titleInfo='Off'\n            titleInfoStyle={styles.titleInfoStyle}\n            onPress={() => Alert.alert('Route to Blutooth Page')}\n          />\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/cellular.png')}/>}\n            title='Cellular'\n            onPress={() => Alert.alert('Route To Cellular Page')}\n          />\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/hotspot.png')}/>}\n            title='Personal Hotspot'\n            titleInfo='Off'\n            titleInfoStyle={styles.titleInfoStyle}\n            onPress={() => Alert.alert('Route To Hotspot Page')}\n          />\n          <SettingsList.Header headerStyle={{marginTop:15}}/>\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/notifications.png')}/>}\n            title='Notifications'\n            onPress={() => Alert.alert('Route To Notifications Page')}\n          />\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/control.png')}/>}\n            title='Control Center'\n            onPress={() => Alert.alert('Route To Control Center Page')}\n          />\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/dnd.png')}/>}\n            title='Do Not Disturb'\n            onPress={() => Alert.alert('Route To Do Not Disturb Page')}\n          />\n          <SettingsList.Header headerStyle={{marginTop:15}}/>\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/general.png')}/>}\n            title='General'\n            onPress={() => Alert.alert('Route To General Page')}\n          />\n          <SettingsList.Item\n            icon={<Image style={styles.imageStyle} source={require('./images/display.png')}/>}\n            title='Display & Brightness'\n            onPress={() => Alert.alert('Route To Display Page')}\n          />\n        </SettingsList>\n      </View>\n    </View>\n  );\n}\nonValueChange(value){\n  this.setState({switchValue: value});\n}\n```\nHere is an example of the android page:\n\n<img src=\"./documentation/android.png\" width=\"300\" height=\"534\">\n\nThe code can be found <a href=\"./Example/android.js\">here</a>\n###### <a href='#top'>Top</a>\n","readmeFilename":"README.md"}