Fixes installation issues & updation of code

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "native-base": "2.2.0",
     "prop-types": "^15.5.10",
-    "react": "16.0.0-alpha.12",
+    "react": "^16.0.0-alpha.12",
     "react-burger-menu": "^2.1.3",
     "react-burger-nav": "^2.0.2",
     "react-native": "0.45.1",
@@ -18,6 +18,7 @@
     "react-native-material-ui": "^1.12.0",
     "react-native-responsive-image": "^2.1.0",
     "react-native-spinkit": "^1.1.1",
+    "react-native-vector-icons": "^4.1.1",
     "react-navigation": "^1.0.0-beta.11",
     "react-redux": "^5.0.5",
     "redux": "^3.7.1",

src/api/Api.js

@@ -97,26 +97,27 @@ class Api {
                 ...value,
                 items: [],
               });
-              value.items.map((valueItems) => {
+              value.items.map((valueItems,key) => {
                 if (valueItems.thumbnail) {
                   images(valueItems.thumbnail)
                     .then((image) => {
                       iterationNo += 1;
                       arrToReturn[index].items.push({
                         ...valueItems,
                         thumbnail: image,
-                        key: index,
+                        key: key,
                       });
                       if (iterationNo === data.length) {
                         resolveItems(arrToReturn);
                       }
                     });
-                } else {
+                }
+                else {
                   iterationNo += 1;
                   arrToReturn[index].items.push({
                     ...valueItems,
                     thumbnail: null,
-                    key: index,
+                    key: key,
                   });
                   if (iterationNo === data.length) {
                     resolveItems(arrToReturn);

src/assets/styles/app.js

@@ -0,0 +1,9 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+    },
+});
+export default styles;

src/assets/styles/boxItem.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+    box: {
+      padding: 20,
+      backgroundColor: 'rgba(0,0,0,0.05)',
+      margin: 10,
+    },
+});
+export default styles;

src/assets/styles/detailScreen.js

@@ -0,0 +1,19 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    layout: {
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    box: {
+      padding: 20,
+      backgroundColor: 'rgba(0,0,0,0.05)',
+      margin: 10,
+    },
+});
+export default styles;

src/assets/styles/twoColumnView.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+    layout: {
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+});
+export default styles;

src/components/App.js

@@ -1,33 +1,16 @@
 import React, { Component } from 'react';
-import {
-  StyleSheet,
-  View,
-} from 'react-native';
+import { StyleSheet, View} from 'react-native';
 import { Container, Content } from 'native-base';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import Loading from './Loading';
 import TwoColumnView from './common/TwoColumnView';
-import BoxItem from './common/BoxItem';
+import Item from './common/BoxItem';
 
 import * as actions from './../actions';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-  },
-});
+import styles from '../assets/styles/app';
 
 class Categories extends Component {
-  static propTypes = {
-    actionFetchData: PropTypes.func.isRequired,
-    categories: PropTypes.array.isRequired,
-    isFetching: PropTypes.bool.isRequired,
-    navigation: PropTypes.object.isRequired,
-  };
-
   static navigationOptions = {
     title: 'අන්තර්ජාල නැබ',
   };
@@ -41,7 +24,7 @@ class Categories extends Component {
     const { navigate } = this.props.navigation;
 
     const nodes = categories.map(category => (
-      <BoxItem
+      <Item
         key={category.id}
         onPress={() => navigate('Detail', { title: category.title, items: category.items })}
         {...category}

src/components/DetailScreen.js

@@ -4,43 +4,22 @@ import {
   Linking,
 } from 'react-native';
 import { Container, Content } from 'native-base';
-import PropTypes from 'prop-types';
 
 import TwoColumnView from './common/TwoColumnView';
-import BoxItem from './common/BoxItem';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  layout: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  box: {
-    padding: 20,
-    backgroundColor: 'rgba(0,0,0,0.05)',
-    margin: 10,
-  },
-});
+import Item from './common/BoxItem';
+import styles from '../assets/styles/detailScreen';
 
 export default class DetailScreen extends Component {
 
-  static propTypes = {
-    navigation: PropTypes.object.isRequired,
-  };
-
   static navigationOptions = ({ navigation }) => ({
     title: `${navigation.state.params.title}`,
   });
 
   renderDetails() {
     const { items } = this.props.navigation.state.params;
     const details = items.map(item => (
-      <BoxItem
-        key={item.id}
+      <Item
+        key={item.key}
         onPress={() => Linking.openURL(item.url)}
         {...item}
       />

src/components/common/BoxItem.js

@@ -1,47 +1,41 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet, TouchableHighlight, View, Platform } from 'react-native';
+import React, {Component} from 'react';
+import {
+    StyleSheet,
+    TouchableHighlight,
+    View,
+    Platform,
+    Image} from 'react-native';
 import ResponsiveImage from 'react-native-responsive-image';
-
-import { UNKNOWN } from '../../../img/index';
-
-const styles = StyleSheet.create({
-  box: {
-    padding: 20,
-    backgroundColor: 'rgba(0,0,0,0.05)',
-    margin: 10,
-  },
-});
+import styles from '../../assets/styles/boxItem';
+import {UNKNOWN} from '../../assets/img';
 
 class Item extends Component {
-  static defaultProps = {
-    thumbnail: 'UNKNOWN',
-    onPress: () => {},
-  };
-
-  static propTypes = {
-    thumbnail: PropTypes.string,
-    onPress: PropTypes.func,
-  };
 
-  render() {
-    const { thumbnail, onPress } = this.props;
-    let thumbUri = UNKNOWN;
-    if (thumbnail !== null) {
-      thumbUri = { uri: Platform.OS === 'android' ? `file://${thumbnail}` : thumbnail };
+    render() {
+        const {thumbnail, onPress} = this.props;
+        let thumbUri = UNKNOWN;
+        if (thumbnail !== null) {
+            thumbUri = {
+                uri: Platform.OS === 'android'
+                    ? `file://${thumbnail}`
+                    : thumbnail
+            };
+        }
+        return (
+            <TouchableHighlight onPress={onPress}>
+                <View style={styles.box}>
+                    <Image source={thumbUri}
+                        style={{width:138,height:138}}
+                    />
+                    {/* <ResponsiveImage
+                        source={thumbUri}
+                        initWidth="138"
+                        initHeight="138"
+                    /> */}
+                </View>
+            </TouchableHighlight>
+        );
     }
-    return (
-      <TouchableHighlight onPress={onPress} >
-        <View style={styles.box} >
-          <ResponsiveImage
-            source={thumbUri}
-            initWidth="138"
-            initHeight="138"
-          />
-        </View>
-      </TouchableHighlight>
-    );
-  }
 }
 
 export default Item;

src/components/common/TwoColumnView.js

@@ -1,14 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
-
-const styles = StyleSheet.create({
-  layout: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-});
+import styles from '../../assets/styles/twoColumnView';
 
 const TwoColumnView = (props) => {
   const { children } = props;
@@ -41,8 +33,4 @@ const TwoColumnView = (props) => {
   );
 };
 
-TwoColumnView.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-
 export default TwoColumnView;