added subtitle container styling issue react-native-elements#88

flyingcircle · Nov 23, 2016 · 02b66c8 · 02b66c8
1 parent 30635cb
commit 02b66c8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/Readme.MD b/Readme.MD
@@ -431,18 +431,18 @@ render () {
 | onPress | none | function | onPress method for link (optional) |
 | roundAvatar | false | boolean | make left avatar round |
 | subtitle | none | string | subtitle text (optional) |
+| subtitleContainerStyle | none | style (object) | provide styling for subtitle container |
 | subtitleStyle | none | object (style) | additional subtitle styling (optional ) |
 | title | none | string | main title for list item (required) |
 | titleStyle | none | object (style) | additional title styling (optional) |
 | wrapperStyle | none | object (style) | additional wrapper styling (optional) |
 | underlayColor | white | string | define underlay color for TouchableHighlight (optional) |
 | fontFamily | HelevticaNeue (iOS), Roboto (android) | string | specify different font family |
-| rightTitle | none | string | provide a rightTitle to have a title show up on the right side of the button |
-| rightTitleContainerStyle | flex: 1,
-    alignItems: 'flex-end',
-    justifyContent: 'center' | object (style) | style the outer container of the rightTitle text |
+| rightTitle | none | string | provide a rightTitle to have a title show up on the right side of the button, will override any icon on the right |
+| rightTitleContainerStyle | flex: 1, alignItems: 'flex-end', justifyContent: 'center' | object (style) | style the outer container of the rightTitle text |
 | rightTitleStyle | marginRight: 5, color: '#bdc6cf' | object (style) | style the text of the right text |
 
+
 ## SideMenu
 
 ![Side Menu](http://i.imgur.com/cjIcRl6.gif)

diff --git a/src/list/ListItem.js b/src/list/ListItem.js
@@ -29,6 +29,7 @@ const ListItem = ({
   rightTitle,
   rightTitleContainerStyle,
   rightTitleStyle,
+  subtitleContainerStyle,
 }) => {
   let Component = onPress ? TouchableHighlight : View
   if (component) {
@@ -73,13 +74,15 @@ const ListItem = ({
               fontFamily && {fontFamily}
             ]}>{title}</Text>
           {subtitle && (
-            <Text
-              style={[
-                styles.subtitle,
-                !leftIcon && {marginLeft: 10},
-                subtitleStyle && subtitleStyle,
-                fontFamily && {fontFamily}
-              ]}>{subtitle}</Text>
+            <View style={subtitleContainerStyle}>
+              <Text
+                style={[
+                  styles.subtitle,
+                  !leftIcon && {marginLeft: 10},
+                  subtitleStyle && subtitleStyle,
+                  fontFamily && {fontFamily}
+                ]}>{subtitle}</Text>
+            </View>
           )}
         </View>
         {
@@ -166,10 +169,11 @@ styles = StyleSheet.create({
     })
   },
   titleContainer: {
-    justifyContent: 'center'
+    justifyContent: 'center',
+    flex: 1,
   },
   chevronContainer: {
-    flex: 1,
+    flex: 0.15,
     alignItems: 'flex-end',
     justifyContent: 'center'
   },