Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-settings-list with all npm packages installed. Try it out:

var reactNativeSettingsList = require("react-native-settings-list")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-settings-list v1.8.0

A clean and highly customizable React Native implementation of a list of settings for a settings page.

react-native-settings-list


A clean and highly customizable React Native implementation of a list of settings for a settings page.

NPM Version NPM Downloads

Quick Access

Installation


Install the module with:

npm install react-native-settings-list --save

Usage


In your code, simply require/import the module:

import SettingsList from 'react-native-settings-list';
Top

New changes/additions

  • Ability for an authorization-type component [example updated to show a practical use]
  • Allows for complete customization of the TextInput by passing into the two props authPropsUser and authPassPW (overwrites defaults
  • Uses existing onPress prop for callback
  • Preview:
  • Ability for custom arrow image/component
  • Simply use the new arrowIcon prop to inject any type of object as the new arrow (with proper style formatting)
  • Added defaultTitleStyle prop to <SettingsList> to set the style of the tiles for all children removing the need for duplicate code
Top

Contributing

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.

Top

Prop values


<SettingsList>

The following props are used:

NameDescriptionType
backgroundColorSets default background color for all childrenReact.PropTypes.string
borderColorSets default border color for all childrenReact.PropTypes.string
defaultItemSizeSets default width for all childrenReact.PropTypes.number
underlayColorSets default underlayColor for all childrenReact.PropTypes.string
defaultTitleStyleSets default style for all children's titlesReact.PropTypes.string

<SettingsList.Header>

The following props are used:

NameDescriptionType
headerTextText for the headerReact.PropTypes.string
headerStyleSets border color for the settings listText.propTypes.style
headerRefSets a ref on the header componentReact.PropTypes.func

<SettingsList.Item>

The following props are used:

NameDescriptionType
titleText for the itemReact.PropTypes.string
titleStyleText StyleText.propTypes.style
iconA component for the icon. Doesn't need to be an imageReact.PropTypes.node
itemWidthChanges the individual item's width. Overwrites <SettingsLists> defaultItemSizeReact.PropTypes.number
backgroundColorChanges the individual item's background color. Overwrites default <SettingsList> backgroundColorReact.PropTypes.string
underlayColorChanges the individual item's underlayColor color. Overwrites default <SettingsList> underlayColorReact.PropTypes.string
onPressOn press Callback for item [used for auth callback as well]React.PropTypes.func
hasNavArrowDisplays a navigation arrowReact.PropTypes.bool
arrowStyleStyle for the navigation arrowImage.propTypes.style
arrowIconInject custom arrow into the end of the itemReact.PropTypes.node
hasSwitchEnable a switch componentReact.PropTypes.bool
switchPropsRN switch propsReact.PropTypes.object
switchOnValueChangeOn switches value change callbackReact.PropTypes.func
titleInfoRight side title information stringReact.PropTypes.string
titleInfoStyleStyle for title information stringText.propTypes.style
isAuthSets item as an authorization itemReact.PropTypes.bool
authPropsUserChanges the props for the first TextInput component; overwrites defaultReact.PropTypes.node
authPropsPWChanges the props for the second TextInput component; overwrites defaultReact.PropTypes.node
itemRefSets a ref on the TouchableHighlight that SettingsList.Item renders toReact.PropTypes.func
Top

Simple Example


Here is a simple example of the different things you can do with the module:

The code behind it:

constructor(){
  super();
  this.onValueChange = this.onValueChange.bind(this);
  this.state = {switchValue: false};
}

render() {
  return (
    <View style={{backgroundColor:'gray',flex:1}}>
      <View style={{flex:1, marginTop:50}}>
        <SettingsList>
            <SettingsList.Header headerText='First Grouping' headerStyle={{color:'white'}}/>
          <SettingsList.Item
            icon={
              <View style={{height:30,marginLeft:10,alignSelf:'center'}}>
                <Image style={{alignSelf:'center',height:40, width:40}} source={require('./about.png')}/>
              </View>
            }
            itemWidth={50}
            title='Icon Example'
            onPress={() => Alert.alert('Icon Example Pressed')}
          />
          <SettingsList.Item
            hasNavArrow={false}
            switchState={this.state.switchValue}
            switchOnValueChange={this.onValueChange}
            hasSwitch={true}
            title='Switch Example'/>
          <SettingsList.Item
            title='Different Colors Example'
            backgroundColor='#D1D1D1'
            titleStyle={{color:'blue'}}
            arrowStyle={{tintColor:'blue'}}
            onPress={() => Alert.alert('Different Colors Example Pressed')}/>
          <SettingsList.Header headerText='Different Grouping' headerStyle={{color:'white', marginTop:50}}/>
          <SettingsList.Item titleInfo='Some Information' hasNavArrow={false} title='Information Example'/>
          <SettingsList.Item title='Settings 1'/>
          <SettingsList.Item title='Settings 2'/>
        </SettingsList>
      </View>
    </View>
  );
}

onValueChange(value){
  this.setState({switchValue: value});
}
Top

A more realistic example


Here is an example that looks very very close to the default iPhone settings page.

The code behind this is:

constructor(){
  super();
  this.onValueChange = this.onValueChange.bind(this);
  this.state = {switchValue: false};
}
render() {
  var bgColor = '#DCE3F4';
  return (
    <View style={{backgroundColor:'#EFEFF4',flex:1}}>
      <View style={{borderBottomWidth:1, backgroundColor:'#f7f7f8',borderColor:'#c8c7cc'}}>
        <Text style={{alignSelf:'center',marginTop:30,marginBottom:10,fontWeight:'bold',fontSize:16}}>Settings</Text>
      </View>
      <View style={{backgroundColor:'#EFEFF4',flex:1}}>
        <SettingsList borderColor='#c8c7cc' defaultItemSize={50}>
          <SettingsList.Header headerStyle={{marginTop:15}}/>
          <SettingsList.Item
            icon={
                <Image style={styles.imageStyle} source={require('./images/airplane.png')}/>
            }
            hasSwitch={true}
            switchState={this.state.switchValue}
            switchOnValueChange={this.onValueChange}
            hasNavArrow={false}
            title='Airplane Mode'
          />
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/wifi.png')}/>}
            title='Wi-Fi'
            titleInfo='Bill Wi The Science Fi'
            titleInfoStyle={styles.titleInfoStyle}
            onPress={() => Alert.alert('Route to Wifi Page')}
          />
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/blutooth.png')}/>}
            title='Blutooth'
            titleInfo='Off'
            titleInfoStyle={styles.titleInfoStyle}
            onPress={() => Alert.alert('Route to Blutooth Page')}
          />
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/cellular.png')}/>}
            title='Cellular'
            onPress={() => Alert.alert('Route To Cellular Page')}
          />
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/hotspot.png')}/>}
            title='Personal Hotspot'
            titleInfo='Off'
            titleInfoStyle={styles.titleInfoStyle}
            onPress={() => Alert.alert('Route To Hotspot Page')}
          />
          <SettingsList.Header headerStyle={{marginTop:15}}/>
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/notifications.png')}/>}
            title='Notifications'
            onPress={() => Alert.alert('Route To Notifications Page')}
          />
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/control.png')}/>}
            title='Control Center'
            onPress={() => Alert.alert('Route To Control Center Page')}
          />
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/dnd.png')}/>}
            title='Do Not Disturb'
            onPress={() => Alert.alert('Route To Do Not Disturb Page')}
          />
          <SettingsList.Header headerStyle={{marginTop:15}}/>
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/general.png')}/>}
            title='General'
            onPress={() => Alert.alert('Route To General Page')}
          />
          <SettingsList.Item
            icon={<Image style={styles.imageStyle} source={require('./images/display.png')}/>}
            title='Display & Brightness'
            onPress={() => Alert.alert('Route To Display Page')}
          />
        </SettingsList>
      </View>
    </View>
  );
}
onValueChange(value){
  this.setState({switchValue: value});
}

Here is an example of the android page:

The code can be found here

Top
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free