Convert the app to Exponent, update to react-native 0.31

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    "react-native-stage-0/decorator-support"
+  ],
+  "env": {
+    "development": {
+      "plugins": [
+        "transform-react-jsx-source"
+      ]
+    }
+  }
+}

.gitignore

@@ -1,6 +1,7 @@
 # OSX
 #
 .DS_Store
+.exponent/**/*
 
 # Xcode
 #

App/Components/RefreshableListView/index.js

@@ -28,15 +28,15 @@
  *                       loadMoreText={'Load More...'}/>
  *  
  */
-var React = require('react-native');
+import React from 'react';
 
-var {
+import {
     StyleSheet,
     Text,
     View,
     TouchableOpacity,
     Platform
-} = React;
+} from 'react-native';
 
 var GiftedListView = require('react-native-gifted-listview');
 
@@ -64,6 +64,8 @@ module.exports = React.createClass({
                                 paginationAllLoadedView={this.renderPaginationAllLoadedView}
                                 paginationWaitingView={this.renderPaginationWaitingView}
                                 headerView={this.renderHeaderView}
+                                enableEmptySections
+                                withSections={false}
                                 PullToRefreshViewAndroidProps={{
                                     colors: ['#F6F6EF'],
                                     progressBackgroundColor: '#FF6600',
@@ -127,4 +129,4 @@ var styles = StyleSheet.create({
         fontSize: 15,
         color: 'gray',
     }
-});
+});

App/Components/TabBar/customTabBar.android.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var React = require('react-native');
-var {
+import React from 'react';
+import {
   StyleSheet,
   Text,
   View,
   TouchableOpacity,
   Animated,
   StatusBar,
-} = React;
+} from 'react-native';
 
-var Icon = require('react-native-vector-icons/FontAwesome');
+import { FontAwesome as Icon } from '@exponent/vector-icons';
 
 var styles = StyleSheet.create({
   tab: {

App/Components/TabBar/index.js

@@ -22,63 +22,47 @@
  *                         }]}
  *             selectedTab={0}/>
  */
-var React = require('react-native');
+import React from 'react';
 
-var {
-	View,
+import {
+  View,
     TabBarIOS,
     StyleSheet,
     Platform
-} = React;
+} from 'react-native';
 
+import TabNavigator from 'react-native-tab-navigator';
 var ScrollableTabView = require('react-native-scrollable-tab-view');
 var CustomTabBar = require('./customTabBar.android.js');
 
-var Icon = require('react-native-vector-icons/FontAwesome');
+import { FontAwesome as Icon } from '@exponent/vector-icons';
 
 module.exports = React.createClass({
-	getInitialState: function(){
-		return {
-			structure: this.props.structure,
-			selectedTab: this.props.selectedTab,
-			iconSize: this.props.iconSize ? this.props.iconSize : 30,
-			activeTintColor: this.props.activeTintColor ? this.props.activeTintColor : null
-		};
-	},
+  getInitialState: function(){
+    return {
+      structure: this.props.structure,
+      selectedTab: this.props.selectedTab,
+      iconSize: this.props.iconSize ? this.props.iconSize : 30,
+      activeTintColor: this.props.activeTintColor ? this.props.activeTintColor : null
+    };
+  },
     render: function(){
-    	if (Platform.OS == 'android'){
-			return(
-				<ScrollableTabView renderTabBar={() => <CustomTabBar />}
-								   onChangeTab={(o)=>{}}
-                           		   tabBarPosition={'bottom'}
-                                   initialPage={this.state.selectedTab}>
-                    {this.state.structure.map((tabProps, tabIndex) => 
-                    	<View style={{flex:1}}
-                    		  tabLabel={tabProps.title+'!$#'
-                    				   +tabProps.iconName+'!$#'
-                    				   +this.state.iconSize}
-                    		  key={tabIndex}>
-				            {tabProps.renderContent()}
-				        </View>
-	            	)}
-                </ScrollableTabView>
-			);
-		}
-        return(
-            <TabBarIOS tintColor={this.state.activeTintColor}
-            		   translucent={true}>
-            	{this.state.structure.map((tabProps, tabIndex) => 
-            		<Icon.TabBarItem title={tabProps.title}
-            						 iconName={tabProps.iconName}
-            						 iconSize={this.state.iconSize}
-		          					 selected={tabIndex == this.state.selectedTab}
-		          					 onPress={() => {this.setState({selectedTab: tabIndex});}}
-		          					 key={tabIndex}>
-		          			{tabProps.renderContent()}
-		        	</Icon.TabBarItem>
-            	)}
-		     </TabBarIOS>
-        );
+    return (
+        <TabNavigator>
+          {this.state.structure.map((tabProps, tabIndex) =>
+            <TabNavigator.Item
+              selected={tabIndex == this.state.selectedTab}
+              title={tabProps.title}
+              key={tabIndex}
+              selectedTitleStyle={{color: '#ff6600'}}
+              renderIcon={() => <Icon name={tabProps.iconName} size={25} color="#888" />}
+              renderSelectedIcon={() => <Icon name={tabProps.iconName} size={25} color="#ff6600" />}
+              onPress={() => { this.setState({selectedTab: tabIndex}); }}>
+              {tabProps.renderContent()}
+            </TabNavigator.Item>
+          )}
+        </TabNavigator>
+    );
     }
 });
 

App/Views/Dashboard/index.android.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react-native');
+import React from 'react';
 
-var {
+import {
   StyleSheet,
   Text,
   View,
   TouchableHighlight
-} = React;
+} from 'react-native';
 
 var ToolbarAndroid = require('ToolbarAndroid');
 
@@ -208,4 +208,4 @@ var styles = StyleSheet.create({
         height: 1,
         backgroundColor: '#CCCCCC'
     } 
-});
+});

App/Views/Dashboard/index.ios.js

@@ -1,21 +1,20 @@
 'use strict';
 
-var React = require('react-native');
+import React from 'react';
 
-var {
+import {
+  ActionSheetIOS,
   StyleSheet,
   Text,
   View,
-  TouchableHighlight
-} = React;
+  StatusBar,
+  TouchableHighlight,
+} from 'react-native';
 
 var api = require("../../Network/api.js");
-
 var Post = require("../Post/index.ios.js");
-
 var TabBar = require("../../Components/TabBar");
 var RefreshableListView = require("../../Components/RefreshableListView");
-var ActivityView = require("react-native-activity-view");
 
 module.exports = React.createClass({
   getInitialState: function(){
@@ -26,6 +25,8 @@ module.exports = React.createClass({
   },
   render: function(){
     return(
+      <View style={{flex: 1}}>
+        <StatusBar barStyle="default" />
       <TabBar structure={[{
                             title: 'Ask HN',
                             iconName: 'comment',
@@ -79,6 +80,7 @@ module.exports = React.createClass({
               selectedTab={2}
               activeTintColor={'#ff8533'}
               iconSize={25}/>
+        </View>
     );
   },
   renderListViewRow: function(row, pushNavBarTitle){
@@ -147,10 +149,11 @@ module.exports = React.createClass({
       backButtonTitle: 'Back',
       rightButtonTitle: 'Share',
       onRightButtonPress: () => {
-        ActivityView.show({
-          text: row.title, 
-          url: row.url
-        });
+        ActionSheetIOS.showShareActionSheetWithOptions({
+          subject: row.title,
+          message: row.title,
+          url: row.url,
+        }, () => {}, () => {});
       },
     });
   }
@@ -186,7 +189,6 @@ var styles = StyleSheet.create({
         color: 'gray',
     },
     listview: {
-      marginBottom:49
     },
     separator: {
         height: 1,

App/Views/Post/Elements/Comment/index.js

@@ -1,11 +1,11 @@
-var React = require('react-native');
+import React from 'react';
 
-var {
+import {
 	StyleSheet,
     Text,
     View,
     TouchableHighlight
-} = React;
+} from 'react-native';
 
 var api = require("../../../../Network/api.js");
 
@@ -172,4 +172,4 @@ var styles = StyleSheet.create({
     color: '#FF6600',
     textAlign: 'right',
   }
-});
+});

App/Views/Post/index.android.js

@@ -1,13 +1,11 @@
-'use strict';
+import React from 'react';
 
-var React = require('react-native');
-
-var {
+import {
   StyleSheet,
   Text,
   View,
   TouchableHighlight
-} = React;
+} from 'react-native';
 
 var ToolbarAndroid = require('ToolbarAndroid');
 

App/Views/Post/index.ios.js

@@ -1,14 +1,12 @@
-'use strict';
+import React from 'react';
 
-var React = require('react-native');
-
-var {
+import {
   StyleSheet,
   Text,
   View,
   TouchableHighlight,
   WebView
-} = React;
+} from 'react-native';
 
 var api = require("../../Network/api.js");
 

README.md

@@ -1,10 +1,10 @@
 [**Support me with a Follow**](https://github.com/iSimar/followers)
 
-# HackerNews-React-Native  
+# HackerNews-React-Native
 
 [Hacker News](https://news.ycombinator.com/) reader for iOS and Android, made with [React-Native](https://github.com/facebook/react-native).
 
-##DEMO
+## DEMO
 [![App Store Button](http://imgur.com/y8PTxr9.png "App Store Button")](https://itunes.apple.com/ca/app/hacker-news-reader-react-native/id1067161633?mt=8)
 [![Play Store Button](http://imgur.com/utWa1co.png "Play Store Button")](https://play.google.com/store/apps/details?id=com.hackernews)