Migrate code to ES6(update RN to v0.27.2 & update react-native-vector-icons to v2.0.3)

.flowconfig

@@ -15,11 +15,6 @@
 # Ignore react and fbjs where there are overlaps, but don't ignore
 # anything that react-native relies on
 .*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/Promise.js
-.*/node_modules/fbjs/lib/fetch.js
-.*/node_modules/fbjs/lib/ExecutionEnvironment.js
-.*/node_modules/fbjs/lib/isEmpty.js
-.*/node_modules/fbjs/lib/crc32.js
 .*/node_modules/fbjs/lib/ErrorUtils.js
 
 # Flow has a built-in definition for the 'react' module which we prefer to use
@@ -28,6 +23,11 @@
 .*/node_modules/react/lib/React.js
 .*/node_modules/react/lib/ReactDOM.js
 
+.*/__mocks__/.*
+.*/__tests__/.*
+
+.*/commoner/test/source/widget/share.js
+
 # Ignore commoner tests
 .*/node_modules/commoner/test/.*
 
@@ -40,26 +40,58 @@
 # Ignore Website
 .*/website/.*
 
+# Ignore generators
+.*/local-cli/generator.*
+
+# Ignore BUCK generated folders
+.*\.buckd/
+
+# Ignore RNPM
+.*/local-cli/rnpm/.*
+
+.*/node_modules/is-my-json-valid/test/.*\.json
+.*/node_modules/iconv-lite/encodings/tables/.*\.json
+.*/node_modules/y18n/test/.*\.json
+.*/node_modules/spdx-license-ids/spdx-license-ids.json
+.*/node_modules/spdx-exceptions/index.json
+.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
+.*/node_modules/resolve/lib/core.json
+.*/node_modules/jsonparse/samplejson/.*\.json
+.*/node_modules/json5/test/.*\.json
+.*/node_modules/ua-parser-js/test/.*\.json
+.*/node_modules/builtin-modules/builtin-modules.json
+.*/node_modules/binary-extensions/binary-extensions.json
+.*/node_modules/url-regex/tlds.json
+.*/node_modules/joi/.*\.json
+.*/node_modules/isemail/.*\.json
+.*/node_modules/tr46/.*\.json
+
+
 [include]
 
 [libs]
 node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
 
 [options]
 module.system=haste
 
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+
 munge_underscores=true
 
 module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-5]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-5]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.21.0
+^0.25.0

.gitignore

@@ -32,3 +32,9 @@ local.properties
 #
 node_modules/
 npm-debug.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore

App/Components/RefreshableListView/index.js

@@ -28,103 +28,106 @@
  *                       loadMoreText={'Load More...'}/>
  *  
  */
-var React = require('react-native');
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Platform
+} from 'react-native';
+import GiftedListView from 'react-native-gifted-listview';
 
-var {
-    StyleSheet,
-    Text,
-    View,
-    TouchableOpacity,
-    Platform
-} = React;
+export default class RefreshableListView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      renderRow: this.props.renderRow,
+      backgroundColor: props.backgroundColor ? props.backgroundColor : '#FFFFFF',
+      loadMoreText: props.loadMoreText ? props.loadMoreText : 'Load More...',
+      renderHeader: props.renderHeader ? props.renderHeader : null,
+    };
+  }
 
-var GiftedListView = require('react-native-gifted-listview');
+  onRefresh(page = 1, callback, options) {
+    this.props.onRefresh(page, callback);
+  }
 
-module.exports = React.createClass({
-    getInitialState: function(){
-        return {
-            renderRow: this.props.renderRow,
-            backgroundColor: this.props.backgroundColor ? this.props.backgroundColor : '#FFFFFF',
-            loadMoreText: this.props.loadMoreText ? this.props.loadMoreText : 'Load More...',
-            renderHeader: this.props.renderHeader ? this.props.renderHeader : null,
-        };
-    },
-    onRefresh: function(page=1, callback, options){
-        this.props.onRefresh(page, callback);
-    },
-    renderRow: function(row){
-        return this.state.renderRow(row);
-    },
-    render: function(){
-        return(
-            <View style={[styles.container, {backgroundColor: this.state.backgroundColor}, this.props.style]}>
-                <View style={styles.navBarSpace} />
-                <GiftedListView rowView={this.renderRow}
-                                onFetch={this.onRefresh}
-                                paginationAllLoadedView={this.renderPaginationAllLoadedView}
-                                paginationWaitingView={this.renderPaginationWaitingView}
-                                headerView={this.renderHeaderView}
-                                PullToRefreshViewAndroidProps={{
-                                    colors: ['#F6F6EF'],
-                                    progressBackgroundColor: '#FF6600',
-                                }}
-                                customStyles={{
-                                                refreshableView: {
-                                                    backgroundColor: this.state.backgroundColor,
-                                                    justifyContent: 'flex-end',
-                                                    paddingBottom: 12,
-                                                },
-                                                paginationView: {
-                                                    backgroundColor: this.state.backgroundColor,
-                                                    height: 60
-                                                }
-                                }}/>
-            </View>
-        );
-    },
-    renderPaginationAllLoadedView: function(){
-        return(
-            <View />
-        );
-    },
-    renderPaginationWaitingView: function(paginateCallback) {
-        return (
-            <TouchableOpacity style={styles.paginationView}
-                              onPress={paginateCallback}>
-                <Text style={styles.loadMoreText}>
-                    {this.state.loadMoreText}
-                </Text>
-           </TouchableOpacity>
-        );
-    },
-    renderHeaderView: function(){
-        if(this.state.renderHeader){
-            return this.props.renderHeader();
-        }
-        return (null);
+  renderRow(row) {
+    return this.state.renderRow(row);
+  }
+  render() {
+    return (
+      <View style={[styles.container, { backgroundColor: this.state.backgroundColor }, this.props.style]}>
+        <View style={styles.navBarSpace} />
+        <GiftedListView
+          rowView={this.renderRow.bind(this) }
+          onFetch={this.onRefresh.bind(this) }
+          enableEmptySections = {true}
+          paginationAllLoadedView={this.renderPaginationAllLoadedView.bind(this) }
+          paginationWaitingView={this.renderPaginationWaitingView.bind(this) }
+          headerView={this.renderHeaderView.bind(this) }
+          PullToRefreshViewAndroidProps={{
+            colors: ['#F6F6EF'],
+            progressBackgroundColor: '#FF6600',
+          }}
+          customStyles={{
+            refreshableView: {
+              backgroundColor: this.state.backgroundColor,
+              justifyContent: 'flex-end',
+              paddingBottom: 12,
+            },
+            paginationView: {
+              backgroundColor: this.state.backgroundColor,
+              height: 60
+            }
+          }}/>
+      </View>
+    );
+  }
+  renderPaginationAllLoadedView() {
+    return (
+      <View />
+    );
+  }
+  renderPaginationWaitingView(paginateCallback) {
+    return (
+      <TouchableOpacity style={styles.paginationView}
+        onPress={paginateCallback}>
+        <Text style={styles.loadMoreText}>
+          {this.state.loadMoreText}
+        </Text>
+      </TouchableOpacity>
+    );
+  }
+  renderHeaderView() {
+    if (this.state.renderHeader) {
+      return this.props.renderHeader();
     }
-});
+    return (null);
+  }
+}
 
 var styles = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-    navBarSpace: {
-        height: (Platform.OS !== 'android') ? 64 : 0,
-    },
-    rowContainer: {
-        paddingRight: 15,
-        paddingLeft: 10,
-        flexDirection: 'row'
-    },
-    paginationView: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        paddingTop: 20,
-        paddingBottom: 20
-    },
-    loadMoreText: {
-        fontSize: 15,
-        color: 'gray',
-    }
+  container: {
+    flex: 1
+  },
+  navBarSpace: {
+    height: (Platform.OS !== 'android') ? 64 : 0,
+  },
+  rowContainer: {
+    paddingRight: 15,
+    paddingLeft: 10,
+    flexDirection: 'row'
+  },
+  paginationView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: 20,
+    paddingBottom: 20
+  },
+  loadMoreText: {
+    fontSize: 15,
+    color: 'gray',
+  }
 });

App/Components/TabBar/customTabBar.android.js

@@ -1,18 +1,9 @@
 'use strict';
+import React from 'react'
+import {StyleSheet, Text, View, TouchableOpacity, Animated, StatusBar} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 
-var React = require('react-native');
-var {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Animated,
-  StatusBar,
-} = React;
-
-var Icon = require('react-native-vector-icons/FontAwesome');
-
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   tab: {
     flex: 1,
     alignItems: 'center',
@@ -45,16 +36,14 @@ var styles = StyleSheet.create({
   }
 });
 
-var CustomTabBar = React.createClass({
-  selectedTabIcons: [],
-  unselectedTabIcons: [],
-
-  propTypes: {
-    goToPage: React.PropTypes.func,
-    activeTab: React.PropTypes.number,
-    tabs: React.PropTypes.array
-  },
+export default class CustomTabBar extends React.Component{
 
+  constructor(props) {
+    super(props);
+    this.selectedTabIcons = [];
+    this.unselectedTabIcons = [];
+  }
+
   renderTabOption(valsString, page) {
     var vals = valsString.split('!$#');
     var isTabActive = this.props.activeTab === page;
@@ -68,12 +57,12 @@ var CustomTabBar = React.createClass({
         </Text>
       </TouchableOpacity>
     );
-  },
+  }
 
   componentDidMount() {
     this.setAnimationValue({value: this.props.activeTab});
-    this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
-  },
+    this._listener = this.props.scrollValue.addListener(this.setAnimationValue.bind(this));
+  }
 
   setAnimationValue({value}) {
     var currentPage = this.props.activeTab;
@@ -92,7 +81,7 @@ var CustomTabBar = React.createClass({
         iconRef.setNativeProps({opacity: i - value});
       }
     });
-  },
+  }
 
   render() {
     var containerWidth = this.props.containerWidth;
@@ -119,7 +108,10 @@ var CustomTabBar = React.createClass({
         <Animated.View style={[tabUnderlineStyle, {left}]} />
       </View>
     );
-  },
-});
-
-module.exports = CustomTabBar;
+  }
+}
+CustomTabBar.propTypes = {
+  goToPage: React.PropTypes.func,
+  activeTab: React.PropTypes.number,
+  tabs: React.PropTypes.array
+};