fix eslint warnings in example, migrate to es6 imports

Author: skv-headless

examples/FacebookTabsExample/FacebookTabBar.js

@@ -1,111 +1,104 @@
-'use strict';
-
-var React = require('react-native');
-var {
+import React, {
   StyleSheet,
   Text,
   View,
   TouchableOpacity,
   Animated,
-} = React;
+} from 'react-native';
 
-const Icon = require('react-native-vector-icons/Ionicons');
+import Icon from 'react-native-vector-icons/Ionicons';
 
-var styles = StyleSheet.create({
-  tab: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingBottom: 10,
-  },
-  tabs: {
-    height: 45,
-    flexDirection: 'row',
-    paddingTop: 5,
-    borderWidth: 1,
-    borderTopWidth: 0,
-    borderLeftWidth: 0,
-    borderRightWidth: 0,
-    borderBottomColor: 'rgba(0,0,0,0.05)',
-  },
-  icon: {
-    position: 'absolute',
-    top: 0,
-    left: 20,
-  },
-});
-
-var FacebookTabBar = React.createClass({
+const FacebookTabBar = React.createClass({
   selectedTabIcons: [],
   unselectedTabIcons: [],
 
   propTypes: {
     goToPage: React.PropTypes.func,
     activeTab: React.PropTypes.number,
-    tabs: React.PropTypes.array
+    tabs: React.PropTypes.array,
   },
 
   renderTabOption(name, page) {
-    var isTabActive = this.props.activeTab === page;
+    const isTabActive = this.props.activeTab === page;
 
     return (
       <TouchableOpacity key={name} onPress={() => this.props.goToPage(page)} style={styles.tab}>
         <Icon name={name} size={30} color='#3B5998' style={styles.icon}
-              ref={(icon) => { this.selectedTabIcons[page] = icon }}/>
+              ref={(icon) => { this.selectedTabIcons[page] = icon; }}/>
         <Icon name={name} size={30} color='#ccc' style={styles.icon}
-              ref={(icon) => { this.unselectedTabIcons[page] = icon }}/>
+              ref={(icon) => { this.unselectedTabIcons[page] = icon; }}/>
       </TouchableOpacity>
     );
   },
 
   componentDidMount() {
-    this.setAnimationValue({value: this.props.activeTab});
+    this.setAnimationValue({ value: this.props.activeTab, });
     this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
   },
 
-  setAnimationValue({value}) {
-    var currentPage = this.props.activeTab;
-
+  setAnimationValue({ value, }) {
     this.unselectedTabIcons.forEach((icon, i) => {
-      var iconRef = icon;
+      let iconRef = icon;
 
       if (!icon.setNativeProps && icon !== null) {
-        iconRef = icon.refs.icon_image
+        iconRef = icon.refs.icon_image;
       }
 
       if (value - i >= 0 && value - i <= 1) {
-        iconRef.setNativeProps({ style: {opacity: value - i} });
+        iconRef.setNativeProps({ style: { opacity: value - i, }, });
       }
       if (i - value >= 0 &&  i - value <= 1) {
-        iconRef.setNativeProps({ style: {opacity: i - value} });
+        iconRef.setNativeProps({ style: { opacity: i - value, }, });
       }
     });
   },
 
   render() {
-    var containerWidth = this.props.containerWidth;
-    var numberOfTabs = this.props.tabs.length;
-    var tabUnderlineStyle = {
+    const containerWidth = this.props.containerWidth;
+    const numberOfTabs = this.props.tabs.length;
+    const tabUnderlineStyle = {
       position: 'absolute',
       width: containerWidth / numberOfTabs,
       height: 3,
       backgroundColor: '#3b5998',
       bottom: 0,
     };
 
-    var left = this.props.scrollValue.interpolate({
-      inputRange: [0, 1], outputRange: [0, containerWidth / numberOfTabs]
+    const left = this.props.scrollValue.interpolate({
+      inputRange: [0, 1, ], outputRange: [0, containerWidth / numberOfTabs, ],
     });
 
-    return (
-      <View>
-        <View style={[styles.tabs, this.props.style, ]}>
-          {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
-        </View>
-        <Animated.View style={[tabUnderlineStyle, {left}]} />
+    return <View>
+      <View style={[styles.tabs, this.props.style, ]}>
+        {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
       </View>
-    );
+      <Animated.View style={[tabUnderlineStyle, { left, }, ]} />
+    </View>;
+  },
+});
+
+const styles = StyleSheet.create({
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 10,
+  },
+  tabs: {
+    height: 45,
+    flexDirection: 'row',
+    paddingTop: 5,
+    borderWidth: 1,
+    borderTopWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderBottomColor: 'rgba(0,0,0,0.05)',
+  },
+  icon: {
+    position: 'absolute',
+    top: 0,
+    left: 20,
   },
 });
 
-module.exports = FacebookTabBar;
+export default FacebookTabBar;

examples/FacebookTabsExample/FacebookTabsExample.js

@@ -90,10 +90,10 @@ const OverlayExample = React.createClass({
   },
 });
 
-module.exports = FacebookTabsExample;
-//module.exports = SimpleExample;
-//module.exports = ScrollableTabsExample;
-//module.exports = OverlayExample;
+export default FacebookTabsExample;
+//export default SimpleExample;
+//export default ScrollableTabsExample;
+//export default OverlayExample;
 
 const styles = StyleSheet.create({
   container: {

examples/FacebookTabsExample/index.android.js

@@ -1,5 +1,4 @@
-var React = require('react-native');
-var { AppRegistry,  } = React;
-var FacebookTabsExample = require('./FacebookTabsExample');
+import React, { AppRegistry, } from 'react-native';
+import FacebookTabsExample from './FacebookTabsExample';
 
 AppRegistry.registerComponent('FacebookTabsExample', () => FacebookTabsExample);

examples/FacebookTabsExample/index.ios.js

@@ -1,5 +1,4 @@
-var React = require('react-native');
-var { AppRegistry,  } = React;
-var FacebookTabsExample = require('./FacebookTabsExample');
+import React, { AppRegistry, } from 'react-native';
+import FacebookTabsExample from './FacebookTabsExample';
 
 AppRegistry.registerComponent('FacebookTabsExample', () => FacebookTabsExample);