├── Example
    ├── android.js
    ├── example.js
    └── images
    │   ├── about.png
    │   ├── airplane.png
    │   ├── apps.png
    │   ├── battery.png
    │   ├── blutooth.png
    │   ├── cellular.png
    │   ├── control.png
    │   ├── data.png
    │   ├── display.png
    │   ├── display2.png
    │   ├── dnd.png
    │   ├── general.png
    │   ├── hotspot.png
    │   ├── memory.png
    │   ├── more.png
    │   ├── notifications.png
    │   ├── sound.png
    │   ├── storage.png
    │   ├── user.png
    │   └── wifi.png
├── LICENSE
├── README.md
├── documentation
    ├── android.png
    ├── auth.gif
    ├── editable.png
    ├── realistic.png
    └── simple.png
├── img
    ├── icon-arrow-settings.png
    ├── icon-arrow-settings@2x.png
    └── icon-arrow-settings@3x.png
├── index.js
└── package.json


/Example/android.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | import React, {
  3 |   AppRegistry,
  4 |   Component,
  5 |   StyleSheet,
  6 |   Text,
  7 |   View,
  8 |   Image
  9 | } from 'react-native';
 10 | 
 11 | import SettingsList from 'react-native-settings-list';
 12 | 
 13 | 
 14 | class SettingsListExample extends Component {
 15 |   constructor(){
 16 |     super();
 17 |   }
 18 |   render() {
 19 |     return (
 20 |       <View style={{backgroundColor:'#f6f6f6',flex:1}}>
 21 |         <View style={{borderBottomWidth:1, backgroundColor:'#263238',borderColor:'#c8c7cc'}}>
 22 |           <Text style={{color:'white',marginTop:15,marginBottom:15, marginLeft:15,fontWeight:'bold',fontSize:20}}>Settings</Text>
 23 |         </View>
 24 |         <View style={{backgroundColor:'#f6f6f6',flex:1}}>
 25 |           <SettingsList borderColor='#d6d5d9' defaultItemSize={50}>
 26 |             <SettingsList.Item
 27 |               hasNavArrow={false}
 28 |               title='Wireless & networks'
 29 |               titleStyle={{color:'#009688', marginBottom:10, fontWeight:'500'}}
 30 |               itemWidth={50}
 31 |               borderHide={'Both'}
 32 |             />
 33 |             <SettingsList.Item
 34 |               icon={
 35 |                 <View style={styles.imageStyle}>
 36 |                   <Image style={{alignSelf:'center',height:22, width:22}} source={require('./images/data.png')}/>
 37 |                 </View>
 38 |               }
 39 |               hasNavArrow={false}
 40 |               itemWidth={70}
 41 |               titleStyle={{color:'black', fontSize: 16}}
 42 |               title='Data usage'
 43 |             />
 44 |             <SettingsList.Item
 45 |               icon={
 46 |                 <View style={styles.imageStyle}>
 47 |                   <Image style={{alignSelf:'center',height:4, width:18}} source={require('./images/more.png')}/>
 48 |                 </View>
 49 |               }
 50 |               title='More'
 51 |               itemWidth={70}
 52 |               titleStyle={{color:'black', fontSize: 16}}
 53 |               hasNavArrow={false}
 54 |             />
 55 |             <SettingsList.Header headerStyle={{marginTop:-5}}/>
 56 |             <SettingsList.Item
 57 |               hasNavArrow={false}
 58 |               title='Device'
 59 |               titleStyle={{color:'#009688', marginBottom:10, fontWeight:'bold'}}
 60 |               itemWidth={70}
 61 |               borderHide={'Both'}
 62 |             />
 63 |             <SettingsList.Item
 64 |               icon={
 65 |                 <View style={styles.imageStyle}>
 66 |                   <Image style={{alignSelf:'center',height:22, width:22}} source={require('./images/display2.png')}/>
 67 |                 </View>
 68 |               }
 69 |               title='Display'
 70 |               itemWidth={70}
 71 |               titleStyle={{color:'black', fontSize: 16}}
 72 |               hasNavArrow={false}
 73 |             />
 74 |             <SettingsList.Item
 75 |               icon={
 76 |                 <View style={styles.imageStyle}>
 77 |                   <Image style={{alignSelf:'center',height:20, width:18}} source={require('./images/sound.png')}/>
 78 |                 </View>
 79 |               }
 80 |               title='Sound & notification'
 81 |               itemWidth={70}
 82 |               titleStyle={{color:'black', fontSize: 16}}
 83 |               hasNavArrow={false}
 84 |             />
 85 |             <SettingsList.Item
 86 |               icon={
 87 |                 <View style={styles.imageStyle}>
 88 |                   <Image style={{alignSelf:'center',height:22, width:14}} source={require('./images/apps.png')}/>
 89 |                 </View>
 90 |               }
 91 |               title='Apps'
 92 |               itemWidth={70}
 93 |               titleStyle={{color:'black', fontSize: 16}}
 94 |               hasNavArrow={false}
 95 |             />
 96 |             <SettingsList.Item
 97 |               icon={
 98 |                 <View style={styles.imageStyle}>
 99 |                   <Image style={{alignSelf:'center',height:14, width:20}} source={require('./images/storage.png')}/>
100 |                 </View>
101 |               }
102 |               title='Storage & USB'
103 |               itemWidth={70}
104 |               titleStyle={{color:'black', fontSize: 16}}
105 |               hasNavArrow={false}
106 |             />
107 |             <SettingsList.Item
108 |               icon={
109 |                 <View style={styles.imageStyle}>
110 |                   <Image style={{alignSelf:'center',height:22, width:14}} source={require('./images/battery.png')}/>
111 |                 </View>
112 |               }
113 |               title='Battery'
114 |               itemWidth={70}
115 |               titleStyle={{color:'black', fontSize: 16}}
116 |               hasNavArrow={false}
117 |             />
118 |             <SettingsList.Item
119 |               icon={
120 |                 <View style={styles.imageStyle}>
121 |                   <Image style={{alignSelf:'center',height:18, width:20}} source={require('./images/memory.png')}/>
122 |                 </View>
123 |               }
124 |               title='Memory'
125 |               itemWidth={70}
126 |               titleStyle={{color:'black', fontSize: 16}}
127 |               hasNavArrow={false}
128 |             />
129 |             <SettingsList.Header headerStyle={{marginTop: -5}}/>
130 |           </SettingsList>
131 |         </View>
132 |       </View>
133 |     );
134 |   }
135 | }
136 | 
137 | const styles = StyleSheet.create({
138 |   imageStyle:{
139 |     marginLeft:15,
140 |     marginRight:20,
141 |     alignSelf:'center',
142 |     width:20,
143 |     height:24,
144 |     justifyContent:'center'
145 |   }
146 | });
147 | 
148 | AppRegistry.registerComponent('SettingsListExample', () => SettingsListExample);
149 | 


--------------------------------------------------------------------------------
/Example/example.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | import React from 'react';
  3 | 
  4 | import {
  5 |   AppRegistry,
  6 |   Component,
  7 |   StyleSheet,
  8 |   Text,
  9 |   View,
 10 |   Image,
 11 |   Alert
 12 | } from 'react-native';
 13 | import SettingsList from 'react-native-settings-list';
 14 | 
 15 | /*
 16 | // simple example
 17 | class SettingsListExample extends Component {
 18 |   constructor(){
 19 |     super();
 20 |     this.onValueChange = this.onValueChange.bind(this);
 21 |     this.state = {switchValue: false, stages: 20};
 22 |   }
 23 | 
 24 |   render() {
 25 |     return (
 26 |       <View style={{backgroundColor:'gray',flex:1}}>
 27 |         <View style={{flex:1, marginTop:50}}>
 28 |           <SettingsList>
 29 |           <SettingsList.Header headerText='First Grouping' headerStyle={{color:'white'}}/>
 30 |             <SettingsList.Item
 31 |               icon={
 32 |                 <View style={{height:30,marginLeft:10,alignSelf:'center'}}>
 33 |                   <Image style={{alignSelf:'center',height:30, width:30}} source={require('./images/about.png')}/>
 34 |                 </View>
 35 |               }
 36 |               itemWidth={50}
 37 |               title='Icon Example'
 38 |               onPress={() => Alert.alert('Icon Example Pressed')}
 39 |             />
 40 |             <SettingsList.Item
 41 |               hasNavArrow={false}
 42 |               switchState={this.state.switchValue}
 43 |               switchOnValueChange={this.onValueChange}
 44 |               hasSwitch={true}
 45 |               title='Switch Example'/>
 46 |             <SettingsList.Item
 47 |               title='Different Colors Example'
 48 |               backgroundColor='#D1D1D1'
 49 |               titleStyle={{color:'blue'}}
 50 |               arrowStyle={{color:'blue'}}
 51 |               onPress={() => Alert.alert('Different Colors Example Pressed')}/>
 52 |             <SettingsList.Header headerText='Different Grouping' headerStyle={{color:'white', marginTop:50}}/>
 53 |             <SettingsList.Item titleInfo='Some Information' hasNavArrow={false} title='Information Example'/>
 54 |             <SettingsList.Item title='Settings 1'/>
 55 |             <SettingsList.Item title='Settings 2'/>
 56 |             <SettingsList.Item
 57 |               id="stages"
 58 |               title='stages'
 59 |               isEditable={true}
 60 |               value={this.state.stages.toString()}
 61 |               onTextChange={(text) => this.setState({stages: text})} 
 62 |             />
 63 |           </SettingsList>
 64 |         </View>
 65 |       </View>
 66 |     );
 67 |   }
 68 | 
 69 |   onValueChange(value){
 70 |     this.setState({switchValue: value});
 71 |   }
 72 | }
 73 | */
 74 | 
 75 | /**
 76 |  * realistic iPhone example
 77 |  */
 78 |  class SettingsListExample extends Component {
 79 |    constructor(){
 80 |      super();
 81 |      this.onValueChange = this.onValueChange.bind(this);
 82 |      this.state = {switchValue: false, loggedIn: false};
 83 |    }
 84 |    render() {
 85 |      var bgColor = '#DCE3F4';
 86 |      return (
 87 |        <View style={{backgroundColor:'#EFEFF4',flex:1}}>
 88 |          <View style={{borderBottomWidth:1, backgroundColor:'#f7f7f8',borderColor:'#c8c7cc'}}>
 89 |            <Text style={{alignSelf:'center',marginTop:30,marginBottom:10,fontWeight:'bold',fontSize:16}}>Settings</Text>
 90 |          </View>
 91 |          <View style={{backgroundColor:'#EFEFF4',flex:1}}>
 92 |            <SettingsList borderColor='#c8c7cc' defaultItemSize={50}>
 93 |              <SettingsList.Header headerStyle={{marginTop:15}}/>
 94 |              {this.state.toggleAuthView ?
 95 |                <SettingsList.Item
 96 |                  icon={
 97 |                      <Image style={styles.imageStyle} source={require('./images/user.png')}/>
 98 |                  }
 99 |                  title='Logged In As...'
100 |                  hasNavArrow={false}
101 |                />
102 |                :
103 |                <SettingsList.Item
104 |                  icon={
105 |                      <Image style={styles.imageStyle} source={require('./images/user.png')}/>
106 |                  }
107 |                  isAuth={true}
108 |                  authPropsUser={{placeholder:'E-mail'}}
109 |                  authPropsPW={{placeholder:'Password'}}
110 |                  onPress={() => this.toggleAuthView()}
111 |                />
112 |              }
113 |              <SettingsList.Header headerStyle={{marginTop:15}}/>
114 |              <SettingsList.Item
115 |                icon={
116 |                    <Image style={styles.imageStyle} source={require('./images/airplane.png')}/>
117 |                }
118 |                hasSwitch={true}
119 |                switchState={this.state.switchValue}
120 |                switchOnValueChange={this.onValueChange}
121 |                hasNavArrow={false}
122 |                title='Airplane Mode'
123 |              />
124 |              <SettingsList.Item
125 |                icon={<Image style={styles.imageStyle} source={require('./images/wifi.png')}/>}
126 |                title='Wi-Fi'
127 |                titleInfo='Bill Wi The Science Fi'
128 |                titleInfoStyle={styles.titleInfoStyle}
129 |                onPress={() => Alert.alert('Route to Wifi Page')}
130 |              />
131 |              <SettingsList.Item
132 |                icon={<Image style={styles.imageStyle} source={require('./images/blutooth.png')}/>}
133 |                title='Blutooth'
134 |                titleInfo='Off'
135 |                titleInfoStyle={styles.titleInfoStyle}
136 |                onPress={() => Alert.alert('Route to Blutooth Page')}
137 |              />
138 |              <SettingsList.Item
139 |                icon={<Image style={styles.imageStyle} source={require('./images/cellular.png')}/>}
140 |                title='Cellular'
141 |                onPress={() => Alert.alert('Route To Cellular Page')}
142 |              />
143 |              <SettingsList.Item
144 |                icon={<Image style={styles.imageStyle} source={require('./images/hotspot.png')}/>}
145 |                title='Personal Hotspot'
146 |                titleInfo='Off'
147 |                titleInfoStyle={styles.titleInfoStyle}
148 |                onPress={() => Alert.alert('Route To Hotspot Page')}
149 |              />
150 |              <SettingsList.Header headerStyle={{marginTop:15}}/>
151 |              <SettingsList.Item
152 |                icon={<Image style={styles.imageStyle} source={require('./images/notifications.png')}/>}
153 |                title='Notifications'
154 |                onPress={() => Alert.alert('Route To Notifications Page')}
155 |              />
156 |              <SettingsList.Item
157 |                icon={<Image style={styles.imageStyle} source={require('./images/control.png')}/>}
158 |                title='Control Center'
159 |                onPress={() => Alert.alert('Route To Control Center Page')}
160 |              />
161 |              <SettingsList.Item
162 |                icon={<Image style={styles.imageStyle} source={require('./images/dnd.png')}/>}
163 |                title='Do Not Disturb'
164 |                onPress={() => Alert.alert('Route To Do Not Disturb Page')}
165 |              />
166 |              <SettingsList.Header headerStyle={{marginTop:15}}/>
167 |              <SettingsList.Item
168 |                icon={<Image style={styles.imageStyle} source={require('./images/general.png')}/>}
169 |                title='General'
170 |                onPress={() => Alert.alert('Route To General Page')}
171 |              />
172 |              <SettingsList.Item
173 |                icon={<Image style={styles.imageStyle} source={require('./images/display.png')}/>}
174 |                title='Display & Brightness'
175 |                onPress={() => Alert.alert('Route To Display Page')}
176 |              />
177 |            </SettingsList>
178 |          </View>
179 |        </View>
180 |      );
181 |    }
182 |    toggleAuthView() {
183 |      this.setState({toggleAuthView: !this.state.toggleAuthView});
184 |    }
185 |    onValueChange(value){
186 |      this.setState({switchValue: value});
187 |    }
188 |  }
189 | 
190 | const styles = StyleSheet.create({
191 |   imageStyle:{
192 |     marginLeft:15,
193 |     alignSelf:'center',
194 |     height:30,
195 |     width:30
196 |   },
197 |   titleInfoStyle:{
198 |     fontSize:16,
199 |     color: '#8e8e93'
200 |   }
201 | });
202 | 
203 | module.exports = SettingsListExample;
204 | 


--------------------------------------------------------------------------------
/Example/images/about.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/about.png


--------------------------------------------------------------------------------
/Example/images/airplane.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/airplane.png


--------------------------------------------------------------------------------
/Example/images/apps.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/apps.png


--------------------------------------------------------------------------------
/Example/images/battery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/battery.png


--------------------------------------------------------------------------------
/Example/images/blutooth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/blutooth.png


--------------------------------------------------------------------------------
/Example/images/cellular.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/cellular.png


--------------------------------------------------------------------------------
/Example/images/control.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/control.png


--------------------------------------------------------------------------------
/Example/images/data.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/data.png


--------------------------------------------------------------------------------
/Example/images/display.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/display.png


--------------------------------------------------------------------------------
/Example/images/display2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/display2.png


--------------------------------------------------------------------------------
/Example/images/dnd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/dnd.png


--------------------------------------------------------------------------------
/Example/images/general.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/general.png


--------------------------------------------------------------------------------
/Example/images/hotspot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/hotspot.png


--------------------------------------------------------------------------------
/Example/images/memory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/memory.png


--------------------------------------------------------------------------------
/Example/images/more.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/more.png


--------------------------------------------------------------------------------
/Example/images/notifications.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/notifications.png


--------------------------------------------------------------------------------
/Example/images/sound.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/sound.png


--------------------------------------------------------------------------------
/Example/images/storage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/storage.png


--------------------------------------------------------------------------------
/Example/images/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/user.png


--------------------------------------------------------------------------------
/Example/images/wifi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/Example/images/wifi.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-native-settings-list
  2 | ---
  3 | A clean and highly customizable React Native implementation of a list of settings for a settings page.<a name='top'/>
  4 | 
  5 | [![NPM Version](https://img.shields.io/npm/v/react-native-settings-list.svg?style=flat)](https://www.npmjs.com/package/react-native-settings-list)
  6 | [![NPM Downloads](https://img.shields.io/npm/dm/react-native-settings-list.svg?style=flat)](https://www.npmjs.com/package/react-native-settings-list)
  7 | 
  8 | ## Quick Access
  9 | * <a href='#install'>Installation</a>
 10 | * <a href='#usage'>Usage</a>
 11 | * <a href='#new'>New changes/additions</a>
 12 | * <a href='#contribute'>Contributing</a>
 13 | * <a href='#prop'>Prop values</a>
 14 | 	* <a href='#sl'>\<SettingsList></a>
 15 | 	* <a href='#slh'>\<SettingsList.Header></a>
 16 | 	* <a href='#sli'>\<SettingsList.Item></a>
 17 | * <a href='#simple'>Simple Example</a>
 18 | * <a href='#realistic'>Realistic Example</a>
 19 | 
 20 | 
 21 | ## <a name='install'>Installation</a>
 22 | ---
 23 | Install the module with:
 24 | 
 25 | 
 26 | ```
 27 | npm install react-native-settings-list --save
 28 | ```
 29 | ## <a name='usage'>Usage</a>
 30 | ---
 31 | In your code, simply require/import the module:
 32 | 
 33 | 
 34 | ```
 35 | import SettingsList from 'react-native-settings-list';
 36 | ```
 37 | 
 38 | ###### <a href='#top'>Top</a>
 39 | 
 40 | ## <a name='#new'>New changes/additions</a>
 41 | * Ability for an authorization-type component [example updated to show a practical use]
 42 |  * Allows for complete customization of the TextInput by passing into the two props authPropsUser and authPassPW (overwrites defaults
 43 |  * Uses existing onPress prop for callback
 44 |  * Preview:
 45 |  * <img src="./documentation/auth.gif" width="250">
 46 | * Ability for custom arrow image/component
 47 |  * Simply use the new arrowIcon prop to inject any type of object as the new arrow (with proper style formatting)
 48 | * Added defaultTitleStyle prop to \<SettingsList> to set the style of the tiles for all children removing the need for duplicate code
 49 | 
 50 | ###### <a href='#top'>Top</a>
 51 | 
 52 | ## <a name='#contribute'>Contributing</a>
 53 | Feel free to do pull requests if a certain feature you want is missing.  I accept all PR's that are enhancements to the project.
 54 | 
 55 | ###### <a href='#top'>Top</a>
 56 | 
 57 | ## <a name='prop'>Prop values</a>
 58 | ---
 59 | ### <a name='sl'>\<SettingsList></a>
 60 | The following props are used:
 61 | 
 62 | | Name              | Description                                    | Type                   |
 63 | |-------------------|------------------------------------------------|------------------------|
 64 | | backgroundColor   | Sets default background color for all children | React.PropTypes.string |
 65 | | borderColor       | Sets default border color for all children     | React.PropTypes.string |
 66 | | defaultItemSize   | Sets default width for all children            | React.PropTypes.number |
 67 | | underlayColor     | Sets default underlayColor for all children    | React.PropTypes.string |
 68 | | defaultTitleStyle | Sets default style for all children's titles   | React.PropTypes.string |
 69 | 
 70 | ### <a name='slh'>\<SettingsList.Header></a>
 71 | The following props are used:
 72 | 
 73 | | Name        | Description                             | Type                   |
 74 | |-------------|-----------------------------------------|------------------------|
 75 | | headerText  | Text for the header                     | React.PropTypes.string |
 76 | | headerStyle | Sets border color for the settings list | Text.propTypes.style   |
 77 | | headerRef   | Sets a `ref` on the header component    | React.PropTypes.func   |
 78 | 
 79 | ### <a name='sli'>\<SettingsList.Item></a>
 80 | The following props are used:
 81 | 
 82 | | Name                | Description                                                                                              | Type                   |
 83 | |---------------------|----------------------------------------------------------------------------------------------------------|------------------------|
 84 | | title               | Text for the item                                                                                        | React.PropTypes.string |
 85 | | titleStyle          | Text Style                                                                                               | Text.propTypes.style   |
 86 | | icon                | A component for the icon.  Doesn't need to be an image                                                   | React.PropTypes.node   |
 87 | | itemWidth           | Changes the individual item's width.  Overwrites **\<SettingsLists>** defaultItemSize                    | React.PropTypes.number |
 88 | | backgroundColor     | Changes the individual item's background color.  Overwrites default **\<SettingsList>** backgroundColor  | React.PropTypes.string |
 89 | | underlayColor       | Changes the individual item's underlayColor color.  Overwrites default **\<SettingsList>** underlayColor | React.PropTypes.string |
 90 | | onPress             | On press Callback for item [used for auth callback as well]                                              | React.PropTypes.func   |
 91 | | hasNavArrow         | Displays a navigation arrow                                                                              | React.PropTypes.bool   |
 92 | | arrowStyle          | Style for the navigation arrow                                                                           | Image.propTypes.style  |
 93 | | arrowIcon           | Inject custom arrow into the end of the item                                                             | React.PropTypes.node   |
 94 | | hasSwitch           | Enable a switch component                                                                                | React.PropTypes.bool   |
 95 | | switchProps         | RN switch props                                                                                          | React.PropTypes.object |
 96 | | switchOnValueChange | On switches value change callback                                                                        | React.PropTypes.func   |
 97 | | titleInfo           | Right side title information string                                                                      | React.PropTypes.string |
 98 | | titleInfoStyle      | Style for title information string                                                                       | Text.propTypes.style   |
 99 | | isAuth              | Sets item as an authorization item                                                                       | React.PropTypes.bool   |
100 | | authPropsUser       | Changes the props for the first TextInput component; overwrites default                                  | React.PropTypes.node   |
101 | | authPropsPW         | Changes the props for the second TextInput component; overwrites default                                 | React.PropTypes.node   |
102 | | itemRef             | Sets a `ref` on the TouchableHighlight that SettingsList.Item renders to                                 | React.PropTypes.func   |
103 | 
104 | ###### <a href='#top'>Top</a>
105 | 
106 | 
107 | ## <a name='simple'>Simple Example</a>
108 | ---
109 | Here is a simple example of the different things you can do with the module:
110 | 
111 | <img src="./documentation/simple.png" width="300" height="534">
112 | 
113 | The code behind it:
114 | 
115 | ```
116 | constructor(){
117 |   super();
118 |   this.onValueChange = this.onValueChange.bind(this);
119 |   this.state = {switchValue: false};
120 | }
121 | 
122 | render() {
123 |   return (
124 |     <View style={{backgroundColor:'gray',flex:1}}>
125 |       <View style={{flex:1, marginTop:50}}>
126 |         <SettingsList>
127 |         	<SettingsList.Header headerText='First Grouping' headerStyle={{color:'white'}}/>
128 |           <SettingsList.Item
129 |             icon={
130 |               <View style={{height:30,marginLeft:10,alignSelf:'center'}}>
131 |                 <Image style={{alignSelf:'center',height:40, width:40}} source={require('./about.png')}/>
132 |               </View>
133 |             }
134 |             itemWidth={50}
135 |             title='Icon Example'
136 |             onPress={() => Alert.alert('Icon Example Pressed')}
137 |           />
138 |           <SettingsList.Item
139 |             hasNavArrow={false}
140 |             switchState={this.state.switchValue}
141 |             switchOnValueChange={this.onValueChange}
142 |             hasSwitch={true}
143 |             title='Switch Example'/>
144 |           <SettingsList.Item
145 |             title='Different Colors Example'
146 |             backgroundColor='#D1D1D1'
147 |             titleStyle={{color:'blue'}}
148 |             arrowStyle={{tintColor:'blue'}}
149 |             onPress={() => Alert.alert('Different Colors Example Pressed')}/>
150 |           <SettingsList.Header headerText='Different Grouping' headerStyle={{color:'white', marginTop:50}}/>
151 |           <SettingsList.Item titleInfo='Some Information' hasNavArrow={false} title='Information Example'/>
152 |           <SettingsList.Item title='Settings 1'/>
153 |           <SettingsList.Item title='Settings 2'/>
154 |         </SettingsList>
155 |       </View>
156 |     </View>
157 |   );
158 | }
159 | 
160 | onValueChange(value){
161 |   this.setState({switchValue: value});
162 | }
163 | ```
164 | 
165 | ###### <a href='#top'>Top</a>
166 | 
167 | ## <a name='realistic'>A more realistic example</a>
168 | 
169 | ---
170 | Here is an example that looks very very close to the default iPhone settings page.
171 | 
172 | 
173 | <img src="./documentation/realistic.png" width="300" height="534">
174 | 
175 | The code behind this is:
176 | 
177 | 
178 | ```
179 | constructor(){
180 |   super();
181 |   this.onValueChange = this.onValueChange.bind(this);
182 |   this.state = {switchValue: false};
183 | }
184 | render() {
185 |   var bgColor = '#DCE3F4';
186 |   return (
187 |     <View style={{backgroundColor:'#EFEFF4',flex:1}}>
188 |       <View style={{borderBottomWidth:1, backgroundColor:'#f7f7f8',borderColor:'#c8c7cc'}}>
189 |         <Text style={{alignSelf:'center',marginTop:30,marginBottom:10,fontWeight:'bold',fontSize:16}}>Settings</Text>
190 |       </View>
191 |       <View style={{backgroundColor:'#EFEFF4',flex:1}}>
192 |         <SettingsList borderColor='#c8c7cc' defaultItemSize={50}>
193 |           <SettingsList.Header headerStyle={{marginTop:15}}/>
194 |           <SettingsList.Item
195 |             icon={
196 |                 <Image style={styles.imageStyle} source={require('./images/airplane.png')}/>
197 |             }
198 |             hasSwitch={true}
199 |             switchState={this.state.switchValue}
200 |             switchOnValueChange={this.onValueChange}
201 |             hasNavArrow={false}
202 |             title='Airplane Mode'
203 |           />
204 |           <SettingsList.Item
205 |             icon={<Image style={styles.imageStyle} source={require('./images/wifi.png')}/>}
206 |             title='Wi-Fi'
207 |             titleInfo='Bill Wi The Science Fi'
208 |             titleInfoStyle={styles.titleInfoStyle}
209 |             onPress={() => Alert.alert('Route to Wifi Page')}
210 |           />
211 |           <SettingsList.Item
212 |             icon={<Image style={styles.imageStyle} source={require('./images/blutooth.png')}/>}
213 |             title='Blutooth'
214 |             titleInfo='Off'
215 |             titleInfoStyle={styles.titleInfoStyle}
216 |             onPress={() => Alert.alert('Route to Blutooth Page')}
217 |           />
218 |           <SettingsList.Item
219 |             icon={<Image style={styles.imageStyle} source={require('./images/cellular.png')}/>}
220 |             title='Cellular'
221 |             onPress={() => Alert.alert('Route To Cellular Page')}
222 |           />
223 |           <SettingsList.Item
224 |             icon={<Image style={styles.imageStyle} source={require('./images/hotspot.png')}/>}
225 |             title='Personal Hotspot'
226 |             titleInfo='Off'
227 |             titleInfoStyle={styles.titleInfoStyle}
228 |             onPress={() => Alert.alert('Route To Hotspot Page')}
229 |           />
230 |           <SettingsList.Header headerStyle={{marginTop:15}}/>
231 |           <SettingsList.Item
232 |             icon={<Image style={styles.imageStyle} source={require('./images/notifications.png')}/>}
233 |             title='Notifications'
234 |             onPress={() => Alert.alert('Route To Notifications Page')}
235 |           />
236 |           <SettingsList.Item
237 |             icon={<Image style={styles.imageStyle} source={require('./images/control.png')}/>}
238 |             title='Control Center'
239 |             onPress={() => Alert.alert('Route To Control Center Page')}
240 |           />
241 |           <SettingsList.Item
242 |             icon={<Image style={styles.imageStyle} source={require('./images/dnd.png')}/>}
243 |             title='Do Not Disturb'
244 |             onPress={() => Alert.alert('Route To Do Not Disturb Page')}
245 |           />
246 |           <SettingsList.Header headerStyle={{marginTop:15}}/>
247 |           <SettingsList.Item
248 |             icon={<Image style={styles.imageStyle} source={require('./images/general.png')}/>}
249 |             title='General'
250 |             onPress={() => Alert.alert('Route To General Page')}
251 |           />
252 |           <SettingsList.Item
253 |             icon={<Image style={styles.imageStyle} source={require('./images/display.png')}/>}
254 |             title='Display & Brightness'
255 |             onPress={() => Alert.alert('Route To Display Page')}
256 |           />
257 |         </SettingsList>
258 |       </View>
259 |     </View>
260 |   );
261 | }
262 | onValueChange(value){
263 |   this.setState({switchValue: value});
264 | }
265 | ```
266 | Here is an example of the android page:
267 | 
268 | <img src="./documentation/android.png" width="300" height="534">
269 | 
270 | The code can be found <a href="./Example/android.js">here</a>
271 | ###### <a href='#top'>Top</a>
272 | 


--------------------------------------------------------------------------------
/documentation/android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/documentation/android.png


--------------------------------------------------------------------------------
/documentation/auth.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/documentation/auth.gif


--------------------------------------------------------------------------------
/documentation/editable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/documentation/editable.png


--------------------------------------------------------------------------------
/documentation/realistic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/documentation/realistic.png


--------------------------------------------------------------------------------
/documentation/simple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/documentation/simple.png


--------------------------------------------------------------------------------
/img/icon-arrow-settings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/img/icon-arrow-settings.png


--------------------------------------------------------------------------------
/img/icon-arrow-settings@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/img/icon-arrow-settings@2x.png


--------------------------------------------------------------------------------
/img/icon-arrow-settings@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evetstech/react-native-settings-list/8592e47cc31ac0c1eb33be54a24032a631786116/img/icon-arrow-settings@3x.png


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | import React from 'react';
  4 | import PropTypes from 'prop-types';
  5 | import createReactClass from 'create-react-class';
  6 | 
  7 | import {
  8 |   View,
  9 |   TouchableHighlight,
 10 |   Text,
 11 |   StyleSheet,
 12 |   ScrollView,
 13 |   TextInput,
 14 |   Switch,
 15 |   Image,
 16 |   ViewPropTypes
 17 | } from 'react-native';
 18 | 
 19 | const ARROW_ICON = require('./img/icon-arrow-settings.png');
 20 | 
 21 | class SettingsList extends React.Component {
 22 |   static propTypes = {
 23 |     backgroundColor: PropTypes.string,
 24 |     borderColor: PropTypes.string,
 25 |     defaultItemSize: PropTypes.number,
 26 |     underlayColor: PropTypes.string,
 27 |     defaultTitleStyle: Text.propTypes.style,
 28 |     defaultTitleInfoPosition: PropTypes.string,
 29 |     scrollViewProps: PropTypes.object,
 30 |   };
 31 | 
 32 |   static defaultProps ={
 33 |     backgroundColor: 'white',
 34 |     borderColor: 'black',
 35 |     defaultItemSize: 50,
 36 |     underlayColor: 'transparent',
 37 |     defaultTitleStyle: {fontSize: 16}
 38 |   };
 39 | 
 40 |   _getGroups(){
 41 |     var groupNumber = -1;
 42 |     let headers = [];
 43 |     let itemGroup = [];
 44 |     let result = [];
 45 |     React.Children.forEach(this.props.children, (child) => {
 46 |       // Allow for null, optional fields
 47 |       if(!child) return;
 48 | 
 49 |       if(child.type.displayName === 'Header'){
 50 |         if(groupNumber != -1){
 51 |           result[groupNumber] = {items: itemGroup, header: headers[groupNumber] };
 52 |           itemGroup = [];
 53 |         }
 54 |         groupNumber++;
 55 |         headers[groupNumber] = child.props;
 56 |       } else if(child.type.displayName === 'Item'){
 57 |         if(groupNumber == -1){
 58 |           groupNumber++;
 59 |         }
 60 |         itemGroup.push(child.props);
 61 |       } else {
 62 |         if(groupNumber == -1){
 63 |           groupNumber++;
 64 |         }
 65 |         itemGroup.push(child);
 66 |       }
 67 |     });
 68 |     result[groupNumber] = {items: itemGroup, header: headers[groupNumber] };
 69 |     return result;
 70 |   }
 71 | 
 72 |   render(){
 73 |     return (
 74 |       <ScrollView {...this.props.scrollViewProps} ref="_scrollView">
 75 |         {this._getGroups().map((group, index) => {
 76 |           return this._groupView(group, index);
 77 |         })}
 78 |       </ScrollView>
 79 |     )
 80 |   }
 81 | 
 82 |   _groupView(group, index){
 83 |     if(group.header){
 84 |       return (
 85 |         <View key={'group_' + index}>
 86 |           <Text style={[{margin:5},group.header.headerStyle]} numberOfLines={group.header.headerNumberOfLines} ellipsizeMode="tail" ref={group.header.headerRef}>{group.header.headerText}</Text>
 87 |           <View style={{borderTopWidth:1, borderBottomWidth:1, borderColor: this.props.borderColor}}>
 88 |             {group.items.map((item, index) => {
 89 |               return this._itemView(item,index, group.items.length);
 90 |             })}
 91 |           </View>
 92 |         </View>
 93 |       )
 94 |     } else {
 95 |       let items;
 96 |       if (group.items.length > 0) {
 97 |         items = (
 98 |           <View style={{borderTopWidth:1, borderBottomWidth:1, borderColor: this.props.borderColor}}>
 99 |             {group.items.map((item, index) => {
100 |               return this._itemView(item,index, group.items.length);
101 |             })}
102 |           </View>
103 |         );
104 |       }
105 | 
106 |       return (
107 |         <View key={'group_' + index}>
108 |           {items}
109 |         </View>
110 |       )
111 |     }
112 |   }
113 | 
114 |   _itemEditableBlock(item, index, position) {
115 | 
116 |     return ([
117 |         <Text
118 |             key={'itemTitle_' + index}
119 |             style={[
120 |               item.titleStyle ? item.titleStyle : this.props.defaultTitleStyle,
121 |               position === 'Bottom' ? null : styles.titleText
122 |             ]}>
123 |             {item.title}
124 |         </Text>,
125 |         item.isEditable ?
126 |         <TextInput
127 |               key={item.id}
128 |               style={item.editableTextStyle ? item.editableTextStyle : styles.editableText}
129 |               placeholder = {item.placeholder}
130 |               onChangeText={(text) => item.onTextChange(text)}
131 |               value={item.value} />
132 |         : null
133 |     ])
134 |   }
135 | 
136 |   _itemTitleBlock(item, index, position) {
137 |     return ([
138 |       <Text
139 |           key={'itemTitle_' + index}
140 |           style={[
141 |             item.titleStyle ? item.titleStyle : this.props.defaultTitleStyle,
142 |             position === 'Bottom' ? null : styles.titleText
143 |           ]}>
144 |           {item.title}
145 |       </Text>,
146 |       item.titleInfo ?
147 |         <Text
148 |             key={'itemTitleInfo_' + index}
149 |             style={[
150 |               item.rightSideStyle ? item.rightSideStyle
151 |               :
152 |                 position === 'Bottom' ? null : styles.rightSide,
153 |                 {color: '#B1B1B1'},
154 |               item.titleInfoStyle
155 |             ]}>
156 |             {item.titleInfo}
157 |         </Text>
158 |         : null
159 |     ])
160 |   }
161 | 
162 |   _itemView(item, index, max){
163 |     var border;
164 | 
165 |     if (item.type && item.type.displayName) {
166 |         return item;
167 |     }
168 | 
169 |     if(item.borderHide) {
170 |       switch(item.borderHide) {
171 |         case 'Top' : border = {borderBottomWidth:1, borderColor: this.props.borderColor}; break;
172 |         case 'Bottom' : border = {borderTopWidth:1, borderColor: this.props.borderColor}; break;
173 |       }
174 |     } else {
175 |       border = index === max-1 ? {borderWidth:0} : {borderBottomWidth:1, borderColor: this.props.borderColor};
176 |     }
177 | 
178 |     let titleInfoPosition = item.titleInfoPosition ? item.titleInfoPosition : this.props.defaultTitleInfoPosition;
179 | 
180 |     return (
181 |       <TouchableHighlight accessible={false} key={'item_' + index} underlayColor={item.underlayColor ? item.underlayColor : this.props.underlayColor} onPress={item.onPress} onLongPress={item.onLongPress} ref={item.itemRef}>
182 |         <View style={item.itemBoxStyle ? item.itemBoxStyle : [styles.itemBox, {backgroundColor: item.backgroundColor ? item.backgroundColor : this.props.backgroundColor}]}>
183 |           {item.icon}
184 |           {item.isAuth ?
185 |             <View style={item.titleBoxStyle ? item.titleBoxStyle : [styles.titleBox, border]}>
186 |               <View style={{paddingLeft:5,flexDirection:'column',flex:1}}>
187 |                 <View style={{borderBottomWidth:1,borderColor:this.props.borderColor}}>
188 |                   <TextInput
189 |                     ref="UserNameInputBlock"
190 |                     onSubmitEditing={() => this.refs.PasswordInputBlock.focus()}
191 |                     style={{flex:1,height:30, borderBottomWidth:1}}
192 |                     placeholder = "username"
193 |                     {...item.authPropsUser}
194 |                   />
195 |                 </View>
196 |                 <View>
197 |                   <TextInput
198 |                     ref="PasswordInputBlock"
199 |                     style={{flex:1,height:30}}
200 |                     placeholder = "password"
201 |                     secureTextEntry={true}
202 |                     returnKeyType={'go'}
203 |                     {...item.authPropsPW}
204 |                     onSubmitEditing={() => item.onPress()}
205 |                   />
206 |                 </View>
207 |               </View>
208 |             </View>
209 |           :
210 |           <View style={item.titleBoxStyle ? item.titleBoxStyle : [styles.titleBox, border, {minHeight:item.itemWidth ? item.itemWidth : this.props.defaultItemSize}]}>
211 |             {titleInfoPosition === 'Bottom' ?
212 |                 <View style={{flexDirection:'column',flex:1,justifyContent:'center'}}>
213 |                     {item.isEditable ? this._itemEditableBlock(item, inde, 'Bottom') : this._itemTitleBlock(item, index, 'Bottom')}
214 |                 </View>
215 |               : item.isEditable ? this._itemEditableBlock(item, index) : this._itemTitleBlock(item, index)}
216 | 
217 |             {item.rightSideContent ? item.rightSideContent : null}
218 |             {item.hasSwitch ?
219 |               <Switch
220 |                 {...item.switchProps}
221 |                 style={styles.rightSide}
222 |                 onValueChange={(value) => item.switchOnValueChange(value)}
223 |                 value={item.switchState}/>
224 |                 : null}
225 |             {this.itemArrowIcon(item)}
226 |           </View>
227 |         }
228 |         </View>
229 |       </TouchableHighlight>
230 |     )
231 |   }
232 | 
233 |   itemArrowIcon(item) {
234 |     if(item.arrowIcon) {
235 |         return item.arrowIcon;
236 |     }
237 | 
238 |     if(item.hasNavArrow){
239 |         return <Image style={[styles.rightSide, item.arrowStyle]} source={ARROW_ICON} />;
240 |     }
241 | 
242 |     return null;
243 |   }
244 | }
245 | module.exports = SettingsList;
246 | 
247 | const styles = StyleSheet.create({
248 |   itemBox: {
249 |     flex:1,
250 |     justifyContent:'center',
251 |     flexDirection:'row'
252 |   },
253 |   titleBox: {
254 |     flex:1,
255 |     marginLeft:15,
256 |     flexDirection:'row'
257 |   },
258 |   titleText: {
259 |     flex:1,
260 |     alignSelf:'center'
261 |   },
262 |   rightSide: {
263 |     marginRight:15,
264 |     alignSelf:'center'
265 |   },
266 |   editableText: {
267 |     flex: 1,
268 |     textAlign: 'right',
269 |     marginRight: 15
270 |   }
271 | });
272 | 
273 | /**
274 |  * Optional Header for groups
275 |  */
276 | SettingsList.Header = createReactClass({
277 |   propTypes: {
278 |     headerText: PropTypes.string,
279 |     headerStyle: Text.propTypes.style,
280 |     headerRef: PropTypes.func,
281 |     headerNumberOfLines: PropTypes.number,
282 |   },
283 |   getDefaultProps() {
284 |     return {
285 |       headerNumberOfLines: 1,
286 |     };
287 |   },
288 |   /**
289 |    * not directly rendered
290 |    */
291 |   render(){
292 |     return null;
293 |   }
294 | });
295 | 
296 | /**
297 |  * Individual Items in the Settings List
298 |  */
299 | SettingsList.Item = createReactClass({
300 |   propTypes: {
301 |     /**
302 |      * Title being displayed
303 |      */
304 |     title: PropTypes.string,
305 |     titleStyle: Text.propTypes.style,
306 |     /**
307 |      * Icon displayed on the left of the settings item
308 |      */
309 |     icon: PropTypes.node,
310 | 
311 |     /**
312 |      * Item Box Style
313 |      */
314 |     itemBoxStyle : ViewPropTypes.style,
315 |     /**
316 |      * Title Box Style
317 |      */
318 |     titleBoxStyle: ViewPropTypes.style,
319 |     /**
320 |      * Right Side Style
321 |      */
322 |     rightSideStyle: ViewPropTypes.style,
323 |     /**
324 |      * Editable Right Side Style
325 |      */
326 |     editableTextStyle: Text.propTypes.style,
327 | 
328 |     /**
329 |      * Individual item width.  Can be globally set in the parent.  Will become deprecated
330 |      */
331 |     itemWidth: PropTypes.number,
332 |     /**
333 |      * Allows for the item to become an auth item
334 |      */
335 |     isAuth: PropTypes.bool,
336 |     authPropsUser: PropTypes.object,
337 |     authPropsPW: PropTypes.object,
338 |     /**
339 |      * Individual background color. Can be globally set in the parent. Will become Deprecated
340 |      */
341 |     backgroundColor: PropTypes.string,
342 | 
343 |     /**
344 |      * Individual underlay click color.  Can be globally set in the parent.
345 |      */
346 |     underlayColor: PropTypes.string,
347 |     /**
348 |      * Item on press callback.
349 |      */
350 |     onPress: PropTypes.func,
351 |     /**
352 |      * Item on long press callback.
353 |      */
354 |     onLongPress: PropTypes.func,
355 |     /**
356 |      * Enable or disable the > arrow at the end of the setting item.
357 |      */
358 |     hasNavArrow: PropTypes.bool,
359 |     arrowIcon: PropTypes.node,
360 | 
361 |     arrowStyle: Image.propTypes.style,
362 |     /**
363 |      * Enable or disable a Switch component
364 |      */
365 |     hasSwitch: PropTypes.bool,
366 |     /**
367 |      * Switch state
368 |      */
369 |     switchState: PropTypes.bool,
370 |     /**
371 |      * Switch props
372 |      */
373 |     switchProps: PropTypes.object,
374 |     /**
375 |      * On value change callback
376 |      */
377 |     switchOnValueChange: PropTypes.func,
378 |     /**
379 |      * Right side information on the setting item
380 |      */
381 |     titleInfo: PropTypes.string,
382 |     titleInfoStyle: Text.propTypes.style,
383 |     /**
384 |      * If 'Bottom', info is placed beneath the title
385 |      */
386 |     titleInfoPosition: PropTypes.string,
387 |     /**
388 |      * Right side content
389 |      */
390 |     rightSideContent: PropTypes.node,
391 |     /* Gives opens to hide specific borders */
392 |     borderHide: PropTypes.oneOf(['Top', 'Bottom', 'Both']),
393 | 
394 |     itemRef: PropTypes.func,
395 |   },
396 |   getDefaultProps(){
397 |     return {
398 |       hasNavArrow: true
399 |     }
400 |   },
401 |   /**
402 |    * not directly rendered
403 |    */
404 |   render(){
405 |     return null;
406 |   },
407 | });
408 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-settings-list",
 3 |   "version": "1.8.0",
 4 |   "description": "A clean and highly customizable React Native implementation of a list of settings for a settings page.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/evetstech/react-native-settings-list.git"
12 |   },
13 |   "keywords": [
14 |     "react-native",
15 |     "react-component",
16 |     "ios",
17 |     "android",
18 |     "settings-list",
19 |     "settings"
20 |   ],
21 |   "author": "Steve Singrattana <steve@projectinf.com>",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/evetstech/react-native-settings-list/issues"
25 |   },
26 |   "homepage": "https://github.com/evetstech/react-native-settings-list#readme",
27 |   "devDependencies": {
28 |     "react-native": ">=0.18.0",
29 |     "react": ">=0.14.0"
30 |   },
31 |   "dependencies": {
32 |     "create-react-class": "^15.6.2",
33 |     "prop-types": "^15.5.10"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------