Skip to content
This repository has been archived by the owner on Apr 17, 2023. It is now read-only.

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

License

Notifications You must be signed in to change notification settings

ajp8164/react-native-settings-list

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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


Install the module with:

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

In your code, simply require/import the module:

import SettingsList from 'react-native-settings-list';
  • 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

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.


The following props are used:

Name Description Type
backgroundColor Sets default background color for all children React.PropTypes.string
borderColor Sets default border color for all children React.PropTypes.string
borderHideGroup Disable the border around the list items React.PropTypes.func
defaultItemSize Sets default width for all children React.PropTypes.number
underlayColor Sets default underlayColor for all children React.PropTypes.string
defaultTitleStyle Sets default style for all children's titles React.PropTypes.string

The following props are used:

Name Description Type
visible Should this list render? React.PropTypes.bool
headerText Text for the header React.PropTypes.string
headerStyle Sets border color for the settings list Text.propTypes.style
headerRef Sets a ref on the header component React.PropTypes.func

The following props are used:

Name Description Type
visible Should this item render? React.PropTypes.bool
title Text for the item React.PropTypes.string, React.PropTypes.object
titleStyle Text Style Text.propTypes.style
icon A component for the icon. Doesn't need to be an image React.PropTypes.node
itemWidth Changes the individual item's width. Overwrites <SettingsLists> defaultItemSize React.PropTypes.number
backgroundColor Changes the individual item's background color. Overwrites default <SettingsList> backgroundColor React.PropTypes.string
underlayColor Changes the individual item's underlayColor color. Overwrites default <SettingsList> underlayColor React.PropTypes.string
borderHide Disable the border around the list item React.PropTypes.bool
onPress On press Callback for item [used for auth callback as well] React.PropTypes.func
hasNavArrow Displays a navigation arrow React.PropTypes.bool
arrowStyle Style for the navigation arrow Image.propTypes.style
arrowIcon Inject custom arrow into the end of the item React.PropTypes.node
hasInfo Enable an info sub-section on right side of list item React.PropTypes.bool
infoIcon Info icon React.PropTypes.node
infoStyle Style for the info component React.PropTypes.style
onPressInfo On press Callback for tap on info component React.PropTypes.func
hasCheckmark Enable a checkmark component React.PropTypes.bool
checkmarkIcon Checkmark icon React.PropTypes.node
checkmarkStyle Style for the checkmark React.PropTypes.style
hasPicker Enable a picker for the list item, picker value is shown in the list item, see Picker props React.PropTypes.bool
hasDatePicker useDatePicker - react-native-picker-select React.PropTypes.bool
hasSwitch Enable a switch component React.PropTypes.bool
switchProps RN switch props React.PropTypes.object
switchOnValueChange On switches value change callback React.PropTypes.func
titleInfo Right side title information string React.PropTypes.string
titleInfoStyle Style for title information string Text.propTypes.style
isAuth Sets item as an authorization item React.PropTypes.bool
authPropsUser Changes the props for the first TextInput component; overwrites default React.PropTypes.node
authPropsPW Changes the props for the second TextInput component; overwrites default React.PropTypes.node
itemRef Sets a ref on the TouchableHighlight that SettingsList.Item renders to React.PropTypes.func

Picker

The picker used by this package is ajp8164/react-native-picker-select (a fork of lawnstarter/react-native-picker-select).

The following props are used:

Name Description Type
pickerAccessoryStyle Picker accessory bar style React.PropTypes.style
pickerContainerStyle Picker container style React.PropTypes.style
pickerDateFormat dateFormat React.PropTypes.string
pickerPlaceholder placeholder React.PropTypes.object
pickerItems items React.PropTypes.array of picker item
pickerItemWidth itemWidth React.PropTypes.array of widths (number or string)
pickerLabels labels React.PropTypes.array of string
pickerLabelWidth labelWidth React.PropTypes.array of widths (number or string)
pickerValueToString valueToString React.PropTypes.func
pickerValue The picker value PropTypes.string, PropTypes.object, PropTypes.number, PropTypes.array
pickerOnUpArrow Picker accessory bar callback when up arrow tapped React.PropTypes.func
pickerOnDownArrow Picker accessory bar callback when down arrow tapped React.PropTypes.func
pickerOnDonePress Picker accessory bar callback when Done tapped React.PropTypes.func
pickerOnClose Picker accessory bar callback when Close tapped React.PropTypes.func
pickerOnOpen Callback when the picker component is opened React.PropTypes.func
pickerOnValueChange Callback when the picker value changes React.PropTypes.func
pickerDisabled Enable a picker for interaction React.PropTypes.bool
other picker props You can pass through other react-native-select picker properties

Example picker usage:

export const cellConfigurationOptions: OptionType[][] = [
  [
    { label: '1 Series', labelShort: '1S', value: '1' },
    { label: '2 Series', labelShort: '2S', value: '2' },
    { label: '3 Series', labelShort: '3S', value: '3' },
  ],
  [
    { label: 'None', labelShort: '', value: '0' },
    { label: '1 Parallel', labelShort: '1P', value: '1' },
    { label: '2 Parallel', labelShort: '2P', value: '2' },
    { label: '3 Parallel', labelShort: '3P', value: '3' },
  ],
];

...

<SettingsList.Item
  title={'Cell Configuration'}
  titleStyle={theme.styles.textNormal}
  titleInfoStyle={[theme.styles.textNormal]}
  hasPicker={true}
  pickerPlaceholder={{}}
  pickerItems={cellConfigurationOptions}
  pickerValue={battery.cellConfiguration}
  pickerOnValueChange={(value: string) =>
    updateBattery({ cellConfiguration: value })
  }
  pickerItemWidth={['33%', '33%']}
  pickerValueToString={Utils.pickerSelectItemToString}
  pickerAccessoryStyle={{
    color: theme.colors.button,
    borderColor: theme.colors.button,
  }}
/>

Example date picker usage:

<SettingsList.Item
  title={'Purchase Date'}
  titleStyle={theme.styles.textNormal}
  titleInfoStyle={[theme.styles.textNormal]}
  hasNavArrow={false}
  hasDatePicker={true}
  pickerValue={DateTime.fromISO(product.detail.acquired)}
  pickerOnValueChange={(value: DateTime) => {
    updateProduct({ acquired: value.toISO() });
  }}
  pickerDateFormat={'M/D/YYYY'}
  pickerAccessoryStyle={{
    color: theme.colors.button,
    borderColor: theme.colors.button,
  }}
/>


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});
}

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%