rebase onto master done;

src/AppRootContainer.js

@@ -11,15 +11,17 @@ class AppRootContainer extends Component {
   constructor () {
     super()
     this.state = {
-      toggled: false
+      isOpen: false
     }
     this.toggleSideMenu = this.toggleSideMenu.bind(this)
   }
+
   toggleSideMenu () {
     this.setState({
-      toggled: !this.state.toggled
+      isOpen: !this.state.isOpen
     })
   }
+
   render () {
     const list = [
       {
@@ -48,6 +50,7 @@ class AppRootContainer extends Component {
         subtitle: 'CTO'
       }
     ]
+
     const MenuComponent = (
       <View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>
         <List containerStyle={{marginBottom: 20}}>
@@ -66,12 +69,12 @@ class AppRootContainer extends Component {
         </List>
       </View>
     )
+
     return (
       <SideMenu
-        toggledContainerStyle={{borderLeftWidth: 1, borderLeftColor: '#ededed'}}
-        toggled={this.state.toggled}
-        MenuComponent={MenuComponent}>
-        <App toggleSideMenu={this.toggleSideMenu} />
+        isOpen={this.state.isOpen}
+        menu={MenuComponent}>
+        <App toggleSideMenu={this.toggleSideMenu.bind(this)} />
       </SideMenu>
     )
   }

src/about/About.js

@@ -8,7 +8,8 @@ import {
   Card,
   SocialIcon,
   Divider,
-  ButtonGroup
+  ButtonGroup,
+  Slider
 } from 'react-native-elements'
 
 import * as RNElements from 'react-native-elements'
@@ -136,7 +137,7 @@ class About extends Component {
                 color='#009688'
                 name='sc-telegram'
                 type='evilicon'
-                onPress={() => console.log('hello')} /> 
+                onPress={() => console.log('hello')} />
               <RNElements.Icon
                 color='#8BC34A'
                 name='social-apple'
@@ -165,7 +166,7 @@ class About extends Component {
                   raised
                   color='#00BCD4'
                   name='weekend'
-                  onPress={() => console.log('hello')} /> 
+                  onPress={() => console.log('hello')} />
                 <RNElements.Icon
                   raised
                   color='#CDDC39'
@@ -197,7 +198,7 @@ class About extends Component {
                 raised
                 color='#009688'
                 name='code'
-                onPress={() => console.log('hello')} /> 
+                onPress={() => console.log('hello')} />
               <RNElements.Icon
                 reverse
                 raised
@@ -227,7 +228,7 @@ class About extends Component {
                 reverse
                 color='#00BCD4'
                 name='pets'
-                onPress={() => console.log('hello')} /> 
+                onPress={() => console.log('hello')} />
               <RNElements.Icon
                 reverse
                 color='#CDDC39'
@@ -349,6 +350,16 @@ class About extends Component {
               />
             </View>
           </Card>
+        {/* <Card
+          containerStyle={{marginTop: 15, marginBottom: 15}}
+          title='SLIDERS'>
+          <View>
+            <Slider
+              value={this.state.value}
+              onValueChange={(value) => this.setState({value})} />
+            <Text>Value: {this.state.value}</Text>
+          </View>
+        </Card> */}
         </View>
       </ScrollView>
     )

src/more/More.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, StyleSheet, ScrollView, ListView } from 'react-native'
+import { View, Image, StyleSheet, ScrollView, ListView } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 let styles
 
@@ -126,7 +126,7 @@ class More extends Component {
             dataSource={this.state.dataSource}
             />
         </List>
-        <List containerStyle={{marginBottom: 20}}>
+        <List>
         {
           list2.map((l, i) => (
             <ListItem
@@ -140,11 +140,19 @@ class More extends Component {
           ))
         }
         </List>
-        <ListItem
-          roundAvatar
-          title='Nader Dabit'
-          avatar={require('../images/avatar1.jpg')}
-         />
+        <List>
+          <ListItem
+            roundAvatar
+            title='Limited supply! Its like digital gold!'
+            subtitle={
+              <View style={styles.subtitleView}>
+                <Image source={require('../images/rating.png')} style={styles.ratingImage}/>
+                <Text style={styles.ratingText}>5 months ago</Text>
+              </View>
+            }
+            avatar={require('../images/avatar1.jpg')}
+          />
+        </List>
       </ScrollView>
     )
   }
@@ -168,6 +176,19 @@ styles = StyleSheet.create({
     alignItems: 'center',
     padding: 40,
     backgroundColor: '#69DDFF'
+  },
+  subtitleView: {
+    flexDirection: 'row',
+    paddingLeft: 10,
+    paddingTop: 5
+  },
+  ratingImage: {
+    height: 19.21,
+    width: 100
+  },
+  ratingText: {
+    paddingLeft: 10,
+    color: 'grey'
   }
 })