diff --git a/README.md b/README.md
index 09392b4..7db6c33 100644
--- a/README.md
+++ b/README.md
@@ -285,6 +285,7 @@ render(){
 | circleColor | string | same as circleColor of 'Timeline' | event circle color |
 | dotColor | string | same as dotColor of 'Timeline' | event dot color (innerCircle = 'dot') |
 | icon | obj(image source) | same as icon of 'Timeline' | event icon (innerCircle = 'color') |
+| position | string | null | event side in 'two-column' layout : 'left', 'right' |
 
 #### Timeline:
 | Property | Type | Default | Description |
diff --git a/lib/index.js b/lib/index.js
index 5867792..7bf5042 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -3,18 +3,13 @@
 import React, { Component } from "react";
 import {
   StyleSheet,
-  ListView,
+  FlatList,
   Image,
   View,
   Text,
   TouchableOpacity
 } from "react-native";
 
-const ds = new ListView.DataSource({
-  rowHasChanged: (r1, r2) => r1 !== r2,
-  sectionHeaderHasChanged: (s1, s2) => s1 !== s2
-});
-
 const defaultCircleSize = 16;
 const defaultCircleColor = "#007AFF";
 const defaultLineWidth = 2;
@@ -27,7 +22,7 @@ export default class Timeline extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this._renderRow = this._renderRow.bind(this);
+    this._renderItem = this._renderItem.bind(this);
     this.renderTime = (this.props.renderTime
       ? this.props.renderTime
       : this._renderTime
@@ -44,7 +39,7 @@ export default class Timeline extends Component {
 
     this.state = {
       data: this.props.data,
-      dataSource: ds.cloneWithRows(this.props.data),
+      //dataSource: ds.cloneWithRows(this.props.data),
       x: 0,
       width: 0
     };
@@ -53,68 +48,66 @@ export default class Timeline extends Component {
   componentWillReceiveProps(nextProps) {
     this.setState({
       data: nextProps.data,
-      dataSource: ds.cloneWithRows(nextProps.data)
+      //dataSource: ds.cloneWithRows(nextProps.data)
     });
   }
 
   render() {
     return (
       <View style={[styles.container, this.props.style]}>
-        <ListView
-          ref="listView"
+        <FlatList
           style={[styles.listview, this.props.listViewStyle]}
-          dataSource={this.state.dataSource}
-          renderRow={this._renderRow}
-          automaticallyAdjustContentInsets={false}
+          data={this.state.data}
+          renderItem={this._renderItem}
+          keyExtractor={(item, index)=>index + ""}
           {...this.props.options}
         />
       </View>
     );
   }
 
-  _renderRow(rowData, sectionID, rowID) {
+  _renderItem({item, index}) {
     let content = null;
-
     switch (this.props.columnFormat) {
       case "single-column-left":
         content = (
           <View style={[styles.rowContainer, this.props.rowContainerStyle]}>
-            {this.renderTime(rowData, sectionID, rowID)}
-            {this.renderEvent(rowData, sectionID, rowID)}
-            {this.renderCircle(rowData, sectionID, rowID)}
+            {this.renderTime(item, index)}
+            {this.renderEvent(item, index)}
+            {this.renderCircle(item, index)}
           </View>
         );
         break;
       case "single-column-right":
         content = (
           <View style={[styles.rowContainer, this.props.rowContainerStyle]}>
-            {this.renderEvent(rowData, sectionID, rowID)}
-            {this.renderTime(rowData, sectionID, rowID)}
-            {this.renderCircle(rowData, sectionID, rowID)}
+            {this.renderEvent(item, index)}
+            {this.renderTime(item, index)}
+            {this.renderCircle(item, index)}
           </View>
         );
         break;
       case "two-column":
         content =
-          rowID % 2 == 0 ? (
+          (item.position && item.position=="right") || (!item.position && index % 2 == 0)  ? (
             <View style={[styles.rowContainer, this.props.rowContainerStyle]}>
-              {this.renderTime(rowData, sectionID, rowID)}
-              {this.renderEvent(rowData, sectionID, rowID)}
-              {this.renderCircle(rowData, sectionID, rowID)}
+              {this.renderTime(item, index)}
+              {this.renderEvent(item, index)}
+              {this.renderCircle(item, index)}
             </View>
           ) : (
             <View style={[styles.rowContainer, this.props.rowContainerStyle]}>
-              {this.renderEvent(rowData, sectionID, rowID)}
-              {this.renderTime(rowData, sectionID, rowID)}
-              {this.renderCircle(rowData, sectionID, rowID)}
+              {this.renderEvent(item, index)}
+              {this.renderTime(item, index)}
+              {this.renderCircle(item, index)}
             </View>
           );
         break;
     }
-    return <View key={rowID}>{content}</View>;
+    return <View key={index}>{content}</View>;
   }
 
-  _renderTime(rowData, sectionID, rowID) {
+  _renderTime(rowData, rowID) {
     if (!this.props.showTime) {
       return null;
     }
@@ -133,7 +126,7 @@ export default class Timeline extends Component {
       case "two-column":
         timeWrapper = {
           flex: 1,
-          alignItems: rowID % 2 == 0 ? "flex-end" : "flex-start"
+          alignItems: (rowData.position && rowData.position=="right") || (!rowData.position && rowID % 2 == 0) ? "flex-end" : "flex-start"
         };
         break;
     }
@@ -148,7 +141,7 @@ export default class Timeline extends Component {
     );
   }
 
-  _renderEvent(rowData, sectionID, rowID) {
+  _renderEvent(rowData, rowID) {
     const lineWidth = rowData.lineWidth
       ? rowData.lineWidth
       : this.props.lineWidth;
@@ -181,7 +174,7 @@ export default class Timeline extends Component {
         break;
       case "two-column":
         opStyle =
-          rowID % 2 == 0
+        (rowData.position && rowData.position=="right") || (!rowData.position && rowID % 2 == 0)
             ? {
                 borderColor: lineColor,
                 borderLeftWidth: lineWidth,
@@ -217,7 +210,7 @@ export default class Timeline extends Component {
           }
         >
           <View style={styles.detail}>
-            {this.renderDetail(rowData, sectionID, rowID)}
+            {this.renderDetail(rowData, rowID)}
           </View>
           {this._renderSeparator()}
         </TouchableOpacity>
@@ -225,7 +218,7 @@ export default class Timeline extends Component {
     );
   }
 
-  _renderDetail(rowData, sectionID, rowID) {
+  _renderDetail(rowData, rowID) {
     let title = rowData.description ? (
       <View>
         <Text style={[styles.title, this.props.titleStyle]}>
@@ -241,7 +234,7 @@ export default class Timeline extends Component {
     return <View style={styles.container}>{title}</View>;
   }
 
-  _renderCircle(rowData, sectionID, rowID) {
+  _renderCircle(rowData, rowID) {
     var circleSize = rowData.circleSize
       ? rowData.circleSize
       : this.props.circleSize ? this.props.circleSize : defaultCircleSize;