diff --git a/MonthList.js b/MonthList.js
index 9c05255..ff153be 100644
--- a/MonthList.js
+++ b/MonthList.js
@@ -2,28 +2,25 @@
  * Created by TinySymphony on 2017-05-11.
  */
 
-import React, {PropTypes, Component} from 'react';
+import React, {PropTypes, PureComponent} from 'react';
 import {
   View,
   Text,
-  ListView,
+  FlatList,
   Dimensions
 } from 'react-native';
 import Moment from 'moment';
 import styles from './CalendarStyle';
 import Month from './Month';
+
 const {width} = Dimensions.get('window');
-export default class MonthList extends Component {
+
+export default class MonthList extends PureComponent {
   constructor (props) {
     super(props);
-    this.ds = new ListView.DataSource({
-      rowHasChanged: (r1, r2) => {
-        return r2.shouldUpdate;
-      }
-    });
     this.monthList = [];
     this.state = {
-      dataSource: this.ds.cloneWithRows(this._getMonthList())
+      dataSource: this._getMonthList()
     };
     this._renderMonth = this._renderMonth.bind(this);
     this._shouldUpdate = this._shouldUpdate.bind(this);
@@ -31,28 +28,30 @@ export default class MonthList extends Component {
     this._getWeekNums = this._getWeekNums.bind(this);
     this._scrollToSelecetdMonth = this._scrollToSelecetdMonth.bind(this);
   }
-  componentWillReceiveProps (nextProps) {
+
+  componentDidUpdate(prevProps) {
     let isDateUpdated = ['startDate', 'endDate', 'minDate', 'maxDate'].reduce((prev, next) => {
-      if (prev || nextProps[next] !== this.props[next]) {
+      if (prev || prevProps[next] !== this.props[next]) {
         return true;
       }
       return prev;
     }, false);
     if (isDateUpdated) {
       this.setState({
-        dataSource:
-          this.state.dataSource.cloneWithRows(this._getMonthList(nextProps))
+        dataSource: this._getMonthList(this.props)
       });
     }
   }
-  _renderMonth (month) {
+
+  _renderMonth = ({item}) => {
     return (
       <Month
-        month={month.date || {}}
+        month={item.date || {}}
         {...this.props}
       />
     );
-  }
+  };
+
   _checkRange (date, start, end) {
     if (!date || !start) return false;
     if (!end) return date.year() === start.year() && date.month() === start.month();
@@ -60,6 +59,7 @@ export default class MonthList extends Component {
     if (date.year() > end.year() || (date.year() === end.year() && date.month() > end.month())) return false;
     return true;
   }
+
   _shouldUpdate (month, props) {
     if (!props) return false;
     const {
@@ -74,6 +74,7 @@ export default class MonthList extends Component {
     if (prev || next) return true;
     return false;
   }
+
   _getMonthList (props) {
     let minDate = (props || this.props).minDate.clone().date(1);
     let maxDate = (props || this.props).maxDate.clone();
@@ -92,6 +93,7 @@ export default class MonthList extends Component {
     }
     return monthList;
   }
+
   _getWeekNums(start, end) {
     let clonedMoment = Moment(start), date, day, num, y, m, total = 0;
     while (!clonedMoment.isSame(end, 'months')) {
@@ -105,6 +107,7 @@ export default class MonthList extends Component {
     }
     return total;
   }
+
   _scrollToSelecetdMonth () {
     const {
       startDate,
@@ -114,23 +117,25 @@ export default class MonthList extends Component {
       startDate.month() - minDate.month();
     let weekOffset = this._getWeekNums(minDate, startDate);
     setTimeout(() => {
-      this.list && this.list.scrollTo({
-        x: 0,
-        y: monthOffset * (24 + 25) + (monthOffset ? weekOffset * Math.ceil(width / 7 + 10) : 0),
+      this.list && this.list.scrollToOffset({
+        offset: monthOffset * (24 + 25) + (monthOffset ? weekOffset * Math.ceil(width / 7 + 10) : 0),
         animated: true
       });
     }, 400);
   }
+
   componentDidMount () {
     this.props.startDate && this._scrollToSelecetdMonth();
   }
+
   render () {
     return (
-      <ListView
+      <FlatList
         ref={(list) => {this.list = list;}}
         style={styles.scrollArea}
-        dataSource={this.state.dataSource}
-        renderRow={this._renderMonth}
+        data={this.state.dataSource}
+        renderItem={this._renderMonth}
+        keyExtractor={() => String(Math.random())}
         pageSize={2}
         initialListSize={2}
         showsVerticalScrollIndicator={false}