fix styling to match iOS

Author: dancormier

README.md

@@ -1,7 +1,7 @@
 # react-native-listitem
 iOS-style listitem component for React Native
 
-![listitem preview](http://i.imgur.com/ZCJoDpb.png)
+![listitem preview](http://i.imgur.com/mV1LFqe.gif)
 
 ## Installation
 ```
@@ -30,10 +30,10 @@ text | string | Yes | null | text displayed in listitem
 children | string | Yes | null | pass custom component as child
 backgroundColor | string | Yes | '#ffffff' | 
 onPress | func | Yes | null | function executed onPress
-paddingTop | int | Yes | 14 |
-paddingRight | int | Yes | 16 |
-paddingBottom | int | Yes | 16 |
-paddingLeft | int | Yes | 16 |
+paddingTop | int | Yes | 15 |
+paddingRight | int | Yes | 15 |
+paddingBottom | int | Yes | 15 |
+paddingLeft | int | Yes | 0  |
 
 #### Props for swipeout
 

example/index.ios.js

@@ -73,7 +73,8 @@ var listitemExample = React.createClass({
  <View style={styles.container}>
  <ListView
  dataSource={this.state.dataSource}
- renderRow={this.renderRow} />
+ renderRow={this.renderRow}
+ style={styles.listview} />
  </View>
  );
  }
@@ -82,10 +83,14 @@ var listitemExample = React.createClass({
 var styles = StyleSheet.create({
  container: {
  alignItems: 'center',
- backgroundColor: '#f2f2f2',
+ backgroundColor: '#efeff4',
  flex: 1,
  flexDirection: 'row',
  },
+ listview: {
+ // borderBottomColor: '#c8c7cc',
+ // borderBottomWidth: 1,
+ }
 });
 
 AppRegistry.registerComponent('listitemExample', () => listitemExample);

index.js

@@ -10,10 +10,10 @@ var Listitem = React.createClass({
  return {
  backgroundColor: '#ffffff',
  onPress: null,
- paddingTop: 14,
- paddingRight: 16,
- paddingBottom: 16,
- paddingLeft: 16,
+ paddingTop: 15,
+ paddingRight: 15,
+ paddingBottom: 15,
+ paddingLeft: 0,
  text: null,
  underlayColor: "rgba(0,0,0,.015)",
  }

styles.js

@@ -3,17 +3,19 @@ var {StyleSheet} = React
 
 var styles = StyleSheet.create({
  li: {
- borderBottomColor: '#eee',
- borderColor: 'transparent',
- borderWidth: 1,
+ borderBottomColor: '#c8c7cc',
+ borderBottomWidth: 0.5,
  },
  liContainer: {
  flex: 1,
+ paddingLeft: 15,
  },
  liText: {
  color: '#333',
- fontSize: 16,
- fontWeight: '400'
+ fontSize: 17,
+ fontWeight: '400',
+ marginBottom: -3.5,
+ marginTop: -3.5,
  },
 })