From 42c01f0045cf802939a2c406e8286f7ab9d95380 Mon Sep 17 00:00:00 2001
From: Goncalo Margalho <gsky89@gmail.com>
Date: Wed, 21 Feb 2018 12:32:41 +0100
Subject: [PATCH] fix other components in the list being rendered normally

---
 index.js | 380 +++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 242 insertions(+), 138 deletions(-)

diff --git a/index.js b/index.js
index 00e7242..146b48d 100644
--- a/index.js
+++ b/index.js
@@ -1,8 +1,8 @@
-'use strict'
+"use strict";
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
+import React from "react";
+import PropTypes from "prop-types";
+import createReactClass from "create-react-class";
 
 import {
   View,
@@ -14,9 +14,9 @@ import {
   Switch,
   Image,
   ViewPropTypes
-} from 'react-native';
+} from "react-native";
 
-const ARROW_ICON = require('./img/icon-arrow-settings.png');
+const ARROW_ICON = require("./img/icon-arrow-settings.png");
 
 class SettingsList extends React.Component {
   static propTypes = {
@@ -26,217 +26,321 @@ class SettingsList extends React.Component {
     underlayColor: PropTypes.string,
     defaultTitleStyle: Text.propTypes.style,
     defaultTitleInfoPosition: PropTypes.string,
-    scrollViewProps: PropTypes.object,
+    scrollViewProps: PropTypes.object
   };
 
-  static defaultProps ={
-    backgroundColor: 'white',
-    borderColor: 'black',
+  static defaultProps = {
+    backgroundColor: "white",
+    borderColor: "black",
     defaultItemSize: 50,
-    underlayColor: 'transparent',
-    defaultTitleStyle: {fontSize: 16}
+    underlayColor: "transparent",
+    defaultTitleStyle: { fontSize: 16 }
   };
 
-  _getGroups(){
+  _getGroups() {
     var groupNumber = -1;
     let headers = [];
     let itemGroup = [];
     let result = [];
-    React.Children.forEach(this.props.children, (child) => {
+    React.Children.forEach(this.props.children, child => {
       // Allow for null, optional fields
-      if(!child) return;
+      if (!child) return;
 
-      if(child.type.displayName === 'Header'){
-        if(groupNumber != -1){
-          result[groupNumber] = {items: itemGroup, header: headers[groupNumber] };
+      if (child.type.displayName === "Header") {
+        if (groupNumber != -1) {
+          result[groupNumber] = {
+            items: itemGroup,
+            header: headers[groupNumber]
+          };
           itemGroup = [];
         }
         groupNumber++;
         headers[groupNumber] = child.props;
-      } else if(child.type.displayName === 'Item'){
-        if(groupNumber == -1){
+      } else if (child.type.displayName === "Item") {
+        if (groupNumber == -1) {
           groupNumber++;
         }
         itemGroup.push(child.props);
       } else {
-        if(groupNumber == -1){
+        if (groupNumber == -1) {
           groupNumber++;
         }
         itemGroup.push(child);
       }
     });
-    result[groupNumber] = {items: itemGroup, header: headers[groupNumber] };
+    result[groupNumber] = { items: itemGroup, header: headers[groupNumber] };
     return result;
   }
 
-  render(){
+  render() {
     return (
       <ScrollView {...this.props.scrollViewProps} ref="_scrollView">
         {this._getGroups().map((group, index) => {
           return this._groupView(group, index);
         })}
       </ScrollView>
-    )
+    );
   }
 
-  _groupView(group, index){
-    if(group.header){
+  _groupView(group, index) {
+    if (group.header) {
       return (
-        <View key={'group_' + index}>
-          <Text style={[{margin:5},group.header.headerStyle]} numberOfLines={group.header.headerNumberOfLines} ellipsizeMode="tail" ref={group.header.headerRef}>{group.header.headerText}</Text>
-          <View style={{borderTopWidth:1, borderBottomWidth:1, borderColor: this.props.borderColor}}>
+        <View key={"group_" + index}>
+          <Text
+            style={[{ margin: 5 }, group.header.headerStyle]}
+            numberOfLines={group.header.headerNumberOfLines}
+            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);
+              return this._itemView(item, index, group.items.length);
             })}
           </View>
         </View>
-      )
+      );
     } else {
       let items;
       if (group.items.length > 0) {
         items = (
-          <View style={{borderTopWidth:1, borderBottomWidth:1, borderColor: this.props.borderColor}}>
+          <View
+            style={{
+              borderTopWidth: 1,
+              borderBottomWidth: 1,
+              borderColor: this.props.borderColor
+            }}
+          >
             {group.items.map((item, index) => {
-              return this._itemView(item,index, group.items.length);
+              return this._itemView(item, index, group.items.length);
             })}
           </View>
         );
       }
 
-      return (
-        <View key={'group_' + index}>
-          {items}
-        </View>
-      )
+      return <View key={"group_" + index}>{items}</View>;
     }
   }
 
   _itemEditableBlock(item, index, position) {
-
-    return ([
-        <Text
-            key={'itemTitle_' + index}
-            style={[
-              item.titleStyle ? item.titleStyle : this.props.defaultTitleStyle,
-              position === 'Bottom' ? null : styles.titleText
-            ]}>
-            {item.title}
-        </Text>,
-        item.isEditable ?
+    return [
+      <Text
+        key={"itemTitle_" + index}
+        style={[
+          item.titleStyle ? item.titleStyle : this.props.defaultTitleStyle,
+          position === "Bottom" ? null : styles.titleText
+        ]}
+      >
+        {item.title}
+      </Text>,
+      item.isEditable ? (
         <TextInput
-              key={item.id}
-              style={item.editableTextStyle ? item.editableTextStyle : styles.editableText}
-              placeholder = {item.placeholder}
-              onChangeText={(text) => item.onTextChange(text)}
-              value={item.value} />
-        : null
-    ])
+          key={item.id}
+          style={
+            item.editableTextStyle
+              ? item.editableTextStyle
+              : styles.editableText
+          }
+          placeholder={item.placeholder}
+          onChangeText={text => item.onTextChange(text)}
+          value={item.value}
+        />
+      ) : null
+    ];
   }
 
   _itemTitleBlock(item, index, position) {
-    return ([
+    return [
       <Text
-          key={'itemTitle_' + index}
-          style={[
-            item.titleStyle ? item.titleStyle : this.props.defaultTitleStyle,
-            position === 'Bottom' ? null : styles.titleText
-          ]}>
-          {item.title}
+        key={"itemTitle_" + index}
+        style={[
+          item.titleStyle ? item.titleStyle : this.props.defaultTitleStyle,
+          position === "Bottom" ? null : styles.titleText
+        ]}
+      >
+        {item.title}
       </Text>,
-      item.titleInfo ?
+      item.titleInfo ? (
         <Text
-            key={'itemTitleInfo_' + index}
-            style={[
-              item.rightSideStyle ? item.rightSideStyle
-              :
-                position === 'Bottom' ? null : styles.rightSide,
-                {color: '#B1B1B1'},
-              item.titleInfoStyle
-            ]}>
-            {item.titleInfo}
+          key={"itemTitleInfo_" + index}
+          style={[
+            item.rightSideStyle
+              ? item.rightSideStyle
+              : position === "Bottom" ? null : styles.rightSide,
+            { color: "#B1B1B1" },
+            item.titleInfoStyle
+          ]}
+        >
+          {item.titleInfo}
         </Text>
-        : null
-    ])
+      ) : null
+    ];
   }
 
-  _itemView(item, index, max){
+  _itemView(item, index, max) {
     var border;
 
-    if (item.type && item.type.displayName) {
-        return item;
+    if (item.type) {
+      return item;
     }
 
-    if(item.borderHide) {
-      switch(item.borderHide) {
-        case 'Top' : border = {borderBottomWidth:1, borderColor: this.props.borderColor}; break;
-        case 'Bottom' : border = {borderTopWidth:1, borderColor: this.props.borderColor}; break;
+    if (item.borderHide) {
+      switch (item.borderHide) {
+        case "Top":
+          border = {
+            borderBottomWidth: 1,
+            borderColor: this.props.borderColor
+          };
+          break;
+        case "Bottom":
+          border = { borderTopWidth: 1, borderColor: this.props.borderColor };
+          break;
       }
     } else {
-      border = index === max-1 ? {borderWidth:0} : {borderBottomWidth:1, borderColor: this.props.borderColor};
+      border =
+        index === max - 1
+          ? { borderWidth: 0 }
+          : { borderBottomWidth: 1, borderColor: this.props.borderColor };
     }
 
-    let titleInfoPosition = item.titleInfoPosition ? item.titleInfoPosition : this.props.defaultTitleInfoPosition;
+    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} ref={item.itemRef}>
-        <View style={item.itemBoxStyle ? item.itemBoxStyle : [styles.itemBox, {backgroundColor: item.backgroundColor ? item.backgroundColor : this.props.backgroundColor}]}>
+      <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 ?
-            <View style={item.titleBoxStyle ? item.titleBoxStyle : [styles.titleBox, border]}>
-              <View style={{paddingLeft:5,flexDirection:'column',flex:1}}>
-                <View style={{borderBottomWidth:1,borderColor:this.props.borderColor}}>
+          {item.isAuth ? (
+            <View
+              style={
+                item.titleBoxStyle
+                  ? item.titleBoxStyle
+                  : [styles.titleBox, border]
+              }
+            >
+              <View
+                style={{ paddingLeft: 5, flexDirection: "column", flex: 1 }}
+              >
+                <View
+                  style={{
+                    borderBottomWidth: 1,
+                    borderColor: this.props.borderColor
+                  }}
+                >
                   <TextInput
                     ref="UserNameInputBlock"
                     onSubmitEditing={() => this.refs.PasswordInputBlock.focus()}
-                    style={{flex:1,height:30, borderBottomWidth:1}}
-                    placeholder = "username"
+                    style={{ flex: 1, height: 30, borderBottomWidth: 1 }}
+                    placeholder="username"
                     {...item.authPropsUser}
                   />
                 </View>
                 <View>
                   <TextInput
                     ref="PasswordInputBlock"
-                    style={{flex:1,height:30}}
-                    placeholder = "password"
+                    style={{ flex: 1, height: 30 }}
+                    placeholder="password"
                     secureTextEntry={true}
-                    returnKeyType={'go'}
+                    returnKeyType={"go"}
                     {...item.authPropsPW}
                     onSubmitEditing={() => item.onPress()}
                   />
                 </View>
               </View>
             </View>
-          :
-          <View style={item.titleBoxStyle ? item.titleBoxStyle : [styles.titleBox, border, {minHeight:item.itemWidth ? item.itemWidth : this.props.defaultItemSize}]}>
-            {titleInfoPosition === 'Bottom' ?
-                <View style={{flexDirection:'column',flex:1,justifyContent:'center'}}>
-                    {item.isEditable ? this._itemEditableBlock(item, inde, 'Bottom') : this._itemTitleBlock(item, index, 'Bottom')}
+          ) : (
+            <View
+              style={
+                item.titleBoxStyle
+                  ? item.titleBoxStyle
+                  : [
+                      styles.titleBox,
+                      border,
+                      {
+                        minHeight: item.itemWidth
+                          ? item.itemWidth
+                          : this.props.defaultItemSize
+                      }
+                    ]
+              }
+            >
+              {titleInfoPosition === "Bottom" ? (
+                <View
+                  style={{
+                    flexDirection: "column",
+                    flex: 1,
+                    justifyContent: "center"
+                  }}
+                >
+                  {item.isEditable
+                    ? this._itemEditableBlock(item, inde, "Bottom")
+                    : this._itemTitleBlock(item, index, "Bottom")}
                 </View>
-              : item.isEditable ? this._itemEditableBlock(item, index) : this._itemTitleBlock(item, index)}
+              ) : item.isEditable ? (
+                this._itemEditableBlock(item, index)
+              ) : (
+                this._itemTitleBlock(item, index)
+              )}
 
-            {item.rightSideContent ? item.rightSideContent : null}
-            {item.hasSwitch ?
-              <Switch
-                {...item.switchProps}
-                style={styles.rightSide}
-                onValueChange={(value) => item.switchOnValueChange(value)}
-                value={item.switchState}/>
-                : null}
-            {this.itemArrowIcon(item)}
-          </View>
-        }
+              {item.rightSideContent ? item.rightSideContent : null}
+              {item.hasSwitch ? (
+                <Switch
+                  {...item.switchProps}
+                  style={styles.rightSide}
+                  onValueChange={value => item.switchOnValueChange(value)}
+                  value={item.switchState}
+                />
+              ) : null}
+              {this.itemArrowIcon(item)}
+            </View>
+          )}
         </View>
       </TouchableHighlight>
-    )
+    );
   }
 
   itemArrowIcon(item) {
-    if(item.arrowIcon) {
-        return item.arrowIcon;
+    if (item.arrowIcon) {
+      return item.arrowIcon;
     }
 
-    if(item.hasNavArrow){
-        return <Image style={[styles.rightSide, item.arrowStyle]} source={ARROW_ICON} />;
+    if (item.hasNavArrow) {
+      return (
+        <Image
+          style={[styles.rightSide, item.arrowStyle]}
+          source={ARROW_ICON}
+        />
+      );
     }
 
     return null;
@@ -246,26 +350,26 @@ module.exports = SettingsList;
 
 const styles = StyleSheet.create({
   itemBox: {
-    flex:1,
-    justifyContent:'center',
-    flexDirection:'row'
+    flex: 1,
+    justifyContent: "center",
+    flexDirection: "row"
   },
   titleBox: {
-    flex:1,
-    marginLeft:15,
-    flexDirection:'row'
+    flex: 1,
+    marginLeft: 15,
+    flexDirection: "row"
   },
   titleText: {
-    flex:1,
-    alignSelf:'center'
+    flex: 1,
+    alignSelf: "center"
   },
   rightSide: {
-    marginRight:15,
-    alignSelf:'center'
+    marginRight: 15,
+    alignSelf: "center"
   },
   editableText: {
     flex: 1,
-    textAlign: 'right',
+    textAlign: "right",
     marginRight: 15
   }
 });
@@ -278,17 +382,17 @@ SettingsList.Header = createReactClass({
     headerText: PropTypes.string,
     headerStyle: Text.propTypes.style,
     headerRef: PropTypes.func,
-    headerNumberOfLines: PropTypes.number,
+    headerNumberOfLines: PropTypes.number
   },
   getDefaultProps() {
     return {
-      headerNumberOfLines: 1,
+      headerNumberOfLines: 1
     };
   },
   /**
    * not directly rendered
    */
-  render(){
+  render() {
     return null;
   }
 });
@@ -311,7 +415,7 @@ SettingsList.Item = createReactClass({
     /**
      * Item Box Style
      */
-    itemBoxStyle : ViewPropTypes.style,
+    itemBoxStyle: ViewPropTypes.style,
     /**
      * Title Box Style
      */
@@ -389,19 +493,19 @@ SettingsList.Item = createReactClass({
      */
     rightSideContent: PropTypes.node,
     /* Gives opens to hide specific borders */
-    borderHide: PropTypes.oneOf(['Top', 'Bottom', 'Both']),
+    borderHide: PropTypes.oneOf(["Top", "Bottom", "Both"]),
 
-    itemRef: PropTypes.func,
+    itemRef: PropTypes.func
   },
-  getDefaultProps(){
+  getDefaultProps() {
     return {
       hasNavArrow: true
-    }
+    };
   },
   /**
    * not directly rendered
    */
-  render(){
+  render() {
     return null;
-  },
+  }
 });