Pass ref from Header and Item onto components

Currently, we cannot use refs with SettingsList.Header and
SettingsList.Item because they are not true components with render
methods. This commit adds itemRef and headerRef props that are passed
onto the components that Item/Header get rendered into. (Frustratingly,
we have to use the names itemRef/headerRef; `ref` is an illegal React
prop name, so we cannot access a ref function as a prop, and because
SettingsList.Header and SettingsList.Item never make it to the render
stage, we cannot access the ref function through `this.refs` either.)

README.md

@@ -74,6 +74,7 @@ The following props are used:
 |-------------|-----------------------------------------|------------------------|
 | 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   |
 
 ### <a name='sli'>\<SettingsList.Item></a>
 The following props are used:
@@ -98,6 +99,7 @@ The following props are used:
 | 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   |
 
 ###### <a href='#top'>Top</a>
 

index.js

@@ -83,7 +83,7 @@ class SettingsList extends React.Component {
       return (
         <View key={'group_' + index}>
           {group.other}
-          <Text style={[{margin:5},group.header.headerStyle]} numberOfLines={1} ellipsizeMode="tail">{group.header.headerText}</Text>
+          <Text style={[{margin:5},group.header.headerStyle]} numberOfLines={1} ellipsizeMode="tail" ref={group.header.headerRef}>{group.header.headerText}</Text>
           <View style={{borderTopWidth:1, borderBottomWidth:1, borderColor: this.props.borderColor}}>
             {group.items.map((item, index) => {
               return this._itemView(item,index, group.items.length);
@@ -167,7 +167,7 @@ class SettingsList extends React.Component {
     let titleInfoPosition = item.titleInfoPosition ? item.titleInfoPosition : this.props.defaultTitleInfoPosition;
 
     return (
-      <TouchableHighlight accessible={false} key={'item_' + index} underlayColor={item.underlayColor ? item.underlayColor : this.props.underlayColor} onPress={item.onPress} onLongPress={item.onLongPress}>
+      <TouchableHighlight accessible={false} key={'item_' + index} underlayColor={item.underlayColor ? item.underlayColor : this.props.underlayColor} onPress={item.onPress} onLongPress={item.onLongPress} ref={item.itemRef}>
         <View style={item.itemBoxStyle ? item.itemBoxStyle : [styles.itemBox, {backgroundColor: item.backgroundColor ? item.backgroundColor : this.props.backgroundColor}]}>
           {item.icon}
           {item.isAuth ?
@@ -266,6 +266,7 @@ SettingsList.Header = React.createClass({
   propTypes: {
     headerText: React.PropTypes.string,
     headerStyle: Text.propTypes.style,
+    headerRef: React.PropTypes.func,
   },
   /**
    * not directly rendered
@@ -371,7 +372,9 @@ SettingsList.Item = React.createClass({
      */
     rightSideContent: React.PropTypes.node,
     /* Gives opens to hide specific borders */
-    borderHide: React.PropTypes.oneOf(['Top', 'Bottom', 'Both'])
+    borderHide: React.PropTypes.oneOf(['Top', 'Bottom', 'Both']),
+
+    itemRef: React.PropTypes.func,
   },
   getDefaultProps(){
     return {